tailwind-design-system – Design & UI skill for AI agents
Build production-ready design systems with Tailwind CSS, including design tokens, component variants, responsive patterns, and accessibility.
Install the tailwind-design-system skill with one command
Pick the tool you use, copy the command and paste it in your terminal. The skill lands in that tool's skills folder and is ready in your next session.
Claude Code
mkdir -p ~/.claude/skills && curl -fsSL https://skill.dn1nguoi.com/z/tailwind-design-system-99243.tgz | tar xz -C ~/.claude/skills
Call it in Claude Code: /tailwind-design-system – then describe the task you want done.
Codex
mkdir -p ~/.codex/skills && curl -fsSL https://skill.dn1nguoi.com/z/tailwind-design-system-99243.tgz | tar xz -C ~/.codex/skills
Call it in Codex: $tailwind-design-system – then describe the task you want done.
Hermes Agent
mkdir -p ~/.hermes/skills && curl -fsSL https://skill.dn1nguoi.com/z/tailwind-design-system-99243.tgz | tar xz -C ~/.hermes/skills
Call it in Hermes Agent: /tailwind-design-system – then describe the task you want done.
DeepSeek
mkdir -p ~/.deepcode/skills && curl -fsSL https://skill.dn1nguoi.com/z/tailwind-design-system-99243.tgz | tar xz -C ~/.deepcode/skills
Call it in DeepSeek: /tailwind-design-system – then describe the task you want done.
SKILL.md content
Tailwind Design System
Build production-ready design systems with Tailwind CSS, including design tokens, component variants, responsive patterns, and accessibility.
Use this skill when
- Creating a component library with Tailwind
- Implementing design tokens and theming
- Building responsive and accessible components
- Standardizing UI patterns across a codebase
- Migrating to or extending Tailwind CSS
- Setting up dark mode and color schemes
Do not use this skill when
- The task is unrelated to tailwind design system
- You need a different domain or tool outside this scope
Instructions
- Clarify goals, constraints, and required inputs.
- Apply relevant best practices and validate outcomes.
- Provide actionable steps and verification.
- If detailed examples are required, open
resources/implementation-playbook.md.
Resources
resources/implementation-playbook.mdfor detailed patterns and examples.
Limitations
- Use this skill only when the task clearly matches the scope described above.
- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.
Related skills
- tailwind-patterns – Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns…
- tastegate – Build or fix a frontend so it looks designed, not AI-generated, then prove it in a real…
- theme-factory – This skill provides a curated collection of professional font and color themes, each…
- threejs-animation – Three.js animation - keyframe animation, skeletal animation, morph targets, animation…
- threejs-shaders – Three.js shaders - GLSL, ShaderMaterial, uniforms, custom effects. Use when creating…
- threejs-skills – Create 3D scenes, interactive experiences, and visual effects using Three.js. Use when…
- tile-design – Web and App implementation guide for Tile Design. Trigger when user wants Microsoft…
- tone-of-voice-analyzer – Tone of Voice Analyzer. Use when working with text and optional brand voice sample.