Agent skills that build with real Tailwind sections
Five free skills that teach Claude Code, Codex, Cursor and other coding agents to write your DESIGN.md, build landing pages from tested sections, audit a launch and make the share image. One command installs each one.
- Claude Code
- Codex
- Gemini CLI
- Cursor
- OpenCode
- Grok
Skills
DESIGN.md Extractor
Better with MCPYour repo or live site, written down as a lint-clean DESIGN.md, then exported as a Tailwind or shadcn theme.
8 FILES · 60 KBLanding Page Builder
Needs MCPA brief in, a landing page out, built from real Tailwind sections restyled with your DESIGN.md.
4 FILES · 8.0 KBLaunch Audit
Better with MCPFinds what makes a launch look broken, fixes it in your code, then plans launch day.
4 FILES · 17 KBOG Image Generator
MCP optionalA 1200x630 share image in your brand colours and fonts, rendered to PNG, with the meta tags set.
4 FILES · 18 KBCopy Pass
MCP optionalStrips generic AI phrasing from landing-page copy against a fixed checklist and keeps every fact.
5 FILES · 14 KB- TAILKITS MCP · FREE · NO ACCOUNT
Works best with the free MCP
Real section code restyled with your DESIGN.md, linting, theme export and launch audits. Code, not screenshots.
Other agents and the tool listclaude mcp add --transport http tailkits https://tailkits.com/mcp
All five, one line
Pick your agent, paste the command in a terminal, then ask. Or open a skill above to install just that one.
mkdir -p ~/.claude/skills && curl -fsSL https://tailkits.com/skills/all.tar.gz | tar -xz -C ~/.claude/skillsInstalls into ~/.claude/skills. For one project only, use .claude/skills instead. Then start a new Claude Code session and ask. Claude Code skills docs
mkdir -p ~/.agents/skills && curl -fsSL https://tailkits.com/skills/all.tar.gz | tar -xz -C ~/.agents/skillsInstalls into ~/.agents/skills. For one project only, use .agents/skills instead. Codex reads skills from ~/.agents/skills. Start a new session and ask. Codex skills docs
mkdir -p ~/.gemini/skills && curl -fsSL https://tailkits.com/skills/all.tar.gz | tar -xz -C ~/.gemini/skillsInstalls into ~/.gemini/skills. For one project only, use .gemini/skills instead. Project skills load only in a trusted folder. Start a new session and ask. Gemini CLI skills docs
mkdir -p ~/.cursor/skills && curl -fsSL https://tailkits.com/skills/all.tar.gz | tar -xz -C ~/.cursor/skillsInstalls into ~/.cursor/skills. For one project only, use .cursor/skills instead. Cursor also reads ~/.claude/skills, so one install can serve both. Cursor skills docs
mkdir -p ~/.config/opencode/skills && curl -fsSL https://tailkits.com/skills/all.tar.gz | tar -xz -C ~/.config/opencode/skillsInstalls into ~/.config/opencode/skills. For one project only, use .opencode/skills instead. OpenCode also reads ~/.claude/skills and ~/.agents/skills. OpenCode skills docs
mkdir -p ~/.grok/skills && curl -fsSL https://tailkits.com/skills/all.tar.gz | tar -xz -C ~/.grok/skillsInstalls into ~/.grok/skills. For one project only, use .grok/skills instead. Grok also picks up skills installed for Claude Code. Grok skills docs
- 1Pick a skill, or all of them
- 2Paste the install command
- 3Ask your agent in plain words
Where each agent looks for skills
| Agent | Your user | One project | Docs |
|---|---|---|---|
| Claude Code | ~/.claude/skills | .claude/skills | Docs |
| Codex | ~/.agents/skills | .agents/skills | Docs |
| Gemini CLI | ~/.gemini/skills | .gemini/skills | Docs |
| Cursor | ~/.cursor/skills | .cursor/skills | Docs |
| OpenCode | ~/.config/opencode/skills | .opencode/skills | Docs |
| Grok | ~/.grok/skills | .grok/skills | Docs |
Checked against each agent's documentation in October 2026. Codex, Gemini CLI, Cursor, OpenCode and Grok also read ~/.agents/skills; Cursor, OpenCode and Grok also read ~/.claude/skills.
Agent skills that build with real sections
Most landing-page skills tell an agent how to write markup from scratch. These skills point the agent at the free Tailkits MCP server, which returns real, tested Tailwind section code and restyles it with your DESIGN.md. The agent spends its effort on your content instead of reinventing a pricing table.
What each skill does
| Skill | Use it to | MCP |
|---|---|---|
| DESIGN.md Extractor | Your repo or live site, written down as a lint-clean DESIGN.md, then exported as a Tailwind or shadcn theme. | Better with MCP |
| Landing Page Builder | A brief in, a landing page out, built from real Tailwind sections restyled with your DESIGN.md. | Needs MCP |
| Launch Audit | Finds what makes a launch look broken, fixes it in your code, then plans launch day. | Better with MCP |
| OG Image Generator | A 1200x630 share image in your brand colours and fonts, rendered to PNG, with the meta tags set. | MCP optional |
| Copy Pass | Strips generic AI phrasing from landing-page copy against a fixed checklist and keeps every fact. | MCP optional |
Install in one line
Each skill is a .tar.gz of one folder. The install command creates your agent's skills folder and unpacks the skill into it, for example mkdir -p ~/.claude/skills && curl -fsSL https://tailkits.com/skills/tailkits-design-md.tar.gz | tar -xz -C ~/.claude/skills. Use the project folder instead (such as .claude/skills) to share a skill with your team through git. The list of skills, files and commands is also available as JSON at /skills/index.json.
Frequently asked questions
Answers to common questions about Tailkits agent skills.
What is an agent skill?
A skill is a folder with a SKILL.md file: a name, a description that tells the agent when to use it, and step-by-step instructions, plus optional scripts and reference files. The format is the open Agent Skills standard (agentskills.io). Agents load only the name and description until a request matches, then read the rest, so installed skills cost almost nothing until they are used.
Which coding agents can use these skills?
Claude Code, Codex, Gemini CLI, Cursor, OpenCode and Grok all load Agent Skills from a skills folder. The install tabs use each agent's documented folder: Claude Code ~/.claude/skills, Codex ~/.agents/skills, Gemini CLI ~/.gemini/skills, Cursor ~/.cursor/skills, OpenCode ~/.config/opencode/skills, Grok ~/.grok/skills. Codex, Gemini CLI, Cursor, OpenCode and Grok also read ~/.agents/skills.
Do I need the Tailkits MCP server?
Only the landing page skill needs it, because it fetches section code from it. The DESIGN.md, launch audit, OG image and copy skills run on their own, with plain Node scripts; the free MCP makes them better (linting, theme export, restyled sections, the full launch audit). The MCP needs no account: claude mcp add --transport http tailkits https://tailkits.com/mcp.
Are the skills free? What is the license?
Yes. Every skill is MIT licensed, with the license file inside the download. Use them, change them and ship them in your own projects. Free Tailkits UI sections return code without an account; Pro sections need a Tailkits UI token.
Is it safe to run the scripts?
The scripts are short, readable Node files with no dependencies, and you can read them before running anything: download the archive, open it, then install. They never execute your project's code (the Tailwind config is read as text), never send your files anywhere, and only fetch the URLs you give them.
How do I update or remove a skill?
Run the install command again to update: it overwrites the folder. To remove a skill, delete its folder, for example rm -rf ~/.claude/skills/tailkits-design-md.