Can I use specific brand hex codes with this generator?

Yes, you can provide specific hex codes in your prompt. The agent will interpret these colors and build a consistent professional palette around them.

Do I need to change my HTML classes to use the generated theme?

No. The themes are powered by CSS variables and the data-theme attribute, meaning your existing Tailwind utility classes will automatically adapt to the new theme.

Does this skill modify my existing CSS files?

No, it is designed to generate a separate theme file. It follows a strict rule to never modify your base theme, ensuring your core styles remain safe.

Is the generated CSS valid and safe for production?

Absolutely. The skill follows a validation checklist to ensure the output is valid CSS, correctly scoped, and includes all necessary semantic tokens for a complete UI.

Does it support dark mode automatically?

Yes, every generated theme includes comprehensive token overrides for both light and dark modes to ensure a cohesive user experience across all system settings.

Preline Theme Generator

Name: Preline Theme Generator
Author: htmlstreamofficial

byhtmlstreamofficial

•

6,253

•

デザインツール

Automatically generates production-ready Tailwind CSS themes for Preline UI using natural language descriptions.

The Preline Theme Generator is a specialized Claude Code skill that streamlines the creation of consistent, beautiful UI themes for projects using Preline UI and Tailwind CSS. It translates natural language prompts—ranging from brand-specific hex codes to mood-based descriptions like 'cyberpunk' or 'cozy coffee shop'—into comprehensive CSS files featuring OKLCH color palettes, semantic token overrides, and full light/dark mode support. By automating the configuration and build process, it allows developers to instantly skin their applications without manual utility class edits or complex CSS architecture changes.

主な機能

01Natural language interpretation of moods, brand colors, and visual styles

02Comprehensive light and dark mode support without HTML class modifications

03Silent execution of build scripts and cleanup within the local project environment

046,253 GitHub stars

05Automated generation of OKLCH-based color palettes and semantic tokens

06Strict adherence to Preline UI token systems and scoping best practices

ユースケース

01Rapidly rebranding a SaaS application with professional, high-clarity color schemes

02Creating stylized visual variants like high-contrast or neon themes for specific landing pages

03Standardizing design tokens across a large project to ensure consistent component styling

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add htmlstreamofficial/preline theme-generator

For use in Claude.ai and ChatGPT

Download Skill