frontend-components

name

Frontend Components

description

Design reusable, composable UI components with single responsibility, clear interfaces, and proper state management. Use this skill when creating or refactoring React, Vue, Svelte, or other framework components. When defining component props, interfaces, or APIs. When managing component state or lifting state up to parent components. When building reusable UI elements like buttons, cards, forms, modals, or lists. When implementing component composition patterns. When working with component files (.jsx, .tsx, .vue, .svelte). When documenting component usage or creating component libraries.

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.

When to use this skill

• When creating new UI components in React, Vue, Svelte, or similar frameworks
• When refactoring existing components to improve reusability or composability
• When defining component props, interfaces, TypeScript types, or default values
• When managing local component state or deciding whether to lift state up
• When building reusable UI elements (buttons, cards, inputs, modals, dropdowns)
• When implementing component composition patterns (children, slots, render props)
• When working with component files (.jsx, .tsx, .vue, .svelte, .js)
• When splitting large components into smaller, focused sub-components
• When documenting component usage, props, or creating component libraries
• When encapsulating component logic and keeping internal details private

Instructions

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