Change what your agent reaches for.
A request loads one skill — about 6,042 tokens against 436,284 that stay on disk. That ratio is the architecture.
The lit mark is landing-pages/landing-patterns.md — the reference this pack loads to build a page like this one. The other 118 stay on disk.
The problem
A pack is not a document.
Behind the router sits 436,284 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.
The catalog
19 skills. Four of them, to scan.
One per group, chosen for how directly each demonstrates the pack's own argument — the full 19 are in the registry the router below searches.
agent-ops
The agent's own process: token budgeting, cross-session memory, self-verification loops, parallel work, subagent orchestration
"You keep re-reading the same files. Set up a context budget."
design-system
Design tokens, OKLCH palettes, typography and spacing scales, theming, dark mode, brand systems, font pairing, Figma handoff
"Build me a token system from this brand colour, with a dark mode that isn't just inverted."
landing-pages
Heroes, pricing, testimonials, bento grids, logo walls, comparison tables, FAQ, CTAs, footers — plus empty states and onboarding
"Build a landing page for a CI tool. Dark, technical, no stock-photo energy."
react-performance
Request waterfalls, bundle size, RSC boundaries, memoization, re-renders, long lists, lazy loading, prefetching, Core Web Vitals
"This page has a 4s LCP. Find the waterfall and fix it."
How it works
Spec first. Constrain always. Generate once.
ATrigger keywords match intent
Matched by keyword, not guessed
Trigger keywords match intent
Matched by keyword, not guessed
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
Checked before it ships
Constraints run first
Checked before it ships
What gets written is held to 61 machine-checked constraints (17 AST + 44 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
Only what's needed loads
Lazy-loaded, type-safe output
Only what's needed loads
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.
See it decide — live
Heroes, pricing, testimonials, bento grids, logo walls, comparison tables, FAQ, CTAs, footers — plus empty states and onboarding
narrowing the cost436,284
What loads
- registrySKILL.md
- skillcatalog/landing-pages/SKILL.md
- corecore/accessibility-baseline.md
- corecore/design-tokens.md
- corecore/validate-checklist.md
What it costs
6,042 tokens — 1.4% of the depth available
this request 6,042 of 436,284
Matched on these triggers
Proof
Not asserted. Checked, live.
DELAY-01highNo artificial mount-time loading delay — drive skeletons from real async.
useEffect(() => {
setTimeout(() => setLoading(false)TYP-02highNo banned display face as the sole font — allowed only as a fallback.
fontFamily: "Inter"TYP-03highNo gradient text on body copy — the computed colour is transparent, so contrast cannot be measured.
text-sm bg-clip-textCOL-04highNo arbitrary hex colour in component code — OKLCH tokens only.
[#0F1419]TOK-01highNo hex value inside a CSS token definition.
--color-brand: #7C3AEDRES-03highNo min-h-screen — 100vh ignores the mobile toolbar; use min-h-[100dvh].
min-h-screenSLOP-01highNo placeholder names or stock values.
John DoeSLOP-02highNo AI-generic marketing copy.
ElevateSLOP-03mediumNo placeholder comments — the output must be complete.
// TODOSLOP-05highNo placeholder brand names — invent one that fits the sector.
AcmeCOPY-02mediumProgress copy takes the ellipsis character, not three dots.
Loading...PERF-04RmediumNo transition-all — name the properties that animate.
transition-allA11Y-06criticaloutline-none must be paired with a visible focus ring.
outline-none15 of 44 checks run in-browser — the rest need a compiler or filesystem.
11 gates · 17 AST checks · 44 regex checks · 61 total
The showcase
Four things this pack actually built.
Two are real, deployed apps — open them. Two are stub-typed reference components, checked but never installed, shown as static captures instead.
We check our own work — Every example above is checked against the same constraints this pack hands your agent — including SLOP-05, which bans placeholder brand names. The showcase itself used to fail that one, and rather than quietly skip our own repository we shipped the violation as a declared waiver that printed on every run. It is renamed, the waiver is gone, and a test fails the suite if one comes back. See scripts/test_constraints.py for the rule, the deleted waiver and the test that keeps it deleted.
Install in one command
npx skills add Krishna-Modi12/frontend-design-proPrefer a pinned release?
Tracks the default branch. For the gated, version-stamped archive instead: gh release download --repo Krishna-Modi12/frontend-design-pro --pattern '*.skill'
Adapters this ships for
© 2026 frontend-design-pro · MIT licensed