SkillCurated by metahubEval warnings

preline-theme-generator

Name: preline-theme-generator
Author: htmlstreamofficial

Generate, preview, save, or validate Preline theme CSS using the bundled local generator in this skill. Use when the user asks to create a new Preline theme, match a brand color, translate a mood into a theme, generate light and dark theme CSS, preview theme output without writing files, or review and fix generated theme tokens. Do not use for generic non-Preline CSS work or arbitrary command execution.

pinned to #1cd9636updated last month

7/11Verified publisherCurated by MetaHubActively maintainedLicensedDocumentedStructuredClean repo

Ask your AI client: “install skills/preline-theme-generator”.

Requires the metahub MCP server installed in your client. Set up MCP.

mh install skills/preline-theme-generator

metahub onboarded this repo on the author's behalf.

If you own github.com/htmlstreamofficial/preline on GitHub, claim the listing to take over publishing. Your claim preserves the existing eval history and badges; only the curator label is replaced with verified-publisher on your next publish.

Claim this repo

Stars

6,341

Last commit

last month

1cd9636

Latest release

published

last month

#agent-skills
#css
#html
#javascript
#tailwindcss
#tailwindcss-plugin
#typescript
#ui-components

About this skill

Pulled from SKILL.md at publish time.

Use the bundled local scripts. Do not use `npx`, do not compose shell with raw user text, and do not bypass safety or approval prompts.

Evaluation report

Warnings

Automated checks the publisher passed at publish time — structure, docs, safety, and whether the artifact behaves as claimed.1cd9636· last month

Kind-specific

Skill: SKILL.md present
found at skills/theme-generator/SKILL.md · frontmatter source: SKILL.md
Skill: body content present
283 words · 2,014 chars · 5 sections
Skill: triggers declaredwarn
No `trigger` phrases in SKILL.md frontmatter
Add `trigger:` lines so Claude knows when to activate this skill — e.g. `when building MCP servers` or `for diagram creation`.
Skill: allowed-tools scope
no allowed-tools restriction (Claude may use anything)

Release history

releasecurrent1cd9636warnlast month

View on GitHub

Preline UI is an open-source Tailwind CSS UI component library for building modern websites and apps. It includes UI blocks, templates, plugins, a Figma design system, and more.

✨ About Preline

Preline helps teams build modern websites and web apps faster with reusable Tailwind CSS components, interactive headless Tailwind CSS plugins, Tailwind CSS templates, and production-ready Tailwind CSS examples. It is designed for developers who want flexible markup, scalable design systems, and polished UI patterns without rebuilding everything from scratch.

⚡ Getting Started

Start with any working Tailwind CSS project and make sure Node.js and npm are installed.

Install via npm

Install preline:

npm i preline

Import the Preline CSS variants file into your Tailwind CSS file after the tailwindcss import:

@import "tailwindcss";

/* Preline UI */
@source "./node_modules/preline/dist/*.js";
@import "./node_modules/preline/variants.css";

/* Preline Themes */
@import "./themes/theme.css";

Add the Preline JavaScript file near the end of your <body> tag:

<script src="./node_modules/preline/dist/preline.js"></script>

For setup details, framework integration, and configuration guides, visit the Preline documentation.

🤖 Agent Skills

Preline UI includes Agent Skills for agentic coding tools such as Cursor, Claude Code, and Gemini CLI, making it easier to automate theme generation and UI workflows.

Install via CLI:

npx skills add htmlstreamofficial/preline

♿ Accessibility

Preline UI includes enterprise-grade accessibility built into its components, helping teams create more inclusive interfaces with accessible Tailwind CSS components, keyboard-friendly interactions, proper focus management, and stronger support for assistive technologies. Learn more in the dedicated Accessibility documentation.

🧩 Headless Tailwind CSS Plugins

Explore headless Tailwind CSS plugins for accessible UI behavior, interactions, forms, navigation, overlays, and productivity workflows.

Category	Plugin Pages
Disclosure	Accordion, Collapse, Tree View
Navigations	Tabs, Scrollspy, Scroll Nav, Stepper
Overlays	Dropdown, Overlay, Tooltip
Forms	Select, ComboBox, Datepicker, Range Slider, Input Number, File Upload, Strong Password, Toggle Password, Toggle Count, Copy Markup, PIN Input, Textarea Auto Height
Miscellaneous	DataTable, Carousel, Layout Splitter, Remove Element, Theme Switch

🧱 Tailwind CSS Components

Browse Tailwind CSS component docs across layout, base UI, forms, navigation, overlays, tables, and advanced integrations.

