ReddRadar
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/CheekyCodexConjurer/quant-lab/tree/main/skills/create_ui_component
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.
CheekyCodexConjurer/quant-lab
action_logger
Keep an audit trail of changes, commands, and verification.
CheekyCodexConjurer/quant-lab
size_guard
Enforce line budgets and rotate or split large context files.
CheekyCodexConjurer/quant-lab
analyze_repo_capabilities
Detect repo tooling and patterns, then record a dynamic manifest.
CheekyCodexConjurer/quant-lab
safety_validation
Validate changes against .agentignore before commit.
CheekyCodexConjurer/quant-lab
safe_refactor_migration
Plan and execute large refactors with shadow mode and rollback.
CheekyCodexConjurer/quant-lab
command_guard
Enforce .agentpolicy rules before executing commands.
Didn't find tool you were looking for?