Agent skill
Create UI Component
Use this skill when creating a new React UI component. It provides a consistent Lumina-style template.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/design/create-ui-component-cheekycodexconjurer-quant-lab
SKILL.md
Create UI Component
Use this skill to create new React components that match the current Lumina look (clean, light, slate/sky tones).
When to use
- The user asks to create a new component/view/modal/panel.
- You are introducing a new interaction surface in the UI.
Guidelines
- Styling: use Tailwind classes matching the current Lumina look (light backgrounds, slate text, subtle borders/shadows).
- No new stylesheets: avoid adding
.css/ CSS modules unless unavoidable. - Prefer existing primitives: check
src/lumina/components/common/before introducing new UI patterns. - Icons: use
lucide-react. - Extensibility: accept
className+ standard HTML props where reasonable.
Steps
- Start from
template.tsxin this folder. - Place the component under the appropriate folder (
src/components/...,src/lumina/..., or feature folder). - Keep responsibilities separated (UI vs logic hook vs service calls).
- Validate interaction states if it’s interactive (hover/focus/disabled/loading/error).
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?