Creates stateless, variant-driven UI primitive components for React and Astro design systems.
npx skills add https://github.com/gabriellst/codm --skill primitive-gabriellst
Please help me install this Agent Skill. Skill: primitive Source: https://github.com/gabriellst/codm/tree/main/.claude/skills/primitive Command: npx skills add https://github.com/gabriellst/codm --skill primitive-gabriellst
.astro components with optional React islands). - Pattern registry enforcement: Ships registry.yaml files with structural patterns (CVA variants, forwardRef, data-slot, named exports) and mechanical bad-practice detectors for hardcoded colors, missing forwardRef, and closed props interfaces. - Reference-driven implementation: Guides lookup of shadcn/ui and Base UI reference implementations before coding, then adapts them to project conventions. - Use Case: You need a new Pill component for both the landing page and the console. The Skill picks the right platform guide, scaffolds a CVA-driven primitive using design tokens, and checks it against the registry's bad practices. ## Quick Start Ask the agent to create a new primitive component such as a Badge or Card in the current package, and it will route to the correct React or Astro guide and enforce the design system rules.High-intent search queries and answers about installing and using this skill.
Define variants with class-variance-authority (cva) including variant and size keys plus defaultVariants, then wrap a Base UI Button primitive with React.forwardRef using a named function. Merge classes with cn() so consumer className overrides win, and add a data-slot attribute.
Use a .tsx React island only when the primitive needs controlled state, reads window or document, handles events that change state, or mounts a portal or popover. Otherwise author a static .astro file, since Astro's value is shipping HTML without JavaScript.
The component is missing forwardRef, so Base UI cannot attach its ref and behavior. Wrap it with React.forwardRef using a named function and pass the ref to the underlying primitive, which is critical for interactive primitives like Button, Input, and Select triggers.
No. Primitives must use semantic tokens such as bg-primary, text-foreground, or border that map to the shared tokens.css. Standard spacing, sizing, and typography utilities like px-2, h-8, and text-sm are allowed; only color scale classes, hex values, and arbitrary value syntax are flagged.
Skip a primitive when the component is route-scoped or feature-specific, when it owns data fetching or business logic, or when an existing primitive already covers the case. Use a feature component or form skill instead, since forms compose primitives rather than define them.
bergsideDefine tokenized typography, spacing, and color foundations for dark sci-fi UI.
linehaul-aiReference shadcn-svelte components for Composable Svelte UI integration.
langfuseRefactors React component props, variants, and classNames through an auditable step-by-step cleanup workflow.
viably-labsDesigns accessible SaaS UI/UX systems with tokens, shadcn/ui and Radix components, dark mode, WCAG 2.1 AA compliance, and responsive layouts.