Category	Component Pages
Layout & Content	Container, Columns, Grid, Layout Splitter, Typography, Images, Links, Dividers & HR, KBD, Custom Scrollbar
Base Components	Accordion, Alerts, Avatar, Avatar Group, Badge, Blockquote, Buttons, Button Group, Card, Chat Bubbles, Carousel, Collapse, Datepicker, Devices, Lists, List Group, Legend Indicator, Progress, File Uploading Progress, Ratings, Skeleton, Spinners, Styled Icons, Toasts, Timeline, Tree View
Navigations	Navbar, Mega Menu, Navs, Tabs, Sidebar, Scrollspy, Breadcrumb, Pagination, Stepper
Basic Forms	Input, Input Group, Textarea, File Input, Checkbox, Radio, Switch, Select, Range Slider, Color Picker, Time Picker
Advanced Forms	Advanced Select, ComboBox, SearchBox, Input Number, Strong Password, Toggle Password, Toggle Count, Copy Markup, PIN Input
Overlays	Dropdown, Context Menu, Modal, Offcanvas, Popover, Tooltip
Tables	Tables
Third-Party Plugins	Advanced Range Slider, Advanced Datepicker, Charts, Clipboard, Confetti Animation, Datamaps, Datatables, Drag and Drop, File Upload, Maps, Toast Notifications, WYSIWYG Editor

🎨 Templates and Examples

Explore free and premium layouts for landing pages, dashboards, SaaS apps, ecommerce stores, CMS products, portfolios, and more.

Free Tailwind CSS Templates

Template	Template	Template	Template	Template
Agency	AI Chat	CMS	Coffee Shop	Personal

Explore More

🚀 Preline Pro

Preline Pro extends the free library with premium UI for serious product teams and commercial apps. It includes 740 premium Tailwind CSS blocks and sections, 21 premium Tailwind CSS templates, and 207 pages for admin dashboards, SaaS products, ecommerce, CMS, CRM, analytics, finance, chat, startup, and marketing use cases.

📚 Documentation and Resources

🤝 Community

For help, best practices, and product discussions, use GitHub Discussions.

Follow Preline UI on X (Twitter) for the latest updates.

📄 License

The Preline UI Figma resources are also available for personal and commercial use. All brand icons are trademarks of their respective owners, and their use does not imply endorsement.

A Product of Htmlstream

Preline UI is built by the Htmlstream team, crafting UI components and templates since 2013—helping teams ship faster with scalable, flexible design systems for real-world products.

Share your thoughts about Preline UI on X (Twitter).

Reviews

No reviews yet. Be the first.

SkillCurated

Frontend Slides

Create beautiful slides on the web using Claude's frontend skills

#24e420eActiveMIT+4

zarazhangrui

25,3472,061JavaScript

skillai-slidesanthropic+8

SkillCurated

Planning With Files

Claude Code skill implementing Manus-style persistent markdown planning — the workflow pattern behind the $2B acquisition.

#6f94643ActiveMIT+5

OthmanAdi

25,2332,131Python

skilladalagent-skills+9

SkillCurated

Verification Before Completion

Evidence before assertions, always

#f2cbfbeActiveMIT+5

obra

253,04922,600Shell

verificationqualityworkflow

mh install skills/preline-theme-generator

SkillCurated by metahubEval warnings

preline-theme-generator

pinned to #1cd9636updated last month

7/11Verified publisherCurated by MetaHubActively maintainedLicensedDocumentedStructuredClean repo

Ask your AI client: “install skills/preline-theme-generator”.

Requires the metahub MCP server installed in your client. Set up MCP.

mh install skills/preline-theme-generator

metahub onboarded this repo on the author's behalf.

Claim this repo

Stars

6,341

Last commit

last month

1cd9636

Latest release

published

last month

#agent-skills
#css
#html
#javascript
#tailwindcss
#tailwindcss-plugin
#typescript
#ui-components

About this skill

Pulled from SKILL.md at publish time.

Use the bundled local scripts. Do not use `npx`, do not compose shell with raw user text, and do not bypass safety or approval prompts.

Evaluation report

Warnings

Automated checks the publisher passed at publish time — structure, docs, safety, and whether the artifact behaves as claimed.1cd9636· last month

Kind-specific

Skill: SKILL.md present
found at skills/theme-generator/SKILL.md · frontmatter source: SKILL.md
Skill: body content present
283 words · 2,014 chars · 5 sections
Skill: triggers declaredwarn
No `trigger` phrases in SKILL.md frontmatter
Add `trigger:` lines so Claude knows when to activate this skill — e.g. `when building MCP servers` or `for diagram creation`.
Skill: allowed-tools scope
no allowed-tools restriction (Claude may use anything)

Release history

releasecurrent1cd9636warnlast month

View on GitHub

Preline UI is an open-source Tailwind CSS UI component library for building modern websites and apps. It includes UI blocks, templates, plugins, a Figma design system, and more.

✨ About Preline

⚡ Getting Started

Start with any working Tailwind CSS project and make sure Node.js and npm are installed.

Install via npm

Install preline:

npm i preline

Import the Preline CSS variants file into your Tailwind CSS file after the tailwindcss import:

@import "tailwindcss";

/* Preline UI */
@source "./node_modules/preline/dist/*.js";
@import "./node_modules/preline/variants.css";

/* Preline Themes */
@import "./themes/theme.css";

Add the Preline JavaScript file near the end of your <body> tag:

<script src="./node_modules/preline/dist/preline.js"></script>

For setup details, framework integration, and configuration guides, visit the Preline documentation.

🤖 Agent Skills

