Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor GitHub Copilot

preline-theme-generator — Claude Code skill: generate Preline themes

Generates custom Preline UI theme CSS from brand colors or mood descriptions. Runs entirely through local scripts after install.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add htmlstreamofficial/preline --skill preline-theme-generator -a claude-code
npx skills add htmlstreamofficial/preline --skill theme-generator -a claude-code
Open on GitHub

What preline-theme-generator does

The skill takes a color or a mood prompt (sunset, cyberpunk, minimal) and outputs complete Preline theme CSS with light and dark mode tokens. Generation runs through bundled scripts scripts/run-theme-generator.js and scripts/find-themes-dir.js. You can preview output before committing to a file or validate token coverage.

The workflow is direct: normalize the request, resolve the theme directory, generate CSS, validate against the checklist in docs/validation-checklist.md. It writes only the new theme file, nothing else.

Works offline. You need npx for install, but generation never touches the network or fetches remote packages. Useful when the project is air-gapped or the network is restricted.

What it helps with

  • generate a Preline theme from a brand color
  • create matching light and dark theme pairs
  • preview CSS output before writing a file
  • validate token coverage in generated themes
  • translate a mood into a concrete color palette

Example prompts for the agent

  • create a sunset Preline theme
  • generate a theme matching brand color #2F6BFF with dark mode
  • preview the theme CSS without writing a file

How to install preline-theme-generator

1Skills CLI (Vercel)

npx skills add htmlstreamofficial/preline --skill preline-theme-generator -a claude-code
npx skills add htmlstreamofficial/preline --skill theme-generator -a claude-code

2Manually: put the files in place

~/.claude/skills/theme-generator/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/theme-generator/

Similar

react19-concurrent-patterns official github Preserves React 18 concurrent patterns during React 19 migrations and guides the adoption of use(), useOptimistic, and Actions. GitHub Copilot 1,100installs radix-ui-design-system sickn33 Builds accessible design systems and headless UI components with Radix UI primitives. Useful for custom component libraries and WCAG 2.1 compliance. Claude Code CX Codex Cursor +1 1,300installs refero-design referodesign A research-led skill for UI and product design that grounds work in references before code. Use it for landing pages, product screens, redesigns, and visual polish. Claude Code CX Codex Cursor +1 11,900installs visual-edit-precision Adit Jain Skill for targeted UI changes when you show elements on a screenshot or point them out in code. Edits only what you selected, without refactoring the entire component. Claude Code CX Codex Cursor 2,800installs image vercel-labs Turns JSON specs into SVG and PNG images via Satori. Useful for generating OG images, social cards, and rendering AI-generated image specs. Claude Code CX Codex Cursor +1 1,500installs huggingface-gradio huggingface This skill helps you build and modify Python Gradio interfaces for machine learning demos. It provides patterns for layouts, UI components, and chatbot workflows. Claude Code CX Codex Cursor +1 2,300installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. Claude Code CX Codex Cursor +1 673,100installs

Questions about preline-theme-generator

How do I install preline-theme-generator in Claude Code?

Run npx skills add htmlstreamofficial/preline --skill preline-theme-generator -a claude-code or npx skills add htmlstreamofficial/preline --skill theme-generator -a claude-code. The skill will appear in ~/.claude/skills/theme-generator/SKILL.md.

What does preline-theme-generator do?

It generates custom Preline UI theme CSS from brand colors or mood descriptions. Outputs light and dark mode token files, validates coverage, and previews before writing.

Does it require network access during generation?

No. After install, the skill uses only local bundled scripts. No npx or network-fetched packages are invoked. Works in air-gapped projects.

Source text

SKILL.md · MIT 
---
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`

© htmlstreamofficial · MIT · htmlstreamofficial/preline

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor