---

name: Frontend Components description: Design and build reusable, composable UI components following component architecture best practices. Use this skill when creating new React, Vue, Svelte, or other framework components. Use this skill when refactoring components to improve reusability or composition. Use this skill when defining component props, interfaces, or public APIs. Use this skill when managing component state and deciding where state should live. Use this skill when breaking down large components into smaller, focused pieces. Use this skill when implementing component encapsulation and information hiding. Use this skill when naming components or establishing component file structure. Use this skill when documenting component usage and prop specifications.

Frontend Components

When to use this skill

• When creating new UI components in React, Vue, Svelte, or other frameworks
• When refactoring large components into smaller, focused pieces
• When designing component props and public interfaces
• When deciding where to place component state (local vs. lifted)
• When implementing component composition patterns
• When ensuring components have single, clear responsibilities
• When naming components with descriptive, purpose-driven names
• When encapsulating component implementation details
• When documenting component usage, props, and examples
• When building reusable component libraries or design systems

This Skill provides Claude Code with specific guidance on how to adhere to coding standards as they relate to how it should handle frontend components.

Instructions

For details, refer to the information provided in this file: frontend components