skills.rest
vesviet
vesvietCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

setup-design-system

Configure design tokens, styling frameworks, and component primitives for frontend projects.

Updated Feb 10, 2026
Search Tags:#accessibility#design system#css#component library#design tokens#storybook#tailwind
One-click install
npx skills add https://github.com/vesviet/agent-skills --skill setup-design-system-vesviet
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: setup-design-system
Source: https://github.com/vesviet/agent-skills/tree/main/core/skills/frontend/setup-design-system
Command: npx skills add https://github.com/vesviet/agent-skills --skill setup-design-system-vesviet

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Frontend projects often accumulate inconsistent styling: hardcoded hex values, mixed CSS paradigms, and AI-generated components that bypass the design system. This Skill establishes a unified styling architecture with centralized design tokens, lint enforcement, and accessibility gates so every future component follows the same rules. ## Core Features & Use Cases - Design Token Architecture: Define tokens in Tailwind v4 @theme CSS or W3C DTCG JSON format with functional naming, semantic layering, and OKLCH color space for predictable contrast. - Styling Framework Setup: Configure Tailwind, CSS Modules, Sass, or styled-components wired to the token system, with lint rules (eslint-plugin-tailwindcss, Stylelint) that reject hardcoded values. - Component Primitives & Documentation: Build accessible foundational primitives (with Radix or Headless UI) and document them in Storybook with a11y and Chromatic visual regression gates. - Use Case: When initializing a new React project, use this Skill to set up Tailwind v4 with DTCG tokens, create Button and Input primitives, and enforce WCAG AA contrast checks plus AI-generated component conformance review in CI. ## Quick Start Use the setup-design-system skill to initialize a Tailwind v4 design system with DTCG tokens, Storybook, and accessibility gates for this project.

Frequently Asked Questions about setup-design-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up a design system with Tailwind CSS?▼

Define design tokens inside @theme in your CSS entrypoint using Tailwind v4's CSS-first config, then wire them into foundational primitives. Add eslint-plugin-tailwindcss or Stylelint rules to reject hardcoded hex values and enforce token usage across components.

What is the W3C DTCG token format and why use it?▼

DTCG (Design Tokens Community Group) format defines tokens as JSON with $value and $type fields, making them portable across Figma Variables, Style Dictionary, and AI design tools. It prevents lock-in to a single tool's token definition.

Should I use Tailwind config file or CSS-first config in Tailwind v4?▼

Tailwind v4 uses CSS-first configuration, so define tokens inside @theme in your CSS entrypoint rather than maintaining tailwind.config.js. Use :root for CSS variables that do not need utility class mapping.

How do I enforce accessibility in a component library?▼

Enable the Storybook a11y addon and fail stories with missing ARIA attributes, run WCAG AA contrast checks (4.5:1 for text, 3:1 for UI controls) on all color token pairs, and build primitives on headless libraries like Radix UI for accessible interaction patterns.

How do I validate AI-generated components against a design system?▼

Run a token conformance check before merge: verify the component consumes design tokens, forwards refs, includes required ARIA attributes, and has no hardcoded hex or px values. Require a Chromatic or Percy visual regression baseline and a review checklist in CONTRIBUTING.md.

When should I not use a unified design system approach?▼

Skip the full setup for solo experiments or throwaway prototypes that never cross a role boundary or feed downstream components. The output contracts and CI gates are designed for systems consumed by multiple components, teams, or a Storybook deployment.

Related Skills

Explore More Software Engineering Skills→
oakossoakoss
14

brand-designer

Generate cohesive brand identities with SVG logos, Tailwind color tokens, and typography systems.

Official
Advanced
yairbedermanyairbederman

design-system-architect

Define design tokens, atomic components, and accessibility standards for design systems.

Community
Advanced
Nickalus12Nickalus12
2

a11y-audit

Audit Loom-style applications for WCAG violations and ARIA usage.

Community
Advanced
p-o-ke-naep-o-ke-nae

design-system-patterns

Build design system foundations with tokens, theming, and component architecture.

Community
Advanced