# Скиллы по теме «Фронтенд и UI» Скиллы по теме «Фронтенд и UI»: у каждой карточки — что делает, команда установки и примеры запросов. 2909 карточек · страница 42 из 73 - HTML: https://affpapa.org/nevibecode/skills/topic/frontend?page=42 - Инструкция для агента: https://affpapa.org/nevibecode/agents.md - [ui-web](https://affpapa.org/nevibecode/skills/ui-web.md) — скилл · alinaqi · Claude Code, Codex, Cursor +3 · 393 установки — Скилл со строгими правилами вёрстки: внедряет WCAG 2.1 AA, сетку Tailwind на 8 px, тёмную тему и эффекты глассморфизма. - [wcag-accessibility-audit](https://affpapa.org/nevibecode/skills/wcag-accessibility-audit.md) — скилл · mastepanoski · Claude Code, Codex, Cursor +3 · 1600 установок — Проверяет сайт или веб-приложение по WCAG 2.1 и 2.2, находит барьеры доступности и помогает оценить соответствие уровням A, AA и AAA. - [industrial-brutalist](https://affpapa.org/nevibecode/skills/industrial-brutalist.md) — скилл · tasteskill · Claude Code, Codex, Cursor +3 · 311 установок — Скилл для сайтов в стиле индустриального брутализма и тактических интерфейсов. - [web-game-foundations](https://affpapa.org/nevibecode/skills/web-game-foundations.md) — скилл (официальный OpenAI) · OpenAI · Codex, ChatGPT · 52 установки — Задаёт архитектуру браузерной игры до начала кодинга. - [view-refactor](https://affpapa.org/nevibecode/skills/view-refactor.md) — скилл (официальный OpenAI) · OpenAI · Codex, ChatGPT · 52 установки — Скилл помогает разложить macOS SwiftUI views и scenes по устойчивой структуре. - [network-request-auditing](https://affpapa.org/nevibecode/skills/network-request-auditing.md) — скилл · spencerpauly · Claude Code, Codex, Cursor +3 · 435 установок — Скилл проверяет сетевые запросы браузера после действий пользователя, выявляя сбои, медленные вызовы и дубли. - [dark-mode-testing](https://affpapa.org/nevibecode/skills/dark-mode-testing.md) — скилл · spencerpauly · Claude Code, Codex, Cursor +3 · 436 установок — Открывает страницу в браузере, снимает скриншоты в светлой и тёмной теме и указывает на потерянные цвета, невидимый текст и низкий контраст. - [mapbox-search-integration](https://affpapa.org/nevibecode/skills/mapbox-search-integration.md) — скилл · mapbox · Claude Code, Codex, Cursor +3 · 1900 установок — Проводит агента через весь цикл внедрения поиска Mapbox: от вопросов о задаче до готового кода с нужным API и параметрами. - [mapbox-token-security](https://affpapa.org/nevibecode/skills/mapbox-token-security.md) — скилл · mapbox · Claude Code, Codex, Cursor +3 · 1900 установок — Набор правил безопасности для токенов Mapbox: разграничение публичных и секретных ключей, ограничение по URL и защита от тихих падений карты. - [upgrade-react-native](https://affpapa.org/nevibecode/skills/upgrade-react-native.md) — скилл · react-native-community · Claude Code, Codex, Cursor +3 · 1300 установок — Обновляет проекты React Native Community CLI на заданную версию через diff-файлы React Native Upgrade Helper. - [vite](https://affpapa.org/nevibecode/skills/anthony-fu-vite.md) — скилл · Anthony Fu · Claude Code, Codex, Cursor +3 · 747 установок — Скилл по Vite 6.x: помогает настроить конфиг, подключить плагины, разобраться с dev-сервером и собрать проект в прод. - [nextjs-app-architecture](https://affpapa.org/nevibecode/skills/nextjs-app-architecture.md) — скилл · aurorascharff · Claude Code, Codex, Cursor +3 · 485 установок — Скилл задаёт единую архитектуру App Router в Next.js 16: страницы только компонуют, данные читают фичи. - [svelte-runes](https://affpapa.org/nevibecode/skills/svelte-runes.md) — скилл · spences10 · Claude Code, Codex, Cursor +3 · 1000 установок — Помогает ИИ-агенту писать код на Svelte 5 с рунами без смешивания устаревшего синтаксиса. - [sveltekit-structure](https://affpapa.org/nevibecode/skills/sveltekit-structure.md) — скилл · spences10 · Claude Code, Codex, Cursor +3 · 1000 установок — Подсказывает агенту, как раскладывать маршруты, вложенные лейауты и границы ошибок в SvelteKit. - [quieter](https://affpapa.org/nevibecode/skills/educlopez-quieter.md) — скилл · educlopez · Claude Code, Codex, Cursor +3 · 451 установка — Скилл для ИИ-кодинга, который снижает визуальный шум в интерфейсе: меньше движения, проще сетка, спокойнее цвет. - [writing-for-interfaces](https://affpapa.org/nevibecode/skills/writing-for-interfaces.md) — скилл · andrewgleave · Claude Code, Codex, Cursor +3 · 1100 установок — Скилл помогает писать и редактировать текст внутри интерфейсов: системные ошибки, кнопки и подсказки в CLI. - [finding-dev-server-url](https://affpapa.org/nevibecode/skills/finding-dev-server-url.md) — скилл · spencerpauly · Claude Code, Codex, Cursor +3 · 425 установок — Находит адреса запущенных dev-серверов в логах терминала и выводит порты localhost. - [bolder](https://affpapa.org/nevibecode/skills/educlopez-bolder.md) — скилл · educlopez · Claude Code, Codex, Cursor +3 · 445 установок — Скилл добавляет интерфейсу характер: больше разброса в раскладке, движения и один акцентный приём. - [shader-glsl](https://affpapa.org/nevibecode/skills/shader-glsl.md) — скилл · iart-ai · Claude Code, Codex, Cursor +3 · 1400 установок — Скилл помогает писать фрагментные шейдеры GLSL для генеративного фона, переходов между картинками и эффектов в Three.js. - [converting-css-to-tailwind](https://affpapa.org/nevibecode/skills/converting-css-to-tailwind.md) — скилл · spencerpauly · Claude Code, Codex, Cursor +3 · 423 установки — Скилл проходит по CSS-файлу и переносит правила в Tailwind-классы прямо в разметке. - [now-reading-page](https://affpapa.org/nevibecode/skills/now-reading-page.md) — скилл · readwiseio · Claude Code, Codex, Cursor +3 · 455 установок — Собирает из вашей библиотеки Readwise Reader один HTML-файл со списком того, что вы читаете сейчас и прочитали недавно. - [visual-testing](https://affpapa.org/nevibecode/skills/visual-testing.md) — скилл · kindlmann · Claude Code, Codex, Cursor +3 · 1200 установок — Скилл для визуального регрессионного тестирования: сравнивает скриншоты с эталонами и ловит различия на уровне пикселей, которые пропускают функциональные тесты. - [render-props-pattern](https://affpapa.org/nevibecode/skills/render-props-pattern.md) — скилл · patterns.dev · Claude Code, Codex, Cursor +3 · 1000 установок — Скилл объясняет паттерн render props в React и подсказывает, когда вместо него взять хуки. - [client-side-rendering](https://affpapa.org/nevibecode/skills/client-side-rendering.md) — скилл · patterns.dev · Claude Code, Codex, Cursor +3 · 1000 установок — Скилл объясняет клиентский рендеринг в React: когда он уместен, а когда страница провалится по SEO и первой отрисовке. - [hoc-pattern](https://affpapa.org/nevibecode/skills/hoc-pattern.md) — скилл · patterns.dev · Claude Code, Codex, Cursor +3 · 1000 установок — Обучает ИИ паттерну Higher-Order Component для переиспользования логики в React. - [compound-pattern](https://affpapa.org/nevibecode/skills/compound-pattern.md) — скилл · patterns.dev · Claude Code, Codex, Cursor +3 · 1000 установок — Учит агента собирать составные компоненты с общим неявным состоянием: табы, аккордеоны, выпадающие меню. - [nextjs](https://affpapa.org/nevibecode/skills/nextjs.md) — скилл (официальный OpenAI) · Vercel Labs · Codex, ChatGPT · 50 установок — Помогает разрабатывать и отлаживать приложения на Next.js App Router. - [detecting-port-conflicts](https://affpapa.org/nevibecode/skills/detecting-port-conflicts.md) — скилл · spencerpauly · Claude Code, Codex, Cursor +3 · 418 установок — Скилл находит занятые порты при ошибках вроде EADDRINUSE, вычисляет блокирующий процесс и помогает освободить порт либо сменить его в конфиге dev-сервера. - [swiftui-animation](https://affpapa.org/nevibecode/skills/jamesrochabrun-swiftui-animation.md) — скилл · jamesrochabrun · Claude Code, Codex, Cursor +3 · 567 установок — Скилл помогает настраивать пружинные анимации SwiftUI и эффекты Metal-шейдеров в приложениях для iOS и macOS. - [godot-ui-rich-text](https://affpapa.org/nevibecode/skills/godot-ui-rich-text.md) — скилл · thedivergentai · Claude Code, Codex, Cursor +3 · 400 установок — Скилл для работы с RichTextLabel в Godot: BBCode-разметка, кликабельные ссылки, кастомные эффекты и системы диалогов. - [iphone-duo-readiness](https://affpapa.org/nevibecode/skills/iphone-duo-readiness.md) — скилл · mirzaaghazadeh · Claude Code, Codex, Cursor +3 · 630 установок — Скилл для аудита и адаптации iOS-приложений под складной iPhone Duo. - [write-landing](https://affpapa.org/nevibecode/skills/write-landing.md) — скилл · OpenClaudia · Claude Code, Codex, Cursor +3 · 468 установок — Пишет текст и каркас посадочной страницы под конверсию и SEO. - [phaser-2d-game](https://affpapa.org/nevibecode/skills/phaser-2d-game.md) — скилл (официальный OpenAI) · OpenAI · Codex, ChatGPT · 49 установок — Скилл помогает собирать 2D-игры для браузера на Phaser, TypeScript и Vite. - [profiling-performance](https://affpapa.org/nevibecode/skills/profiling-performance.md) — скилл · spencerpauly · Claude Code, Codex, Cursor +3 · 410 установок — Скилл запускает профилирование CPU во встроенном браузере через инструменты MCP. - [ui-testing](https://affpapa.org/nevibecode/skills/ui-testing.md) — скилл · alinaqi · Claude Code, Codex, Cursor +3 · 364 установки — Чек-лист и правила для проверки доступности интерфейсов: выявляет невидимые кнопки, плохой контраст и мелкие области клика при генерации UI. - [threejs-perf](https://affpapa.org/nevibecode/skills/threejs-perf.md) — скилл · OpusGameLabs · Claude Code, Codex, Cursor +3 · 639 установок — Оптимизирует сцены Three.js через инстансинг, убирает лишние вызовы отрисовки и ускоряет рендеринг тысяч подвижных объектов. - [vue](https://affpapa.org/nevibecode/skills/anthony-fu-vue.md) — скилл · Anthony Fu · Claude Code, Codex, Cursor +3 · 706 установок — Помогает проектировать компоненты Vue и настраивать реактивность. - [htmx](https://affpapa.org/nevibecode/skills/htmx.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 1700 установок — Правила разработки на HTMX: агент пишет разметку с hx-атрибутами и отдаёт с сервера только нужные фрагменты HTML. - [scss-best-practices](https://affpapa.org/nevibecode/skills/scss-best-practices.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 1700 установок — Скилл задаёт правила вёрстки на SCSS: структуру файлов 7-1, правила вложенности селекторов, систему переменных и соглашения БЭМ. - [browser-preview](https://affpapa.org/nevibecode/skills/browser-preview.md) — скилл · Starchild-ai-agent · Claude Code, Codex, Cursor +3 · 4600 установок — Разбирает, почему вкладка Preview пустая или пропала: проверяет реестр сервисов, порты и пути к статике. Дальше: https://affpapa.org/nevibecode/skills/topic/frontend.md?page=43 ## Уточнить [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