# Скиллы по теме «Фронтенд и UI» Скиллы по теме «Фронтенд и UI»: у каждой карточки — что делает, команда установки и примеры запросов. 2909 карточек · страница 31 из 73 - HTML: https://affpapa.org/nevibecode/skills/topic/frontend?page=31 - Инструкция для агента: https://affpapa.org/nevibecode/agents.md - [livewire-development](https://affpapa.org/nevibecode/skills/livewire-development.md) — скилл · spatie · Claude Code, Codex, Cursor +3 · 591 установка — Помогает агенту писать и отлаживать реактивные компоненты Livewire 4: директивы wire:, острова, асинхронные действия и тесты. - [explainer-default](https://affpapa.org/nevibecode/skills/explainer-default.md) — скилл · Barty-Bart · Claude Code, Codex, Cursor +3 · 819 установок — Собирает демо продукта в MP4: сценарий, интерфейс, анимация, музыка и финальный кадр. - [3d-four-seasons](https://affpapa.org/nevibecode/skills/3d-four-seasons.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 497 установок — Добавляет смену четырёх времён года в 3D-сцену через шейдерные uniform-переменные. - [app-observability](https://affpapa.org/nevibecode/skills/app-observability.md) — скилл · grafana · Claude Code, Codex, Cursor +3 · 4400 установок — Ведёт агента по настройке Grafana Cloud: RED-метрики из OTel-трейсов, карты сервисов, браузерный RUM через Faro и наблюдение за вызовами LLM. - [liquid-theme-a11y](https://affpapa.org/nevibecode/skills/liquid-theme-a11y.md) — скилл · benjaminsehl · Claude Code, Codex, Cursor +3 · 2800 установок — Добавляет паттерны WCAG 2.2 для тем Shopify Liquid. - [layers-surface](https://affpapa.org/nevibecode/skills/layers-surface.md) — скилл · jamiemill · Claude Code, Codex, Cursor +3 · 2000 установок — Скилл для аудита видимого слоя продукта: слова, объекты, обратная связь, иерархия, доступность. - [design](https://affpapa.org/nevibecode/skills/subframeapp-design.md) — скилл · SubframeApp · Claude Code, Codex, Cursor +3 · 775 установок — Ведёт агента по работе с Subframe: собрать страницу или компонент, сравнить варианты на канвасе, поправить тему. - [cypress-docs](https://affpapa.org/nevibecode/skills/cypress-docs.md) — скилл · cypress-io · Claude Code, Codex, Cursor +3 · 8200 установок — Заставляет агента искать в официальной документации Cypress, а не сочинять по памяти. - [service-digital-engagement-messaging-site-integrate](https://affpapa.org/nevibecode/skills/service-digital-engagement-messaging-site-integrate.md) — скилл · forcedotcom · Claude Code, Codex, Cursor +3 · 2400 установок — Встраивает виджет Embedded Messaging в сайт Experience Cloud: правит JSON-бандл страницы, деплоит, публикует и проверяет гостевой доступ. - [tailwind-design-system](https://affpapa.org/nevibecode/skills/giuseppe-trisciuoglio-tailwind-design-system.md) — скилл · giuseppe-trisciuoglio · Claude Code, Codex, Cursor +3 · 4500 установок — Скилл помогает развернуть дизайн-систему на Tailwind CSS v4.1+ и shadcn/ui. - [testing](https://affpapa.org/nevibecode/skills/testing.md) — скилл · grafana · Claude Code, Codex, Cursor +3 · 4200 установок — Настраивает проверки доступности, нагрузочные тесты k6 и наблюдаемость фронтенда через Grafana Cloud. - [landing-page](https://affpapa.org/nevibecode/skills/jezweb-landing-page.md) — скилл · jezweb · Claude Code, Codex, Cursor +3 · 1500 установок — Собирает готовый одностраничный сайт в один файл HTML с Tailwind CSS по вашему брифу. - [cast](https://affpapa.org/nevibecode/skills/cast.md) — скилл · AThevon · Claude Code, Codex, Cursor +3 · 1300 установок — Скилл для творческого кодинга: превращает статичный интерфейс в живой — движение, микроинтеракции, отклик на действия. - [paint](https://affpapa.org/nevibecode/skills/paint.md) — скилл · AThevon · Claude Code, Codex, Cursor +3 · 1300 установок — Запускает пайплайн дизайн-системы для веба, Compose и SwiftUI: от брейншторма арт-дирекшна до кода и аудита доступности. - [react-19-plugin-migration](https://affpapa.org/nevibecode/skills/react-19-plugin-migration.md) — скилл · grafana · Claude Code, Codex, Cursor +3 · 4100 установок — Скилл готовит плагин Grafana к совместимости с React 19, не обновляя сам React. - [plugin-bundle-size](https://affpapa.org/nevibecode/skills/plugin-bundle-size.md) — скилл · grafana · Claude Code, Codex, Cursor +3 · 4200 установок — Помогает уменьшить размер входного файла module.js в плагинах приложений Grafana через React.lazy и разделение чанков в Webpack. - [grafana-scenes](https://affpapa.org/nevibecode/skills/grafana-scenes.md) — скилл · grafana · Claude Code, Codex, Cursor +3 · 4200 установок — Скилл для сборки страниц плагинов Grafana на фреймворке @grafana/scenes: панели, переменные, drilldown-навигация. - [portable-text-serialization](https://affpapa.org/nevibecode/skills/portable-text-serialization.md) — скилл · sanity · Claude Code, Codex, Cursor +3 · 2900 установок — Скилл подсказывает агенту, как рендерить и сериализовать Portable Text в React, Svelte, Vue, Astro, HTML, Markdown и чистый текст. - [react-container-presentation-component](https://affpapa.org/nevibecode/skills/react-container-presentation-component.md) — скилл (официальный GitHub) · github · GitHub Copilot · 65 установок — Скилл создаёт React-компонент по паттерну Container/Presentation и раскладывает файлы по соглашениям TypeScript, Storybook и SCSS. - [experience-lwc-typescript-migrate](https://affpapa.org/nevibecode/skills/experience-lwc-typescript-migrate.md) — скилл · forcedotcom · Claude Code, Codex, Cursor +3 · 2300 установок — Переводит существующий Lightning Web Component с JavaScript на TypeScript: типизированный .ts плюс .d.ts с одним только @api. - [experience-lwc-rtl-validate](https://affpapa.org/nevibecode/skills/experience-lwc-rtl-validate.md) — скилл · forcedotcom · Claude Code, Codex, Cursor +3 · 2300 установок — Проверяет Lightning Web Components на поддержку чтения справа налево. - [platform-mcp-tool-widget-coordinate](https://affpapa.org/nevibecode/skills/platform-mcp-tool-widget-coordinate.md) — скилл · forcedotcom · Claude Code, Codex, Cursor +3 · 2400 установок — Собирает Lightning Type и HXL-виджет, чтобы показать результат кастомного MCP-инструмента на базе Apex Invocable Action. - [sentry-nextjs-sdk](https://affpapa.org/nevibecode/skills/sentry-nextjs-sdk.md) — скилл · getsentry · Claude Code, Codex, Cursor +3 · 3600 установок — Скилл сканирует проект на Next.js и помогает настроить мониторинг Sentry для браузера, Node.js и Edge Runtime. - [react-code-review](https://affpapa.org/nevibecode/skills/react-code-review.md) — скилл · giuseppe-trisciuoglio · Claude Code, Codex, Cursor +3 · 4300 установок — Скилл проверяет React-компоненты и хуки перед мержем: архитектура, зависимости в useEffect, доступность, типы. - [taste](https://affpapa.org/nevibecode/skills/taste.md) — скилл · Senlin · Claude Code, Codex, Cursor +3 · 579 установок — Разбирает визуальный стиль веб-страницы через браузер и сохраняет дизайн-токены вместе с логикой интерфейса. - [tailwindcss-advanced-layouts](https://affpapa.org/nevibecode/skills/tailwindcss-advanced-layouts.md) — скилл · JosiahSiegel · Claude Code, Codex, Cursor +3 · 8100 установок — Набор готовых рецептов для Tailwind CSS v4. - [experience-ui-bundle-localize](https://affpapa.org/nevibecode/skills/experience-ui-bundle-localize.md) — скилл · forcedotcom · Claude Code, Codex, Cursor +3 · 2200 установок — Переносит текст из интерфейсов React и Angular в Salesforce Custom Labels и настраивает runtime i18n поверх GraphQL UI API для B2E и B2C проектов. - [experience-lwc-security-validate](https://affpapa.org/nevibecode/skills/experience-lwc-security-validate.md) — скилл · forcedotcom · Claude Code, Codex, Cursor +3 · 2300 установок — Проверяет Lightning Web Component на соответствие Lightning Web Security и формирует список находок либо отчёт SARIF. - [swiftui-design-skill](https://affpapa.org/nevibecode/skills/swiftui-design-skill.md) — скилл · wholiver · Claude Code, Codex, Cursor +3 · 1000 установок — Помогает проектировать экраны SwiftUI для iOS и macOS без шаблонного визуала. - [svg-animations](https://affpapa.org/nevibecode/skills/svg-animations.md) — скилл · supermemoryai · Claude Code, Codex, Cursor +3 · 2600 установок — Инструктирует ассистента создавать векторную графику и анимировать векторные элементы через CSS и SMIL. - [design-review](https://affpapa.org/nevibecode/skills/jezweb-design-review.md) — скилл · jezweb · Claude Code, Codex, Cursor +3 · 1400 установок — Проверяет визуальное качество веб-страницы или приложения и готовит отчёт со скриншотами. - [animation-principles](https://affpapa.org/nevibecode/skills/animation-principles.md) — скилл · iart-ai · Claude Code, Codex, Cursor +3 · 3000 установок — Скилл задаёт физику и тайминги интерфейсной анимации. - [android-jetpack-compose](https://affpapa.org/nevibecode/skills/android-jetpack-compose.md) — скилл · TheBushidoCollective · Claude Code, Codex, Cursor +3 · 2200 установок — Помогает агенту писать Android-интерфейсы на Jetpack Compose и выбирать паттерны состояния. - [nextjs-app-router](https://affpapa.org/nevibecode/skills/nextjs-app-router.md) — скилл · giuseppe-trisciuoglio · Claude Code, Codex, Cursor +3 · 3900 установок — Даёт паттерны и примеры для Next.js 16+ с App Router: от Server Components до route.ts и кэширования. - [3d-ultra-realistic-water](https://affpapa.org/nevibecode/skills/3d-ultra-realistic-water.md) — скилл · MengTo · Claude Code, Codex, Cursor +3 · 408 установок — Скилл для Three.js: собирает открытое море с волнами Герстнера, бликами солнца, пеной и кильватерным следом. - [framer-motion-animator](https://affpapa.org/nevibecode/skills/framer-motion-animator.md) — скилл · patricio0312rev · Claude Code, Codex, Cursor +3 · 11100 установок — Скилл помогает создавать анимации и микроинтерфейсы на Framer Motion: от переходов между страницами до жестов свайпа и скролла. - [website-builder-setup](https://affpapa.org/nevibecode/skills/website-builder-setup.md) — скилл · tenfoldmarc · Claude Code, Codex, Cursor +3 · 580 установок — Пошагово разворачивает стек для создания сайтов в Claude Code: UI/UX Pro Max, Framer Motion и компоненты 21st.dev. - [react-patterns](https://affpapa.org/nevibecode/skills/jezweb-react-patterns.md) — скилл · jezweb · Claude Code, Codex, Cursor +3 · 1300 установок — Скилл-чеклист по производительности и композиции компонентов React 19 для проектов на Vite и Cloudflare. - [react-native](https://affpapa.org/nevibecode/skills/jezweb-react-native.md) — скилл · jezweb · Claude Code, Codex, Cursor +3 · 1300 установок — Набор архитектурных правил и паттернов производительности для React Native и Expo. - [nextjs-authentication](https://affpapa.org/nevibecode/skills/nextjs-authentication.md) — скилл · giuseppe-trisciuoglio · Claude Code, Codex, Cursor +3 · 3800 установок — Скилл даёт готовые шаблоны аутентификации для Next.js 15+ App Router на Auth.js 5: провайдеры, защита маршрутов, сессии и роли. Дальше: https://affpapa.org/nevibecode/skills/topic/frontend.md?page=32 ## Уточнить [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