Agent skill · software engineering · aiskillstore
frontend-guardrails
Professional frontend standards for building, scaffolding, extending, or reviewing any UI or frontend project — new or existing — even when standards aren't explicitly asked for. Keeps generated code consistent, reusable, secure, and production-quality. Framework-agnostic: React, Vue, Angular, Svelte, plain JS.
Why this skill is useful
Provides a comprehensive set of frontend standards and principles that enhance code quality and maintainability across various frameworks.
What it needs
About 9k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
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 detail: Security-sensitive work (auth, user data, env vars, tokens) → references/security.md Notifications, toasts, or user feedback → references/notifications.md Accessibility → references/accessibility.md 5. Run the self-audit (final section) before declaring any task done. --- Scale rigor to the project (read first) Match the depth of these standards to the project's size and maturity. Imposing enterprise rigor on a small or beginner project is itself a violation of principle 16 — over-engineering. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/frontend-guardrails