Tailwind V4 Shadcn
ever-works/ever-works
Production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React.
Generate a complete, accessibility-checked design system from scratch — colour ramps, type scale, spacing, elevation, and exports for CSS, Tailwind, design tokens, Figma, VS Code and PowerPoint.
Install Design System Generate
$ npx skills add mohitagw15856/pm-claude-skills --skill design-system-generate -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install mohitagw15856/pm-claude-skills design-system-generate --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/mohitagw15856/pm-claude-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/design-system-generate .claude/skills/design-system-generate && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "design-system-generate" agent skill from https://github.com/mohitagw15856/pm-claude-skills/tree/main/skills/design-system-generate into .claude/skills/design-system-generate/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-system-generate", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/mohitagw15856/pm-claude-skills/tree/main/skills/design-system-generateType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add mohitagw15856/pm-claude-skills --skill design-system-generate -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install mohitagw15856/pm-claude-skills design-system-generate --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/mohitagw15856/pm-claude-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/design-system-generate .agents/skills/design-system-generate && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "design-system-generate" agent skill from https://github.com/mohitagw15856/pm-claude-skills/tree/main/skills/design-system-generate into .agents/skills/design-system-generate/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-system-generate", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add mohitagw15856/pm-claude-skills --skill design-system-generate -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install mohitagw15856/pm-claude-skills design-system-generate --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/mohitagw15856/pm-claude-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/design-system-generate .cursor/skills/design-system-generate && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "design-system-generate" agent skill from https://github.com/mohitagw15856/pm-claude-skills/tree/main/skills/design-system-generate into .cursor/skills/design-system-generate/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-system-generate", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/mohitagw15856/pm-claude-skills.git --path skills/design-system-generate--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add mohitagw15856/pm-claude-skills --skill design-system-generate -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install mohitagw15856/pm-claude-skills design-system-generate --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/mohitagw15856/pm-claude-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/design-system-generate .gemini/skills/design-system-generate && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "design-system-generate" agent skill from https://github.com/mohitagw15856/pm-claude-skills/tree/main/skills/design-system-generate into .gemini/skills/design-system-generate/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-system-generate", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install mohitagw15856/pm-claude-skills design-system-generateInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add mohitagw15856/pm-claude-skills --skill design-system-generate -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/mohitagw15856/pm-claude-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/design-system-generate .github/skills/design-system-generate && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "design-system-generate" agent skill from https://github.com/mohitagw15856/pm-claude-skills/tree/main/skills/design-system-generate into .github/skills/design-system-generate/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-system-generate", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add mohitagw15856/pm-claude-skills --skill design-system-generate -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install mohitagw15856/pm-claude-skills design-system-generate --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/mohitagw15856/pm-claude-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/design-system-generate .opencode/skills/design-system-generate && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "design-system-generate" agent skill from https://github.com/mohitagw15856/pm-claude-skills/tree/main/skills/design-system-generate into .opencode/skills/design-system-generate/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-system-generate", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
design-system-generate- GitHub stars
- 1.4k
- Token cost
- ~1.7k tokens
- SKILL.md length
- 860 words
- Files
- 1
- Skills in repo
- 1,348
- Repo updated
- First seen
- Licence
- MIT
At a glance
Generate a complete, accessibility-checked design system from scratch — colour ramps, type scale, spacing, elevation, and exports for CSS, Tailwind, design tokens, Figma, VS Code and PowerPoint.
- Works in 5 steps: Start from the constraint, not the… → Let the text colour be derived, never… → Check it against the three things nobody… → …
- Asked to create a design system
- SKILL.md covers Required Inputs, Programmatic Helper, The Method and Output Structure, plus 9 more sections
- Calls npx
What it does
Design System Generate is an agent skill from mohitagw15856/pm-claude-skills. Generate a complete, accessibility-checked design system from scratch — colour ramps, type scale, spacing, elevation, and exports for CSS, Tailwind, design tokens, Figma, VS Code and PowerPoint. Use when asked to create a design system, pick a colour palette, build a starter theme, produce design tokens for a new product, or apply an existing brand colour to a full system. For auditing a system that already exists use design-system-audit; for extracting one from a live site use brand-guidelines.
Its SKILL.md is about 1.7k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Frontend & Design, covering Design systems, Design tokens and CSS and styling. It works with Figma, Visual Studio Code, Tailwind CSS and Microsoft PowerPoint. The repository describes itself as: 1255 professional Agent Skills for Claude, ChatGPT, Gemini, Cursor & Codex — PRDs, postmortems, leases, medical bills, layoffs, go-bags, new countries. Plain markdown, MIT, in… The licence is MIT.
When your agent uses it
- Asked to create a design system
- Pick a colour palette
- Build a starter theme
- Produce design tokens for a new product
Example prompts
- “/design-system-generate”
Requirements
- Node.js
Workflow steps
5 steps, taken from the first numbered list in SKILL.md.
- Start from the constraint, not the palette. If there is a mandated brand
- Let the text colour be derived, never chosen. The generator picks each
- Check it against the three things nobody checks. Colour-blind collisions
- Ship the audit with the tokens. A design system without a contrast report
- Say what was decided and why. Record the seed and the flags. `npx notugly
What it can do on your machine
Read from SKILL.md and the folder at commit 1cbf1f0. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
npx
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use npx, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Design System Generate loads about 1.7k tokens when it runs. Until then it costs about 131 tokens; SKILL.md has 860 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from mohitagw15856/pm-claude-skills at commit 1cbf1f0, republished under its MIT licence (© mohitagw15856). 860 words, ~1,685 tokens.
Download SKILL.mdSave it as
.claude/skills/design-system-generate/SKILL.md (or your agent's skills folder).- name
- design-system-generate
- description
- Generate a complete, accessibility-checked design system from scratch — colour ramps, type scale, spacing, elevation, and exports for CSS, Tailwind, design tokens, Figma, VS Code and PowerPoint. Use when asked to create a design system, pick a colour palette, build a starter theme, produce design tokens for a new product, or apply an existing brand colour to a full system. For auditing a system that already exists use design-system-audit; for extracting one from a live site use brand-guidelines.
Design System Generate Skill
There is a skill for auditing a design system that exists and a skill for extracting one from a brand that exists. This one is for the case in between: there is no system, and something ships on Thursday.
The output is not a mood board. It is a set of files an engineer can commit, with a contrast audit attached to them.
Required Inputs
Ask for these if not provided:
- A name or seed — anything; the product name works. The same seed always produces the same system, so this is how a design becomes reproducible.
- A brand colour, if one is non-negotiable (
#E4002Band so on). If there isn't one yet, say so and let it choose. - Light, dark, or both — default to both.
- A feeling, loosely: editorial, brutalist, glassy, terminal, or playful. If the user describes it in their own words, map it to the nearest.
- Where it has to land — CSS variables, Tailwind, design tokens, Figma, a VS Code theme, a deck theme, Storybook. Default to CSS + tokens.
Programmatic Helper
This skill is a thin wrapper around a deterministic generator. Do not invent hex values — run it.
# Look at one first
npx --yes notugly <seed> --vibe editorial
# Lock a brand colour that is not up for discussion
npx --yes notugly <seed> --brand "#e4002b"
# Write the files
npx --yes notugly export <seed> --brand "#e4002b" --out ./design
npx --yes notugly slides <seed> --out ./deck # .thmx for PowerPoint/Keynote
npx --yes notugly storybook <seed> --out ./stories
# Prove the claim rather than making it
npx --yes notugly audit <seed> --brand "#e4002b"
npx --yes notugly vision <seed> # colour-blind collisions
npx --yes notugly print <seed> # what survives CMYKexport writes ten files: CSS custom properties, a Tailwind config, W3C design
tokens, React and Svelte snippets, a demo page, a loadable Figma plugin, and a
VS Code theme. Runtime cost is zero — it is all static text, so there is no
package to install and nothing to break at 3am.
Zero dependencies and no model call, so it is free to run and gives the same answer every time.
The Method
Start from the constraint, not the palette. If there is a mandated brand colour, pass it to
--brandand build everything else around it. Generating a lovely system and then discovering it cannot accommodate the company red is the most common way this work gets thrown away.Let the text colour be derived, never chosen. The generator picks each text colour from its background so that no combination can fail. If you find yourself hand-picking a hex for body copy, you have left the system.
Check it against the three things nobody checks. Colour-blind collisions (
vision), the CMYK gamut if anything will be printed (print), and the chart accents if it will ever be a deck (slideswarns when two chart series are indistinguishable).Ship the audit with the tokens. A design system without a contrast report is a claim. Paste the
auditoutput into the handoff.Say what was decided and why. Record the seed and the flags.
npx notugly <seed> --vibe <vibe>reproduces the whole thing exactly, which means the design is a one-line command rather than a folder somebody has to keep.
Output Structure
Design System: [Product Name]
Seed: [seed] · Vibe: [vibe] · Brand locked: [hex or "no"]
Reproduce: npx notugly [seed] --vibe [vibe] [--brand #hex]
Palette
| Role | Colour | Hex | Name | On background | Verdict |
|---|---|---|---|---|---|
| Background | ▪ | #ffffff | Paper | — | — |
| Body text | ▪ | #020404 | Soot | 20.55:1 | AAA |
| Brand | ▪ | #004054 | Navy | 11.28:1 | AAA |
Every ratio above is computed, not estimated.
Type
Headings: [family] · Body: [family] · Scale: [ratio] ([name]) [The size ladder, in px.]
Show full SKILL.md (339 more words)Show less
Spacing, radius, elevation
[The 4px grid, the radius set, and the five elevation levels.]
What was checked
- Every text pairing clears WCAG AA — weakest: X:1
- No two colours merge under any simulated colour vision deficiency
- Every colour is inside the CMYK gamut (if printing)
- All six chart accents are distinguishable (if there will be decks)
Files produced
[The list from export, with byte counts, and the runtime cost line.]
Open decisions for a human
[Anything the generator cannot decide: illustration style, photography direction, motion beyond the presets, iconography.]
Quality Checks
- Did you run it, or describe it? Every hex in the output must come from the tool. A plausible palette written by hand is exactly what this skill exists to replace.
- Is the seed recorded? Without it the design is not reproducible and the next person starts over.
- Did the brand colour survive? If the user gave one,
--brandmust be in the reproduce command. - Is the audit attached? Not "it meets AA" — the actual ratios.
- Are the open decisions listed? A generator cannot choose an illustration style. Pretending otherwise is how these documents lose credibility.
Anti-Patterns
- Inventing hex values. The whole point is that these are computed.
- Claiming AA without a number. "Accessible" is a marketing word; "4.52:1" is a fact.
- Generating a system when one already exists. If the product has a design
system, use [[design-system-audit]]. If it has a brand but no system, use
[[brand-guidelines]] to extract first, then pass the result in via
--brand. - Shipping the light theme only. Dark mode is where elevation and contrast break, and it is cheaper to check now than to retrofit.
- Treating the vibe as the deliverable. The vibe is a starting point. The deliverable is the token file and the audit.
Example Trigger Phrases
- "We need a design system by Thursday"
- "Pick a colour palette for [product]"
- "Build a starter theme around our brand red"
- "Generate design tokens for the new app"
- "Give me a Tailwind config that passes accessibility"
- "Make a deck theme that matches our product"
© mohitagw15856, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in skills/design-system-generate of mohitagw15856/pm-claude-skills.
Open the folder on GitHubat commit 1cbf1f0
Compare with similar skills
Design System Generate next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Design System Generate this skillmohitagw15856/pm-claude-skills | 1.4k | — | ~1.7k | Automated safety check: Pass | MIT | |
| Tailwind V4 Shadcnever-works/ever-works | 162 | 2 repos | ~3.8k | Automated safety check: Pass | MIT | |
| Refactoring UIwondelai/skills | 2.4k | — | ~3.9k | Automated safety check: Pass | MIT | |
| Scalar Design Systemscalar/scalar | 16k | — | ~2.7k | Automated safety check: Pass | MIT | |
| Extract DesignManavarya09/design-extract | 4.2k | — | ~786 | Automated safety check: Notes | MIT | |
| Tailwind CSS Patternsever-works/ever-works | 162 | 3 repos | ~1.6k | Automated safety check: Notes | AGPL-3.0 |
Similar skills
Refactoring UI
wondelai/skills
Audit and fix visual hierarchy, spacing, color, and depth in web UIs.
Scalar Design System
scalar/scalar
Scalar's design system — design tokens, theming (@scalar/themes), CSS variables, and the @scalar/components library.
Extract Design
Manavarya09/design-extract
Extract the full design language from any website URL. An agent skill from Manavarya09/design-extract.
Tailwind CSS Patterns
ever-works/ever-works
Provides comprehensive Tailwind CSS utility-first styling patterns including responsive design, layout utilities, flexbox, grid, spacing, typography, colors, and modern CSS best practices.
Bryl Minimal Design
bryllim/bryl-minimal-design
Apply the bryl-minimal design language — a monochrome, typography-driven minimal aesthetic with halftone dot textures, pixel-font display headings, tiny uppercase monospace labels, soft large-radius…
More from mohitagw15856/pm-claude-skills
All 1,348 skills in this repoCar Tco
mohitagw15856/pm-claude-skills
Compare the total cost of car ownership across buy-new, buy-used, lease, and keep-your-current-car — depreciation, insurance, maintenance ramp, and fuel over a real horizon, not just the monthly…
Cs Health Scorecard
mohitagw15856/pm-claude-skills
Build a customer health scorecard for a specific account. An agent skill from mohitagw15856/pm-claude-skills.
Exit Waterfall
mohitagw15856/pm-claude-skills
Compute who gets what at each exit price from a cap table — liquidation preferences, conversion points, and where the founders' share collapses.
Feature Prioritisation
mohitagw15856/pm-claude-skills
Apply prioritisation frameworks (RICE, MoSCoW, Kano, ICE, Opportunity Scoring) to rank features and backlog items.
Fire Number
mohitagw15856/pm-claude-skills
Compute a financial-independence (FIRE) target and years-to-reach with every assumption labeled as an assumption — plus a sensitivity table instead of a single false-precision answer.
Freelance Rate
mohitagw15856/pm-claude-skills
Derive a freelance day/hourly rate backwards from target income, honest billable utilization, overhead, and the self-employment tax premium — the arithmetic that proves a rate is not salary÷2000.
Related
Categories
Questions about Design System Generate
What does Design System Generate do?
Generate a complete, accessibility-checked design system from scratch — colour ramps, type scale, spacing, elevation, and exports for CSS, Tailwind, design tokens, Figma, VS Code and PowerPoint. Design System Generate is an agent skill from mohitagw15856/pm-claude-skills. Generate a complete, accessibility-checked design system from scratch — colour ramps, type scale, spacing, elevation, and exports for CSS, Tailwind, design tokens, Figma, VS Code and PowerPoint.
When should I use Design System Generate?
Design System Generate fits situations like: asked to create a design system; pick a colour palette; build a starter theme; produce design tokens for a new product.
How do I install Design System Generate in Claude Code?
Run `npx skills add mohitagw15856/pm-claude-skills --skill design-system-generate -a claude-code`. Or copy the skill folder (skills/design-system-generate in mohitagw15856/pm-claude-skills) into .claude/skills/design-system-generate in your project. Claude Code loads it when a task matches its description.
How do I install Design System Generate in Codex?
Run `npx skills add mohitagw15856/pm-claude-skills --skill design-system-generate -a codex`. Or copy the skill folder (skills/design-system-generate in mohitagw15856/pm-claude-skills) into .agents/skills/design-system-generate in your project. Codex loads it when a task matches its description.
Can I use Design System Generate in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add mohitagw15856/pm-claude-skills --skill design-system-generate -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/design-system-generate, .gemini/skills/design-system-generate, .github/skills/design-system-generate and .opencode/skills/design-system-generate in your project.
What does Design System Generate need to run?
Going by SKILL.md and its folder, Design System Generate needs the command-line tools its instructions call (npx). Our summary lists: Node.js.
Does Design System Generate access the network?
SKILL.md contains no URLs. Its commands use npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.
Is Design System Generate safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Design System Generate use?
Design System Generate is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Design System Generate use?
About 1.7k tokens (SKILL.md is roughly 6.7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Design System Generate?
Skills that share tags, products or a category with Design System Generate: Tailwind V4 Shadcn (ever-works/ever-works, 162 stars), Refactoring UI (wondelai/skills, 2.4k stars), Scalar Design System (scalar/scalar, 16k stars) and Extract Design (Manavarya09/design-extract, 4.2k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Design System Generate?
mohitagw15856 (a GitHub user) maintains it in mohitagw15856/pm-claude-skills, which has 1,434 GitHub stars. The repository holds 1,348 skills in this directory. The repository was last updated on October 9, 2026.
Source: mohitagw15856/pm-claude-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.