SkillFoxx

Начните вводить название, задачу или сервис

Preline UI

Скиллы Preline UI для агентов: сборка интерфейсов из компонентов Tailwind CSS и генерация тем по токенам

Скилл

Низкий риск

Низкий уровень ставим, когда запись в основном дает агенту инструкции и справочные материалы.

Почему такой уровень

  • Скиллы дают методологию и справочники по сборке интерфейса
Все причины и проверки

htmlstreamofficial/prelineАвтор:Htmlstream

Установка

В терминале, через SkillFoxx CLI

npx skillfoxx add skills/preline-ui

Определит агенты на машине, проверит риск и зафиксирует версию.

Другие способы установки

Собрано автоматически, проверьте перед установкой.

Выполните в терминале в папке проекта

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

Утилита skills ставит текущую версию из репозитория. Чтобы скилл работал во всех проектах, добавьте флаг -g.

Без сторонних утилит, из коммита 05ca599
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/htmlstreamofficial/preline.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/preline-mcp/ /skills/theme-generator/
git -C "$tmp" checkout 05ca59998db345cfede649b00093032409b37f25
mkdir -p .claude/skills
cp -R "$tmp/skills/preline-mcp" .claude/skills/preline-mcp
cp -R "$tmp/skills/theme-generator" .claude/skills/theme-generator

Команды для macOS и Linux, на Windows выполните их в Git Bash.

Выполните в терминале в папке проекта

npx skills add htmlstreamofficial/preline --skill preline-mcp theme-generator -a cursor -y

Утилита skills ставит текущую версию из репозитория. Чтобы скилл работал во всех проектах, добавьте флаг -g.

Без сторонних утилит, из коммита 05ca599
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/htmlstreamofficial/preline.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/preline-mcp/ /skills/theme-generator/
git -C "$tmp" checkout 05ca59998db345cfede649b00093032409b37f25
mkdir -p .agents/skills
cp -R "$tmp/skills/preline-mcp" .agents/skills/preline-mcp
cp -R "$tmp/skills/theme-generator" .agents/skills/theme-generator

Команды для macOS и Linux, на Windows выполните их в Git Bash.

Выполните в терминале в папке проекта

npx skills add htmlstreamofficial/preline --skill preline-mcp theme-generator -a github-copilot -y

Утилита skills ставит текущую версию из репозитория. Чтобы скилл работал во всех проектах, добавьте флаг -g.

Без сторонних утилит, из коммита 05ca599
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/htmlstreamofficial/preline.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/preline-mcp/ /skills/theme-generator/
git -C "$tmp" checkout 05ca59998db345cfede649b00093032409b37f25
mkdir -p .github/skills
cp -R "$tmp/skills/preline-mcp" .github/skills/preline-mcp
cp -R "$tmp/skills/theme-generator" .github/skills/theme-generator

Команды для macOS и Linux, на Windows выполните их в Git Bash.

Выполните в терминале в папке проекта

npx skills add htmlstreamofficial/preline --skill preline-mcp theme-generator -a codex -y

Утилита skills ставит текущую версию из репозитория. Чтобы скилл работал во всех проектах, добавьте флаг -g.

Без сторонних утилит, из коммита 05ca599
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/htmlstreamofficial/preline.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/preline-mcp/ /skills/theme-generator/
git -C "$tmp" checkout 05ca59998db345cfede649b00093032409b37f25
mkdir -p .agents/skills
cp -R "$tmp/skills/preline-mcp" .agents/skills/preline-mcp
cp -R "$tmp/skills/theme-generator" .agents/skills/theme-generator

Команды для macOS и Linux, на Windows выполните их в Git Bash.

Выполните в терминале в папке проекта

npx skills add htmlstreamofficial/preline --skill preline-mcp theme-generator -a gemini-cli -y

Утилита skills ставит текущую версию из репозитория. Чтобы скилл работал во всех проектах, добавьте флаг -g.

Без сторонних утилит, из коммита 05ca599
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/htmlstreamofficial/preline.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/preline-mcp/ /skills/theme-generator/
git -C "$tmp" checkout 05ca59998db345cfede649b00093032409b37f25
mkdir -p .agents/skills
cp -R "$tmp/skills/preline-mcp" .agents/skills/preline-mcp
cp -R "$tmp/skills/theme-generator" .agents/skills/theme-generator

