Stable Frontend — AI skill for Claude Code

stable-frontend

[](https://www.npmjs.com/package/stable-frontend)

Frontend architecture and stability rules for code generation in React and Next.js projects.

Overview

When coding agents generate frontend code, they frequently skip input validation, error states, accessibility tags, and testing. `stable-frontend` sets up structured engineering guidelines and folder conventions in your repository to keep generated code consistent and production ready.

Rules are organized as a modular index to minimize context window usage. Instead of loading an entire ruleset on every prompt, the main index directs tools to read only the guidelines relevant to the active task.

Usage

Run the setup command in the root of your project:

npx stable-frontend

Generated structure:

├── AGENTS.md                  # Main rule index and router
├── CLAUDE.md                  # Claude Code instructions
└── .agents/
    └── rules/
        ├── 01-architecture.md # Feature-based structure and colocation
        ├── 02-validation.md   # Schema validation and form lifecycles
        ├── 03-data-fetching.md# Async states and component boundaries
        ├── 04-testing.md      # Testing pyramid and edge case checklists
        └── 05-performance.md  # Accessibility and layout stability

Adding Rules

To add a new rule:

1. Create a template folder under src/templates/rules/ with a prompt.md and index.ts.
2. Register the template in src/templates/index.ts.
3. Run npm run build.

See [CONTRIBUTING.md](CONTRIBUTING.md) for detailed guidelines.

Community

Contributions, issues, and feature proposals are welcome. Please read [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md) before participating.