preline-theme-generator — скилл для Claude Code: генерация тем Preline
Генерирует CSS-темы для Preline UI из цветов бренда или настроения. Работает через локальные скрипты — не требует сети после установки.
npx skills add htmlstreamofficial/preline --skill preline-theme-generator -a claude-code
npx skills add htmlstreamofficial/preline --skill theme-generator -a claude-codeЧто делает preline-theme-generator
Скилл создаёт кастомные темы Preline: задаёшь цвет или описание («закатный», «киберпанк»), получаешь готовый CSS с токенами светлой и тёмной темы. Всё делают встроенные скрипты scripts/run-theme-generator.js и scripts/find-themes-dir.js. Можно предпросмотреть результат до записи файла или проверить покрытие токенов.
Воркфлоу простой: агент нормализует запрос, резолвит директорию тем, генерит CSS, валидирует по чеклисту из docs/validation-checklist.md. Пишет только один файл темы, ничего лишнего.
Работает оффлайн — npx нужен только при установке, генерация идёт через локальные скрипты без обращения в сеть. Это удобно, когда проект закрыт или сеть ограничена.
Какие задачи решает
- сгенерировать Preline-тему из цвета бренда
- создать пары светлой и тёмной темы
- предпросмотреть CSS до записи файла
- проверить покрытие токенов в сгенерированной теме
- перевести настроение («минималистичный», «яркий») в палитру
Примеры запросов агенту
- создай тему Preline в закатных тонах
- сделай тему под цвет бренда #2F6BFF с тёмным режимом
- покажи предпросмотр CSS темы, не записывай файл
Как установить preline-theme-generator
1Через Skills CLI (Vercel)
npx skills add htmlstreamofficial/preline --skill preline-theme-generator -a claude-codenpx skills add htmlstreamofficial/preline --skill theme-generator -a claude-code2Вручную: положить файлы
~/.claude/skills/theme-generator/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/theme-generator/
1Через Skills CLI (Vercel)
npx skills add htmlstreamofficial/preline --skill theme-generator -a codex2Вручную: положить файлы
.agents/skills/theme-generator/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add htmlstreamofficial/preline --skill theme-generator -a cursor2Вручную: положить файлы
.cursor/skills/theme-generator/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install htmlstreamofficial/preline theme-generator2Вручную: положить файлы
.github/skills/theme-generator/SKILL.md1Через Skills CLI (Vercel)
npx skills add htmlstreamofficial/preline --skill theme-generator -a gemini-cli2Командой платформы
gemini skills install https://github.com/htmlstreamofficial/preline --path skills/theme-generatorВручную: положить файлы
.devin/skills/theme-generator/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add htmlstreamofficial/preline --skill theme-generator -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
Похожие
Вопросы о preline-theme-generator
Как установить preline-theme-generator в Claude Code?
Выполни npx skills add htmlstreamofficial/preline --skill preline-theme-generator -a claude-code или npx skills add htmlstreamofficial/preline --skill theme-generator -a claude-code. Скилл появится в ~/.claude/skills/theme-generator/SKILL.md.
Что делает preline-theme-generator?
Генерирует кастомные CSS-темы для Preline UI по цветам или описанию настроения. Создаёт файлы с токенами светлой и тёмной темы, проверяет покрытие, даёт предпросмотр до записи.
Нужна ли сеть для генерации темы?
Нет. После установки скилл использует только локальные скрипты — npx и сетевые пакеты не вызываются. Работает в закрытых проектах.
Исходный текст
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