tranhieutt/radix-ui-design-system
.claude/skills/radix-ui-design-system/SKILL.md
Provides Radix UI patterns for building accessible design systems with headless components, theming, and compound component architecture. Use when building UI with Radix UI primitives or when the user mentions Radix UI, headless components, or accessible component libraries.
$ install --global
skillsauthnpx skillsauth add tranhieutt/software_development_department radix-ui-design-systemInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 15, 2026, 11:49 PM6.6s5 files scanned
SKILL.md
- name:
- radix-ui-design-system
- type:
- reference
- description:
- Provides Radix UI patterns for building accessible design systems with headless components, theming, and compound component architecture. Use when building UI with Radix UI primitives or when the user mentions Radix UI, headless components, or accessible component libraries.
- paths:
- ["**/*.tsx", "**/*.jsx", "**/components.json"]
- when_to_use:
- When building accessible component libraries with Radix UI primitives, headless components, or design system theming
- allowed-tools:
- Read, Glob, Grep, Write, Edit, Bash
- user-invocable:
- true
- effort:
- 3
Radix UI Design System
Critical rules (non-obvious)
- Always use
asChildon Trigger/Close — prevents nested<button>inside<button>DOM errors - Always include
<Dialog.Title>and<Dialog.Description>— screen readers require them; omitting causes a11y violations - Never mix controlled + uncontrolled — don't use both
defaultValueandvalueon same component - Animations need
forceMount— without it Portal unmounts instantly, killing Framer Motion exit animations - Dropdown positioning off? — parent has
overflow: hiddenor CSS transform; always wrap in<Portal>
Core pattern: Dialog
<Dialog.Root open={open} onOpenChange={setOpen}>
<Dialog.Trigger asChild><button>Open</button></Dialog.Trigger>
<Dialog.Portal>
<Dialog.Overlay className="overlay" />
<Dialog.Content className="content">
<Dialog.Title>Title</Dialog.Title> {/* required */}
<Dialog.Description>Desc</Dialog.Description> {/* required */}
<Dialog.Close asChild><button>Close</button></Dialog.Close>
</Dialog.Content>
</Dialog.Portal>
</Dialog.Root>
Theming: CSS variables (recommended)
:root { --color-primary: 220 90% 56%; --radius: 0.5rem; }
[data-theme="dark"] { --color-primary: 220 90% 66%; }
<Dialog.Content className="bg-[hsl(var(--color-primary))] rounded-[var(--radius)]" />
Theming: CVA for variants
import { cva } from 'class-variance-authority';
const button = cva("base-styles", {
variants: {
variant: { default: "bg-primary", destructive: "bg-red-500" },
size: { sm: "h-9 px-3", md: "h-10 px-4" },
},
defaultVariants: { variant: "default", size: "md" },
});
Animation with Framer Motion
<Dialog.Portal forceMount> {/* forceMount: critical */}
<AnimatePresence>
{open && (
<Dialog.Overlay asChild>
<motion.div initial={{opacity:0}} animate={{opacity:1}} exit={{opacity:0}} />
</Dialog.Overlay>
)}
</AnimatePresence>
</Dialog.Portal>
Hook form integration (Select)
<Controller name="country" control={control} render={({ field }) => (
<Select.Root onValueChange={field.onChange} value={field.value}>
<Select.Trigger><Select.Value placeholder="Select..." /><Select.Icon /></Select.Trigger>
<Select.Portal>
<Select.Content><Select.Viewport>
<Select.Item value="us"><Select.ItemText>US</Select.ItemText></Select.Item>
</Select.Viewport></Select.Content>
</Select.Portal>
</Select.Root>
)} />
Primitives quick reference
| Component | Key parts | |---|---| | Dialog | Root · Trigger · Portal · Overlay · Content · Title · Description · Close | | DropdownMenu | Root · Trigger · Portal · Content · Item · Separator · CheckboxItem · RadioGroup · Sub | | Tabs | Root · List · Trigger · Content | | Tooltip | Provider · Root · Trigger · Portal · Content · Arrow | | Select | Root · Trigger · Value · Icon · Portal · Content · Viewport · Item · ItemText · ItemIndicator |
shadcn vs raw Radix
- shadcn: quick prototyping, standard designs; run
npx shadcn@latest add dialog - Raw Radix: full customization, unique designs, zero-dependency component library
Related Skills
tranhieutt/visual-engineer
testing
VerifiedTrustedCommunity
Generates high-fidelity architecture diagrams, sequence flows, and component maps for SDD projects. Use when finalizing a design phase, documenting system architecture, or visualizing agentic workflows. Default style: Style 6 (Claude Official).
60SKILL.mdUpdated Apr 15, 2026
tranhieutt/vector-database-engineer
data-ai
VerifiedTrustedCommunity
Provides vector database and semantic search patterns for Pinecone, Weaviate, Qdrant, Milvus, and pgvector in RAG and recommendation systems. Use when implementing vector search or when the user mentions vector database, semantic search, embeddings, or similarity search.
60SKILL.mdUpdated Apr 15, 2026
tranhieutt/update-codemap
development
VerifiedTrustedCommunity
Updates docs/technical/CODEMAP.md by scanning the current codebase structure. Run after a significant feature merge, refactor, or when CODEMAP feels stale.
60SKILL.mdUpdated Apr 15, 2026
tranhieutt/unfreeze
development
VerifiedTrustedCommunity
Unlocks the codebase after a release freeze or incident freeze period to resume normal development. Use when a freeze period ends or when the user mentions unfreezing or lifting the code freeze.
60SKILL.mdUpdated Apr 15, 2026