# Скиллы по теме «Фронтенд и UI» Скиллы по теме «Фронтенд и UI»: у каждой карточки — что делает, команда установки и примеры запросов. 2909 карточек · страница 48 из 73 - HTML: https://affpapa.org/nevibecode/skills/topic/frontend?page=48 - Инструкция для агента: https://affpapa.org/nevibecode/agents.md - [data-display-and-selection](https://affpapa.org/nevibecode/skills/data-display-and-selection.md) — скилл · dembrandt · Claude Code, Codex, Cursor +3 · 855 установок — Помогает агенту проектировать таблицы, списки и сетки: режимы просмотра, массовые действия, сортировка, поиск и выбор строк. - [notifications-and-recovery](https://affpapa.org/nevibecode/skills/notifications-and-recovery.md) — скилл · dembrandt · Claude Code, Codex, Cursor +3 · 854 установки — Скилл для проектирования уведомлений и состояний ошибок: тосты, инлайн-ошибки, баннеры и пути восстановления. - [provider-pattern](https://affpapa.org/nevibecode/skills/provider-pattern.md) — скилл · patterns.dev · Claude Code, Codex, Cursor +3 · 620 установок — Учит агента выносить общие данные в React Context и раздавать их через Provider, когда пропсы приходится тянуть через десяток компонентов. - [webflow-mcp:custom-code-management](https://affpapa.org/nevibecode/skills/webflow-mcpcustom-code-management.md) — скилл · webflow · Claude Code, Codex, Cursor +3 · 858 установок — Управляет встроенным JavaScript на сайте Webflow через MCP. - [tui-design](https://affpapa.org/nevibecode/skills/tui-design.md) — скилл · hyperb1iss · Claude Code, Codex, Cursor +3 · 1300 установок — Скилл для проектирования TUI: раскладка панелей, цвета, навигация с клавиатуры и асинхронные состояния. - [tanstack-store](https://affpapa.org/nevibecode/skills/tanstack-store.md) — скилл · tanstack-skills · Claude Code, Codex, Cursor +3 · 1800 установок — Скилл по TanStack Store: реактивный стор без привязки к фреймворку, адаптеры для React, Vue, Solid, Angular и Svelte. - [mixin-pattern](https://affpapa.org/nevibecode/skills/mixin-pattern.md) — скилл · patterns.dev · Claude Code, Codex, Cursor +3 · 616 установок — Обучает агента паттерну примесей в JavaScript и TypeScript для добавления общего поведения классам без наследования через прототипы. - [scroll-areas](https://affpapa.org/nevibecode/skills/scroll-areas.md) — скилл · dembrandt · Claude Code, Codex, Cursor +3 · 843 установки — Скилл учит агента избегать лишней вложенной прокрутки в вёрстке и ограничивать скролл одной осью там, где контейнер действительно нужен. - [rails-hotwire](https://affpapa.org/nevibecode/skills/thebushidocollective-rails-hotwire.md) — скилл · TheBushidoCollective · Claude Code, Codex, Cursor +3 · 348 установок — Скилл для работы с Hotwire в Rails: Turbo Frames, Turbo Streams, трансляции и контроллеры Stimulus. - [ui-context-and-scope](https://affpapa.org/nevibecode/skills/ui-context-and-scope.md) — скилл · dembrandt · Claude Code, Codex, Cursor +3 · 842 установки — Скилл задаёт правила ориентации пользователя в сложных интерфейсах: хлебные крошки, границы секций и баннеры имперсонации. - [iphone-duo-dual-pane-patterns](https://affpapa.org/nevibecode/skills/iphone-duo-dual-pane-patterns.md) — скилл · mirzaaghazadeh · Claude Code, Codex, Cursor +3 · 393 установки — Помогает проектировать двухэкранный интерфейс для iPhone Duo, вычислять размеры панелей и связывать колбэки шарнира. - [prototype-pattern](https://affpapa.org/nevibecode/skills/prototype-pattern.md) — скилл · patterns.dev · Claude Code, Codex, Cursor +3 · 614 установок — Обучает ИИ-агента паттерну Prototype для JavaScript и TypeScript. - [proxy-pattern](https://affpapa.org/nevibecode/skills/proxy-pattern.md) — скилл · patterns.dev · Claude Code, Codex, Cursor +3 · 612 установок — Скилл объясняет паттерн Proxy в JavaScript: перехват чтения и записи свойств объекта, валидация и логирование. - [real-world-metaphors](https://affpapa.org/nevibecode/skills/real-world-metaphors.md) — скилл · dembrandt · Claude Code, Codex, Cursor +3 · 841 установка — Помогает выбрать между карточкой, каруселью, drawer и аккордеоном, когда проектируешь компоненты и навигацию. - [21st-design-sync](https://affpapa.org/nevibecode/skills/21st-design-sync.md) — скилл · 21st-dev · Claude Code, Codex, Cursor +3 · 1700 установок — Собирает переменные темы shadcn и Tailwind из CSS-файлов проекта и выгружает их как публичную тему в каталог 21st.dev через CLI. - [global-toolbar-controls](https://affpapa.org/nevibecode/skills/global-toolbar-controls.md) — скилл · dembrandt · Claude Code, Codex, Cursor +3 · 834 установки — Скилл задаёт правила вёрстки переключателей валюты, языка и единиц измерения. - [webflow-mcp:designer-tools](https://affpapa.org/nevibecode/skills/webflow-mcpdesigner-tools.md) — скилл · webflow · Claude Code, Codex, Cursor +3 · 841 установка — Скилл помогает создавать и редактировать страницы, элементы и компоненты Webflow. - [webflow-mcp:cms-collection-setup](https://affpapa.org/nevibecode/skills/webflow-mcpcms-collection-setup.md) — скилл · webflow · Claude Code, Codex, Cursor +3 · 841 установка — Создаёт CMS-коллекции в Webflow с полями, связями и проверкой лимитов тарифа. - [flutter-development](https://affpapa.org/nevibecode/skills/flutter-development.md) — скилл · aj-geddes · Claude Code, Codex, Cursor +3 · 719 установок — Скилл для разработки мобильных приложений на Flutter и Dart: виджеты, состояние через Provider или BLoC, навигация, интеграция с API. - [xstate-v5](https://affpapa.org/nevibecode/skills/xstate-v5.md) — скилл · statelyai · Claude Code, Codex, Cursor +3 · 494 установки — Помогает проектировать, писать и чинить машины состояний и стейтчарты на XState v5 в TypeScript. - [visual-regression-testing](https://affpapa.org/nevibecode/skills/visual-regression-testing.md) — скилл · aj-geddes · Claude Code, Codex, Cursor +3 · 718 установок — Ловит случайные визуальные изменения интерфейса: снимает скриншоты компонентов и страниц и сравнивает их между версиями. - [figma-design-to-code](https://affpapa.org/nevibecode/skills/figma-design-to-code.md) — скилл (официальный OpenAI) · Figma · Codex, ChatGPT · 30 установок — Помогает перенести выбранный узел Figma в код проекта с учётом его стека и компонентов. - [typescript-refactor](https://affpapa.org/nevibecode/skills/typescript-refactor.md) — скилл · pproenca · Claude Code, Codex, Cursor +3 · 788 установок — Скилл с 47 правилами по рефакторингу TypeScript и React/TSX: типы, сужение, дженерики, современные фичи TS 6.0 и React 19. - [framer-motion](https://affpapa.org/nevibecode/skills/dylantarre-framer-motion.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 1700 установок — Скилл помогает ИИ применять 12 классических принципов анимации Диснея во Framer Motion для React. - [Next.js Security Scan](https://affpapa.org/nevibecode/skills/nextjs-security-scan.md) — скилл · sugarforever · Claude Code, Codex, Cursor +3 · 553 установки — Скилл ищет дыры в Next.js и TypeScript/JavaScript проектах: XSS, инъекции, утечки секретов, проблемы авторизации. - [react-refactor](https://affpapa.org/nevibecode/skills/react-refactor.md) — скилл · pproenca · Claude Code, Codex, Cursor +3 · 776 установок — Скилл с 40 правилами архитектурного рефакторинга React-проектов. - [dembrandt](https://affpapa.org/nevibecode/skills/dembrandt.md) — скилл · dembrandt · Claude Code, Codex, Cursor +3 · 822 установки — Прогоняет задачу по интерфейсу через шесть этапов: бренд, токены, вёрстка, компоненты, полировка и доступность. - [premium-frontend-design](https://affpapa.org/nevibecode/skills/premium-frontend-design.md) — скилл · kv0906 · Claude Code, Codex, Cursor +3 · 1400 установок — Скилл задаёт правила вёрстки нестандартных интерфейсов и лендингов. - [font-pairing-suggester](https://affpapa.org/nevibecode/skills/font-pairing-suggester.md) — скилл · OneWave-AI · Claude Code, Codex, Cursor +3 · 578 установок — Скилл предлагает сочетания шрифтов под задачу и показывает иерархию заголовков с текстом. - [webflow-mcp:flowkit-naming](https://affpapa.org/nevibecode/skills/webflow-mcpflowkit-naming.md) — скилл · webflow · Claude Code, Codex, Cursor +3 · 824 установки — Приводит имена CSS-классов в Webflow к системе Flowkit: аудит существующих, генерация новых и применение через MCP-инструменты. - [ionic-design](https://affpapa.org/nevibecode/skills/ionic-design.md) — скилл · Cap-go · Claude Code, Codex, Cursor +3 · 1600 установок — Проверяет и создаёт интерфейсы на Ionic Framework для приложений на Capacitor. - [dashboards-and-real-time-visualization](https://affpapa.org/nevibecode/skills/dashboards-and-real-time-visualization.md) — скилл (официальный OpenAI) · OpenAI · Codex, ChatGPT · 29 установок — Проектирует дашборды и системы живой визуализации данных. - [pinia-skilld](https://affpapa.org/nevibecode/skills/pinia-skilld.md) — скилл · skilld-dev · Claude Code, Codex, Cursor +3 · 313 установок — Скилл для ИИ-агентов, который подсказывает верные API Pinia 4.x: хранилища, геттеры, действия, SSR и миграцию с v2 и v3. - [frontend-designer](https://affpapa.org/nevibecode/skills/frontend-designer.md) — скилл · jamesrochabrun · Claude Code, Codex, Cursor +3 · 335 установок — Скилл для сборки доступных и адаптивных компонентов интерфейса: дизайн-токены, современный CSS, паттерны React, Vue и Svelte. - [tanstack-cli](https://affpapa.org/nevibecode/skills/tanstack-cli.md) — скилл · tanstack-skills · Claude Code, Codex, Cursor +3 · 1700 установок — Скилл проводит агента через создание проекта TanStack Start: подбирает интеграции, генерирует структуру и подсказывает по деплою. - [web-design-expert](https://affpapa.org/nevibecode/skills/web-design-expert.md) — скилл · curiositech · Claude Code, Codex, Cursor +3 · 439 установок — Проектирует веб-интерфейсы, айдентику бренда и палитры в формате OKLCH. - [e2e-testing-automation](https://affpapa.org/nevibecode/skills/e2e-testing-automation.md) — скилл · aj-geddes · Claude Code, Codex, Cursor +3 · 689 установок — Скилл помогает писать end-to-end тесты: браузерные сценарии, проверка пользовательских путей и связки фронтенда с бэкендом. - [tailwind-v4](https://affpapa.org/nevibecode/skills/tailwind-v4.md) — скилл · existential-birds · Claude Code, Codex, Cursor +3 · 812 установок — Скилл для ИИ-агента, который подсказывает, как настроить Tailwind CSS v4: тема в CSS, токены дизайна, цвета OKLCH и тёмная тема. - [workos-widgets](https://affpapa.org/nevibecode/skills/workos-widgets.md) — скилл · workos · Claude Code, Codex, Cursor +3 · 857 установок — Помогает встроить виджеты WorkOS — управление пользователями, профиль, SSO и проверку домена — и связать фронтенд с выдачей токенов на бэкенде. - [react-component-architecture](https://affpapa.org/nevibecode/skills/react-component-architecture.md) — скилл · aj-geddes · Claude Code, Codex, Cursor +3 · 674 установки — Скилл задаёт агенту правила проектирования React-компонентов: функциональные компоненты, хуки, композиция и TypeScript. Дальше: https://affpapa.org/nevibecode/skills/topic/frontend.md?page=49 ## Уточнить [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