# Preline Theme Generator

Generate, preview, save, or validate Preline theme CSS using the bundled local...

- Repository: https://github.com/htmlstreamofficial/preline (6518 stars)
- Category: Design
- License: see repository
- Last updated: 2026-08-31
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add htmlstreamofficial/preline --skill preline-theme-generator -g -a claude-code -y`
Codex: `npx skills add htmlstreamofficial/preline --skill preline-theme-generator -g -a codex -y`
Cursor: `npx skills add htmlstreamofficial/preline --skill preline-theme-generator -g -a cursor -y`
Gemini CLI: `npx skills add htmlstreamofficial/preline --skill preline-theme-generator -g -a gemini-cli -y`

## 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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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

The rest: https://github.com/htmlstreamofficial/preline/blob/HEAD/skills/theme-generator/SKILL.md