Frontend Components

---
name: frontend-components
description: 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, .vue, .svelte files, component directories, or any code that defines reusable UI building blocks with configurable interfaces and composable architectures.
---

# 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)