Change what your agent reaches for.
AI frontend skill pack
Change what your agent reaches for.
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.
Get the skill packSee how it works
01 — The problem
A pack is not a document.
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.
what most agents ship
A faster way to build better. Try it today.
typelayoutmotion
what this pack asks for instead
A route, a budget, a check — before a line ships.
routebudgetcheck
0Always-loaded registry, tokens
0Reference depth on disk, tokens
0Skills — one loads per request
0Machine-checked constraints
02 — How it works
Spec first. Constrain always. Generate once.
A
Trigger keywords match intent
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.
B
Constraints run first
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.
C
Lazy-loaded, type-safe output
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.
frontend-design-pro.dev/router
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
Heroes, pricing, testimonials, bento grids, logo walls, comparison tables, FAQ, CTAs, footers — plus empty states and onboarding
narrowing the cost371,905
#### What loads
- registrySKILL.md
- skillskills/landing-pages/SKILL.md
- corecore/accessibility-baseline.md
- corecore/design-tokens.md
- corecore/validate-checklist.md
#### What it costs
5,999 tokens — 1.6% of the depth available
this request 5,999 of 371,905
#### Matched on these triggers
landingpricingtestimonials
03 — The wall
60 checks catch the defaults agents keep reaching for.
No Inter/Roboto/Poppins as a display face
No raw hex — OKLCH tokens only
No min-h-screen
No transition-all
No bounce or elastic easing
No placeholder brand names
No John Doe, no user123
No 'Elevate your workflow' copy
No bg-clip-text on body copy
No outline-none without a focus ring
Icon-only buttons need aria-label
prefers-reduced-motion is mandatory
No Inter/Roboto/Poppins as a display face
No raw hex — OKLCH tokens only
No min-h-screen
No transition-all
No bounce or elastic easing
No placeholder brand names
No John Doe, no user123
No 'Elevate your workflow' copy
No bg-clip-text on body copy
No outline-none without a focus ring
Icon-only buttons need aria-label
prefers-reduced-motion is mandatory
Semantic constraints17
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
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
Acme, John Doe, user123, $99.99, 'Elevate your workflow' — the defaults an agent reaches for when nothing else is specified.
No dated easing
No bounce, elastic or back easing on an entrance. No transition: all. Reduced motion is functional, not a string mention.
No default typefaces
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
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.
frontend-design-pro.dev/wall
What agents writeWhat the pack asks for
Edit it — the checks re-run as you type
13checks fail of 15 running here
DELAY-01high
No artificial mount-time loading delay — drive skeletons from real async.
`useEffect(() => { setTimeout(() => setLoading(false)`
TYP-02high
No banned display face as the sole font — allowed only as a fallback.
`fontFamily: "Inter"`
TYP-03high
No gradient text on body copy — the computed colour is transparent, so contrast cannot be measured.
`text-sm bg-clip-text`
COL-04high
No arbitrary hex colour in component code — OKLCH tokens only.
`[#0F1419]`
TOK-01high
No hex value inside a CSS token definition.
`--color-brand: #7C3AED`
RES-03high
No min-h-screen — 100vh ignores the mobile toolbar; use min-h-\[100dvh\].
`min-h-screen`
SLOP-01high
No placeholder names or stock values.
`John Doe`
SLOP-02high
No AI-generic marketing copy.
`Elevate`
SLOP-03medium
No placeholder comments — the output must be complete.
`// TODO`
SLOP-05high
No placeholder brand names — invent one that fits the sector.
`Acme`
COPY-02medium
Progress copy takes the ellipsis character, not three dots.
`Loading...`
PERF-04Rmedium
No transition-all — name the properties that animate.
`transition-all`
A11Y-06critical
outline-none must be paired with a visible focus ring.
`outline-none`
15 of the 43 regex checks run here. The rest need a compiler or a filesystem: the other half of the suite walks a TypeScript AST, and eight page-scoped rules are deliberately excluded because they are right about a screen and wrong about a fragment pasted into a text box. Their IDs are absent here rather than approximated.
what the rest of the pack produces
Landing page
Dashboard
KINETIC
Kinetic type
Accessible form
3D hero
Color theme
Install in one command
Tracks the default branch. For the gated, version-stamped archive instead: `gh release download --repo Krishna-Modi12/frontend-design-pro --pattern '*.skill'`
`$npx skills add Krishna-Modi12/frontend-design-pro`Copy
Adapters this ships for
AGENTS.md
Aider
ChatGPT
Claude Code
Cline
Codex
Continue
GitHub Copilot
Cursor
Gemini CLI
Generic (AGENTS.md-style)
Roo
Windsurf
Zed
© 2026 frontend-design-pro · MIT licensed