These skills help an agent produce polished HTML and CSS, often as standalone artifacts. Examples include HTML slide decks, web artifacts, utility CSS and Markdown conversion.
25 skillsGenerate complete, accessible colour palettes from a single brand hex. Produces 11-shade scale (50-950), semantic tokens, dark mode variants, Tailwind v4 CSS output, WCAG contrast checks. Use whenever the user supplies a brand hex and asks for a palette, mentions setting up a design system, wants Tailwind theme colours from a brand colour, or asks to check colour accessibility / contrast.
The official shadcn/ui skill for AI agents. Find, add, compose, customize, and debug UI components using your project configuration, current component docs, and the shadcn CLI.
Set up Tailwind v4 + shadcn/ui themed UI with dark mode. Install deps, configure CSS variables via @theme inline, wire dark mode toggle, verify. Use whenever the user mentions Tailwind v4, setting up Tailwind theming, shadcn/ui colours, dark mode, or troubleshooting colours not working, tw-animate-css errors, @theme inline conflicts, @apply breaking after upgrade, or v3 → v4 migration issues.
Use slide or artifact skills for single-file outputs, UnoCSS or shadcn/ui for app styling, and polish skills for spacing and detail.