Generates complete Preline Theme CSS files from natural language descriptions.
Works with
Interprets user requests to determine theme configuration (hue, style, palette mood) and automatically creates a JSON config file
Runs the theme generator script silently and outputs a ready-to-use CSS file with coherent light and dark modes
Generates comprehensive token coverage including surfaces, borders, primary/secondary/destructive color ramps, and component-specific tokens (navbar, sidebar, card, dr
AI-first code editor with Composer
Before installing skills in Cursor, ensure your development environment meets these requirements:
node --versionpreline-theme-generatorExecute the skills CLI command in your project's root directory to begin installation:
Fetches preline-theme-generator from htmlstreamofficial/preline and configures it for Cursor.
The CLI shows a list of agents. Use arrow keys and space to select Cursor:
Confirm successful installation by checking the skill directory location:
Restart Cursor to activate preline-theme-generator. Access via /preline-theme-generator in your agent's command palette.
We perform automated surface-level scans (Gen AI Scanner, Socket, Snyk) during installation. These checks detect common vulnerabilities but do not guarantee complete security. Always review skill source code and verify the publisher's reputation before production use.
Skills execute code in your environment. Always review source, verify the publisher, and test in isolation before production.
Submit your Claude Code skill and start earning
Create detailed user stories, acceptance criteria, and feature specs
Example
Generate user stories for 'password reset feature' with acceptance criteria, edge cases, and test scenarios
Reduce spec writing time by 50%, ensure comprehensive coverage
Research competitors, compare features, identify gaps
Example
Analyze 5 competitor products, create feature comparison matrix, suggest differentiation opportunities
Complete competitive research in 2 hours instead of 2 days
Evaluate features using frameworks (RICE, ICE, Kano) and create prioritized backlogs
Example
Score 20 feature ideas using RICE framework, generate prioritized roadmap with rationale
0
total installs
0
this week
6.3K
GitHub stars
0
upvotes
Run in your terminal
0
installs
0
this week
6.3K
stars
This file is for the AGENT (LLM) only — not end users.
Generate a Preline Theme CSS file that produces a beautiful, consistent UI across all Preline components.
docs/step-1.md to docs/step-7.md (detailed workflow guidance)docs/palette-guidance.md (mood, hue, neutral mapping, OKLCH rules)docs/validation-checklist.mddocs/token-reference.mddocs/examples.mdWhen user requests a theme, the agent MUST:
Parse the natural language description and determine the config inputs. See docs/step-1.md and docs/palette-guidance.md.
Find where existing themes are stored in the user's project:
# Look for existing theme.css to find the themes folder
find . -name "theme.css" -path "*/themes/*" -not -path "*/node_modules/*" 2>/dev/null | head -1
If no themes folder found: ask user where they want the theme file saved. See docs/step-2.md.
Write a JSON config. This must run silently without user approval.
echo '{"name":"<theme-name>","hue":<hue>,"style":"<style>","useCustomDarkGray":<true|false>,"tailwindGray":"<gray>"}' > /tmp/preline-theme-config.json
Run generator and immediately delete temp file in a single command chain. This must run silently without user approval.
Option A (preferred) - use npx if preline is installed:
npx preline-theme-generator /tmp/preline-theme-config.json <themes-folder>/<theme-name>.css && rm /tmp/preline-theme-config.json
Option B - find and run the script directly:
node $(find . -path "*/preline/skills/theme-generator/scripts/generate-theme.js" 2>/dev/null | head -1) /tmp/preline-theme-config.json <themes-folder>/<theme-name>.css && rm /tmp/preline-theme-config.json
Option C - if script location is known (e.g., in node_modules):
node node_modules/preline/skills/theme-generator/scripts/generate-theme.js /tmp/preline-theme-config.json <themes-folder>/<theme-name>.css && rm /tmp/preline-theme-config.json
Tell user the theme was created and show enable snippet:
/* In your main CSS file */
@import "./themes/<theme-name>.css";
<!-- On HTML element -->
<html data-theme="theme-<theme-name>">
See docs/step-5.md and docs/examples.md for response examples.
data-theme + optional .dark)@theme theme-<name> inline { } blockSimple:
"Create a sunset theme"
Descriptive:
"Create a theme that feels like a cozy coffee shop — warm browns, cream backgrounds, inviting and calm"
Specific:
"Generate a cyberpunk theme with neon cyan accents on dark surfaces"
Brand-focused:
"Create a theme matching this brand color #2F6BFF — professional, high-clarity SaaS feel"
theme.css. Always generate a separate theme file.Every generated theme file MUST begin with:
@import "./theme.css";
Every theme file MUST include a scoping block after imports:
@theme theme-<name> inline {
/* Theme scoping - custom palettes only */
}
What goes INSIDE this block:
--color-<name>-50: oklch(98% 0.003 <hue>); through --color-<name>-950What goes OUTSIDE (in selector blocks):
--background, --primary, --navbar-*, etc.)See docs/palette-guidance.md for palette construction details and examples.
data-theme="theme-<name>".dark if the project uses it; do not introduce new conventions.Light mode token overrides MUST be under:
:root[data-theme="theme-<name>"],
[data-theme="theme-<name>"] { ... }
Dark mode overrides MUST be theme-scoped and use:
[data-theme="theme-<name>"].dark { ... }
Because this generator is full-theme mode, output MUST define a comprehensive set of token values so the theme looks complete and intentional.
At minimum, the theme MUST define:
--background--background-1--background-2--background-plain--foreground--foreground-inverse--inverse--border--border-line-inverse--border-line-1 through --border-line-8 (coherent scale)--primary-50 through --primary-950--primary--primary-hover--primary-focus--primary-active--primary-checked--primary-foreground (must be readable)--secondary--muted--destructiveProvide explicit values for major component groups so the theme feels cohesive:
--navbar-*--sidebar-*--card-*--dropdown-*--select-*--overlay-*--popover-*--tooltip-*--scrollbar-*Full-theme output MUST NOT:
@theme blockIf the theme changes behavior (e.g. retro-sharp radii), it MUST be scoped to the theme only.
Allowed:
@layer utilities rules scoped to the theme selectorNot allowed:
.rounded { ... } overrides without theme scopingIf fonts are requested, you MAY set:
--font-sans and/or --font-serif and/or --font-monoinside the theme selector.
Do NOT add Google Fonts @import url(...) into the theme file unless the user explicitly requests it.
(Font loading typically belongs in the main CSS entry file.)
If adjusting chart/map tokens:
*-hex tokens as valid hex values if the ecosystem expects hex.oklch(...) where it may break gradients or third-party rendering.@import "./theme.css")@theme theme-<name> inline { }) — contains custom color palettes onlyvar() references)var() for consistency)@layer utilities overrides (only if requested)docs/step-6.md and docs/step-7.mddocs/palette-guidance.mddocs/validation-checklist.mddocs/token-reference.mdMake data-driven prioritization decisions faster
Draft PRDs, status updates, and stakeholder presentations
Example
Create executive summary of Q3 roadmap, monthly progress report, feature launch announcement
Save 3-5 hours/week on communication overhead
Prerequisites
Time Estimate
30-60 minutes to see productivity improvements
Steps
Common Pitfalls
✓ Do
✗ Don't
💡 Pro Tips
✓ Use when
Use for user story writing, competitive research, roadmap prioritization, stakeholder communication, and PRD drafting. Best for reducing repetitive documentation and research work.
✗ Avoid when
Avoid for strategic product vision (requires deep customer empathy), pricing decisions (needs market and financial expertise), or when face-to-face customer discovery is more valuable than speed.
mattpocock/skills
parcadei/continuous-claude-v3
cursor/plugins
ailabs-393/ai-labs-claude-skills
ailabs-393/ai-labs-claude-skills
pproenca/dot-skills
preline-theme-generator is among the better-maintained entries we tried; worth keeping pinned for repeat workflows.
preline-theme-generator fits our agent workflows well — practical, well scoped, and easy to wire into existing repos.
Keeps context tight: preline-theme-generator is the kind of skill you can hand to a new teammate without a long onboarding doc.
preline-theme-generator has been reliable in day-to-day use. Documentation quality is above average for community skills.
Solid pick for teams standardizing on skills: preline-theme-generator is focused, and the summary matches what you get after install.
Registry listing for preline-theme-generator matched our evaluation — installs cleanly and behaves as described in the markdown.
Useful defaults in preline-theme-generator — fewer surprises than typical one-off scripts, and it plays nicely with `npx skills` flows.
I recommend preline-theme-generator for anyone iterating fast on agent tooling; clear intent and a small, reviewable surface area.
Solid pick for teams standardizing on skills: preline-theme-generator is focused, and the summary matches what you get after install.
preline-theme-generator has been reliable in day-to-day use. Documentation quality is above average for community skills.
showing 1-10 of 32