# Скиллы по теме «Фронтенд и UI» Скиллы по теме «Фронтенд и UI»: у каждой карточки — что делает, команда установки и примеры запросов. 2909 карточек · страница 50 из 73 - HTML: https://affpapa.org/nevibecode/skills/topic/frontend?page=50 - Инструкция для агента: https://affpapa.org/nevibecode/agents.md - [web-design-guidelines](https://affpapa.org/nevibecode/skills/agent-skills-web-design-guidelines.md) — скилл · agent-skills · Claude Code, Codex, Cursor +3 · 896 установок — Скилл проверяет веб-интерфейс по правилам доступности и UX. - [catalyst-slate](https://affpapa.org/nevibecode/skills/catalyst-slate.md) — скилл · catalystbyzoho · Claude Code, Codex, Cursor +3 · 1000 установок — Помогает агенту развернуть фронтенд на Catalyst Slate: создать приложение, настроить slate-config.toml и выкатить сборку. - [sync-figma-token](https://affpapa.org/nevibecode/skills/sync-figma-token.md) — скилл · firebenders · Claude Code, Codex, Cursor +3 · 676 установок — Скилл сверяет дизайн-токены в коде с переменными Figma, показывает расхождения и применяет правки только после подтверждения. - [storybook](https://affpapa.org/nevibecode/skills/storybook.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 909 установок — Задаёт правила создания историй, автодокументации и тестов компонентов в Storybook. - [agency-agents-ai-specialists](https://affpapa.org/nevibecode/skills/agency-agents-ai-specialists.md) — скилл · reason-machines · Claude Code, Codex, Cursor +3 · 2100 установок — Набор персон агентов для инженерных, дизайнерских и маркетинговых задач. - [gsap](https://affpapa.org/nevibecode/skills/martinholovsky-gsap.md) — скилл · martinholovsky · Claude Code, Codex, Cursor +3 · 1300 установок — Скилл для GSAP-анимаций: вход и выход панелей HUD, переходы статус-индикаторов, эффекты по скроллу. - [rspack-best-practices](https://affpapa.org/nevibecode/skills/rspack-best-practices.md) — скилл · rstackjs · Claude Code, Codex, Cursor +3 · 669 установок — Набор правил по настройке, профилированию и ускорению сборки проектов на Rspack. - [landing-page-design](https://affpapa.org/nevibecode/skills/omer-metin-landing-page-design.md) — скилл · omer-metin · Claude Code, Codex, Cursor +3 · 447 установок — Скилл для проектирования лендингов: помогает агенту строить страницы вокруг одной цели и проверять каждое решение по справочникам. - [design-systems](https://affpapa.org/nevibecode/skills/design-systems.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 903 установки — Помогает агенту выстроить дизайн-токены, компонентную библиотеку и правила доступности в одном проекте. - [shopify-theme-development-guidelines](https://affpapa.org/nevibecode/skills/shopify-theme-development-guidelines.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 898 установок — Скилл помогает создавать и менять темы Shopify с учётом Liquid, Online Store 2.0 и правил для HTML, CSS и JavaScript. - [frontend-accessibility](https://affpapa.org/nevibecode/skills/frontend-accessibility.md) — скилл · aj-geddes · Claude Code, Codex, Cursor +3 · 599 установок — Скилл помогает внедрять стандарты WCAG при разработке веб-интерфейсов. - [sveltekit-data-flow](https://affpapa.org/nevibecode/skills/sveltekit-data-flow.md) — скилл · spences10 · Claude Code, Codex, Cursor +3 · 492 установки — Подсказывает агенту правила передачи данных в SvelteKit: разделение серверного и универсального кода, работу с формами и сериализацию данных. - [astro](https://affpapa.org/nevibecode/skills/mindrally-astro.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 886 установок — Скилл задаёт агенту правила работы с Astro: статическая генерация, частичная гидратация, файловый роутинг и минимум клиентского JavaScript. - [21st-ui-build](https://affpapa.org/nevibecode/skills/21st-ui-build.md) — скилл · 21st-dev · Claude Code, Codex, Cursor +3 · 1400 установок — Скилл для реализации страниц и компонентов в существующем веб-проекте: сначала читает дизайн-контекст и токены, потом ищет готовое в 21st. - [auth-web-cloudbase](https://affpapa.org/nevibecode/skills/auth-web-cloudbase.md) — скилл · TencentCloudBase · Claude Code, Codex, Cursor +3 · 951 установка — Настраивает вход, регистрацию и сессии в веб-приложениях на базе @cloudbase/js-sdk. - [modal-and-overlay-patterns](https://affpapa.org/nevibecode/skills/modal-and-overlay-patterns.md) — скилл · dembrandt · Claude Code, Codex, Cursor +3 · 686 установок — Правила выбора и вёрстки всплывающих окон: от подсказок и шторок до блокирующих модальных диалогов с единой подложкой и строгой доступностью. - [operational-expert-tool-ui](https://affpapa.org/nevibecode/skills/operational-expert-tool-ui.md) — скилл · dembrandt · Claude Code, Codex, Cursor +3 · 689 установок — Задаёт правила интерфейса для диспетчерских, складских и логистических инструментов: плотность данных вместо воздуха, статус виден сразу. - [prototype](https://affpapa.org/nevibecode/skills/adobe-prototype.md) — скилл · adobe · Claude Code, Codex, Cursor +3 · 524 установки — Собирает предлагаемый редизайн страницы в один статичный HTML-файл, который можно открыть в браузере и править через чат. - [micro-interactions](https://affpapa.org/nevibecode/skills/micro-interactions.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 1400 установок — Скилл для ИИ-агента, который подсказывает, как анимировать кнопки, тумблеры, чекбоксы, индикаторы загрузки и бейджи уведомлений. - [swr](https://affpapa.org/nevibecode/skills/mindrally-swr.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 870 установок — Инструкции по настройке SWR в связке с React и TypeScript. - [tailwind](https://affpapa.org/nevibecode/skills/pymodel-tailwind.md) — скилл · PyModel · Claude Code, Codex, Cursor +3 · 512 установок — Скилл с 42 правилами по Tailwind CSS v4: сборка, генерация CSS, размер бандла, темизация. - [repeated-component-alignment](https://affpapa.org/nevibecode/skills/repeated-component-alignment.md) — скилл · dembrandt · Claude Code, Codex, Cursor +3 · 678 установок — Скилл для ИИ-кодинга, который держит карточки, строки списков и плитки в одной сетке, когда тексты разной длины. - [ui-ux-pro-max-skill](https://affpapa.org/nevibecode/skills/ui-ux-pro-max-skill.md) — скилл · reason-machines · Claude Code, Codex, Cursor +3 · 2000 установок — Скилл подбирает структуру страницы, визуальный стиль, цвета и шрифты по описанию продукта. - [trpc](https://affpapa.org/nevibecode/skills/trpc.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 864 установки — Набор правил, по которым ИИ-агент пишет Next.js-приложение на tRPC v11. - [cloudbase-document-database-web-sdk](https://affpapa.org/nevibecode/skills/cloudbase-document-database-web-sdk.md) — скилл · TencentCloudBase · Claude Code, Codex, Cursor +3 · 932 установки — Скилл помогает писать браузерный код для CloudBase Document Database через @cloudbase/js-sdk: CRUD, запросы, пагинация и realtime. - [tab-navigation](https://affpapa.org/nevibecode/skills/tab-navigation.md) — скилл · dembrandt · Claude Code, Codex, Cursor +3 · 674 установки — Скилл для проектирования вкладок: подсказывает, когда они уместны, как устроена полоса вкладок и как ведёт себя клавиатура. - [seo-best-practices](https://affpapa.org/nevibecode/skills/seo-best-practices.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 858 установок — Задаёт правила поисковой оптимизации для веб-приложений. - [flutter-internationalization](https://affpapa.org/nevibecode/skills/flutter-internationalization.md) — скилл · Stanislav \[MADTeacher\] Chernyshev · Claude Code, Codex, Cursor +3 · 536 установок — Настраивает и чинит локализацию во Flutter через gen-l10n и ARB-файлы. - [awwwards-ui-skills](https://affpapa.org/nevibecode/skills/awwwards-ui-skills.md) — скилл · design-skills · Claude Code, Codex, Cursor +3 · 560 установок — Скилл задаёт дизайн-систему в стиле Awwwards: строгую сетку 4px, шрифт Inter и светлую палитру с базовым фоном #E4E4E4. - [accessibility-testing](https://affpapa.org/nevibecode/skills/aj-geddes-accessibility-testing.md) — скилл · aj-geddes · Claude Code, Codex, Cursor +3 · 575 установок — Скилл для проверки веб-приложений на соответствие WCAG: axe, навигация с клавиатуры, ARIA, скринридеры. - [coordinated-data-views](https://affpapa.org/nevibecode/skills/coordinated-data-views.md) — скилл · dembrandt · Claude Code, Codex, Cursor +3 · 668 установок — Скилл для ИИ-кодинга, который подсказывает, как связать таблицу с картой, диаграммой или графиком и синхронизировать выделение в обе стороны. - [svelte-template-directives](https://affpapa.org/nevibecode/skills/svelte-template-directives.md) — скилл · spences10 · Claude Code, Codex, Cursor +3 · 474 установки — Скилл помогает работать с директивами шаблонов Svelte: от подключения к DOM до вывода HTML и сниппетов. - [authentic-product-representation](https://affpapa.org/nevibecode/skills/authentic-product-representation.md) — скилл · dembrandt · Claude Code, Codex, Cursor +3 · 662 установки — Заставляет ИИ-агента оформлять лендинги и демо-панели с реальными данными вместо lorem ipsum. - [domain-expert-configuration](https://affpapa.org/nevibecode/skills/domain-expert-configuration.md) — скилл · dembrandt · Claude Code, Codex, Cursor +3 · 660 установок — Направляет ИИ при проектировании панелей настроек, параметров солверов и редакторов ограничений для экспертов без инженерного опыта. - [ai-model-web](https://affpapa.org/nevibecode/skills/ai-model-web.md) — скилл · TencentCloudBase · Claude Code, Codex, Cursor +3 · 913 установок — Подключает вызовы языковых моделей в веб-приложения через @cloudbase/js-sdk напрямую из браузера без промежуточного сервера на Node.js. - [performance-optimization](https://affpapa.org/nevibecode/skills/mindrally-performance-optimization.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 848 установок — Набор правил для веб-производительности: серверный рендеринг, CSS, JavaScript, ассеты и кэш. - [sass-best-practices](https://affpapa.org/nevibecode/skills/sass-best-practices.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 845 установок — Скилл задаёт агенту правила письма на Sass с отступами: структура файлов, переменные, миксины, BEM. - [nextjs-react-redux-typescript-cursor-rules](https://affpapa.org/nevibecode/skills/nextjs-react-redux-typescript-cursor-rules.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 842 установки — Свод правил и стандартов разработки для связки Next.js, React, Redux Toolkit и TypeScript. - [vitest-testing-patterns](https://affpapa.org/nevibecode/skills/vitest-testing-patterns.md) — скилл · curiositech · Claude Code, Codex, Cursor +3 · 361 установка — Скилл обучает агента писать модульные и компонентные тесты на Vitest и React Testing Library с готовыми шаблонами моков для API и базы данных. - [ui-audit](https://affpapa.org/nevibecode/skills/ui-audit.md) — скилл · Tommy Geoco · Claude Code, Codex, Cursor +3 · 542 установки — Скилл анализирует интерфейсы по правилам книги Making UX Decisions. Дальше: https://affpapa.org/nevibecode/skills/topic/frontend.md?page=51 ## Уточнить [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