Команды для macOS и Linux, на Windows выполните их в Git Bash.

Выполните в терминале в папке проекта

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/htmlstreamofficial/preline.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/preline-mcp/ /skills/theme-generator/
git -C "$tmp" checkout 05ca59998db345cfede649b00093032409b37f25
mkdir -p .devin/skills
cp -R "$tmp/skills/preline-mcp" .devin/skills/preline-mcp
cp -R "$tmp/skills/theme-generator" .devin/skills/theme-generator

Команды для macOS и Linux, на Windows выполните их в Git Bash.

Бывший Windsurf.

Выполните в терминале в папке проекта

npx skills add htmlstreamofficial/preline --skill preline-mcp theme-generator -a cline -y

Утилита skills ставит текущую версию из репозитория. Чтобы скилл работал во всех проектах, добавьте флаг -g.

Без сторонних утилит, из коммита 05ca599
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/htmlstreamofficial/preline.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/preline-mcp/ /skills/theme-generator/
git -C "$tmp" checkout 05ca59998db345cfede649b00093032409b37f25
mkdir -p .cline/skills
cp -R "$tmp/skills/preline-mcp" .cline/skills/preline-mcp
cp -R "$tmp/skills/theme-generator" .cline/skills/theme-generator

Команды для macOS и Linux, на Windows выполните их в Git Bash.

Выполните в терминале в папке проекта

npx skills add htmlstreamofficial/preline --skill preline-mcp theme-generator -a roo -y

Утилита skills ставит текущую версию из репозитория. Чтобы скилл работал во всех проектах, добавьте флаг -g.

Без сторонних утилит, из коммита 05ca599
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/htmlstreamofficial/preline.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/preline-mcp/ /skills/theme-generator/
git -C "$tmp" checkout 05ca59998db345cfede649b00093032409b37f25
mkdir -p .roo/skills
cp -R "$tmp/skills/preline-mcp" .roo/skills/preline-mcp
cp -R "$tmp/skills/theme-generator" .roo/skills/theme-generator

Команды для macOS и Linux, на Windows выполните их в Git Bash.

Форк Roo Code, папки .roo те же.

Выполните в терминале в папке проекта

npx skills add htmlstreamofficial/preline --skill preline-mcp theme-generator -a opencode -y

Утилита skills ставит текущую версию из репозитория. Чтобы скилл работал во всех проектах, добавьте флаг -g.

Без сторонних утилит, из коммита 05ca599
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/htmlstreamofficial/preline.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/preline-mcp/ /skills/theme-generator/
git -C "$tmp" checkout 05ca59998db345cfede649b00093032409b37f25
mkdir -p .agents/skills
cp -R "$tmp/skills/preline-mcp" .agents/skills/preline-mcp
cp -R "$tmp/skills/theme-generator" .agents/skills/theme-generator

Команды для macOS и Linux, на Windows выполните их в Git Bash.

Выполните в терминале в папке проекта

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/htmlstreamofficial/preline.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/preline-mcp/ /skills/theme-generator/
git -C "$tmp" checkout 05ca59998db345cfede649b00093032409b37f25
mkdir -p .agents/skills
cp -R "$tmp/skills/preline-mcp" .agents/skills/preline-mcp
cp -R "$tmp/skills/theme-generator" .agents/skills/theme-generator

Команды для macOS и Linux, на Windows выполните их в Git Bash.

Выполните в терминале в папке проекта

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/htmlstreamofficial/preline.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/preline-mcp/ /skills/theme-generator/
git -C "$tmp" checkout 05ca59998db345cfede649b00093032409b37f25
mkdir -p .agents/skills
cp -R "$tmp/skills/preline-mcp" .agents/skills/preline-mcp
cp -R "$tmp/skills/theme-generator" .agents/skills/theme-generator

Команды для macOS и Linux, на Windows выполните их в Git Bash.

Понадобится: Node.js

Сверено с репозиторием 26 сент. 2026, коммит 05ca599.

