# Скиллы по теме «Фронтенд и UI» Скиллы по теме «Фронтенд и UI»: у каждой карточки — что делает, команда установки и примеры запросов. 2909 карточек · страница 49 из 73 - HTML: https://affpapa.org/nevibecode/skills/topic/frontend?page=49 - Инструкция для агента: https://affpapa.org/nevibecode/agents.md - [optimized-nextjs-typescript](https://affpapa.org/nevibecode/skills/optimized-nextjs-typescript.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 1000 установок — Задаёт правила разработки на Next.js и TypeScript с упором на React Server Components, стилизацию Tailwind CSS и валидацию данных через Zod. - [vuejs-typescript-best-practices](https://affpapa.org/nevibecode/skills/vuejs-typescript-best-practices.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 1000 установок — Задаёт агенту свод правил по Vue.js и TypeScript: Composition API, Pinia, VueUse, Tailwind и оптимизация сборки Vite. - [figma-code-connect](https://affpapa.org/nevibecode/skills/figma-code-connect.md) — скилл (официальный OpenAI) · Figma · Codex, ChatGPT · 28 установок — Создаёт и обновляет шаблоны Code Connect, связывая компоненты Figma с фрагментами кода. - [motion-designer](https://affpapa.org/nevibecode/skills/motion-designer.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 1600 установок — Скилл для ИИ-агента, который помогает проектировать движение в интерфейсе: тайминги, кривые easing, спецификации для разработчика. - [remotion-video-toolkit](https://affpapa.org/nevibecode/skills/remotion-video-toolkit.md) — скилл · shreefentsar · Claude Code, Codex, Cursor +3 · 779 установок — Скилл учит ИИ-агента писать код Remotion: анимации, тайминг, рендер в MP4, субтитры, графики и 3D. - [site-specification](https://affpapa.org/nevibecode/skills/site-specification.md) — скилл · cline · Claude Code, Codex, Cursor +3 · 2100 установок — Превращает короткое описание проекта или логотип в готовую JSON-спецификацию сайта со структурой блоков, целевой аудиторией и шрифтами Google Fonts. - [ui-design](https://affpapa.org/nevibecode/skills/mindrally-ui-design.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 981 установка — Задаёт агенту правила вёрстки и интерфейсов: доступность, адаптивность, производительность. - [tailwind-best-practices](https://affpapa.org/nevibecode/skills/tailwind-best-practices.md) — скилл · agent-skills · Claude Code, Codex, Cursor +3 · 954 установки — Набор правил по Tailwind CSS v3.4+ и v4 для ИИ-агентов. - [shadcn](https://affpapa.org/nevibecode/skills/pproenca-shadcn.md) — скилл · pproenca · Claude Code, Codex, Cursor +3 · 724 установки — Скилл с 58 правилами для shadcn/ui: подсказывает агенту, как правильно ставить компоненты, писать формы и не ломать доступность. - [internationalization-i18n](https://affpapa.org/nevibecode/skills/internationalization-i18n.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 978 установок — Скилл задаёт агенту правила интернационализации: переводы, форматирование дат и чисел, RTL-раскладка. - [audit-speed](https://affpapa.org/nevibecode/skills/audit-speed.md) — скилл · calm-north · Claude Code, Codex, Cursor +3 · 2400 установок — Разбирает, почему страница тормозит: LCP, CLS, INP, FCP и TTFB с деревом причин и списком правок. - [chrome-extension-ui](https://affpapa.org/nevibecode/skills/chrome-extension-ui.md) — скилл · pproenca · Claude Code, Codex, Cursor +3 · 719 установок — Набор правил по интерфейсу расширений Chrome: где ставить popup, где side panel, как сделать доступную навигацию и понятные состояния загрузки. - [image-optimization](https://affpapa.org/nevibecode/skills/aj-geddes-image-optimization.md) — скилл · aj-geddes · Claude Code, Codex, Cursor +3 · 656 установок — Скилл подсказывает агенту, как сжать изображения и перевести их в современные форматы. - [guide-swiftui-animations](https://affpapa.org/nevibecode/skills/guide-swiftui-animations.md) — скилл · Prisma-Labs-Dev · Claude Code, Codex, Cursor +3 · 347 установок — Скилл-руководство по анимациям SwiftUI: неявные и явные анимации, переходы, фазовые и keyframe-анимации, протокол Animatable. - [chrome-extension](https://affpapa.org/nevibecode/skills/pproenca-chrome-extension.md) — скилл · pproenca · Claude Code, Codex, Cursor +3 · 717 установок — Скилл с 67 правилами по Chrome Extensions на Manifest V3. - [brand-designer](https://affpapa.org/nevibecode/skills/brand-designer.md) — скилл · daffy0208 · Claude Code, Codex, Cursor +3 · 1300 установок — Помогает собрать айдентику бренда: логотип, палитру, типографику и гайдлайны. - [tanstack-ai](https://affpapa.org/nevibecode/skills/tanstack-ai.md) — скилл · tanstack-skills · Claude Code, Codex, Cursor +3 · 1600 установок — Скилл обучает ассистента работать с TanStack AI: настраивать стриминг ответов, вызов функций и валидацию схем в React или Solid. - [tanstack-db](https://affpapa.org/nevibecode/skills/tanstack-db.md) — скилл · tanstack-skills · Claude Code, Codex, Cursor +3 · 1600 установок — Скилл помогает агенту работать с TanStack DB: коллекциями, живыми запросами и оптимистичными мутациями в клиентском приложении. - [typography-expert](https://affpapa.org/nevibecode/skills/typography-expert.md) — скилл · curiositech · Claude Code, Codex, Cursor +3 · 413 установок — Подбирает шрифтовые пары, настраивает вариативные оси, плавные шкалы и веб-шрифты без заезженных шаблонов вроде Inter и Roboto. - [webflow-mcp:site-activity](https://affpapa.org/nevibecode/skills/webflow-mcpsite-activity.md) — скилл · webflow · Claude Code, Codex, Cursor +3 · 757 установок — Скилл разбирает журнал действий сайтов Webflow на тарифе Enterprise: группирует правки страниц, CMS и стилей, а также находит их авторов перед публикацией. - [zustand-state-management](https://affpapa.org/nevibecode/skills/zustand-state-management.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 959 установок — Задаёт правила архитектуры сторов Zustand в React и TypeScript: от нарезки слайсов до SSR и тестов. - [typescript](https://affpapa.org/nevibecode/skills/mindrally-typescript.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 955 установок — Задаёт правила типизации и структуры кода на TypeScript для ассистента. - [hyva-cms-component](https://affpapa.org/nevibecode/skills/hyva-cms-component.md) — скилл · hyva-themes · Claude Code, Codex, Cursor +3 · 762 установки — Ведёт по шагам создания кастомного компонента Hyvä CMS для Magento 2: модуль, поля, шаблон PHTML и setup:upgrade. - [svelte-components](https://affpapa.org/nevibecode/skills/svelte-components.md) — скилл · spences10 · Claude Code, Codex, Cursor +3 · 531 установка — Подсказывает агенту, как строить компоненты Svelte: headless-библиотеки, веб-компоненты и формы, которые не оборачивают поля ввода. - [pixi-js](https://affpapa.org/nevibecode/skills/pixi-js.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 948 установок — Скилл для ИИ-агента: подсказывает, как писать игры на Pixi.js с TypeScript и оптимизировать их под веб и мобильные устройства. - [layout-paradigms-and-consistency](https://affpapa.org/nevibecode/skills/layout-paradigms-and-consistency.md) — скилл · dembrandt · Claude Code, Codex, Cursor +3 · 734 установки — Помогает выбрать парадигму макета (лента, канбан, таблица, мастер-деталь) и выдержать единую структуру экранов или продающего лендинга. - [react](https://affpapa.org/nevibecode/skills/mindrally-react.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 944 установки — Скилл задаёт агенту стиль React-разработки: хуки, Server Components, Tailwind и TypeScript. - [hyva-cms-custom-field](https://affpapa.org/nevibecode/skills/hyva-cms-custom-field.md) — скилл · hyva-themes · Claude Code, Codex, Cursor +3 · 752 установки — Помогает создавать нестандартные типы полей и обработчики модальных окон для компонентов Hyvä CMS в Magento. - [flutter-navigation](https://affpapa.org/nevibecode/skills/flutter-navigation.md) — скилл · Stanislav \[MADTeacher\] Chernyshev · Claude Code, Codex, Cursor +3 · 589 установок — Скилл для ИИ-агента, который разбирается с навигацией во Flutter: Navigator, go_router, диплинки, редиректы и история браузера. - [internationalization-i18n](https://affpapa.org/nevibecode/skills/aj-geddes-internationalization-i18n.md) — скилл · aj-geddes · Claude Code, Codex, Cursor +3 · 633 установки — Скилл для перевода интерфейса на другие языки: извлечение строк, каталоги переводов, плюрализация, форматы дат и чисел, RTL. - [antdv-next](https://affpapa.org/nevibecode/skills/antdv-next.md) — скилл · Antdv Next team · Claude Code, Codex, Cursor +3 · 1400 установок — Скилл подкладывает агенту локальную копию документации Antdv Next: API компонентов, демо, токены темы. - [react-nextjs-patterns](https://affpapa.org/nevibecode/skills/react-nextjs-patterns.md) — скилл · duyet · Claude Code, Codex, Cursor +3 · 1100 установок — Задаёт правила для App Router и серверных компонентов при разработке или проверке кода Next.js. - [dd-browser-sdk](https://affpapa.org/nevibecode/skills/dd-browser-sdk.md) — скилл · datadog-labs · Claude Code, Codex, Cursor +3 · 577 установок — Помогает настроить Datadog Browser SDK, настроить выгрузку sourcemaps и обновить клиентский код при переходе между версиями v4, v5, v6 и v7. - [hyva-cms-components-dump](https://affpapa.org/nevibecode/skills/hyva-cms-components-dump.md) — скилл · hyva-themes · Claude Code, Codex, Cursor +3 · 744 установки — Показывает, какие CMS-компоненты Hyvä доступны в проекте Magento 2, с учётом активных модулей и переопределений. - [data-visualization](https://affpapa.org/nevibecode/skills/data-visualization.md) — скилл (официальный OpenAI) · OpenAI · Codex, ChatGPT · 26 установок — Скилл направляет задачи по веб-визуализации к подходящему подходу: от выбора графика до карт, диаграмм и экспорта. - [cloud-storage-web](https://affpapa.org/nevibecode/skills/cloud-storage-web.md) — скилл · TencentCloudBase · Claude Code, Codex, Cursor +3 · 1000 установок — Помогает агенту загружать файлы в хранилище CloudBase из браузера, скачивать и удалять их через @cloudbase/js-sdk, выдавать временные ссылки. - [flutter](https://affpapa.org/nevibecode/skills/flutter.md) — скилл · Mindrally · Claude Code, Codex, Cursor +3 · 925 установок — Задаёт правила разработки на Flutter и Dart: чистую архитектуру по фичам, управление состоянием через Riverpod или BLoC и ограничения на вложенность виджетов. - [threejs-3d-graphics](https://affpapa.org/nevibecode/skills/threejs-3d-graphics.md) — скилл · omer-metin · Claude Code, Codex, Cursor +3 · 457 установок — Задаёт агенту роль сеньор-разработчика WebGL и Three.js: помогает писать шейдеры на GLSL, снижать число draw calls и настраивать 3D-сцены в браузере. - [color-accessibility](https://affpapa.org/nevibecode/skills/color-accessibility.md) — скилл · aj-geddes · Claude Code, Codex, Cursor +3 · 619 установок — Помогает создавать палитры с учётом дальтонизма и требований WCAG AA и AAA. - [deno-frontend](https://affpapa.org/nevibecode/skills/deno-frontend.md) — скилл · denoland · Claude Code, Codex, Cursor +3 · 408 установок — Помогает настроить веб-фронтенд под Deno. Дальше: https://affpapa.org/nevibecode/skills/topic/frontend.md?page=50 ## Уточнить [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