# Скиллы по теме «Фронтенд и UI»

Скиллы по теме «Фронтенд и UI»: у каждой карточки — что делает, команда установки и примеры запросов.

2909 карточек · страница 67 из 73

- HTML: https://affpapa.org/nevibecode/skills/topic/frontend?page=67
- Инструкция для агента: https://affpapa.org/nevibecode/agents.md

- [video-production](https://affpapa.org/nevibecode/skills/video-production.md) — скилл · akillness · Claude Code, Codex, Cursor +3 · 503 установки — Структурирует конвейер автоматической генерации видео и готовит план рендеринга через Remotion или облачные API.
- [i18n-frontend-implementer](https://affpapa.org/nevibecode/skills/i18n-frontend-implementer.md) — скилл · patricio0312rev · Claude Code, Codex, Cursor +3 · 359 установок — Скилл добавляет i18n-инфраструктуру во фронтенд: переводы, форматирование дат и валют, множественные формы и переключение языка.
- [accessibility-auditor](https://affpapa.org/nevibecode/skills/patricio0312rev-accessibility-auditor.md) — скилл · patricio0312rev · Claude Code, Codex, Cursor +3 · 355 установок — Скилл проверяет вёрстку на доступность и правит её: семантика, ARIA, клавиатура, контраст.
- [wordpress-block-editor-fse](https://affpapa.org/nevibecode/skills/wordpress-block-editor-fse.md) — скилл · Claude MPM Team · Claude Code, Codex, Cursor +3 · 461 установка — Настраивает правила разработки блочных тем WordPress 6.7+ и FSE.
- [rattles-terminal-spinners](https://affpapa.org/nevibecode/skills/rattles-terminal-spinners.md) — скилл · reason-machines · Claude Code, Codex, Cursor +3 · 497 установок — Скилл для работы с rattles — минимальной Rust-библиотекой терминальных спиннеров.
- [web-performance-optimization](https://affpapa.org/nevibecode/skills/bobmatnyc-web-performance-optimization.md) — скилл · bobmatnyc · Claude Code, Codex, Cursor +3 · 457 установок — Скилл для оптимизации веб-производительности: разбирает Core Web Vitals, современные паттерны и техники под конкретный фреймворк.
- [progressive-blur-header-swiftui](https://affpapa.org/nevibecode/skills/progressive-blur-header-swiftui.md) — скилл · reason-machines · Claude Code, Codex, Cursor +3 · 493 установки — Скилл добавляет в SwiftUI липкий заголовок с постепенным размытием.
- [design-system](https://affpapa.org/nevibecode/skills/akillness-design-system.md) — скилл · akillness · Claude Code, Codex, Cursor +3 · 488 установок — Задаёт общие правила интерфейса, дизайн-токены и архитектуру компонентов до вёрстки отдельных экранов.
- [bouncer-feed-filter](https://affpapa.org/nevibecode/skills/bouncer-feed-filter.md) — скилл · reason-machines · Claude Code, Codex, Cursor +3 · 483 установки — Помогает настроить и собрать расширение Bouncer, которое фильтрует ленту Twitter/X по текстовым правилам через WebGPU или облачные LLM.
- [responsive-design](https://affpapa.org/nevibecode/skills/akillness-responsive-design.md) — скилл · akillness · Claude Code, Codex, Cursor +3 · 478 установок — Скилл разбирает жалобу «на мобильном всё ломается» на конкретную причину и выдаёт один план правок с проверкой.
- [responsive-design-system](https://affpapa.org/nevibecode/skills/responsive-design-system.md) — скилл · patricio0312rev · Claude Code, Codex, Cursor +3 · 343 установки — Скилл для ИИ-агента, который помогает строить мобильную вёрстку: брейкпоинты, container queries, текучая типографика и адаптивные сетки на Tailwind CSS.
- [podcast-generation](https://affpapa.org/nevibecode/skills/podcast-generation.md) — скилл · microsoft · Claude Code, GitHub Copilot · 29 установок — Генерирует озвучку текстов в формате подкаста через модель Azure OpenAI GPT Realtime Mini по WebSocket.
- [sumsub-integrate-websdk](https://affpapa.org/nevibecode/skills/sumsub-integrate-websdk.md) — скилл · sumsub · Claude Code, Codex, Cursor +3 · 1200 установок — Проводит через всю интеграцию Sumsub KYC в веб-проект: от уровня проверки до вебхука, который открывает пользователю доступ.
- [sveltekit](https://affpapa.org/nevibecode/skills/claude-mpm-team-sveltekit.md) — скилл · Claude MPM Team · Claude Code, Codex, Cursor +3 · 441 установка — Скилл подсказывает агенту, как устроен SvelteKit: файловый роутинг, load-функции, form actions и адаптеры для деплоя.
- [html-ppt-skill](https://affpapa.org/nevibecode/skills/html-ppt-skill.md) — скилл · reason-machines · Claude Code, Codex, Cursor +3 · 476 установок — Генерирует статические HTML-презентации без сборщиков и фреймворков.
- [v0-dev](https://affpapa.org/nevibecode/skills/v0-dev.md) — скилл (официальный OpenAI) · Vercel Labs · Codex, ChatGPT · 5 установок — Помогает генерировать интерфейсы на React через v0, подключать готовые компоненты в Next.js и автоматизировать деплой через v0 SDK.
- [turbopack](https://affpapa.org/nevibecode/skills/turbopack.md) — скилл (официальный OpenAI) · Vercel Labs · Codex, ChatGPT · 5 установок — Скилл помогает настроить сборщик Turbopack в Next.js 16, перенести правила с Webpack и решить ошибки сборки.
- [geistdocs](https://affpapa.org/nevibecode/skills/geistdocs.md) — скилл (официальный OpenAI) · Vercel Labs · Codex, ChatGPT · 5 установок — Помогает настраивать шаблоны документации Geistdocs на Next.js 16 и Fumadocs.
- [index](https://affpapa.org/nevibecode/skills/openai-index.md) — скилл (официальный OpenAI) · OpenAI · Codex, ChatGPT · 5 установок — Скилл направляет запросы по продуктовому дизайну к подходящему рабочему процессу.
- [openai-ads-conversions-setup](https://affpapa.org/nevibecode/skills/openai-ads-conversions-setup.md) — скилл (официальный OpenAI) · OpenAI · Codex, ChatGPT · 5 установок — Скилл помогает настроить трекинг OpenAI Ads через браузерный Pixel и серверный Conversions API (CAPI).
- [web-perf](https://affpapa.org/nevibecode/skills/web-perf.md) — скилл (официальный OpenAI) · Cloudflare · Codex, ChatGPT · 5 установок — Скилл запускает аудит производительности страницы через Chrome DevTools MCP.
- [isolet-widget-isolation](https://affpapa.org/nevibecode/skills/isolet-widget-isolation.md) — скилл · reason-machines · Claude Code, Codex, Cursor +3 · 474 установки — Скилл помогает упаковать компонент в самодостаточный виджет с shadow DOM и собственными стилями, чтобы встроить его на любую страницу.
- [frontend-design](https://affpapa.org/nevibecode/skills/customware-ai-frontend-design.md) — скилл · customware-ai · Claude Code, Codex, Cursor +3 · 1600 установок — Набор жёстких правил для ИИ-агентов, запрещающий шаблонные серые интерфейсы, сетки карточек и сайдбары при вёрстке на Tailwind и shadcn/ui.
- [wordpress-theme-to-emdash](https://affpapa.org/nevibecode/skills/wordpress-theme-to-emdash.md) — скилл · emdash-cms · Claude Code, Codex, Cursor +3 · 691 установка — Переносит дизайн и поведение шаблонов темы WordPress на сайт Astro с бэкендом EmDash.
- [suppressing-noisy-errors](https://affpapa.org/nevibecode/skills/suppressing-noisy-errors.md) — скилл · PostHog · Claude Code, Codex, Cursor +3 · 314 установок — Помогает настроить правила подавления мусорных ошибок в PostHog, отсекая сбои расширений и ботов ещё на этапе приёма данных.
- [visual-regression-tester](https://affpapa.org/nevibecode/skills/visual-regression-tester.md) — скилл · patricio0312rev · Claude Code, Codex, Cursor +3 · 330 установок — Скилл настраивает визуальное регрессионное тестирование: снимает скриншоты, сравнивает их с базовыми и ловит случайные изменения интерфейса.
- [wordpress-plugin-to-emdash](https://affpapa.org/nevibecode/skills/wordpress-plugin-to-emdash.md) — скилл · emdash-cms · Claude Code, Codex, Cursor +3 · 688 установок — Помогает разобрать плагин WordPress и решить, что из него переносить в EmDash: схему сайта, код Astro или отдельный плагин.
- [form-wizard-builder](https://affpapa.org/nevibecode/skills/form-wizard-builder.md) — скилл · patricio0312rev · Claude Code, Codex, Cursor +3 · 328 установок — Скилл собирает многошаговые формы: схемы валидации, шаги, общее состояние, индикатор прогресса и шаг проверки перед отправкой.
- [webphysics-avbd-engine](https://affpapa.org/nevibecode/skills/webphysics-avbd-engine.md) — скилл · reason-machines · Claude Code, Codex, Cursor +3 · 460 установок — Скилл помогает подключить WebGPU-движок физики к проекту и настроить тела, столкновения, связи и мягкие тела.
- [ionic-framework-mcp](https://affpapa.org/nevibecode/skills/ionic-framework-mcp.md) — скилл · capawesome-team · Claude Code, Codex, Cursor +3 · 426 установок — Настраивает подключение к бесплатному MCP-серверу Ionic Framework с документацией по v8 и v9, примерами для Angular, React и Vue.
- [rbac-permissions-builder](https://affpapa.org/nevibecode/skills/rbac-permissions-builder.md) — скилл · patricio0312rev · Claude Code, Codex, Cursor +3 · 320 установок — Проектирует ролевую модель доступа на TypeScript: от матрицы прав и Express middleware до классов политик и проверок в интерфейсе.
- [storybook-setup](https://affpapa.org/nevibecode/skills/storybook-setup.md) — скилл · patricio0312rev · Claude Code, Codex, Cursor +3 · 319 установок — Настраивает Storybook для документации компонентов, интерактивных контролов, accessibility-проверок и визуальной регрессии.
- [astro-best-practices](https://affpapa.org/nevibecode/skills/astro-best-practices.md) — скилл · incluud · Claude Code, Codex, Cursor +3 · 521 установка — Инструкции для ИИ-агентов по разработке на Astro: расстановка директив гидратации, работа со схемами контента и чеклист доступности интерфейса.
- [acgti-anime-persona-quiz](https://affpapa.org/nevibecode/skills/acgti-anime-persona-quiz.md) — скилл · reason-machines · Claude Code, Codex, Cursor +3 · 440 установок — Скилл помогает развивать ACGTI — клиентский аниме-квиз на Vue 3 и TypeScript с расчётом MBTI-типа и подбором персонажа.
- [palantir-for-family-trips](https://affpapa.org/nevibecode/skills/palantir-for-family-trips.md) — скилл · reason-machines · Claude Code, Codex, Cursor +3 · 437 установок — Помогает развернуть и настроить командный центр для совместной поездки нескольких семей.
- [wterm-web-terminal](https://affpapa.org/nevibecode/skills/wterm-web-terminal.md) — скилл · reason-machines · Claude Code, Codex, Cursor +3 · 435 установок — Инструкция для ИИ-агента по встраиванию веб-терминала wterm с ядром на Zig и WebAssembly в проекты на React, Next.js или чистом JavaScript.
- [diagram-design-editorial](https://affpapa.org/nevibecode/skills/diagram-design-editorial.md) — скилл · reason-machines · Claude Code, Codex, Cursor +3 · 433 установки — Скилл собирает диаграммы в HTML и SVG для статей и документации: 13 типов, без Mermaid и сборки, стиль подгоняется под ваш сайт.
- [core-web-vitals-tuner](https://affpapa.org/nevibecode/skills/core-web-vitals-tuner.md) — скилл · patricio0312rev · Claude Code, Codex, Cursor +3 · 308 установок — Скилл помогает улучшить показатели LCP, INP и CLS с помощью структурированных правок в коде.
- [tailwind-gradient-builder](https://affpapa.org/nevibecode/skills/tailwind-gradient-builder.md) — скилл · patricio0312rev · Claude Code, Codex, Cursor +3 · 307 установок — Помогает генерировать линейные, радиальные, конические и mesh-градиенты на Tailwind CSS.
- [frontend-refactor-planner](https://affpapa.org/nevibecode/skills/frontend-refactor-planner.md) — скилл · patricio0312rev · Claude Code, Codex, Cursor +3 · 305 установок — Составляет поэтапный план рефакторинга фронтенда: делит крупные компоненты, упрощает состояние и улучшает доступность.

Дальше: https://affpapa.org/nevibecode/skills/topic/frontend.md?page=68

## Уточнить
[react](https://affpapa.org/nevibecode/tag/react.md) · [ui](https://affpapa.org/nevibecode/tag/ui.md) · [typescript](https://affpapa.org/nevibecode/tag/typescript.md) · [css](https://affpapa.org/nevibecode/tag/css.md) · [animation](https://affpapa.org/nevibecode/tag/animation.md) · [accessibility](https://affpapa.org/nevibecode/tag/accessibility.md) · [design-system](https://affpapa.org/nevibecode/tag/design-system.md) · [nextjs](https://affpapa.org/nevibecode/tag/nextjs.md) · [tailwind](https://affpapa.org/nevibecode/tag/tailwind.md) · [javascript](https://affpapa.org/nevibecode/tag/javascript.md) · [webgl](https://affpapa.org/nevibecode/tag/webgl.md) · [typography](https://affpapa.org/nevibecode/tag/typography.md)

## Сузить этот список
Параметры: `?platform=<claude-code|codex|cursor|copilot|gemini-cli|windsurf|…>`, `&topic=<…>`, `&sort=installs|stars|new|updated` — значения в https://affpapa.org/nevibecode/agents.md

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md