Conventions for AI-assisted frontend work in Laravel + Inertia (v3) apps — Laravel-like frontend roles (thin page adapters, resource-local features, token-bound components), generated backend-derived types, backend-owned formatting and translation, a three-tier design-system token contract, forms (`<Form>`/`useForm`), navigation and data loading (partial reloads, deferred props, prefetch), shared data and page meta, persistent layouts, Storybook story contracts, and evidence-based verification a
SkillScore88Maintained
Automatic
◆Frontend / UI pack
Last verified 8/3/2026
What it changes
Passed 21 of 24 test cases with the skill, and 8 of 24 without it.
Without skill33%
With skill88%
Checks it passed that the model alone missed
The response prohibits using `useEffect` for fetching backend data.
The response places generic framework-bound hooks in 'resources/js/hooks/'.
The response specifies importing prop types from the generated backend types file.
and 19 more in the full report
14 fixed7 passed either way2 still failing1 broke
Pass-rate lift
+54 pp
Tokens
+87%
Agent turns
0%
Response time
-43%
Model gemini-3.6-flashMeasured 8/3/2026v121 of 24 cases passed with skill
Tokens, turns and time describe resource use, not a dollar price.
See it in action
One of 14 test cases the skill fixed. Same model, same prompt, with and without the skill.
1 of 14
Prompt
If I am modifying layout shells in `resources/js/layouts/AppLayout.tsx`, which specific rule document path from the Routing Table must I consult?
What was checked, without and with the skill
Checked
Without skill
With skill
The response identifies 'rules/layouts/conventions.md' as the rule file to consult.
Missed
Passed
case-19 · gemini-3.6-flash · 8/3/2026 · answers are capped and redacted
What's inside
The instructions your model reads when the skill loads.
SKILL.md225 linessingle file
Inertia Rules
STOP — how this skill works
This file is a ROUTER, not the rules. Reading it does NOT mean you have
"applied the skill." The actual rules live in rules/**/*.md and are NOT in
your context yet.
Before you write or edit ANY file under resources/js you MUST, in order:
Identify the role or artifact you are touching (page, feature, ui
primitive, app component, layout, hook, generated type, design token,
story, …).
Open and READ IN FULL the matching rule file(s) from the Routing Table
below. The table gives pointers only — never rule content. You cannot
satisfy a rule you have not read.
Before emitting any code in your reply, output a line:
Rules consulted: <comma-separated relative paths of every rule file you read>
If that line would be empty, you are NOT ready to write code — return to
step 2.
After writing, re-read the ## Checklist section of each rule file you
used and confirm every item against your code. Report any item you cannot
satisfy instead of silently skipping it.
Hard rules:
Do not work from memory, from the Routing Table labels, or from a single
nearby example. Nearby code may itself violate these rules.
Before building UI, confirm the backend contract exists (generated types via
Spatie Data, routes/actions via Wayfinder). If it is missing, that is a
backend task first — do NOT hand-write the shapes.
This applies to EVERY agent: orchestrators, sub-agents, and you. A sub-agent
that writes code must perform steps 1–4 itself.
Conventions that give AI agents Laravel-like discipline on the Inertia
frontend: predictable page/resource/component roles, generated
backend-derived types, backend-owned copy and formatting, a
design-system token contract, story contracts, and evidence-based
verification.
Sibling to laravel-rules (which owns backend PHP shape). This skill