Skip to main content
tailwind-design-system Skill for creating and managing a Design System using Tailwind CSS and shadcn/ui. Use when defining design tokens, setting up theming with CSS variables, building a consistent UI component library, initializing a design system configuration, or wrapping shadcn/ui components into design system primitives.
설치로 이동 Skills Marketplace 커뮤니티가 만든 AI 스킬을 발견하고 탐색하세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/giuseppe-trisciuoglio/developer-kit --skill tailwind-design-system명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
Zip 다운로드 다운로드 중... 이 저장소의 다른 Skills Posts review findings from a JSON file as inline comments on a GitHub Pull Request, attaching each comment to its file and line. Use when you have a list/JSON of review findings (each with a file path, line number, and a message such as summary/failure_scenario) and want them published on a PR as inline review comments. Triggers include "post these review comments on the PR", "associate comments to files in the PR", "publish review findings to PR
typescript-security-review Provides security review capability for TypeScript/Node.js applications, validates code against XSS, injection, CSRF, JWT/OAuth2 flaws, dependency CVEs, and secrets exposure. Use when performing security audits, before deployment, reviewing authentication/authorization implementations, or ensuring OWASP compliance for Express, NestJS, and Next.js. Triggers on "security review", "check for security issues", "TypeScript security audit".
Initialize Spec-Driven Development context — detects tech stack, conventions, architecture patterns, and bootstraps persistence backends. Triggers on 'sdd-init', 'init sdd', 'setup sdd', 'initialize sdd', 'setup project', 'initialize project context'. Creates/updates docs/specs/architecture.md & ontology.md (Constitution), and populates knowledge-graph.json.
giuseppe-trisciuoglio
giuseppe-trisciuoglio/developer-kit
GitHub 저장소 열기 name tailwind-design-system description Skill for creating and managing a Design System using Tailwind CSS and shadcn/ui. Use when defining design tokens, setting up theming with CSS variables, building a consistent UI component library, initializing a design system configuration, or wrapping shadcn/ui components into design system primitives. allowed-tools Read, Write, Edit, Bash, Glob, Grep
Tailwind CSS & shadcn/ui Design System
Overview
Expert guide for creating and managing a centralized Design System using Tailwind CSS (v4.1+) and shadcn/ui. This skill provides structured workflows for defining design tokens, configuring themes with CSS variables, and building a consistent UI component library based on shadcn/ui primitives.
Relationship with other skills:
tailwind-css-patterns covers utility-first styling, responsive design, and general Tailwind CSS usageshadcn-ui covers individual component installation, configuration, and implementationThis skill focuses on the system-level orchestration: design tokens, theming infrastructure, component wrapping patterns, and ensuring consistency across the entire application
When to Use
Setting up a new design system from scratch with Tailwind CSS and shadcn/ui
Defining design tokens (colors, typography, spacing, radius, shadows) as CSS variables
Configuring globals.css with a centralized theming system (light/dark mode)
Wrapping shadcn/ui components into design system primitives with enforced constraints
Building a token-driven component library for consistent UI
Migrating from a JavaScript-based Tailwind config to CSS-first configuration (v4.1+)
Establishing color palettes with oklch format for perceptual uniformity
Creating multi-theme support beyond light/dark (e.g., brand themes)
Instructions
Step 1: Initialize Design System Configuration Run these commands to set up the project:
npx tailwindcss --version
npx @tailwindcss/vite@latest init
npx shadcn@latest init
npx shadcn@latest add button card input -y
Validation checkpoint : After setup, verify with:
ls src/components/ui/
cat src/app/globals.css
Step 2: Define Design Tokens Create src/app/globals.css with your design tokens:
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--primary : oklch (0.55 0.18 250 );
--primary-foreground : oklch (0.985 0 0 );
--background : oklch (0.99 0 0 );
--foreground : oklch (0.15 0 0 );
--secondary : oklch (0.96 0.01 250 );
--secondary-foreground : oklch (0.20 0 0 );
--destructive : oklch (0.55 0.22 25 );
--destructive-foreground : oklch (0.985 0 0 );
}
.dark {
--primary : oklch (0.65 0.20 250 );
--background : oklch (0.14 0 0 );
--foreground : oklch (0.97 0 0 );
--secondary : oklch (0.25 0.02 250 );
}
}
Validation checkpoint : Verify tokens are valid CSS:
grep -E "^[[:space:]]*--[a-z-]+:" src/app/globals.css | wc -l
Step 3: Configure Theming Infrastructure Bridge CSS variables to Tailwind utilities (Tailwind v4.1+):
@theme inline {
--color-primary : var (--primary);
--color-primary-foreground : var (--primary-foreground);
--color-background : var (--background);
--color-foreground : var (--foreground);
}
Add dark mode class toggle in components/providers/theme-provider.tsx:
import { useEffect } from "react" ;
export function ThemeProvider ({ children }: { children: React.ReactNode } ) {
useEffect (() => {
const isDark = window .matchMedia ("(prefers-color-scheme: dark)" ).matches ;
document .documentElement .classList .toggle ("dark" , isDark);
}, []);
return <> {children}</> Validation checkpoint : Test dark mode:
document.documentElement.classList.contains("dark" ) // in browser console
Step 4: Wrap shadcn/ui Components Create src/components/ds/Button.tsx:
import { Button as ShadcnButton } from "@/components/ui/button" ;
type DSVariant = "primary" | "secondary" | "destructive" | "ghost" ;
const variantMap : Record <DSVariant , "default" | "secondary" | "destructive" | "ghost" > = {
primary : "default" , secondary : "secondary" ,
destructive : "destructive" , ghost : "ghost" ,
};
export function Button ({ variant = "primary" , ...props }: { variant?: DSVariant } & React .ComponentProps <typeof ShadcnButton > ) {
return <ShadcnButton variant ={variantMap[variant]} {...props } /> Validation checkpoint : Verify build passes:
npx tsc --noEmit src/components/ds/Button.tsx
Step 5: Validate and Document Run the token validation script:
REQUIRED=("primary" "primary-foreground" "background" "foreground" "secondary" "secondary-foreground" )
for token in "${REQUIRED[@]} " ; do
grep -q "$token :" src/app/globals.css || echo "MISSING: --$token "
done
Validation checkpoint : Ensure all shadcn components use DS tokens:
grep -r "bg-primary\|text-primary\|bg-background" src/components/ds/
Examples
Adding Custom Tokens Extend the base tokens in globals.css:
:root {
--warning : oklch (0.84 0.16 84 );
--warning-foreground : oklch (0.28 0.07 46 );
}
.dark {
--warning : oklch (0.41 0.11 46 );
--warning-foreground : oklch (0.99 0.02 95 );
}
@theme inline {
--color-warning : var (--warning);
--color-warning-foreground : var (--warning-foreground);
}
Usage: <div className="bg-warning text-warning-foreground">Warning</div>
Wrapping shadcn/ui Components as Design System Primitives See references/component-wrapping.md for complete examples including Button, Text, and Stack primitives with full TypeScript types.
Create constrained design system components that enforce token usage.
Inline example:
import { Button as ShadcnButton } from "@/components/ui/button" ;
export function Button ({ variant = "primary" , size = "md" , ...props } ) {
const variantMap = { primary : "default" , secondary : "secondary" };
const sizeMap = { sm : "sm" , md : "default" , lg : "lg" };
return (
<ShadcnButton
variant ={variantMap[variant]}
size ={sizeMap[size]}
{...props }
/>
Multi-Theme Support For applications requiring multiple brand themes beyond light/dark:
[data-theme="ocean" ] {
--primary : oklch (0.55 0.18 230 );
--primary-foreground : oklch (0.985 0 0 );
}
[data-theme="forest" ] {
--primary : oklch (0.50 0.15 145 );
--primary-foreground : oklch (0.985 0 0 );
}
const [theme, setTheme] = useState ("light" );
useEffect (() => {
document .documentElement .setAttribute ("data-theme" , theme);
}, [theme]);
Design Token Validation Verify all required tokens are defined:
#!/bin/bash
REQUIRED=("--background" "--foreground" "--primary" "--primary-foreground" )
for token in "${REQUIRED[@]} " ; do
grep -q "$token :" src/styles/globals.css || echo "Missing: $token "
done
Constraints and Warnings
oklch color format : Use oklch for perceptual uniformity. Not all browsers support oklch natively; check compatibility if targeting older browsersToken naming : Follow the shadcn/ui convention (--primary, --primary-foreground) for seamless integration@theme inline vs @theme@theme inline when bridging CSS variables to Tailwind utilities; use @theme for direct token definitionComponent wrapping : Keep wrapper components thin. Only add constraints that enforce design system rules; avoid duplicating shadcn/ui logicDark mode : Always define dark mode values for every token in :root. Missing dark tokens cause visual regressionsCSS variable scoping : Tokens defined in :root are global. Use [data-theme] selectors for multi-theme without conflictsPerformance : Avoid excessive CSS custom property chains. Each var() lookup adds minimal but non-zero overheadTailwind v4 vs v3 : The @theme directive and @theme inline are v4.1+ features. For v3 projects, use tailwind.config.js with theme.extend
Best Practices
Single source of truth : All design tokens live in globals.css. Never hardcode color values in componentsSemantic naming : Use purpose-based names (--primary, --destructive) not appearance-based (--blue-500, --red-600)Foreground pairing : Every background token must have a matching -foreground token for contrast complianceToken scale : Define a complete scale for custom palettes (50-950) to provide flexibilityComponent barrel exports : Export all DS components from a single index.ts for clean importsAccessibility : Ensure all token pairs (background/foreground) meet WCAG AA contrast (4.5:1 for text, 3:1 for large text)Document tokens : Maintain a visual reference of all tokens for the teamConsistent spacing : Use Tailwind's spacing scale (gap-2, gap-4, gap-6) through DS components rather than arbitrary values
References 