frontend-guardrails

Frontend Guardrails

A Claude skill that makes AI-generated frontend code consistent, reusable, secure, and production-quality by default — without you having to ask for it every time.

Framework-agnostic: React, Vue, Angular, Svelte, and plain HTML/CSS/JS. Works whether you're scaffolding a brand-new project or extending an existing one.

---

Why this exists

AI coding assistants are capable, but left to their own defaults they drift. Ask for "a login page" ten times and you get ten slightly different structures, colors, and patterns. The same logic ends up copy-pasted in three files. Secrets leak into the browser. A component balloons to 500 lines. The result looks fine and quietly isn't.

The fix isn't a smarter model — it's a standing set of defaults the model reads before it writes anything. This skill is that set. It encodes the discipline of a careful senior frontend engineer so that "do it right" is the default, not a thing you have to remember to prompt for.

Crucially, it's designed to help you regardless of experience:

• Beginners / non-coders get professional output they couldn't have specified themselves — and the skill scales its rigor down so it never buries a small project in enterprise machinery.
• Experienced developers get consistent, disciplined output across sessions and teammates — and the skill defers to their conventions and judgment instead of bulldozing them.

---

How it works (read this once)

A skill is not a command you run. There's no /frontend-guardrails. Once it's installed and enabled, Claude consults it automatically whenever a task involves frontend work. You just build normally; the standards apply in the background.

It's structured for efficiency using progressive disclosure:

• SKILL.md — the lean core (the principles and a self-audit checklist). Loaded only when the skill triggers on frontend work.
• references/ — deeper detail loaded only when the relevant task comes up: framework specifics (react, vue, angular), plus security, notifications, accessibility, and ecosystem. You never pay the token cost for detail you aren't using.

So a non-frontend chat costs almost nothing; a frontend task loads the core and, at most, the one or two references it actually needs.

---

The problems it solves

Each item below is a real pattern AI assistants (and rushed humans) fall into, and what the skill does about it.

Duplicated code — "one bug, five fixes." AI re-writes the same markup or logic in several places, so a later fix has to be made in all of them. → The skill requires reusing or extracting components, hooks, and constants: write it once.

Do-everything components. Logic, presentation, and data-fetching get tangled into one giant component that can't be reused or tested. → It enforces small, single-responsibility components with separated concerns and a clear data layer.

Inconsistent styling. One color here, a slightly different one there; mismatched fonts and spacing — the hallmark of unpolished work. → It bans hardcoded values and requires design tokens, so every color/font/spacing has one source of truth.

Breaks on other screens. UI built for one screen size that falls apart on mobile. → It requires mobile-first design against defined breakpoints and verification at multiple widths.

Missing polish. No page title, no favicon in the tab, blank screens while data loads. → It requires meaningful titles, favicons, meta tags, and proper loading/empty states.

Messy state and navigation. Prop-drilling, everything dumped into global state, duplicated state that falls out of sync. → It enforces state at the right level, deriving values instead of duplicating them, and one consistent routing setup.

Backend logic leaking into the frontend. Database calls, business rules, or secrets ending up in client code. → It enforces a strict boundary: the frontend talks to the backend only through a defined API layer.

Insecure defaults. Secrets shipped to the browser, trusting the frontend to enforce auth, over-fetching user data, unsanitized HTML (XSS). → It applies the security fundamentals — no client-side secrets, backend-enforced authorization, least data exposure, no unsanitized HTML — with full detail in references/security.md.

Risky dependencies. Pulling in bleeding-edge, abandoned, or unvetted packages. → It requires stable, supported (LTS where available) versions, and vetting plus vulnerability scanning before adding anything.

Slow pages. Huge bundles, unoptimized images, thousands of un-virtualized rows. → It requires code-splitting, image optimization, and pagination/virtualization for long lists.

Inaccessible UI. Div-soup with no keyboard support and meaning conveyed by color alone. → It requires semantic HTML, full keyboard operability, sufficient contrast, and labeled fields — detail in references/accessibility.md.