AgentStack
Sign in Publish
MCP servers Skills Toolkits Why AgentStack Sell Docs
Sign in
SKILL verified MIT Self-run

Generate Tailwind

skill-realmpastai-web-claude-design-suite-generate-tailwind · by realmpastai-web

Convert a DESIGN.md (or generated W3C tokens.json) into a tailwind.config.js (or .ts) with colors, fontFamily, fontSize, spacing, borderRadius, boxShadow, and screens. Use when a team is starting a Tailwind-based project and wants a typed config pre-wired to their brand.

↗ Repository
— No reviews yet
0 installs
9 views
0.0% view→install

Install

$ agentstack add skill-realmpastai-web-claude-design-suite-generate-tailwind

✓ scanned · ✓ verified — works with Claude Code, Cursor, and more.

Security review

✓ Passed

No issues found. Passed automated security review. · v0.1.0 How review works →

  • ✓ Prompt-injection patterns
  • ✓ Secret / credential exfiltration
  • ✓ Dangerous shell & filesystem operations
  • ✓ Untrusted network calls
  • ✓ Known-malicious package signatures

What it can access

  • ✓ Network access No
  • ✓ Filesystem access No
  • ✓ Shell / process execution No
  • ✓ Environment & secrets No
  • ✓ Dynamic code execution No

From automated source analysis of v0.1.0. “Used” means the capability is present in the source — more access means more to trust, not that it’s unsafe.

Are you the author of Generate Tailwind? Claim this listing to set pricing, connect Stripe payouts, and keep 70% of every sale.
Sign up to claim

About

Generate Tailwind

Context

You are emitting a tailwind.config.js (or .ts) for a project based on $ARGUMENTS (DESIGN.md path or "current").

Domain Context

  • Tailwind's theme.extend keeps defaults intact; use it instead of replacing theme wholesale unless the brand truly rejects Tailwind's defaults.
  • Color keys in Tailwind map to utility classes: brand-500 → bg-brand-500. Use 50–950 numbered scales for continuity with Tailwind defaults.
  • Font + size scales must align with the modular scale chosen in pair-fonts.

Instructions

  1. Read source DESIGN.md (or tokens/tokens.json).
  2. Run:

``bash python scripts/generate_tokens.py --out tailwind.config.ts --format tailwind ``

  1. The script emits a typed Tailwind config with:
  • colors.brand (50–950 scale, derived from primary)
  • colors.accent, colors.muted, etc. for shadcn-compatible roles
  • fontFamily.sans / display / mono
  • fontSize with the chosen modular scale
  • spacing (keeps Tailwind defaults, adds custom stops if DESIGN.md specifies)
  • borderRadius (sm / md / lg / xl / full)
  • boxShadow (sm / md / lg with brand-tinted variants)
  • screens (mobile / tablet / desktop / wide)
  1. Summarize additions to the default Tailwind theme and point out any overrides (not just extensions).
  2. If the project already has a tailwind.config.ts, offer a diff-mode that merges instead of overwrites.

Further Reading

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

Install and usage instructions live in the source repository linked above.

Reviews

No reviews yet — be the first.

Write a review

Versions

  • v0.1.0 Imported from the upstream source.

More in Agent Skills