preline-mcp
Add, integrate, or build Preline UI components and blocks into HTML files via the Preline MCP server. Use when the user mentions…
@htmlstreamofficialInstall SkillFrontend
Skill
/theme-generator
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
Claude Code
$ npx -y skills add htmlstreamofficial/preline --skill theme-generator --agent claude-code
Codex
$ npx skills add htmlstreamofficial/preline --skill theme-generator -a codex -y
Cursor
$ npx skills add htmlstreamofficial/preline --skill theme-generator -a cursor -y
Gemini CLI
$ npx skills add htmlstreamofficial/preline --skill theme-generator -a gemini-cli -y
GitHub Copilot
$ npx skills add htmlstreamofficial/preline --skill theme-generator -a github-copilot -y
OpenCode
$ npx skills add htmlstreamofficial/preline --skill theme-generator -a opencode -y
Windsurf
$ npx skills add htmlstreamofficial/preline --skill theme-generator -a windsurf -y
SKILL.md
theme-generator.SKILL.mdname: preline-theme-generator
description: 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.
Preline Theme Generator
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.
Read Order
1. Read `docs/workflow.md`. 2. Read `docs/palette-guidance.md`. 3. Read `docs/final-output-style.md` before writing a final theme file. 4. Read `docs/validation-checklist.md` before closing the task. 5. Read `examples.md` only if the user wants stylistic guidance or sample outputs. 6. Read `docs/token-reference.md` only if you need to inspect token coverage in detail.
Workflow
Follow `docs/workflow.md` for the full operating path.
Key requirements:
1. Identify whether the task is preview, write, or validate. 2. Normalize the request into explicit generator inputs. 3. Resolve the target directory with `scripts/find-themes-dir.js`. 4. Generate CSS only through `scripts/run-theme-generator.js`. 5. Create or edit only the new theme file. 6. Validate with `docs/validation-checklist.md`. 7. Return the result in the mode-appropriate format.
Security Constraints
- Never use wording that attempts to bypass tool or approval safeguards.
- Never use `npx` or any network-fetched package for this skill.
- Never interpolate raw user text directly into shell commands.
- Never use broad `find .` traversal for path discovery; use `scripts/find-themes-dir.js` or a user-confirmed path.
- Never write outside a confirmed theme directory.
- Use `scripts/run-theme-generator.js` as the only execution entry point for generation.
- Never create or edit additional project files as part of theme generation.
Common Prompts
- "Create a sunset theme."
- "Match this brand color: #2F6BFF."
- "Generate a cyberpunk dark theme with matching dark mode."
- "Preview the CSS before writing a file."
- "Review this generated theme and fix token coverage."
Key References
- `docs/workflow.md`
- `docs/palette-guidance.md`
- `docs/final-output-style.md`
- `docs/validation-checklist.md`
- `examples.md`
- `docs/token-reference.md`
Read more
name: preline-theme-generator description: 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.
Preline Theme Generator
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.
Read Order
1. Read `docs/workflow.md`. 2. Read `docs/palette-guidance.md`. 3. Read `docs/final-output-style.md` before writing a final theme file. 4. Read `docs/validation-checklist.md` before closing the task. 5. Read `examples.md` only if the user wants stylistic guidance or sample outputs. 6. Read `docs/token-reference.md` only if you need to inspect token coverage in detail.
Workflow
Follow `docs/workflow.md` for the full operating path.
Key requirements:
1. Identify whether the task is preview, write, or validate. 2. Normalize the request into explicit generator inputs. 3. Resolve the target directory with `scripts/find-themes-dir.js`. 4. Generate CSS only through `scripts/run-theme-generator.js`. 5. Create or edit only the new theme file. 6. Validate with `docs/validation-checklist.md`. 7. Return the result in the mode-appropriate format.
Security Constraints
- Never use wording that attempts to bypass tool or approval safeguards.
- Never use `npx` or any network-fetched package for this skill.
- Never interpolate raw user text directly into shell commands.
- Never use broad `find .` traversal for path discovery; use `scripts/find-themes-dir.js` or a user-confirmed path.
- Never write outside a confirmed theme directory.
- Use `scripts/run-theme-generator.js` as the only execution entry point for generation.
- Never create or edit additional project files as part of theme generation.
Common Prompts
- "Create a sunset theme."
- "Match this brand color: #2F6BFF."
- "Generate a cyberpunk dark theme with matching dark mode."
- "Preview the CSS before writing a file."
- "Review this generated theme and fix token coverage."
Key References
- `docs/workflow.md`
- `docs/palette-guidance.md`
- `docs/final-output-style.md`
- `docs/validation-checklist.md`
- `examples.md`
- `docs/token-reference.md`
Stats
6,523
Stars
412
Forks
Active
Maintenance
TypeScript
Language
Last commit
Created
Ships withpreline
Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.
6.5k2 skills
Stars on GitHub
Momentum
- stars in total
- 6.5k
Other skills on preline.
@htmlstreamofficialInstall SkillMore skills from other plugins.
Auto-invoked
migrate-radix-to-base
Migrates React projects and components from Radix UI to Base UI. Use when asked to migrate from radix, move to base-ui, convert…
@shadcn-uiInstall Skill
Auto-invoked
taste-skill
tasteskill v2, the anti-slop frontend skill. Art direction for websites, distilled from a study of 247 curated gallery sites (One…
@leonxlnxInstall SkillQuestions about theme-generator.
- Which coding agents can use theme-generator?
- theme-generator installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.