Preline UI skill
Preline UI skills for agents: assemble Tailwind CSS component interfaces and generate themes from tokens
- 6,524 ★ on the repository
- Last commit
Extended access
Why this level
- The theme-generator skill runs Node.js scripts that generate a theme file in the project
- The preline-mcp skill relies on a separate Preline MCP server with the component catalog
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/preline-uiDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The theme-generator skill runs Node.js scripts that generate a theme file in the project
- The preline-mcp skill relies on a separate Preline MCP server with the component catalog
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.
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.
Discussion
No questions or reviews yet.
Related
SkillsNuxt UI v4 skill: an agent builds Vue and Nuxt interfaces, picks components, sets up the theme and lays out forms and dashboards
The official daisyUI skill and plugin: the agent builds Tailwind CSS interfaces with ready component, color and theme classes
A skill that edits UI inside live code with no extra dependencies: components, sections, pages and RTL with Arabic for your stack
Four official Material UI skills: styling, theming, Next.js integration and working alongside Tailwind CSS
The skill teaches an agent to build an AI agent chat from 26 Agent Elements components: tool cards, input bar, streaming
A skill and CLI for agents: UI without the templated look, 25 commands, rule-based anti-slop checks and a 0 to 100 quality score
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.