ReddRadar
Agent skill
treido-shadcn-ui
shadcn/ui specialist for Treido. Use for Radix composition, CVA variants, component boundaries, and token-safe Tailwind v4 usage. Not for product/business logic.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/treido-shadcn-ui
SKILL.md
treido-shadcn-ui
When to Apply
- Editing or adding
components/ui/*primitives - Composing Radix-based UI with variants, slots, and controlled/uncontrolled state
- Reviewing UI code for shadcn boundary drift (app logic leaking into primitives)
Non-Negotiables (Treido)
- Tailwind v4 tokens only (no palette classes, gradients, arbitrary values)
- Keep
components/ui/*primitives generic and composable - App-specific wiring lives outside primitives (e.g. in
components/shared/*or route components)
Default Patterns
- Prefer shadcn/ui primitives first; only add bespoke primitives when strictly necessary
- Prefer CVA-style variants for component variants; avoid ad-hoc boolean prop explosion
- Prefer semantic token classes (
bg-background,text-foreground,border-border, etc.)
Output Format (Use This)
When asked to implement/review, respond with:
## Decision
- <what pattern/primitives to use>
## Files
- <file paths to touch>
## Variant Plan
- <variants + defaults>
## Token Plan
- <semantic tokens to use>
## A11y
- <keyboard/focus/aria notes>
References
docs/WORKFLOW.mdapp/globals.css(token SSOT)components/ui/AGENTS.md(boundary rules)
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?