---

name: Frontend Components description: Build reusable, composable UI components with single responsibilities, clear prop interfaces, proper state management, and minimal coupling. Use this skill when creating React, Vue, Angular, or web components with well-defined APIs, sensible defaults, and documentation. Applies to component files, component libraries, design systems, or any modular UI code that should be maintainable, testable, and reusable across different contexts in the application.

Frontend Components

When to use this skill

• When creating component files like Button.tsx, Card.jsx, Modal.vue, or any UI component in components/
• When building a component library or design system with reusable components like ui/, design-system/, or shared/
• When defining component props/interfaces with TypeScript types or PropTypes for API clarity
• When implementing single-purpose components that do one thing well (button, input, card, modal)
• When composing complex UIs by combining smaller, simpler components rather than building monolithic structures
• When managing component state and deciding whether state should be local or lifted to parent components
• When creating configurable components with props that have sensible default values
• When encapsulating implementation details while exposing only necessary public APIs
• When naming components descriptively to indicate their purpose (SubmitButton, UserProfileCard, ErrorBoundary)
• When documenting component usage, required/optional props, and providing code examples
• When keeping the number of props manageable and considering composition patterns when props grow excessive
• When building components in React (functional components, hooks), Vue (SFC), Angular, or native web components

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