frontend-guardrailslisted

# Frontend Guardrails Without explicit standards, frontend code drifts: the same logic in three places (so one bug needs three fixes), inconsistent colors and fonts, backend concerns leaking into the UI, secrets and user data ending up in the browser. This skill is the standing instruction set that prevents that, so professional output is the *default* and requires no extra prompting. **Compose, don't reinvent.** This skill is opinionated policy, not a re-implementation of existing tools. Where a mature linter, formatter, auditor, MCP, or companion skill already enforces one of these standards, prefer wiring it in over duplicating its work — see `references/ecosystem.md` for the recommended ecosystem and how each principle maps to it. ## How to use this skill 1. **Detect the stack first.** Identify the framework, styling approach, and state library from `package.json`, config files, and existing components. Never impose a stack the project does not use. 2. **Read the matching framework reference** for syntax-level guidance: - React / Next.js → `references/react.md` - Vue / Nuxt → `references/vue.md` - Angular → `references/angular.md` - Svelte / SvelteKit → `references/svelte.md` - Anything else (plain JS, SolidJS, etc.) → apply the principles below; the framework files show how the same principles map to syntax. 3. **Apply the universal principles** (below) to every task. 4. **Read the topic reference when the task touches that area** — these hold the deep