# Скиллы по теме «Фронтенд и UI» Скиллы по теме «Фронтенд и UI»: у каждой карточки — что делает, команда установки и примеры запросов. 2909 карточек · страница 72 из 73 - HTML: https://affpapa.org/nevibecode/skills/topic/frontend?page=72 - Инструкция для агента: https://affpapa.org/nevibecode/agents.md - [storefront-builder](https://affpapa.org/nevibecode/skills/storefront-builder.md) — скилл · saleor · Claude Code, Codex, Cursor +3 · 384 установки — Ведёт агента по шагам сборки витрины на Saleor: подключение GraphQL, дизайн, каталог с выбором варианта. - [interactive-portfolio](https://affpapa.org/nevibecode/skills/interactive-portfolio.md) — скилл · davila7 · Claude Code · 608 установок — Скилл помогает собрать личное портфолио так, чтобы посетитель за полминуты понял, кто вы и что умеете. - [playwright-interactive-sandbox](https://affpapa.org/nevibecode/skills/playwright-interactive-sandbox.md) — скилл · customware-ai · Claude Code, Codex, Cursor +3 · 400 установок — Скилл организует итеративную проверку веб-интерфейса через постоянный Node.js-скрипт с Playwright. - [safe-action-tanstack-query](https://affpapa.org/nevibecode/skills/safe-action-tanstack-query.md) — скилл · next-safe-action · Claude Code, Codex, Cursor +3 · 438 установок — Помогает связывать next-safe-action с TanStack Query: мутации, ошибки, optimistic updates и очистка клиентского кэша. - [frontend-dev-guidelines](https://affpapa.org/nevibecode/skills/frontend-dev-guidelines.md) — скилл · davila7 · Claude Code · 556 установок — Скилл задаёт агенту единый стиль работы с React и TypeScript: Suspense, ленивая загрузка, структура features, MUI v7 и TanStack. - [claude-d3js-skill](https://affpapa.org/nevibecode/skills/claude-d3js-skill.md) — скилл · davila7 · Claude Code · 531 установка — Подсказывает агенту, как строить нестандартные визуализации на d3.js: сетевые графы, географические карты, плавные переходы. - [primevue](https://affpapa.org/nevibecode/skills/primevue.md) — скилл · kindy · Claude Code, Codex, Cursor +3 · 527 установок — Скилл помогает развернуть PrimeVue в связке с Vue 3 и Vite. - [frontend-ui-dark-ts](https://affpapa.org/nevibecode/skills/frontend-ui-dark-ts.md) — скилл · Microsoft · Claude Code, GitHub Copilot · 5 установок — Скилл для сборки тёмных React-интерфейсов на Tailwind CSS: тема, glassmorphism, анимации Framer Motion. - [implement_lenis_scroll](https://affpapa.org/nevibecode/skills/implement-lenis-scroll.md) — скилл · jerrar670 · Claude Code, Codex, Cursor +3 · 468 установок — Скилл подключает Lenis к React или Next.js: агент ставит пакет, пишет компонент-обёртку и вставляет его в layout. - [mobile-first-website-design](https://affpapa.org/nevibecode/skills/mobile-first-website-design.md) — скилл · Kiren Srinivasan · Claude Code, Codex, Cursor +3 · 318 установок — Скилл ведёт агента по лендингам и маркетинговым страницам: сначала структура без стилей, потом айдентика, потом вёрстка от самого узкого экрана. - [design-like-im-5](https://affpapa.org/nevibecode/skills/design-like-im-5.md) — скилл · Kiren Srinivasan · Claude Code, Codex, Cursor +3 · 304 установки — Скилл для проектирования и ревью интерфейсов: держит пользовательское ядро простым, проверяет состояния, ввод и размеры экранов. - [dtcg-tokens](https://affpapa.org/nevibecode/skills/dtcg-tokens.md) — скилл · Kiren Srinivasan · Claude Code, Codex, Cursor +3 · 303 установки — Скилл превращает мультимодальные исходники в DTCG-токены, данные об использованных свидетельствах и HTML-доказательство. - [zoom-video-sdk-web](https://affpapa.org/nevibecode/skills/zoom-video-sdk-web.md) — скилл (официальный OpenAI) · Zoom · Codex, ChatGPT · ★ 7604 — Подсказывает агенту, как собрать кастомную видеосессию на Zoom Video SDK для Web: вход в сессию, камера, шаринг экрана, запись. - [ui-toolkit](https://affpapa.org/nevibecode/skills/ui-toolkit.md) — скилл (официальный OpenAI) · Zoom · Codex, ChatGPT · ★ 7604 — Скилл подсказывает агенту, как подключить предсобранный веб-интерфейс Zoom Video SDK и настроить сессию. - [zoom-meeting-sdk-web-component-view](https://affpapa.org/nevibecode/skills/zoom-meeting-sdk-web-component-view.md) — скилл (официальный OpenAI) · Zoom · Codex, ChatGPT · ★ 7604 — Скилл помогает встроить Zoom-встречу в веб-приложение через Component View. - [zoom-meeting-sdk-web-client-view](https://affpapa.org/nevibecode/skills/zoom-meeting-sdk-web-client-view.md) — скилл (официальный OpenAI) · Zoom · Codex, ChatGPT · ★ 7604 — Скилл для Codex и ChatGPT, который помогает подключить Zoom Meeting SDK Web в режиме Client View — полноэкранной встречи с интерфейсом Zoom. - [stripe-apps](https://affpapa.org/nevibecode/skills/stripe-apps.md) — скилл (официальный OpenAI) · Stripe · Codex, ChatGPT · ★ 7604 — Скилл помогает создавать, менять и проверять Stripe Apps: от каркаса и интерфейса в Dashboard до вебхуков и публикации. - [shopify-polaris-checkout-extensions](https://affpapa.org/nevibecode/skills/shopify-polaris-checkout-extensions.md) — скилл (официальный OpenAI) · Shopify · Codex, ChatGPT · ★ 7604 — Помогает писать код UI-расширений Shopify для checkout: поиск по документации, валидация и скаффолдинг через Shopify CLI. - [shopify-polaris-admin-extensions](https://affpapa.org/nevibecode/skills/shopify-polaris-admin-extensions.md) — скилл (официальный OpenAI) · Shopify · Codex, ChatGPT · ★ 7604 — Помогает писать код расширений для админки Shopify на Polaris: агент ищет в документации, генерирует код и проверяет его валидатором. - [magicpath](https://affpapa.org/nevibecode/skills/magicpath.md) — скилл (официальный OpenAI) · MagicPathAI · Codex, ChatGPT · ★ 7604 — Скилл подключает агента к платформе MagicPath: ищет компоненты на канвасе, ставит их в проект и правит кодом. - [ui-mockup](https://affpapa.org/nevibecode/skills/ui-mockup.md) — скилл · mvschwarz · Claude Code, Codex, Cursor +3 · ★ 8227 — Скилл готовит ASCII-каркасы, HTML-макеты или живые прототипы интерфейсов. - [zustand-store-ts](https://affpapa.org/nevibecode/skills/zustand-store-ts.md) — скилл · Microsoft · Claude Code, GitHub Copilot · 3 установки — Скилл задаёт шаблон стора Zustand на TypeScript: отдельные типы для состояния и действий, middleware subscribeWithSelector, селекторы. - [auteur](https://affpapa.org/nevibecode/skills/auteur.md) — скилл · agiwhitelist · Claude Code, Codex, Cursor +3 · ★ 1042 — Скилл, который проектирует и собирает сайты с нуля: лендинги, кинематографичные скролл-страницы и многоэкранные продукты в одном стиле. - [accessibility](https://affpapa.org/nevibecode/skills/accessibility.md) — скилл · web-quality-skills · Claude Code · 325 установок — Скилл помогает проверять веб-интерфейсы на доступность по WCAG 2.1 и предлагать правки. - [react-patterns](https://affpapa.org/nevibecode/skills/react-patterns.md) — скилл · davila7 · Claude Code · 321 установка — Скилл подсказывает, как выбирать структуру компонентов, хуки и управление состоянием в React. - [core-web-vitals](https://affpapa.org/nevibecode/skills/core-web-vitals.md) — скилл · web-quality-skills · Claude Code · 315 установок — Скилл помогает разбирать LCP, INP и CLS и подбирать изменения для загрузки, отклика и стабильности страницы. - [ui-dev](https://affpapa.org/nevibecode/skills/ui-dev.md) — скилл · elirantutia · Claude Code, Codex, Cursor +3 · ★ 1388 — Скилл задаёт правила для разработки интерфейса на TypeScript без фреймворка: помогает добавлять компоненты, модальные окна и стили в src/renderer/. - [add-npm-dependency](https://affpapa.org/nevibecode/skills/add-npm-dependency.md) — скилл · elirantutia · Claude Code, Codex, Cursor +3 · ★ 1388 — Скилл ведёт агента по правилам добавления npm-зависимостей в Electron-проект: три цели сборки, CSS и нативные модули. - [web-quality-audit](https://affpapa.org/nevibecode/skills/web-quality-audit.md) — скилл · web-quality-skills · Claude Code · 294 установки — Скилл проверяет проект по производительности, доступности, SEO и веб-практикам. - [frontend-to-backend-requirements](https://affpapa.org/nevibecode/skills/frontend-to-backend-requirements.md) — скилл · davila7 · Claude Code · 278 установок — Скилл помогает фронтенд-разработчику описать бэкенду, какие данные нужны экрану, не диктуя структуру API. - [i18n-localization](https://affpapa.org/nevibecode/skills/i18n-localization.md) — скилл · davila7 · Claude Code · 251 установка — Скилл для Claude, который помогает вынести строки в файлы переводов, разобраться с локалями и поддержкой RTL. - [nextjs-developer](https://affpapa.org/nevibecode/skills/httpsgithubcomjeffallan-nextjs-developer.md) — скилл · https://github.com/Jeffallan · Claude Code, Codex, Cursor +3 · ★ 4679 — Скилл помогает создавать приложения Next.js 14+ на App Router: от маршрутов и серверных компонентов до SEO и подготовки к развёртыванию. - [data-viz-renderer](https://affpapa.org/nevibecode/skills/data-viz-renderer.md) — скилл · zebbern · Claude Code, Codex, Cursor +3 · ★ 4679 — Скилл превращает JSON-данные в автономную HTML/SVG-инфографику: карточки показателей, сравнения, схемы процессов и дашборды. - [html-injection-testing](https://affpapa.org/nevibecode/skills/html-injection-testing.md) — скилл · zebbern · Claude Code · 234 установки — Скилл помогает искать HTML-инъекции в веб-приложении и оценивать, как они меняют отображаемую страницу. - [angular](https://affpapa.org/nevibecode/skills/angular.md) — скилл · davila7 · Claude Code · 216 установок — Скилл помогает разрабатывать Angular v20+ через Signals, standalone-компоненты и современные реактивные паттерны. - [tanstack-query-expert](https://affpapa.org/nevibecode/skills/tanstack-query-expert.md) — скилл · davila7 · Claude Code · 196 установок — Скилл помогает проектировать работу TanStack Query в React и Next.js: от запросов и кеша до мутаций и серверной гидратации. - [develop-timeline-studio-plugin](https://affpapa.org/nevibecode/skills/develop-timeline-studio-plugin.md) — скилл · MartinDelophy · Claude Code, Codex, Cursor +3 · ★ 901 — Помогает проектировать и проверять коннекторы генерации изображений и видео для Timeline Studio. - [astro](https://affpapa.org/nevibecode/skills/astro.md) — скилл · suhaibjanjua · Claude Code · 157 установок — Скилл помогает создавать сайты на Astro с контентом в Markdown или MDX и интерактивностью через выборочную гидратацию. - [performance-profiling](https://affpapa.org/nevibecode/skills/performance-profiling.md) — скилл · davila7 · Claude Code · 132 установки — Скилл для Claude, который ведёт агента по шагам: замер, поиск узкого места, правка, проверка результата. - [react-useeffect](https://affpapa.org/nevibecode/skills/react-useeffect.md) — скилл · davila7 · Claude Code · 127 установок — Скилл разбирает правила работы с useEffect по официальной документации React и подсказывает, чем заменить Effect там, где он лишний. Дальше: https://affpapa.org/nevibecode/skills/topic/frontend.md?page=73 ## Уточнить [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