/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
$ npx -y skills add htmlstreamofficial/preline --skill theme-generator --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
- You can call itInvoke it directly when you want it.
- Slash command
/theme-generator
Context preview
The summary Claude sees to decide when to auto-load this skill.
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
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`
Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.
Repo: htmlstreamofficial/preline