---

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 to use this skill

• 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

Instructions

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