Design and build reusable, composable UI components following single responsibility principle with clear props, proper encapsulation, and minimal state management. Use this skill when creating or modifying React, Vue, Svelte, or web components, defining component props or interfaces, managing component state, building component libraries, or refactoring UI code. Apply when working with .jsx, .tsx,
Receba novas skills de Design e Frontend toda segunda
1 email curto, só com as skills novas de Design e Frontend. 4 minutos de leitura, sem spam, cancela com 1 clique.
Você confirma o email no primeiro envio. Sem spam. Cancela com 1 clique.
Ler descrição completaRecolher descrição
Frontend Components
When to use this skill
When creating new React, Vue, Svelte, or web components
When modifying existing component files (.jsx, .tsx, .vue, .svelte)
When defining component props, interfaces, or prop types
When implementing component state management (useState, reactive data)
When building reusable UI elements (buttons, cards, forms, modals)
When composing complex UIs from smaller component building blocks
When refactoring large components into smaller, focused ones
When creating component libraries or design systems
When managing component lifecycle hooks or effects
When implementing component communication patterns (props, events, callbacks)
When documenting component usage and API
When optimizing component performance or reducing re-renders
When working in component directories or module structures
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](../../../agent-os/standards/frontend/components.md)
