---

name: Frontend Components description: Design and build reusable UI components following single responsibility principle, composability patterns, clear prop interfaces with sensible defaults, encapsulation of implementation details, consistent naming conventions, local state management, and minimal prop requirements. Use this skill when creating new UI components, refactoring components for reusability, designing component APIs with props and events, implementing component composition patterns, managing component state, documenting component usage, or working on component libraries and design systems. This skill applies when working on Vue components, React components, web components, or any modular UI code.

Frontend Components

When to use this skill

• When creating new UI components for your application
• When refactoring existing components for better reusability
• When designing component APIs with props, events, and slots
• When implementing component composition patterns (parent-child relationships)
• When managing component state (local vs. lifted state)
• When building component libraries or design systems
• When documenting component usage and providing examples
• When working on Vue components (.vue files)
• When working on React components (.jsx, .tsx files)
• When creating web components or custom elements
• When ensuring components follow single responsibility principle
• When designing components to be used across different contexts

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