# Скиллы по теме «Фронтенд и UI» Скиллы по теме «Фронтенд и UI»: у каждой карточки — что делает, команда установки и примеры запросов. 2909 карточек · страница 56 из 73 - HTML: https://affpapa.org/nevibecode/skills/topic/frontend?page=56 - Инструкция для агента: https://affpapa.org/nevibecode/agents.md - [flutter-duit-bdui](https://affpapa.org/nevibecode/skills/flutter-duit-bdui.md) — скилл · MADTeacher · Claude Code, Codex, Cursor +3 · 343 установки — Помогает внедрять, проверять и отлаживать backend-driven UI на базе flutter_duit во Flutter-проектах с учётом версии пакета. - [nextjs-server-navigation](https://affpapa.org/nevibecode/skills/nextjs-server-navigation.md) — скилл · wsimmonds · Claude Code, Codex, Cursor +3 · 303 установки — Учит ИИ-агента настраивать навигацию в серверных компонентах Next.js через и redirect() без необоснованного добавления директивы 'use client'. - [frontend-design](https://affpapa.org/nevibecode/skills/mager-frontend-design.md) — скилл · mager · Claude Code, Codex, Cursor +3 · 1700 установок — Скилл задаёт агенту конкретную дизайнерскую оптику: типографика, палитра, тактильные состояния. - [bun-sveltekit](https://affpapa.org/nevibecode/skills/bun-sveltekit.md) — скилл · secondsky · Claude Code, Codex, Cursor +3 · 499 установок — Подсказывает агенту, как собирать и запускать SvelteKit на Bun: SSR, адаптер, bun:sqlite и работа с файлами. - [nextjs-dynamic-routes-params](https://affpapa.org/nevibecode/skills/nextjs-dynamic-routes-params.md) — скилл · wsimmonds · Claude Code, Codex, Cursor +3 · 303 установки — Скилл подсказывает агенту, как строить динамические сегменты App Router и читать params в Next.js 15+. - [design-system-generator](https://affpapa.org/nevibecode/skills/design-system-generator.md) — скилл · OneWave-AI · Claude Code, Codex, Cursor +3 · 300 установок — Собирает дизайн-систему из токенов, базовых компонентов и документации. - [rspress-custom-theme](https://affpapa.org/nevibecode/skills/rspress-custom-theme.md) — скилл · rstackjs · Claude Code, Codex, Cursor +3 · 408 установок — Скилл подсказывает агенту, как менять тему Rspress v2: от CSS-переменных до замены встроенных компонентов. - [designing-beautiful-websites](https://affpapa.org/nevibecode/skills/designing-beautiful-websites.md) — скилл · tristanmanchester · Claude Code, Codex, Cursor +3 · 2800 установок — Скилл для проектирования и правки интерфейсов сайтов и веб-приложений: структура, адаптив, визуальный язык и состояния элементов. - [progressive-web-app](https://affpapa.org/nevibecode/skills/secondsky-progressive-web-app.md) — скилл · secondsky · Claude Code, Codex, Cursor +3 · 500 установок — Скилл для сборки устанавливаемых веб-приложений: манифест, service worker, офлайн-режим и запрос на установку. - [react-testing-library](https://affpapa.org/nevibecode/skills/pproenca-react-testing-library.md) — скилл · pproenca · Claude Code, Codex, Cursor +3 · 402 установки — Скилл с 43 правилами для тестов на React Testing Library. - [tanstack-table](https://affpapa.org/nevibecode/skills/claude-skills-maintainers-tanstack-table.md) — скилл · Claude Skills Maintainers · Claude Code, Codex, Cursor +3 · 494 установки — Настраивает таблицы TanStack Table v8 с пагинацией и сортировкой на сервере. - [webmcp](https://affpapa.org/nevibecode/skills/webmcp.md) — скилл · webmaxru · Claude Code, Codex, Cursor +3 · 514 установок — Помогает настроить клиентский WebMCP в веб-приложениях на JavaScript и TypeScript. - [konsta-ui](https://affpapa.org/nevibecode/skills/konsta-ui.md) — скилл · Cap-go · Claude Code, Codex, Cursor +3 · 836 установок — Скилл помогает агенту собирать интерфейс Capacitor-приложения на Konsta UI v5 с Tailwind CSS v4 и разбираться, почему компоненты остались без стилей. - [react-optimise](https://affpapa.org/nevibecode/skills/react-optimise.md) — скилл · pproenca · Claude Code, Codex, Cursor +3 · 396 установок — Скилл для оптимизации React-приложений: React Compiler, размер бандла, рендеринг, загрузка данных, Core Web Vitals. - [ui-design-aesthetics](https://affpapa.org/nevibecode/skills/ui-design-aesthetics.md) — скилл · NickCrew · Claude Code, Codex, Cursor +3 · 357 установок — Скилл задаёт агенту правила типографики, цвета и анимации, чтобы интерфейсы не выглядели как типовые поделки ИИ. - [efecto-web-design](https://affpapa.org/nevibecode/skills/efecto-web-design.md) — скилл · pablostanley · Claude Code, Codex, Cursor +3 · 691 установка — Скилл собирает веб-страницы и интерфейсы в Efecto через JSX, Tailwind CSS и MCP-инструменты. - [cmux-sidebar-builder](https://affpapa.org/nevibecode/skills/cmux-sidebar-builder.md) — скилл · manaflow-ai · Claude Code, Codex, Cursor +3 · 636 установок — Скилл помогает писать и править кастомные сайдбары cmux на SwiftUI-подобном языке, который cmux разбирает на ходу. - [image-seo](https://affpapa.org/nevibecode/skills/image-seo.md) — скилл · adobe · Claude Code, Codex, Cursor +3 · 316 установок — Проверяет alt-тексты, размеры, ленивую загрузку и приоритеты картинок на страницах AEM Edge Delivery Services и выдаёт отчёт с правками. - [sitemap-audit](https://affpapa.org/nevibecode/skills/sitemap-audit.md) — скилл · adobe · Claude Code, Codex, Cursor +3 · 316 установок — Скилл сверяет sitemap.xml проекта на AEM Edge Delivery Services с реальным индексом страниц, выявляя битые ссылки, утечки черновиков и расхождения дат. - [ios-ux-design](https://affpapa.org/nevibecode/skills/ios-ux-design.md) — скилл · mosif16 · Claude Code, Codex, Cursor +3 · 543 установки — Скилл, который подключает к ИИ-агенту экспертизу по Human Interface Guidelines и SwiftUI: аудит экранов, разбор паттернов, спецификации на доработку. - [md-slides](https://affpapa.org/nevibecode/skills/md-slides.md) — скилл · Alireza Rezvani · Claude Code · 15 установок — Преобразует Markdown-колоду в однофайловую HTML-презентацию с навигацией, заметками докладчика и печатью в PDF. - [product-page-seo](https://affpapa.org/nevibecode/skills/adobe-product-page-seo.md) — скилл · adobe · Claude Code, Codex, Cursor +3 · 314 установок — Проверяет, видят ли поисковики карточки товаров на AEM Edge Delivery Services, и подсказывает, что починить. - [figma-ui-skills](https://affpapa.org/nevibecode/skills/figma-ui-skills.md) — скилл · design-skills · Claude Code, Codex, Cursor +3 · 346 установок — Задаёт агенту дизайн-систему интерфейсов Figma: светлую тему, шрифт Inter и сетку 4px. - [react-composition-patterns](https://affpapa.org/nevibecode/skills/react-composition-patterns.md) — скилл · vercel · Claude Code, Codex, Cursor +3 · 481 установка — Набор архитектурных правил React для ИИ-агента. - [design-system-creation](https://affpapa.org/nevibecode/skills/secondsky-design-system-creation.md) — скилл · secondsky · Claude Code, Codex, Cursor +3 · 481 установка — Скилл помогает агенту собрать дизайн-систему: токены, типографику, компоненты и документацию к ним. - [elements](https://affpapa.org/nevibecode/skills/elements.md) — скилл · assistant-ui · Claude Code, Codex, Cursor +3 · 1100 установок — Помогает добавлять и настраивать компоненты assistant-ui в проект. - [shadcn-component-boundaries](https://affpapa.org/nevibecode/skills/shadcn-component-boundaries.md) — скилл · purrfold · Claude Code, Codex, Cursor +3 · 2900 установок — Задаёт правила размещения UI-компонентов в проектах с shadcn. - [project-architecture](https://affpapa.org/nevibecode/skills/project-architecture.md) — скилл · purrfold · Claude Code, Codex, Cursor +3 · 2900 установок — Скилл удерживает серверный рендеринг в Next.js и Astro. - [vercel-ui-skills](https://affpapa.org/nevibecode/skills/vercel-ui-skills.md) — скилл · design-skills · Claude Code, Codex, Cursor +3 · 342 установки — Задаёт агенту жёсткие правила вёрстки в стиле Vercel: светлый фон, Inter, сетка 4px. - [shadcn-inertia](https://affpapa.org/nevibecode/skills/shadcn-inertia.md) — скилл · inertia-rails · Claude Code, Codex, Cursor +3 · 432 установки — Адаптирует компоненты shadcn/ui для связки Inertia.js, Ruby on Rails и React вместо Next.js. - [headless-caching-strategy](https://affpapa.org/nevibecode/skills/headless-caching-strategy.md) — скилл · vtex · Claude Code, Codex, Cursor +3 · 1100 установок — Задаёт правила кэширования для headless-витрин на VTEX. - [headless-intelligent-search](https://affpapa.org/nevibecode/skills/headless-intelligent-search.md) — скилл · vtex · Claude Code, Codex, Cursor +3 · 1100 установок — Скилл помогает подключить поиск VTEX Intelligent Search к headless-магазину: от подсказок и фильтров до событий аналитики. - [faststore-storefront](https://affpapa.org/nevibecode/skills/faststore-storefront.md) — скилл · vtex · Claude Code, Codex, Cursor +3 · 1100 установок — Задаёт правила разработки витрин VTEX FastStore: создание компонентов на React 18, оверрайды секций, синхронизацию CMS-схем и стилизацию на SCSS без нарушения изоляции. - [vtex-io-messages-and-i18n](https://affpapa.org/nevibecode/skills/vtex-io-messages-and-i18n.md) — скилл · vtex · Claude Code, Codex, Cursor +3 · 1100 установок — Помогает вынести пользовательские строки в messages-инфраструктуру VTEX IO вместо хардкода в JSX и резолверах. - [vtex-io-render-runtime-and-blocks](https://affpapa.org/nevibecode/skills/vtex-io-render-runtime-and-blocks.md) — скилл · vtex · Claude Code, Codex, Cursor +3 · 1100 установок — Скилл учит агента подключать React-компоненты к Store Framework как блоки в VTEX IO: записи в store/interfaces.json, композиция и связь с темой. - [vtex-io-admin-react](https://affpapa.org/nevibecode/skills/vtex-io-admin-react.md) — скилл · vtex · Claude Code, Codex, Cursor +3 · 1100 установок — Задаёт правила сборки панелей управления в VTEX IO на React: учит агента использовать официальные дизайн-системы, обрабатывать состояния загрузки и строить навигацию. - [revenuecat-customer-center](https://affpapa.org/nevibecode/skills/revenuecat-customer-center.md) — скилл · RevenueCat · Claude Code, Codex, Cursor +3 · 715 установок — Добавляет в приложение готовый экран Customer Center из RevenueCat: подписчик сам отменяет подписку, запрашивает возврат и восстанавливает покупки. - [image-to-code](https://affpapa.org/nevibecode/skills/image-to-code.md) — скилл (официальный OpenAI) · OpenAI · Codex, ChatGPT · 14 установок — Переносит макеты, скриншоты и концепт-арты в интерактивный веб-интерфейс. - [design-with-taste](https://affpapa.org/nevibecode/skills/design-with-taste.md) — скилл · cristicretu · Claude Code, Codex, Cursor +3 · 758 установок — Скилл задаёт агенту правила дизайна: постепенное раскрытие интерфейса, плавные переходы и акценты. - [inertia-rails-setup](https://affpapa.org/nevibecode/skills/inertia-rails-setup.md) — скилл · inertia-rails · Claude Code, Codex, Cursor +3 · 419 установок — Скилл анализирует стек Inertia Rails в проекте, подбирает недостающие библиотеки и генерирует блок конфигурации в CLAUDE.md. Дальше: https://affpapa.org/nevibecode/skills/topic/frontend.md?page=57 ## Уточнить [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