Текст для агента

Добавь скиллы командой npx skills add htmlstreamofficial/preline, а в проект подключи библиотеку командой npm i preline и импортируй ее файлы вариантов и стилей в Tailwind CSS.

Другие способы из описания автора
npx skills add htmlstreamofficial/preline

Добавляет скиллы preline-mcp и theme-generator в каталог скиллов агента.

Это чужой код. Посмотрите файлы в репозитории перед установкой.

Что делает

Preline UI это открытая библиотека компонентов на Tailwind CSS: блоки, шаблоны и headless-плагины для интерфейсов. Для агентных инструментов вроде Claude Code, Cursor и Gemini CLI в репозитории есть Agent Skills. Скилл preline-mcp дает агенту карту каталога компонентов, справочник инструментов и подсказки по составным макетам, чтобы собирать разметку из готовых блоков Preline. Скилл theme-generator ведет генерацию темы: работа с палитрой, токенами, проверочным списком и скриптами вывода стилей. Скиллы ставятся одной командой, а сама библиотека подключается через npm.

Для кого. Для дизайнеров и фронтенд-разработчиков, которые собирают интерфейсы на Tailwind CSS и хотят, чтобы агент делал это по компонентам Preline.

Подходит, если

  • Нужно, чтобы агент собрал страницу из готовых блоков Preline
  • Нужна генерация темы Preline по палитре и токенам
  • Нужны единообразные интерфейсные паттерны на Tailwind CSS

Не подходит, если

  • Проект не на Tailwind CSS
  • Нужна готовая библиотека компонентов для React или Vue, а не разметка и плагины

Пример запроса к агенту

Собери из блоков Preline страницу с ценами и сгенерируй тему в фирменных цветах

Ограничения

Скиллы рассчитаны на проект с Tailwind CSS: сама библиотека Preline подключается отдельно через npm. Компоненты Preline это разметка и headless-плагины, а не готовые React или Vue компоненты. Скиллы помогают собирать и оформлять интерфейс, но не заменяют проверку доступности и верстки.

Как отключить. Удалите папки скиллов preline-mcp и theme-generator из каталога скиллов агента.

Проверка безопасности

  • Скиллы дают методологию и справочники по сборке интерфейса

Коротко о README

README описывает Preline UI как открытую библиотеку компонентов на Tailwind CSS: блоки, шаблоны, headless-плагины, дизайн-система в Figma и темы. Показана установка через npm и подключение вариантов, стилей и скрипта в проект. Отдельный раздел про Agent Skills для Cursor, Claude Code и Gemini CLI, которые ставятся командой npx skills add и помогают автоматизировать генерацию тем и работу с интерфейсом. Перечислены компоненты и плагины по категориям, отмечена встроенная доступность. Лицензия MIT.

Частые вопросы

Скилл preline-mcp это MCP-сервер?

Нет. Это Agent Skill с картой каталога и справочником, а не запускаемый MCP-сервер.

Нужна ли отдельно библиотека?

Да. Скиллы помогают собирать интерфейс, но саму Preline нужно подключить в проект через npm.

Скиллы Next.js

Next.js skills

Выбор редакции

Официальный плагин Claude Code из репозитория Next.js: переход на Cache Components, Partial Prefetching и проверка изменений на живом dev-сервере

ПлагинСредний рискБез VPN142,9 тыс.
Выбор редакции

Официальный скилл и MCP-сервер shadcn/ui: агент ищет компоненты в реестрах, ставит их через CLI и держится правил библиотеки

СкиллСредний рискБез VPN124,8 тыс.
Выбор редакции

Скилл для фронтенд-дизайна: 23 команды, итерации в браузере и 61 правило поиска типичных огрехов AI-интерфейсов

СкиллВысокий риск72,1 тыс.
Выбор редакции

Скиллы Vercel: производительность React и Next.js, проверка UI по гайдлайнам, React Native, композиция компонентов и деплой

СкиллСредний риск31,7 тыс.
Foxx AIPreline UI

Я Foxx AI и уже разобрал этот инструмент. Спросите про установку, настройку или что угодно еще, отвечу простыми словами.