# Скиллы по теме «Фронтенд и UI» Скиллы по теме «Фронтенд и UI»: у каждой карточки — что делает, команда установки и примеры запросов. 2909 карточек · страница 69 из 73 - HTML: https://affpapa.org/nevibecode/skills/topic/frontend?page=69 - Инструкция для агента: https://affpapa.org/nevibecode/agents.md - [graphql](https://affpapa.org/nevibecode/skills/bobmatnyc-graphql.md) — скилл · bobmatnyc · Claude Code, Codex, Cursor +3 · 331 установка — Справочный скилл по GraphQL для ИИ-агентов: помогает проектировать схемы SDL, писать резолверы и настраивать клиентские запросы. - [docs-lookup](https://affpapa.org/nevibecode/skills/docs-lookup.md) — скилл · incluud · Claude Code, Codex, Cursor +3 · 418 установок — Ищет ответы в официальной документации Astro с учётом версий фреймворка, адаптеров и коллекций контента. - [flexlayout-react](https://affpapa.org/nevibecode/skills/flexlayout-react.md) — скилл · Claude MPM Team · Claude Code, Codex, Cursor +3 · 328 установок — Скилл для ИИ-агента, который помогает собирать докинг-интерфейсы на flexlayout-react: перетаскиваемые панели, вкладки, разделители и сохранение раскладки. - [cpq-builder](https://affpapa.org/nevibecode/skills/cpq-builder.md) — скилл · ryan-price · Claude Code, Codex, Cursor +3 · 1200 установок — Превращает DOMAIN.md в интерфейс калькулятора, расчёта смет или CPQ для Customware SPA. - [content-collection](https://affpapa.org/nevibecode/skills/content-collection.md) — скилл · incluud · Claude Code, Codex, Cursor +3 · 410 установок — Скилл помогает создавать и менять коллекции контента Astro с типизированными схемами и запросами. - [astrale-cli](https://affpapa.org/nevibecode/skills/astrale-cli.md) — скилл · astrale-os · Claude Code, Codex, Cursor +3 · 1800 установок — Скилл объясняет работу с Astrale CLI: графом, Kernel, доменами, идентичностями и локальными UI-проектами. - [sasjs-adapter](https://affpapa.org/nevibecode/skills/sasjs-adapter.md) — скилл · sasjs · Claude Code, Codex, Cursor +3 · 1000 установок — Помогает настраивать вызовы сервисов SAS из Node.js и браузера через @sasjs/adapter. - [validated-handler](https://affpapa.org/nevibecode/skills/validated-handler.md) — скилл · bobmatnyc · Claude Code, Codex, Cursor +3 · 322 установки — Внедряет шаблон обёртки API-роутов в Next.js App Router с автоматической проверкой через Zod. - [react-grab](https://affpapa.org/nevibecode/skills/react-grab.md) — скилл · akillness · Claude Code, Codex, Cursor +3 · 344 установки — Скилл учит агента забирать контекст выбранного React-элемента из живого браузера: имя компонента, файл, строку и HTML. - [nextjs-best-practices](https://affpapa.org/nevibecode/skills/nextjs-best-practices.md) — скилл · davila7 · Claude Code · 1785 установок — Набор правил по Next.js App Router для агента. - [add-integration](https://affpapa.org/nevibecode/skills/add-integration.md) — скилл · incluud · Claude Code, Codex, Cursor +3 · 399 установок — Скилл добавляет и настраивает интеграции Astro, адаптеры и UI-фреймворки. - [car-sales-data-engineering-analytics](https://affpapa.org/nevibecode/skills/car-sales-data-engineering-analytics.md) — скилл · reason-machines · Claude Code, Codex, Cursor +3 · 1200 установок — Скилл очищает данные об автопродажах, запускает статистический анализ и строит интерактивный дашборд Streamlit. - [brand-motion-guidelines](https://affpapa.org/nevibecode/skills/brand-motion-guidelines.md) — скилл · iart-ai · Claude Code, Codex, Cursor +3 · 572 установки — Собирает документ о том, как движется бренд или продукт: принципы, токены длительности и кривых, библиотека анимаций, правила для логотипа. - [trades-builder](https://affpapa.org/nevibecode/skills/trades-builder.md) — скилл · ryan-price · Claude Code, Codex, Cursor +3 · 1100 установок — Скилл настраивает генерацию SPA-интерфейса под строительные работы на основе DOMAIN.md. - [cloudinary-next](https://affpapa.org/nevibecode/skills/cloudinary-next.md) — скилл · cloudinary · Claude Code, Codex, Cursor +3 · 307 установок — Помогает агенту писать, чинить и проверять код Next.js с Cloudinary: картинки, видео, загрузки, OG-карточки. - [next-upgrade](https://affpapa.org/nevibecode/skills/next-upgrade.md) — скилл (официальный OpenAI) · Vercel Labs · Codex, ChatGPT · 3 установки — Проводит проект через мажорные обновления Next.js: читает текущую версию, тянет официальные гайды и запускает кодмоды. - [remotion-studio](https://affpapa.org/nevibecode/skills/remotion-studio.md) — скилл (официальный OpenAI) · Remotion · Codex, ChatGPT · 3 установки — Запускает Remotion Studio и даёт агенту URL для предпросмотра видео в браузере. - [remotion-saas](https://affpapa.org/nevibecode/skills/remotion-saas.md) — скилл (официальный OpenAI) · Remotion · Codex, ChatGPT · 3 установки — Помогает собрать приложение с видео на Remotion: от простой формы с рендером до редактора. - [remotion-multimedia](https://affpapa.org/nevibecode/skills/remotion-multimedia.md) — скилл (официальный OpenAI) · Remotion · Codex, ChatGPT · 3 установки — Скилл помогает агенту работать с Mediabunny в браузере: получать длительность аудио и видео, а также размеры видео. - [remotion-maps](https://affpapa.org/nevibecode/skills/remotion-maps.md) — скилл (официальный OpenAI) · Remotion · Codex, ChatGPT · 3 установки — Подбирает техники для анимации карт в Remotion под конкретный кадр: от статичных подложек до 3D-пролётов в CesiumJS. - [remotion-create](https://affpapa.org/nevibecode/skills/remotion-create.md) — скилл (официальный OpenAI) · Remotion · Codex, ChatGPT · 3 установки — Разворачивает видеопроекты на Remotion в Codex, настраивает композиции на React и запускает локальный просмотр через встроенный браузер. - [gsap](https://affpapa.org/nevibecode/skills/gsap.md) — скилл (официальный OpenAI) · HeyGen · Codex, ChatGPT · 3 установки — Справочник по GSAP для агента: твины, таймлайны, easing и производительность. - [migrate](https://affpapa.org/nevibecode/skills/incluud-migrate.md) — скилл · incluud · Claude Code, Codex, Cursor +3 · 363 установки — Планирует и выполняет переезд проекта на Astro или обновление версии Astro. - [safe-action-validation-errors](https://affpapa.org/nevibecode/skills/safe-action-validation-errors.md) — скилл · next-safe-action · Claude Code, Codex, Cursor +3 · 1200 установок — Скилл учит ИИ-агента обрабатывать ошибки валидации в next-safe-action. - [safe-action-hooks](https://affpapa.org/nevibecode/skills/safe-action-hooks.md) — скилл · next-safe-action · Claude Code, Codex, Cursor +3 · 1200 установок — Скилл подсказывает агенту, какой хук next-safe-action взять для формы или оптимистичного UI и как связать его с серверным действием. - [safe-action-client](https://affpapa.org/nevibecode/skills/safe-action-client.md) — скилл · next-safe-action · Claude Code, Codex, Cursor +3 · 1200 установок — Помогает агенту объявлять и настраивать серверные действия next-safe-action с валидацией через Zod или Valibot. - [safe-action-forms](https://affpapa.org/nevibecode/skills/safe-action-forms.md) — скилл · next-safe-action · Claude Code, Codex, Cursor +3 · 1200 установок — Скилл помогает подключать next-safe-action к React-формам, включая React Hook Form, нативные формы и загрузку файлов. - [next-intl-app-router](https://affpapa.org/nevibecode/skills/next-intl-app-router.md) — скилл · liuchiawei · Claude Code, Codex, Cursor +3 · 601 установка — Настраивает next-intl с локалью в пути: конфиг, прокси, навигация и файлы сообщений. - [21st-dev-builder-v2](https://affpapa.org/nevibecode/skills/21st-dev-builder-v2.md) — скилл · trin-zenityx · Claude Code, Codex, Cursor +3 · 468 установок — Скилл ведёт агента по реестру 21st.dev: находит компоненты, отбирает подходящие и собирает из них страницы и приложения на React и Tailwind. - [yjs-best-practices](https://affpapa.org/nevibecode/skills/yjs-best-practices.md) — скилл · liveblocks · Claude Code, Codex, Cursor +3 · 303 установки — Скилл подсказывает агенту, как не сломать синхронизацию Yjs: дубли импортов, поддокументы, YKeyValue и V2-кодирование. - [add-icon](https://affpapa.org/nevibecode/skills/add-icon.md) — скилл · FortAwesome · Claude Code, Codex, Cursor +3 · 569 установок — Подбирает и вставляет иконки Font Awesome в проект с учётом установленного фреймворка и способа подключения. - [safe-action-testing](https://affpapa.org/nevibecode/skills/safe-action-testing.md) — скилл · next-safe-action · Claude Code, Codex, Cursor +3 · 1100 установок — Подсказывает агенту, как писать тесты для экшенов и хуков next-safe-action на Vitest: валидация, middleware, серверные ошибки. - [suggest-icon](https://affpapa.org/nevibecode/skills/suggest-icon.md) — скилл · FortAwesome · Claude Code, Codex, Cursor +3 · 551 установка — Подбирает иконку Font Awesome под ситуацию, слово или понятие и проверяет, что она есть в вашей версии или Kit. - [setup-fa](https://affpapa.org/nevibecode/skills/setup-fa.md) — скилл · FortAwesome · Claude Code, Codex, Cursor +3 · 503 установки — Настраивает Font Awesome в проекте с нуля: определяет фреймворк, подбирает Kit или npm-пакеты и создаёт файл конфигурации .font-awesome.md. - [fa-help](https://affpapa.org/nevibecode/skills/fa-help.md) — скилл · FortAwesome · Claude Code, Codex, Cursor +3 · 498 установок — Отвечает на вопросы о Font Awesome по официальной документации, а не по памяти модели. - [screenshot](https://affpapa.org/nevibecode/skills/zernie-screenshot.md) — скилл · zernie · Claude Code, Codex, Cursor +3 · 337 установок — Скилл рендерит локальные сайты и HTML в Chromium, а затем сохраняет полноэкранные снимки для desktop и mobile. - [microfrontends](https://affpapa.org/nevibecode/skills/microfrontends.md) — скилл (официальный OpenAI) · Vercel Labs · Codex, ChatGPT · 2 установки — Разбивает большое приложение на независимо деплоящиеся части, которые для пользователя выглядят одним сайтом. - [shopify-pos-ui](https://affpapa.org/nevibecode/skills/shopify-pos-ui.md) — скилл (официальный OpenAI) · Shopify · Codex, ChatGPT · 2 установки — Скилл помогает писать интерфейсы для Shopify POS на Preact и разворачивать расширения через консоль. - [hyperframes-registry](https://affpapa.org/nevibecode/skills/hyperframes-registry.md) — скилл (официальный OpenAI) · HeyGen · Codex, ChatGPT · 2 установки — Скилл помогает устанавливать блоки и компоненты из реестра HyperFrames и встраивать их в HTML-композиции. - [hyperframes-cli](https://affpapa.org/nevibecode/skills/hyperframes-cli.md) — скилл (официальный OpenAI) · HeyGen · Codex, ChatGPT · 2 установки — Скилл управляет созданием видеопроектов HyperFrames: от шаблона и проверки HTML-композиций до предпросмотра, рендера, транскрибации и TTS. Дальше: https://affpapa.org/nevibecode/skills/topic/frontend.md?page=70 ## Уточнить [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=`, `&topic=<…>`, `&sort=installs|stars|new|updated` — значения в https://affpapa.org/nevibecode/agents.md --- NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md