Agent skill
Frontend Components
Design and build reusable, composable UI components with clear interfaces, proper state management, and single responsibility. Use this skill when creating or modifying React components, Vue components, Svelte components, or any UI component library files. When working on files in components/, ui/, widgets/, or src/components/ directories. When designing component props and APIs, managing component state, composing smaller components into larger ones, refactoring monolithic components, or documenting component usage.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/development/frontend-components-mshafei721-turbocat
SKILL.md
When to use this skill:
- When creating new UI components (React, Vue, Svelte, etc.)
- When modifying existing component files
- When working on files in components/, ui/, widgets/, or src/components/ directories
- When designing component props and their default values
- When deciding where to manage state (local vs. lifted)
- When composing smaller components into larger UI structures
- When refactoring large, monolithic components into smaller pieces
- When naming components and their props descriptively
- When encapsulating implementation details within components
- When documenting component usage and prop interfaces
- When deciding if a component should be split or combined
- When ensuring components are reusable across different contexts
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
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?