name: Frontend Components description: Design and build reusable, composable UI components following Single Responsibility Principle with clear prop interfaces, minimal state, and proper encapsulation. Use this skill when creating or modifying React components, Vue components, Angular components, Svelte components, or Web Components. Use when working with component files (.tsx, .jsx, .vue, .svelte, .component.ts) in component directories. Use when designing component APIs with props and prop types, implementing component composition patterns, managing local component state, or creating reusable design system components. Use when refactoring large components into smaller focused ones, defining component documentation and usage examples, or building component libraries.

Frontend Components

This Skill provides Claude Code with specific guidance on how to adhere to coding standards for frontend UI component design and implementation.

When creating or modifying UI component files
When working with React, Vue, Angular, Svelte, or Web Component files (.tsx, .jsx, .vue, .svelte, .component.ts)
When designing component prop interfaces and APIs
When implementing component composition by combining smaller components
When managing component state and deciding whether to lift state up
When creating reusable components for design systems or component libraries
When refactoring monolithic components into smaller, focused pieces
When defining component naming conventions and file organization
When implementing component encapsulation and private implementation details
When writing component documentation and usage examples
When keeping component props minimal and manageable
When ensuring components have a single, clear responsibility

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