tailwind-design-system – skill Thiết kế & UI cho agent AI
Xây dựng design system sẵn sàng production với Tailwind CSS, gồm design token, biến thể component, pattern responsive và khả năng truy cập.
Cài skill tailwind-design-system bằng một lệnh
Chọn công cụ bạn đang dùng, copy lệnh và dán vào terminal. Skill sẽ nằm trong thư mục skills của công cụ đó và sẵn sàng dùng ở phiên làm việc tiếp theo.
Claude Code
mkdir -p ~/.claude/skills && curl -fsSL https://skill.dn1nguoi.com/z/tailwind-design-system-99243.tgz | tar xz -C ~/.claude/skills
Gọi trong Claude Code: /tailwind-design-system – rồi mô tả công việc bạn muốn làm.
Codex
mkdir -p ~/.codex/skills && curl -fsSL https://skill.dn1nguoi.com/z/tailwind-design-system-99243.tgz | tar xz -C ~/.codex/skills
Gọi trong Codex: $tailwind-design-system – rồi mô tả công việc bạn muốn làm.
Hermes Agent
mkdir -p ~/.hermes/skills && curl -fsSL https://skill.dn1nguoi.com/z/tailwind-design-system-99243.tgz | tar xz -C ~/.hermes/skills
Gọi trong Hermes Agent: /tailwind-design-system – rồi mô tả công việc bạn muốn làm.
DeepSeek
mkdir -p ~/.deepcode/skills && curl -fsSL https://skill.dn1nguoi.com/z/tailwind-design-system-99243.tgz | tar xz -C ~/.deepcode/skills
Gọi trong DeepSeek: /tailwind-design-system – rồi mô tả công việc bạn muốn làm.
Nội dung SKILL.md
Nội dung SKILL.md gốc bằng tiếng Anh.
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.
Skill liên quan
- tailwind-patterns – Nguyên tắc Tailwind CSS v4. Cấu hình ưu tiên CSS, container query, pattern hiện đại…
- tastegate – Xây dựng hoặc sửa frontend để trông có thiết kế, không giống do AI tạo ra, rồi kiểm…
- theme-factory – Skill này cung cấp bộ sưu tập theme font và màu chuyên nghiệp, mỗi theme có bảng màu và…
- threejs-animation – Hoạt ảnh Three.js - hoạt ảnh keyframe, hoạt ảnh skeletal, morph targets, pha trộn…
- threejs-shaders – Shader trong Three.js - GLSL, ShaderMaterial, uniforms, hiệu ứng tùy chỉnh. Dùng khi tạo…
- threejs-skills – Tạo cảnh 3D, trải nghiệm tương tác và hiệu ứng hình ảnh bằng Three.js. Dùng khi người…
- tile-design – Hướng dẫn triển khai Web và App theo Tile Design. Kích hoạt khi người dùng muốn phong…
- tone-of-voice-analyzer – Bộ phân tích giọng văn (Tone of Voice). Dùng khi làm việc với văn bản và mẫu giọng…