---

name: Frontend Components description: Design and build reusable, composable UI components with clear interfaces, proper state management, and single responsibility. Use this skill when creating or modifying React components, Vue components, Svelte components, or any UI component library files. When working on files in components/, ui/, widgets/, or src/components/ directories. When designing component props and APIs, managing component state, composing smaller components into larger ones, refactoring monolithic components, or documenting component usage.

When to use this skill:

• When creating new UI components (React, Vue, Svelte, etc.)
• When modifying existing component files
• When working on files in components/, ui/, widgets/, or src/components/ directories
• When designing component props and their default values
• When deciding where to manage state (local vs. lifted)
• When composing smaller components into larger UI structures
• When refactoring large, monolithic components into smaller pieces
• When naming components and their props descriptively
• When encapsulating implementation details within components
• When documenting component usage and prop interfaces
• When deciding if a component should be split or combined
• When ensuring components are reusable across different contexts

Frontend Components

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