Skills tailwind-design-system
📦

tailwind-design-system

Content revision r2 Safe ⚙️ External commands

Build Accessible Tailwind Design Systems

Inconsistent tokens and components make Tailwind interfaces difficult to maintain. This skill provides reusable patterns for themes, variants, responsive layouts, forms, and accessibility.

Supports: Claude Codex Code(CC)
🥉 78 Bronze

Install with my Agent

Copy this request to your Agent. It includes the canonical Skill page and manifest.

Agent request
Review the Skillstore skill "tailwind-design-system" from https://skillstore.io/skills/sickn33-tailwind-design-system.md and its manifest at https://skillstore.io/api/skills/sickn33-tailwind-design-system/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

Your Agent should still show its plan and request any confirmation required by the security policy.

Agent-readable resources

Use these links when an AI agent, crawler, or script needs clean context instead of reading the full page.

Markdown detail GET /skills/sickn33-tailwind-design-system.md Signed manifest GET /api/skills/sickn33-tailwind-design-system/manifest Signed lockfile GET /api/skills/sickn33-tailwind-design-system/lockfile

Test it

Using "tailwind-design-system". Create color tokens for light and dark themes.

Expected outcome:

A semantic token plan covering background, foreground, primary, muted, destructive, border, and focus-ring roles for both themes.

Using "tailwind-design-system". Standardize our button styles.

Expected outcome:

A typed button specification with visual variants, size variants, default values, focus behavior, disabled behavior, and composition guidance.

Using "tailwind-design-system". Audit our login form component.

Expected outcome:

An accessibility review covering labels, input identifiers, validation messages, ARIA relationships, keyboard focus, and recommended verification steps.

Security Audit

Safe
v5 • 9/6/2026 Open versioned report

All nine static findings are false positives caused by TypeScript syntax, Markdown backticks, and ordinary design-system examples. No executable shell behavior, system reconnaissance, prompt injection, exfiltration intent, or other semantic security risk was found.

2
Files scanned
708
Lines analyzed
0
Review items
0
False positives ignored

Risk Factors

⚙️ External commands (4)
resources/implementation-playbook.md:310-315 resources/implementation-playbook.md:315-381 SKILL.md:32 SKILL.md:36
No confirmed security findings were detected by the latest completed static and semantic audit. This does not prove the skill has no side effects.
Audited by: codex View Audit History →
Share & cite this report

Share the versioned assessment report, neutral badge, embed card, and citations. Skillstore reports evidence without deciding whether this Skill is safe.

Open versioned report
Security Assessment

Copy report link

https://skillstore.io/skills/sickn33-tailwind-design-system/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown badge

[![Skillstore security assessment](https://skillstore.io/badges/skills/sickn33-tailwind-design-system/security.svg)](https://skillstore.io/skills/sickn33-tailwind-design-system?utm_source=security_passport_badge)

HTML badge

<a href="https://skillstore.io/skills/sickn33-tailwind-design-system?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/sickn33-tailwind-design-system/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

Embed card

<iframe src="https://skillstore.io/embed/skills/sickn33-tailwind-design-system.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>
Academic citations (APA · BibTeX · CFF)

APA citation

sickn33. (2026). tailwind-design-system security audit report (audit version 5) [Author version unspecified]. Skillstore. https://skillstore.io/skills/sickn33-tailwind-design-system/audits/5

BibTeX citation

@techreport{sickn33-sickn33-tailwind-design-system-2026, author = {sickn33}, title = {tailwind-design-system security audit report (audit version 5)}, institution = {Skillstore}, year = {2026}, number = {5}, url = {https://skillstore.io/skills/sickn33-tailwind-design-system/audits/5}, note = {Author version unspecified} }

CITATION.cff

cff-version: 1.2.0 message: "If you use this Skill, cite its author and this versioned security audit report." title: "tailwind-design-system security audit report (audit version 5)" version: "unspecified" type: report authors: - name: "sickn33" date-released: "2026-09-06" url: "https://skillstore.io/skills/sickn33-tailwind-design-system/audits/5" identifiers: - type: other value: "skillstore:sickn33-tailwind-design-system:audit:5" description: "Skillstore immutable audit report identifier"

Compare variants

2 installable variants

Each author remains a separate installable skill. The recommended variant is ranked by Skillstore evidence.

Why this variant is first

Highest Skillstore Score
sickn33 Recommended Current

sickn33-tailwind-design-system

Skillstore Score 78
Evidence Confidence High
Skillstore usage 20
Updated

2026-09-09

wshobson

wshobson-tailwind-design-system

Skillstore Score 77
Evidence Confidence High
Skillstore usage 20
Updated

2026-09-09

Skillstore Score

Why this score Evidence Confidence: High
55
Architecture
85
Maintainability
87
Content
69
Community
83
Spec Compliance

What You Can Build

Create a component foundation

Define semantic tokens and reusable component variants for a new React application.

Standardize an existing interface

Replace inconsistent utility combinations with shared buttons, cards, forms, grids, and theme patterns.

Improve accessible theming

Add focus states, form feedback, dark mode, and system theme detection to a product interface.

Try These Prompts

Define design tokens 
Create semantic Tailwind color and radius tokens for my React project. Include light and dark CSS variables.
Build a component variant 
Create a typed Tailwind button with default, destructive, outline, and icon variants. Include accessible focus and disabled states.
Standardize existing components 
Review these React components and propose shared tokens, CVA variants, and compound component boundaries. Preserve current behavior and identify accessibility gaps.
Plan a complete system 
Design a Tailwind system for this application. Cover tokens, responsive layouts, component variants, forms, dark mode, accessibility, testing, and migration steps.

Best Practices

  • Use semantic CSS variables so components remain independent from specific palette values.
  • Compose typed variants and forward references to support consistent reuse.
  • Test keyboard focus, validation feedback, responsive layouts, and every supported theme.

Avoid

  • Do not hardcode palette values inside reusable components.
  • Do not rely on arbitrary utility values when stable theme tokens are appropriate.
  • Do not ship components without focus states or accessible names.

Frequently Asked Questions

Which frameworks does this skill target?
The examples primarily target React and TypeScript projects using Tailwind CSS.
Does it support dark mode?
Yes. It documents CSS variable themes, system preference detection, local persistence, and a theme toggle.
Does it install dependencies?
No. You must install and configure Tailwind, CVA, Radix, Lucide, and other selected packages.
Can it improve an existing component library?
Yes. It can identify shared tokens, variants, composition patterns, and accessibility improvements for existing React components.
Does it guarantee accessibility compliance?
No. It provides accessible patterns, but the finished interface still requires keyboard, screen reader, contrast, and browser testing.
Can it migrate a project automatically?
No. It can propose migration steps and component changes, but implementation and validation remain project-specific.

Developer Details

Author

sickn33

License

MIT

Skillstore revision

r2

Version notice

The author did not declare a version.

Repository

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/tailwind-design-system

Ref

ae6ba0f1a47f0b4427a656b2202f2ff34bfea6be

Maintenance freshness

9/6/2026

Usage

19 downloads · 126 views

File structure

📁 resources/

📄 implementation-playbook.md

📄 SKILL.md