frontend-design-pro — the design rules an AI agent actually follows<br>Skip to contentv14.11.0GitHub

AI frontend skill pack<br>Change what your agent reaches for.<br>Registry-routed. Machine-enforced. Anti-slop by default — a request loads exactly one of 19 skills, and everything it writes is held to 60 checks before it ships.<br>Get the skill packSee how it works<br>Scroll to explore

01 — The problem<br>A pack is not a document.<br>Behind the router sits 371,905 tokens of reference depth — material every skill can point into, none of it loaded until a request routes there. The pack is not handed to an agent whole: a router matches your request against trigger keywords, opens exactly one of 19 skills plus the core files it declares, and everything else stays on disk.<br>what most agents ship<br>A faster way to build better. Try it today.

typelayoutmotion

what this pack asks for instead<br>A route, a budget, a check — before a line ships.

routebudgetcheck

0Always-loaded registry, tokens<br>0Reference depth on disk, tokens<br>0Skills — one loads per request<br>0Machine-checked constraints

02 — How it works<br>Spec first. Constrain always. Generate once.

ATrigger keywords match intent<br>The router reads your prompt, matches it against every skill's trigger keywords, and loads exactly one — the most specific match — plus the core files it declares. No match, and it asks a clarifying question instead of guessing. Try it below.

BConstraints run first<br>What gets written is held to 60 machine-checked constraints (17 AST + 43 regex) — the first half walked through the TypeScript compiler API, the second run as patterns. Ten deliberate anti-examples exist to prove the checks actually fire.

CLazy-loaded, type-safe output<br>One skill plus its declared dependencies — nothing else opens. A typical request loads a few thousand tokens against the full depth available, and every shipped example compiles under tsc --strict.

Type a request below. This runs the real registry — not a lookalike written for the page.<br>frontend-design-pro.dev/router<br>What are you asking your agent to build?Trya landing pagea checkout forma data tablea colour themesomething out of scope

landing-pagesone skill · most specific wins<br>Heroes, pricing, testimonials, bento grids, logo walls, comparison tables, FAQ, CTAs, footers — plus empty states and onboarding<br>narrowing the cost371,905<br>What loads<br>registrySKILL.md<br>skillskills/landing-pages/SKILL.md<br>corecore/accessibility-baseline.md<br>corecore/design-tokens.md<br>corecore/validate-checklist.md

What it costs<br>5,986 tokens — 1.6% of the depth available

this request 5,986 of 371,905

Matched on these triggers<br>landingpricingtestimonials

03 — The wall<br>60 checks catch the defaults agents keep reaching for.<br>No Inter/Roboto/Poppins as a display face<br>No raw hex — OKLCH tokens only<br>No min-h-screen<br>No transition-all<br>No bounce or elastic easing<br>No placeholder brand names<br>No John Doe, no user123<br>No 'Elevate your workflow' copy<br>No bg-clip-text on body copy<br>No outline-none without a focus ring<br>Icon-only buttons need aria-label<br>prefers-reduced-motion is mandatory

No Inter/Roboto/Poppins as a display face<br>No raw hex — OKLCH tokens only<br>No min-h-screen<br>No transition-all<br>No bounce or elastic easing<br>No placeholder brand names<br>No John Doe, no user123<br>No 'Elevate your workflow' copy<br>No bg-clip-text on body copy<br>No outline-none without a focus ring<br>Icon-only buttons need aria-label<br>prefers-reduced-motion is mandatory

Semantic constraints17<br>Walked through the TypeScript compiler API rather than matched as text — the eight rules a regex cannot see without understanding the tree it's reading.

Pattern constraints43<br>Run as regular expressions over source. Faster to check, and the half this page's own checker below can run in your browser.

No placeholder anything<br>Acme, John Doe, user123, $99.99, 'Elevate your workflow' — the defaults an agent reaches for when nothing else is specified.

No dated easing<br>No bounce, elastic or back easing on an entrance. No transition: all. Reduced motion is functional, not a string mention.

No default typefaces<br>Inter, Roboto, Arial, Poppins, DM Sans, Space Grotesk are banned as a display face — fine in a fallback stack, never carrying identity.

No min-h-screen<br>100vh ignores the mobile toolbar. min-h-[100dvh] is the only accepted form, checked by pattern on every shipped example.

Paste a component. Both snippets below are cross-checked against scripts/test_constraints.py in both directions before this ships.<br>frontend-design-pro.dev/wall<br>What agents writeWhat the pack asks for<br>Edit it — the checks re-run as you typeexport default function PricingCard() {<br>const [loading, setLoading] = useState(true);

useEffect(() => {<br>setTimeout(() => setLoading(false), 1500);<br>}, []);

// TODO: wire this to the real endpoint<br>return (

{`:root { --color-brand: #7C3AED; }`}<br>Elevate your workflow

Acme helps John Doe ship faster — just $99.99 a seat.

Loading...

);

13checks fail of 15 running here<br>DELAY-01high<br>No artificial mount-time loading delay —...