Frontend Style Guide

What it does

This skill provides AI agents with a structured reference to your project's specific frontend design patterns, component libraries, and coding conventions. It enables agents to generate code that aligns perfectly with your existing application's visual identity and architectural standards.

When to use it

• Generating new React or Vue components that match your team's established UI library.
• Refactoring legacy code to adhere to current style guides and accessibility requirements.
• Creating documentation for design tokens like color palettes, typography scales, and spacing units.
• Ensuring consistency when multiple developers or AI agents contribute to the same codebase.

Key capabilities

• Parses and understands your project's specific frontend architecture and framework choices.
• Extracts and applies design system rules such as CSS variables, class naming conventions, and component props.
• Validates generated code against existing style guidelines to prevent technical debt.
• Assists in onboarding new contributors by providing immediate context on coding standards.

Example prompts

• "Generate a responsive navigation bar using our project's specific design tokens and component structure."
• "Refactor this button component to match the accessibility and styling conventions defined in our style guide."
• "List all available color variables and typography scales from our frontend configuration for use in a new dashboard."

Tips & gotchas

Ensure your project includes a clearly defined style guide or design system documentation (e.g., Storybook, Styleguidist) before invoking this skill. The AI's accuracy depends heavily on the completeness of the source material provided to it regarding your specific coding standards.