---

name: Frontend Components description: Design and build reusable, composable UI components following single responsibility principle with clear interfaces and proper state management. Use this skill when creating new React components, Vue components, Angular components, or any UI component files, refactoring existing components for reusability, implementing component props or interfaces, managing component state (useState, data properties), building component composition patterns, creating custom hooks or composables, implementing component lifecycle methods, documenting component APIs, splitting large components into smaller ones, or working with component files (.jsx, .tsx, .vue, .svelte, .component.ts). Use when working with component directories like components/, views/, pages/, or widgets/ in any frontend framework.

When to use this skill

• When creating new UI components (React, Vue, Angular, Svelte, etc.)
• When refactoring existing components for reusability or clarity
• When implementing component props, interfaces, or type definitions
• When managing component state (useState, data properties, observables)
• When building component composition patterns
• When creating custom hooks, composables, or component utilities
• When implementing component lifecycle methods or effects
• When documenting component usage, props, and examples
• When splitting large components into smaller, focused components
• When working with component files (.jsx, .tsx, .vue, .svelte, .component.ts)
• When working with component directories (components/, views/, pages/, widgets/)
• When creating reusable component libraries or design systems
• When implementing component variants or theming

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