Agent skill
new-component
Create new GPUI components. Use when building components, writing UI elements, or creating new component implementations.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/new-component
SKILL.md
Instructions
When creating new GPUI components:
- Follow existing patterns: Base implementation on components in
crates/ui/src(examples:Button,Select) - Style consistency: Follow existing component styles and Shadcn UI patterns
- Component type decision:
- Use stateless elements for simple components (like
Button) - Use stateful elements for complex components with data (like
SelectandSelectState)
- Use stateless elements for simple components (like
- API consistency: Maintain the same API style as other elements
- Documentation: Create component documentation
- Stories: Write component stories in the story folder
Component Types
- Stateless: Pure presentation components without internal state
- Stateful: Components that manage their own state and data
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?