CtrlK
BlogDocsLog inGet started
Tessl Logo

tailwind-design-system

Build production-ready design systems with Tailwind CSS, including design tokens, component variants, responsive patterns, and accessibility.

36

Quality

34%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./plugins/AI-Agents-Safe-Coding-Skills/skills/tailwind-design-system/SKILL.md

The canonical home for this skill is tailwind-design-system in administrakt0r/AI-Agents-Safe-Coding-Skills

SKILL.md
Quality
Evals
Security

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.md for detailed patterns and examples.
Repository
administrakt0r/AI-Agents-Safe-Coding-Skills
Last updated
First committed

Canonical home

administrakt0r/AI-Agents-Safe-Coding-Skills
In sync

since Aug 19, 2026

Also appears in

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.