Preline UI
Preline UI skills for agents: assemble Tailwind CSS component interfaces and generate themes from tokens
Low risk
We rate an entry low when it mostly gives the agent instructions and reference material.
Why this level
- The skills provide methodology and references for assembling interfaces
Install
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/preline-uiDetects the agents on your machine, checks the risk and pins the version.
Other ways to install
Assembled automatically, review before installing.
Run in a terminal in the project folder
npx skills add htmlstreamofficial/preline --skill preline-mcp theme-generator -a claude-code -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit 05ca599
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/htmlstreamofficial/preline.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/preline-mcp/ /skills/theme-generator/
git -C "$tmp" checkout 05ca59998db345cfede649b00093032409b37f25
mkdir -p .claude/skills
cp -R "$tmp/skills/preline-mcp" .claude/skills/preline-mcp
cp -R "$tmp/skills/theme-generator" .claude/skills/theme-generatorCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add htmlstreamofficial/preline --skill preline-mcp theme-generator -a cursor -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit 05ca599
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/htmlstreamofficial/preline.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/preline-mcp/ /skills/theme-generator/
git -C "$tmp" checkout 05ca59998db345cfede649b00093032409b37f25
mkdir -p .agents/skills
cp -R "$tmp/skills/preline-mcp" .agents/skills/preline-mcp
cp -R "$tmp/skills/theme-generator" .agents/skills/theme-generatorCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add htmlstreamofficial/preline --skill preline-mcp theme-generator -a github-copilot -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit 05ca599
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/htmlstreamofficial/preline.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/preline-mcp/ /skills/theme-generator/
git -C "$tmp" checkout 05ca59998db345cfede649b00093032409b37f25
mkdir -p .github/skills
cp -R "$tmp/skills/preline-mcp" .github/skills/preline-mcp
cp -R "$tmp/skills/theme-generator" .github/skills/theme-generatorCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add htmlstreamofficial/preline --skill preline-mcp theme-generator -a codex -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit 05ca599
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/htmlstreamofficial/preline.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/preline-mcp/ /skills/theme-generator/
git -C "$tmp" checkout 05ca59998db345cfede649b00093032409b37f25
mkdir -p .agents/skills
cp -R "$tmp/skills/preline-mcp" .agents/skills/preline-mcp
cp -R "$tmp/skills/theme-generator" .agents/skills/theme-generatorCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add htmlstreamofficial/preline --skill preline-mcp theme-generator -a gemini-cli -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit 05ca599
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/htmlstreamofficial/preline.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/preline-mcp/ /skills/theme-generator/
git -C "$tmp" checkout 05ca59998db345cfede649b00093032409b37f25
mkdir -p .agents/skills
cp -R "$tmp/skills/preline-mcp" .agents/skills/preline-mcp
cp -R "$tmp/skills/theme-generator" .agents/skills/theme-generatorCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/htmlstreamofficial/preline.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/preline-mcp/ /skills/theme-generator/
git -C "$tmp" checkout 05ca59998db345cfede649b00093032409b37f25
mkdir -p .devin/skills
cp -R "$tmp/skills/preline-mcp" .devin/skills/preline-mcp
cp -R "$tmp/skills/theme-generator" .devin/skills/theme-generatorCommands for macOS and Linux, on Windows run them in Git Bash.
Formerly Windsurf.
Run in a terminal in the project folder
npx skills add htmlstreamofficial/preline --skill preline-mcp theme-generator -a cline -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit 05ca599
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/htmlstreamofficial/preline.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/preline-mcp/ /skills/theme-generator/
git -C "$tmp" checkout 05ca59998db345cfede649b00093032409b37f25
mkdir -p .cline/skills
cp -R "$tmp/skills/preline-mcp" .cline/skills/preline-mcp
cp -R "$tmp/skills/theme-generator" .cline/skills/theme-generatorCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add htmlstreamofficial/preline --skill preline-mcp theme-generator -a roo -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit 05ca599
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/htmlstreamofficial/preline.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/preline-mcp/ /skills/theme-generator/
git -C "$tmp" checkout 05ca59998db345cfede649b00093032409b37f25
mkdir -p .roo/skills
cp -R "$tmp/skills/preline-mcp" .roo/skills/preline-mcp
cp -R "$tmp/skills/theme-generator" .roo/skills/theme-generatorCommands for macOS and Linux, on Windows run them in Git Bash.
A fork of Roo Code, same .roo folders.
Run in a terminal in the project folder
npx skills add htmlstreamofficial/preline --skill preline-mcp theme-generator -a opencode -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit 05ca599
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/htmlstreamofficial/preline.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/preline-mcp/ /skills/theme-generator/
git -C "$tmp" checkout 05ca59998db345cfede649b00093032409b37f25
mkdir -p .agents/skills
cp -R "$tmp/skills/preline-mcp" .agents/skills/preline-mcp
cp -R "$tmp/skills/theme-generator" .agents/skills/theme-generatorCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/htmlstreamofficial/preline.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/preline-mcp/ /skills/theme-generator/
git -C "$tmp" checkout 05ca59998db345cfede649b00093032409b37f25
mkdir -p .agents/skills
cp -R "$tmp/skills/preline-mcp" .agents/skills/preline-mcp
cp -R "$tmp/skills/theme-generator" .agents/skills/theme-generatorCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/htmlstreamofficial/preline.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/preline-mcp/ /skills/theme-generator/
git -C "$tmp" checkout 05ca59998db345cfede649b00093032409b37f25
mkdir -p .agents/skills
cp -R "$tmp/skills/preline-mcp" .agents/skills/preline-mcp
cp -R "$tmp/skills/theme-generator" .agents/skills/theme-generatorCommands for macOS and Linux, on Windows run them in Git Bash.
Add the skills with npx skills add htmlstreamofficial/preline, and add the library to the project with npm i preline, importing its variants and styles into your Tailwind CSS.
Other ways from the author
npx skills add htmlstreamofficial/prelineAdds the preline-mcp and theme-generator skills to the agent's skills directory.
This is third-party code. Review the repository files before installing.
What it does
Preline UI is an open-source Tailwind CSS component library: blocks, templates and headless plugins for interfaces. For agentic tools such as Claude Code, Cursor and Gemini CLI the repository ships Agent Skills. The preline-mcp skill gives the agent a catalog map of components, a tools reference and guidance on composite layouts to assemble markup from ready Preline blocks. The theme-generator skill drives theme generation: palette work, tokens, a validation checklist and style-output scripts. The skills install with a single command, and the library itself is added via npm.
Who it is for. For designers and frontend developers who build Tailwind CSS interfaces and want the agent to work from Preline components.
Good fit when
- You want the agent to assemble a page from ready Preline blocks
- You need Preline theme generation from a palette and tokens
- You want consistent Tailwind CSS interface patterns
Not a fit when
- The project is not on Tailwind CSS
- You need a ready React or Vue component library rather than markup and plugins
Example request
Assemble a pricing page from Preline blocks and generate a theme in our brand colorsLimitations
The skills assume a Tailwind CSS project: the Preline library itself is added separately via npm. Preline components are markup and headless plugins, not ready React or Vue components. The skills help assemble and style the interface but do not replace accessibility and layout review.
How to disable. Remove the preline-mcp and theme-generator skill folders from the agent's skills directory.
Security check
- The skills provide methodology and references for assembling interfaces
README in short
The README describes Preline UI as an open-source Tailwind CSS component library: blocks, templates, headless plugins, a Figma design system and themes. It shows npm installation and wiring the variants, styles and script into a project. A dedicated section covers Agent Skills for Cursor, Claude Code and Gemini CLI, installed with npx skills add, that help automate theme generation and interface work. Components and plugins are listed by category, and built-in accessibility is noted. MIT licensed.
FAQ
Is the preline-mcp skill an MCP server?
No. It is an Agent Skill with a catalog map and reference, not a runnable MCP server.
Do I still need the library?
Yes. The skills help assemble the interface, but Preline itself must be added to the project via npm.
Related
Official Claude Code plugin from the Next.js repo: adopting Cache Components and Partial Prefetching, and verifying changes on a running dev server
Official shadcn/ui skill and MCP server: the agent searches registries, adds components via the CLI and follows the library's rules
A frontend design skill with 23 commands, live browser iteration and 61 detector rules for common AI-generated UI tells
Vercel Agent Skills
Agent Skills
Vercel's skills: React and Next.js performance, UI guideline audits, React Native, component composition and deploys