Preline UI includes Agent Skills for agentic coding tools such as Cursor, Claude Code, and Gemini CLI, making it easier to automate theme generation and UI workflows.

Install via CLI:

npx skills add htmlstreamofficial/preline

♿ Accessibility

🧩 Headless Tailwind CSS Plugins

Explore headless Tailwind CSS plugins for accessible UI behavior, interactions, forms, navigation, overlays, and productivity workflows.

Category	Plugin Pages
Disclosure	Accordion, Collapse, Tree View
Navigations	Tabs, Scrollspy, Scroll Nav, Stepper
Overlays	Dropdown, Overlay, Tooltip
Forms	Select, ComboBox, Datepicker, Range Slider, Input Number, File Upload, Strong Password, Toggle Password, Toggle Count, Copy Markup, PIN Input, Textarea Auto Height
Miscellaneous	DataTable, Carousel, Layout Splitter, Remove Element, Theme Switch

🧱 Tailwind CSS Components

Browse Tailwind CSS component docs across layout, base UI, forms, navigation, overlays, tables, and advanced integrations.

Category	Component Pages
Layout & Content	Container, Columns, Grid, Layout Splitter, Typography, Images, Links, Dividers & HR, KBD, Custom Scrollbar
Base Components	Accordion, Alerts, Avatar, Avatar Group, Badge, Blockquote, Buttons, Button Group, Card, Chat Bubbles, Carousel, Collapse, Datepicker, Devices, Lists, List Group, Legend Indicator, Progress, File Uploading Progress, Ratings, Skeleton, Spinners, Styled Icons, Toasts, Timeline, Tree View
Navigations	Navbar, Mega Menu, Navs, Tabs, Sidebar, Scrollspy, Breadcrumb, Pagination, Stepper
Basic Forms	Input, Input Group, Textarea, File Input, Checkbox, Radio, Switch, Select, Range Slider, Color Picker, Time Picker
Advanced Forms	Advanced Select, ComboBox, SearchBox, Input Number, Strong Password, Toggle Password, Toggle Count, Copy Markup, PIN Input
Overlays	Dropdown, Context Menu, Modal, Offcanvas, Popover, Tooltip
Tables	Tables
Third-Party Plugins	Advanced Range Slider, Advanced Datepicker, Charts, Clipboard, Confetti Animation, Datamaps, Datatables, Drag and Drop, File Upload, Maps, Toast Notifications, WYSIWYG Editor

🎨 Templates and Examples

Explore free and premium layouts for landing pages, dashboards, SaaS apps, ecommerce stores, CMS products, portfolios, and more.

Free Tailwind CSS Templates

Template	Template	Template	Template	Template
Agency	AI Chat	CMS	Coffee Shop	Personal

Explore More

🚀 Preline Pro

📚 Documentation and Resources

🤝 Community

For help, best practices, and product discussions, use GitHub Discussions.

Follow Preline UI on X (Twitter) for the latest updates.

📄 License

The Preline UI Figma resources are also available for personal and commercial use. All brand icons are trademarks of their respective owners, and their use does not imply endorsement.

A Product of Htmlstream

Preline UI is built by the Htmlstream team, crafting UI components and templates since 2013—helping teams ship faster with scalable, flexible design systems for real-world products.

Share your thoughts about Preline UI on X (Twitter).

Reviews

No reviews yet. Be the first.

SkillCurated

Frontend Slides

Create beautiful slides on the web using Claude's frontend skills

#24e420eActiveMIT+4

zarazhangrui

25,3472,061JavaScript

skillai-slidesanthropic+8

SkillCurated

Planning With Files

Claude Code skill implementing Manus-style persistent markdown planning — the workflow pattern behind the $2B acquisition.

#6f94643ActiveMIT+5

OthmanAdi

25,2332,131Python

skilladalagent-skills+9

SkillCurated

Verification Before Completion

Evidence before assertions, always

#f2cbfbeActiveMIT+5

obra

253,04922,600Shell

verificationqualityworkflow

mh install skills/preline-theme-generator

About this skill

Evaluation report

Release history

Contents

✨ About Preline

⚡ Getting Started

Install via npm

🤖 Agent Skills

♿ Accessibility

🧩 Headless Tailwind CSS Plugins

🧱 Tailwind CSS Components

🎨 Templates and Examples

Free Tailwind CSS Templates

Explore More

🚀 Preline Pro

📚 Documentation and Resources

🤝 Community

📄 License

A Product of Htmlstream

Reviews

Related

Frontend Slides

Planning With Files

Verification Before Completion

About this skill

Evaluation report

Release history

Contents

✨ About Preline

⚡ Getting Started

Install via npm

🤖 Agent Skills

♿ Accessibility

🧩 Headless Tailwind CSS Plugins

🧱 Tailwind CSS Components

🎨 Templates and Examples

Free Tailwind CSS Templates

Explore More

🚀 Preline Pro

📚 Documentation and Resources

🤝 Community

📄 License

A Product of Htmlstream

Reviews

Related

Frontend Slides

Planning With Files

Verification Before Completion