К основному содержанию
скилл Claude Code CX Codex Cursor GitHub Copilot

preline-theme-generator — скилл для Claude Code: генерация тем Preline

Генерирует CSS-темы для Preline UI из цветов бренда или настроения. Работает через локальные скрипты — не требует сети после установки.

Установить в Claude Code · Через Skills 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
Открыть на GitHub

Что делает 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-code
npx skills add htmlstreamofficial/preline --skill theme-generator -a claude-code

2Вручную: положить файлы

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

Папка скилла целиком; для одного проекта — .claude/skills/theme-generator/

Похожие

react19-concurrent-patterns официальный github Защищает concurrent-паттерны React 18 от поломок при миграции на React 19. Подсказывает, когда внедрять новые хуки use, useOptimistic и Actions. GitHub Copilot 1 100установок radix-ui-design-system sickn33 Скилл помогает создавать дизайн-системы и доступные интерфейсные компоненты на базе примитивов Radix UI без готовых стилей. Claude Code CX Codex Cursor +1 1 300установок refero-design referodesign Задаёт исследовательский процесс для UI и продуктового дизайна: сначала референсы, затем код. Пригодится для лендингов, экранов, редизайна и полировки интерфейса. Claude Code CX Codex Cursor +1 11 900установок visual-edit-precision Adit Jain Скилл для целевых изменений UI, когда вы показываете элементы на скриншоте или указываете их прямо в коде. Меняет только то, что вы выделили, без рефакторинга всего компонента. Claude Code CX Codex Cursor 2 800установок image vercel-labs Превращает JSON-спецификации в SVG и PNG через Satori. Пригодится для OG-картинок, социальных карточек и рендера изображений по схемам от ИИ. Claude Code CX Codex Cursor +1 1 500установок huggingface-gradio huggingface Скилл помогает создавать и редактировать веб-интерфейсы на Gradio в Python. Он пригодится при сборке демоверсий моделей, настройке макетов и чат-ботов. Claude Code CX Codex Cursor +1 2 300установок frontend-design официальный anthropics Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. Подойдёт, когда стандартный шаблонный UI не устраивает. Claude Code Claude.ai 1 025 790установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. Claude Code CX Codex Cursor +1 673 100установок

Вопросы о 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

Смотрите также

Спонсоры проекта

Компании, которые помогают держать аналитику открытой