Build Tailwind UI Through Your Agent With Preline's Skills

Your agent can write Tailwind markup, but it invents the components every time — and invented markup drifts from any real design system. Preline UI, a 6k-star open-source Tailwind CSS component library, closes that gap with two agent skills: one that integrates the library's real components and blocks, and one that generates theme CSS through a bundled local generator.

Why This Skill Matters

Preline is an established library — the README counts 204 free Tailwind CSS blocks and sections, 27 headless plugins, 5 free templates, and a Figma design system — so the markup your agent inserts inherits that system instead of reinventing it. The skills exist for exactly the two jobs agents are worst at freestyling: picking the library's real, existing pieces, and producing theme tokens that cover the whole surface. The skills target agentic coding tools such as Cursor, Claude Code, and Gemini CLI, per the README.

The first skill, preline-mcp, integrates Preline UI components and blocks into HTML files through the Preline MCP server, which exposes 6 tools that return integration-ready HTML, CSS, and JS. The second, preline-theme-generator, generates, previews, saves, or validates Preline theme CSS using a bundled local generator — its SKILL.md scopes it to Preline themes only, explicitly not for generic non-Preline CSS work.

Installation

Start from any working Tailwind CSS project, then install the skills:

npx skills add htmlstreamofficial/preline

The library itself installs with npm i preline, followed by the CSS imports and script tag documented in the README — the agent can do this part, but the README's install section is the source of truth for the exact imports.

Real Workflow: Add a Pricing Section to a Landing Page

Ask your agent:

用 Preline 给我的落地页加一个定价区块，放在 hero 下面。

The skill's own rules shape what happens next. It never guesses slugs — every section, component, and category identifier is an exact kebab-case string discovered through components_list or blocks_categories first. It retrieves one component or block at a time, fully integrating each before moving to the next. And it always reads the target file before inserting anything, so the block lands in your markup instead of overwriting it.

Ambiguous requests err toward blocks — the ready-made page sections — because blocks give more complete results. When you say "component", you get the component workflow; "block" gets the block workflow.

Real Workflow: Generate a Brand Theme

The second skill turns a mood or a brand color into theme CSS. Its SKILL.md's common prompts include matching a brand color, so ask your agent:

匹配这个品牌色：#2F6BFF。

The workflow is strict about how the CSS gets made: generation runs only through the bundled scripts/run-theme-generator.js, the target directory resolves through scripts/find-themes-dir.js, and the skill creates or edits only the new theme file. A validation checklist runs before the task closes, and a preview mode lets you see the CSS before any file is written. The security constraints are part of the design — no npx, no network-fetched packages, and no raw user text interpolated into shell commands.

Tips

• Say "preline" or "/preline" in your request — two of the trigger phrases the MCP skill's SKILL.md documents.
• Ask for a preview before writing: the theme generator supports generating output without writing files.
• Keep the two skills' jobs separate: components and blocks come from preline-mcp, theme CSS from preline-theme-generator.
• The library's headless plugins (accordion, dropdown, datepicker, and 24 more per the README's table) are what make the markup interactive — the agent should pair components with the matching plugin.

When Not to Use This

The theme generator draws its own boundary: generic non-Preline CSS work and arbitrary command execution are out of scope by its SKILL.md. And if your project is not a Tailwind CSS project, the library's npm setup is a prerequisite the skills assume, not something they replace.

See the leaderboard for more skills.