What problem does it solve? Building reusable UI components for an Astro site often leads to unnecessary React islands, duplicated variant components, and hardcoded colors that break theming. This Skill enforces a consistent pattern for authoring design-system-grade primitives in the astro workspace. ## Core Features & Use Cases - Static-first primitives: Guides authoring stateless .astro components (Button, Card, Pill) with zero JavaScript, reserving .tsx React islands only for genuinely interactive cases. - CVA variant recipes: Standardizes class-variance-authority recipes in frontmatter so one primitive covers all variants instead of forked subcomponents like PrimaryButton. - Token-based styling: Enforces Tailwind utilities mapped to shared CSS variables from tokens.css, with a registry of bad practices (inline hex colors, client:load overuse, cross-app imports) to avoid. - Use Case: When adding a new Badge component to the landing page, follow the checklist to ship a single static Badge.astro with CVA tone variants and slot-based content instead of a hydrated React component. ## Quick Start Ask the agent to create a new astro primitive component, for example a Pill with info, success, and warning tone variants, following the registry patterns.
