# Скиллы по теме «Фронтенд и UI» Скиллы по теме «Фронтенд и UI»: у каждой карточки — что делает, команда установки и примеры запросов. 2909 карточек · страница 30 из 73 - HTML: https://affpapa.org/nevibecode/skills/topic/frontend?page=30 - Инструкция для агента: https://affpapa.org/nevibecode/agents.md - [migrate-design-system](https://affpapa.org/nevibecode/skills/migrate-design-system.md) — скилл · plugin87 · Claude Code, Codex, Cursor +3 · 487 установок — Сопоставляет токены вашей дизайн-системы с чужой и обратно: Material 3, Apple HIG, Fluent 2, shadcn/ui, Radix. - [icon-set-generator](https://affpapa.org/nevibecode/skills/icon-set-generator.md) — скилл · jezweb · Claude Code, Codex, Cursor +3 · 1900 установок — Скилл рисует набор SVG-иконок под конкретный проект: один стиль, одна сетка, одинаковый штрих. - [prototype](https://affpapa.org/nevibecode/skills/plugin87-prototype.md) — скилл · plugin87 · Claude Code, Codex, Cursor +3 · 484 установки — Ведёт проектирование интерфейса по лестнице детализации от структуры контента до кода. - [compose-performance](https://affpapa.org/nevibecode/skills/compose-performance.md) — скилл · chrisbanes · Claude Code, Codex, Cursor +3 · 1100 установок — Скилл для расследования стоимости рекомпозиции в Jetpack Compose: помогает найти фазу, из-за которой пересчитывается UI, и починить её точечно. - [compose-state-and-effects](https://affpapa.org/nevibecode/skills/compose-state-and-effects.md) — скилл · chrisbanes · Claude Code, Codex, Cursor +3 · 1100 установок — Скилл помогает проектировать и проверять владение состоянием в Jetpack Compose. - [token-build](https://affpapa.org/nevibecode/skills/token-build.md) — скилл · plugin87 · Claude Code, Codex, Cursor +3 · 480 установок — Скилл превращает DTCG-токены из JSON в файлы тем для веба и мобильных платформ. - [axiom-uikit](https://affpapa.org/nevibecode/skills/axiom-uikit.md) — скилл · CharlesWiltgen · Claude Code, Codex, Cursor +3 · 1200 установок — Маршрутизирует задачи по связке UIKit и SwiftUI, отладке Auto Layout, анимаций, Combine и TextKit. - [figma-integration](https://affpapa.org/nevibecode/skills/plugin87-figma-integration.md) — скилл · plugin87 · Claude Code, Codex, Cursor +3 · 478 установок — Скилл связывает токены и компоненты проекта с Figma в обоих направлениях. - [serial-position-effect](https://affpapa.org/nevibecode/skills/serial-position-effect.md) — скилл · Owl-Listener · Claude Code, Codex, Cursor +3 · 1000 установок — Скилл применяет эффект серийной позиции: подсказывает, какие пункты ставить первыми и последними, а что попадёт в провал посередине. - [teslers-law](https://affpapa.org/nevibecode/skills/teslers-law.md) — скилл · Owl-Listener · Claude Code, Codex, Cursor +3 · 1000 установок — Помогает распределять сложность между интерфейсом и пользователем по закону Теслера. - [zeigarnik-effect](https://affpapa.org/nevibecode/skills/zeigarnik-effect.md) — скилл · Owl-Listener · Claude Code, Codex, Cursor +3 · 1000 установок — Скилл для проектирования прогресс-баров, черновиков и напоминаний о незавершённых шагах. - [jakobs-law](https://affpapa.org/nevibecode/skills/jakobs-law.md) — скилл · Owl-Listener · Claude Code, Codex, Cursor +3 · 1100 установок — Скилл помогает оценить цену отказа от привычных интерфейсных паттернов по закону Якоба Нильсена. - [antv-g6-graph](https://affpapa.org/nevibecode/skills/antv-g6-graph.md) — скилл · antvis · Claude Code, Codex, Cursor +3 · 1100 установок — Помогает собрать сетевой граф, дерево или блок-схему на G6 v5 и не спотыкаться о синтаксис v4. - [zod](https://affpapa.org/nevibecode/skills/pymodel-zod.md) — скилл · PyModel · Claude Code, Codex, Cursor +3 · 476 установок — Справочник из 46 правил для валидации схем и вывода типов в Zod 4. - [revealjs](https://affpapa.org/nevibecode/skills/revealjs.md) — скилл · ryanbbrown · Claude Code, Codex, Cursor +3 · 736 установок — Скилл собирает презентацию на reveal.js: HTML-файл со слайдами и CSS с вашей темой. - [auth0](https://affpapa.org/nevibecode/skills/auth0.md) — скилл · Auth0 · Claude Code, Codex, Cursor +3 · 5200 установок — Помогает настроить авторизацию пользователей, защиту API и токены в приложении. - [responsiveness-check](https://affpapa.org/nevibecode/skills/responsiveness-check.md) — скилл · jezweb · Claude Code, Codex, Cursor +3 · 1800 установок — Гоняет страницу по ширинам вьюпорта в одной браузерной сессии, снимает скриншоты и показывает, где ломается раскладка. - [seo-local-business](https://affpapa.org/nevibecode/skills/seo-local-business.md) — скилл · jezweb · Claude Code, Codex, Cursor +3 · 1800 установок — Генерирует метатеги , микроразметку JSON-LD LocalBusiness, robots.txt и sitemap.xml для сайтов локальных компаний с привязкой к регионам и пригородам. - [apollo-client](https://affpapa.org/nevibecode/skills/apollo-client.md) — скилл · apollographql · Claude Code, Codex, Cursor +3 · 5600 установок — Скилл ведёт агента по настройке Apollo Client 4.x в React: запросы, мутации, кэш, локальное состояние и разбор ошибок. - [ipados-design-guidelines](https://affpapa.org/nevibecode/skills/ipados-design-guidelines.md) — скилл · platform-design-skills · Claude Code, Codex, Cursor +3 · 1200 установок — Набор правил Apple Human Interface Guidelines для iPad: адаптивные раскладки, многозадачность, боковая навигация и поддержка указателя. - [email-render-builder](https://affpapa.org/nevibecode/skills/email-render-builder.md) — скилл · aaron-he-zhu · Claude Code, Codex, Cursor +3 · 1000 установок — Собирает HTML-вёрстку письма из готового креатива и проверяет, как она отрисуется в Gmail, Outlook, Apple Mail и на мобильных. - [anywidget-generator](https://affpapa.org/nevibecode/skills/anywidget-generator.md) — скилл · marimo-team · Claude Code, Codex, Cursor +3 · 3600 установок — Скилл помогает агенту писать кастомные anywidget-компоненты для ноутбуков marimo: JavaScript в _esm, стили в _css, обёртка через mo.ui.anywidget. - [neon-realtime](https://affpapa.org/nevibecode/skills/neon-realtime.md) — скилл · neondatabase · Claude Code, Codex, Cursor +3 · 6000 установок — Делает любой SQL-запрос живым: клиент подписывается на изменения строк в Lakebase Postgres и получает их батчами. - [experience-lwr-site-generate](https://affpapa.org/nevibecode/skills/experience-lwr-site-generate.md) — скилл · forcedotcom · Claude Code, Codex, Cursor +3 · 2700 установок — Собирает и правит сайты Salesforce Experience Cloud на LWR через метаданные DigitalExperience: страницы, маршруты, темы, гостевой доступ. - [tailwind-v4-shadcn](https://affpapa.org/nevibecode/skills/tailwind-v4-shadcn.md) — скилл · secondsky · Claude Code, Codex, Cursor +3 · 8100 установок — Скилл настраивает связку Tailwind CSS v4, shadcn/ui и React в проектах на Vite. - [compose-component-design](https://affpapa.org/nevibecode/skills/compose-component-design.md) — скилл · chrisbanes · Claude Code, Codex, Cursor +3 · 1000 установок — Скилл для проектирования и ревью переиспользуемых компонентов Jetpack Compose: слоты, модификаторы, размещение корневого layout. - [elevenlabs-agents](https://affpapa.org/nevibecode/skills/elevenlabs-agents.md) — скилл · jezweb · Claude Code, Codex, Cursor +3 · 1700 установок — Собирает голосовых ИИ-агентов на ElevenLabs: настраивает агента, инструменты, базу знаний и подключение SDK. - [3d-virtual-tour](https://affpapa.org/nevibecode/skills/3d-virtual-tour.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 527 установок — Скилл для сборки виртуальных туров по 3D-сцене: маршрут камеры, переходы между комнатами, осмотр модели. - [frontend-app-builder](https://affpapa.org/nevibecode/skills/frontend-app-builder.md) — скилл (официальный OpenAI) · OpenAI · Codex, ChatGPT · 252 установки — Помогает спроектировать и собрать интерфейс приложения, сайта или игры, затем проверить его в браузере. - [experience-lwc-base-components-integrate](https://affpapa.org/nevibecode/skills/experience-lwc-base-components-integrate.md) — скилл · forcedotcom · Claude Code, Codex, Cursor +3 · 2600 установок — Помогает выбрать подходящий Lightning Base Component под задачу интерфейса и подключить его в LWC без поломки SLDS. - [experience-lds-data-requirements-generate](https://affpapa.org/nevibecode/skills/experience-lds-data-requirements-generate.md) — скилл · forcedotcom · Claude Code, Codex, Cursor +3 · 2600 установок — Переводит неточные описания данных для Lightning Web Components в готовую спецификацию. - [nextjs-performance](https://affpapa.org/nevibecode/skills/nextjs-performance.md) — скилл · giuseppe-trisciuoglio · Claude Code, Codex, Cursor +3 · 4900 установок — Скилл по оптимизации Next.js: Core Web Vitals, картинки и шрифты, кеширование, стриминг, размер бандла. - [frontend-slides-editable](https://affpapa.org/nevibecode/skills/frontend-slides-editable.md) — скилл · archlizheng · Claude Code, Codex, Cursor +3 · 537 установок — Создаёт одностраничные HTML-презентации со встроенным редактором в браузере. - [liquid-theme-standards](https://affpapa.org/nevibecode/skills/liquid-theme-standards.md) — скилл · benjaminsehl · Claude Code, Codex, Cursor +3 · 2900 установок — Скилл задаёт правила вёрстки и клиентских скриптов для тем Shopify. - [pp-figma](https://affpapa.org/nevibecode/skills/pp-figma.md) — скилл · Giuliano Giacaglia · Claude Code, Codex, Cursor +3 · 726 установок — Выгружает компактные данные фреймов Figma для кодогенерации, проверяет нерешённые комментарии и находит неиспользуемые компоненты. - [3d-retina-resolution](https://affpapa.org/nevibecode/skills/3d-retina-resolution.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 512 установок — Настраивает чёткий 3D-рендеринг на Retina и HiDPI, включая фиксированный масштаб 200%. - [react-patterns](https://affpapa.org/nevibecode/skills/giuseppe-trisciuoglio-react-patterns.md) — скилл · giuseppe-trisciuoglio · Claude Code, Codex, Cursor +3 · 4800 установок — Подсказывает агенту паттерны React 19: Server Components, Server Actions, useOptimistic, Suspense. - [3d-sky-background](https://affpapa.org/nevibecode/skills/3d-sky-background.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 505 установок — Настраивает корректный фон неба в 3D-сцене: процедурную атмосферу, туман у горизонта, направленный солнечный свет и окружение для PBR. - [tvos-design-guidelines](https://affpapa.org/nevibecode/skills/tvos-design-guidelines.md) — скилл · platform-design-skills · Claude Code, Codex, Cursor +3 · 1100 установок — Скилл загружает в ассистент правила Apple HIG для tvOS. - [3d-falling-leaves](https://affpapa.org/nevibecode/skills/3d-falling-leaves.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 499 установок — Скилл для Three.js и похожих сцен: учит агента строить падающие листья в мировых координатах, с переворотом, сносом и переиспользованием инстансов. Дальше: https://affpapa.org/nevibecode/skills/topic/frontend.md?page=31 ## Уточнить [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