Agent skill
frontend-component
Create React components following project standards.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/frontend-component-afettah-git-coupling-analyze
SKILL.md
Component Creation
Use Generator Scripts
./scripts/generate-component.sh MyButton # → shared/
./scripts/generate-component.sh ClusterCard clustering # → clustering/
./scripts/generate-hook.sh useTheme
Location Rules
| Type | Path |
|---|---|
| Reusable | components/shared/ |
| Feature-specific | components/[feature]/ |
| Sub-components | components/[feature]/components/ |
Standards
- Tailwind CSS with slate (bg/text) + sky (accents)
- Icons from
lucide-react - Wrap in
memo()for lists/visualizations - Always accept
classNameprop - Use
@/alias for imports
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
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.
majiayu000/claude-skill-registry
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.
majiayu000/claude-skill-registry
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.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
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?