Tailwind CSS

Use the design-system skill to generate or audit a UI system, extract tokens from existing code, and review styling consistency in real repos.

Use the shadcn skill to inspect project context, run the right CLI commands, install components, and compose UI with documented patterns for base vs radix, forms, theming, and registries.

frontend-design helps you turn vague UI ideas into distinctive, production-grade interfaces with real frontend code, strong aesthetic direction, and less generic AI styling.

ckm:ui-styling helps you create accessible, production-ready user interfaces using shadcn/ui, Tailwind CSS, and canvas-based visual design. Ideal for React-based projects needing structured, responsive layouts, accessible components, dark mode, and consistent design systems. Use ckm:ui-styling skill for UI design, theming, and rapid prototyping with practical, stack-specific guidance.

ckm:design-system helps you build three-layer tokens, component specs, CSS variables, Tailwind mappings, and brand-consistent slide assets from a clear token architecture.

Use the tailwind-design-system skill to build Tailwind CSS v4 design systems with tokens, theming, variants, accessibility, and v3-to-v4 migration guidance.

Use figma to pull design context, screenshots, variables, and assets from the Figma MCP server, then translate Figma nodes into implementation-ready UI decisions. This figma skill is ideal when you have a Figma URL or node ID and need accurate figma usage for design-to-code work, setup, or troubleshooting.

frontend-dev is a frontend-dev skill for building polished, production-ready web pages with premium UI, cinematic motion, AI-generated media, persuasive copy, and generative art. Use it for landing pages, marketing sites, product pages, dashboards, and other frontend work where design, content, and implementation details need to stay aligned.

frontend-ui-dark-ts helps you build dark-themed React UI with TypeScript, Tailwind CSS, Framer Motion, and reusable design tokens. It is suited for dashboards, admin panels, analytics views, and other data-dense interfaces that need a polished dark aesthetic and consistent component patterns.

expo-tailwind-setup is a practical guide for installing and configuring Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for iOS, Android, and web.

ui-web helps you design and style web UI components with WCAG 2.1 AA checks, strong contrast, visible controls, and dark mode-friendly Tailwind patterns. Use this ui-web skill for React-style front ends when you need practical UI Design guidance that improves accessibility and reduces guesswork.

The redesign-existing-projects skill upgrades existing websites and apps to premium quality. It audits current design, spots generic AI patterns, and applies high-end design implementation without breaking functionality. Works with any CSS framework or vanilla CSS.

baseline-ui helps review or generate Tailwind-based UI against an opinionated baseline for spacing, typography, accessibility, and motion. Use the baseline-ui skill when you need safer component output, clearer UI Design decisions, and less drift from existing primitives. It is best for React/Tailwind workflows and practical baseline-ui guide checks.

The shadcn-ui skill helps you plan, install, and adapt shadcn/ui components in a real app. Use this shadcn-ui guide for Design Implementation, component discovery, customization, and practical shadcn-ui usage across forms, tables, auth flows, and layouts.

web-artifacts-builder helps you initialize a React, Tailwind CSS, and shadcn/ui project, develop normally, then bundle it into a single bundle.html artifact. Best for complex frontend artifacts with state, routing, or richer UI, not simple one-file demos.