Design & UX Skill
Accessibility Compliance
Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns…
$15
Tailwind Design System
Build scalable design systems with Tailwind CSS, design tokens, component libraries, and…
Build a production-ready design system with Tailwind CSS, design tokens and a typed component library. It enforces a three-tier token hierarchy, brand to semantic to component, so a brand color change is a single line that updates hundreds of components instead of a 200-file find-and-replace. CSS variables drive theming and dark mode, and class-variance-authority gives type-safe variants with no exponential component count.
$15 one-time
Add to a kit → Prices include 20% VAT. · Forged on real agency work · one-time, no lock-in
- Type Skill
- Category Design & UX
- Delivery Email · instant
- License One-time
Inside the run · no black box
See the actual work before you buy it.
When components only touch semantic tokens, a full rebrand is one line of CSS. That is the architecture this skill builds: three token tiers, CVA variants, compound components, and a dark mode that costs zero per-component changes.
- Defines the three-tier token hierarchy first: brand values become CSS variables in :root, semantic tokens (primary, destructive, muted) reference them, and components only ever touch the semantic layer, so a brand color swap is one line, not 200 files
- Writes the Tailwind config so every color resolves through hsl(var(--token)), with a matching .dark block overriding the same variables, meaning dark mode costs zero per-component changes
- Builds each component as a CVA definition: base classes, then variant and size maps with defaultVariants, so primary/lg and ghost/sm all compose from one declaration instead of exploding into separate components
- Composes compound components (Card, CardHeader, CardTitle) with forwardRef and a cn() merge utility, so consumers can override classes without breaking the system
- Wires runtime theming: a ThemeProvider reads localStorage, resolves the system preference, toggles the .dark class on html, and every bg-background component adapts instantly
- Enforces the constraint set throughout: 8pt spacing grid, semantic names instead of raw hex, focus-visible rings and disabled states on every interactive variant, no arbitrary pixel values
One power source. 6 lines out.
tailwind-design-system · core
core active · 6 lines
- ✓ creating a component lib…
Creating a component library with Tailwind and typed variants
- ✓ implementing design tokens
Implementing design tokens, semantic colors and dark mode
- ✓ building responsive, acc…
Building responsive, accessible components with proper focus states
- ✓ standardizing ui patterns
Standardizing UI patterns across a codebase
- ✓ setting up cva-based but…
Setting up CVA-based button, card, input and grid primitives
- ✓ adding a theme provider
Adding a theme provider with localStorage persistence and system preference
Yours to keep.
Drag time forward. Watch what stays.
Forever
That's what owning means.
The rented stack
ai writing tool: subscription
expired · access lostanalytics suite: subscription
expired · access lostdesign platform: subscription
expired · access lost(nothing left)
Your forge
-
Change a brand color in one line and watch every component update
license: perpetual -
Adapt to dark mode with zero per-component edits via CSS variables
license: perpetual -
Generate every variant combination from a single typed definition
license: perpetual -
Keep the CSS bundle lean with semantic tokens instead of arbitrary values
license: perpetual
subscriptions expire · deeds don't
Everything in the box.
Pick a piece up. Watch it work.
A ready tailwind.config and globals.css with light/dark CSS-variable token sets
6 parts · one working system · ships instantly by email
This wasn't forged for everyone.
- Not for you if you'd rather rent a tool than own one.
- Not for you if you want someone else to run your stack.
- Not for you if you're happy guessing.
Frontend teams building or standardizing a Tailwind component library who want token-driven theming and type-safe variants.
then this was forged for you.Works with
Universal by design: these run in any AI. Delivered in the open Agent Skills + MCP format (native in Claude); ChatGPT, Gemini, Cursor and Copilot adapt the same files their own way.
- Claude Native format
- ChatGPT Adapts via open standards
- Gemini Adapts via open standards
- Cursor Adapts via open standards
- Copilot Adapts via open standards
Catch what's on your mind.
the air is clear. nothing between you and the forge.
catch a spark: the forge will answer
-
We have a large existing Tailwind codebase. Is this only useful for greenfield projects?
No, standardizing UI patterns across an existing codebase is a listed use case. The token system adopts incrementally: drop in the tailwind.config and globals.css with the CSS-variable token sets first, then migrate components to semantic tokens and CVA variants as you touch them, no big-bang rewrite required.
-
Why bother with a token hierarchy when I can just use Tailwind classes directly?
Because arbitrary values do not scale: a brand color change becomes a 200-file find-and-replace. The three-tier hierarchy, brand to semantic to component, makes that change a single line, CSS variables give you dark mode with zero per-component edits, and class-variance-authority generates every variant combination from one typed definition.
-
Is this a complete component suite like MUI or Ant Design?
No. It ships primitives, CVA buttons, compound Cards, accessible forms, a responsive Grid, a Radix-based dialog pattern, plus the token and theming foundation to build the rest yourself. It is a system you own and extend, not a finished UI kit you adopt wholesale.
-
How is it delivered?
By email right after purchase: ready to run, downloaded instantly, no setup wait.
-
One-time or subscription?
A one-time purchase; no subscription or hidden fees. VAT (20%) is included.
-
Can I get a refund?
As a digital product, it can’t be refunded once downloaded. That’s why we show exactly what’s inside and who it’s for, right here.