# Скиллы по теме «Фронтенд и UI» Скиллы по теме «Фронтенд и UI»: у каждой карточки — что делает, команда установки и примеры запросов. 2909 карточек · страница 57 из 73 - HTML: https://affpapa.org/nevibecode/skills/topic/frontend?page=57 - Инструкция для агента: https://affpapa.org/nevibecode/agents.md - [rails-hotwire](https://affpapa.org/nevibecode/skills/rails-hotwire.md) — скилл · pproenca · Claude Code, Codex, Cursor +3 · 370 установок — Скилл с правилами Hotwire для Rails: Turbo Drive, Frames, Streams, морфинг и контроллеры Stimulus. - [threejs](https://affpapa.org/nevibecode/skills/secondsky-threejs.md) — скилл · secondsky · Claude Code, Codex, Cursor +3 · 460 установок — Скилл с готовыми примерами и справочниками по Three.js: сцены, материалы, свет, шейдеры, загрузка GLTF. - [motion-designer](https://affpapa.org/nevibecode/skills/ncklrs-motion-designer.md) — скилл · ncklrs · Claude Code, Codex, Cursor +3 · 570 установок — Продумывает покадровый сценарий видеоролика для Remotion с таймингами, переходами и звуковой дорожкой. - [capacitor-angular](https://affpapa.org/nevibecode/skills/capacitor-angular.md) — скилл · capawesome-team · Claude Code, Codex, Cursor +3 · 944 установки — Обучает агента архитектурным паттернам Capacitor в Angular 16+: настройка путей сборки, standalone-компоненты и запуск плагинов через сервисы. - [language-detector-api](https://affpapa.org/nevibecode/skills/language-detector-api.md) — скилл · webmaxru · Claude Code, Codex, Cursor +3 · 475 установок — Помогает подключить встроенный Language Detector API в веб-приложении на JavaScript или TypeScript: проверки поддержки, скачивание модели, сессии и detect(). - [writing-assistance-apis](https://affpapa.org/nevibecode/skills/writing-assistance-apis.md) — скилл · webmaxru · Claude Code, Codex, Cursor +3 · 473 установки — Помогает внедрять встроенные браузерные API Summarizer, Writer и Rewriter в приложения на JavaScript или TypeScript. - [cordova-to-capacitor](https://affpapa.org/nevibecode/skills/cordova-to-capacitor.md) — скилл · Cap-go · Claude Code, Codex, Cursor +3 · 768 установок — Пошагово переносит мобильные приложения с Cordova или PhoneGap на Capacitor. - [3d-visualizer](https://affpapa.org/nevibecode/skills/3d-visualizer.md) — скилл · daffy0208 · Claude Code, Codex, Cursor +3 · 665 установок — Генерирует 3D-графику, интерактивные сцены и графики на Three.js и React Three Fiber. - [landing-page-optimization](https://affpapa.org/nevibecode/skills/landing-page-optimization.md) — скилл · manojbajaj95 · Claude Code, Codex, Cursor +3 · 324 установки — Скилл для Claude, который помогает писать и собирать лендинги: копирайт, структура из 11 элементов, CTA и оптимизация конверсии. - [proofreader-api](https://affpapa.org/nevibecode/skills/proofreader-api.md) — скилл · webmaxru · Claude Code, Codex, Cursor +3 · 470 установок — Скилл для работы с браузерным Proofreader API: проверка доступности, загрузка модели, вычитка текста и разбор правок. - [translator-api](https://affpapa.org/nevibecode/skills/translator-api.md) — скилл · webmaxru · Claude Code, Codex, Cursor +3 · 467 установок — Интегрирует встроенный браузерный Translator API в веб-приложения на JavaScript и TypeScript. - [framer-ui-skills](https://affpapa.org/nevibecode/skills/framer-ui-skills.md) — скилл · design-skills · Claude Code, Codex, Cursor +3 · 320 установок — Задаёт агенту жёсткие правила вёрстки в стиле Framer: тёмный фон, шрифт Inter, сетка 4px. - [tanstack-router](https://affpapa.org/nevibecode/skills/claude-skills-maintainers-tanstack-router.md) — скилл · Claude Skills Maintainers · Claude Code, Codex, Cursor +3 · 445 установок — Настраивает типобезопасный роутинг на базе файлов в React и помогает связать его с TanStack Query или Cloudflare Workers. - [html-visual](https://affpapa.org/nevibecode/skills/html-visual.md) — скилл · 2ykwang · Claude Code, Codex, Cursor +3 · 475 установок — Собирает интерактивную визуализацию в одном HTML-файле: макет, ERD, блок-схему, график или слайды. - [vite](https://affpapa.org/nevibecode/skills/pproenca-vite.md) — скилл · pproenca · Claude Code, Codex, Cursor +3 · 358 установок — Набор из 42 правил оптимизации сборки и dev-сервера Vite. - [webnn](https://affpapa.org/nevibecode/skills/webnn.md) — скилл · webmaxru · Claude Code, Codex, Cursor +3 · 463 установки — Помогает агенту встроить Web Neural Network API в JS или TS: проверки navigator.ml, MLContext, графы, тензоры и откат на локальные рантаймы. - [interaction-design](https://affpapa.org/nevibecode/skills/secondsky-interaction-design.md) — скилл · secondsky · Claude Code, Codex, Cursor +3 · 441 установка — Скилл для проектирования отклика интерфейса: состояния загрузки, ошибки, пустые экраны, анимация и доступность. - [capacitor-app-creation](https://affpapa.org/nevibecode/skills/capacitor-app-creation.md) — скилл · capawesome-team · Claude Code, Codex, Cursor +3 · 915 установок — Скилл ведёт агента по шагам при создании Capacitor-приложения с нуля: каркас веб-проекта, настройка, нативные платформы, запуск. - [reflex-docs](https://affpapa.org/nevibecode/skills/reflex-docs.md) — скилл · reflex-dev · Claude Code, Codex, Cursor +3 · 696 установок — Подгружает справочник Reflex в контекст агента, чтобы тот писал компоненты, State и обработчики событий по актуальной документации, а не по устаревшим знаниям из обучения. - [scrollytelling-and-parallax-data-visualization](https://affpapa.org/nevibecode/skills/scrollytelling-and-parallax-data-visualization.md) — скилл (официальный OpenAI) · OpenAI · Codex, ChatGPT · 13 установок — Помогает проектировать скроллителлинг и параллакс-визуализации данных. - [react-and-nextjs-data-visualization](https://affpapa.org/nevibecode/skills/react-and-nextjs-data-visualization.md) — скилл (официальный OpenAI) · OpenAI · Codex, ChatGPT · 13 установок — Инструкции по встраиванию графиков и диаграмм в React и Next.js: границы SSR, разделение состояния и отрисовки, адаптивность и защита от ошибок гидратации. - [geospatial-and-cartographic-visualization](https://affpapa.org/nevibecode/skills/geospatial-and-cartographic-visualization.md) — скилл (официальный OpenAI) · OpenAI · Codex, ChatGPT · 13 установок — Скилл помогает спроектировать карту: выбрать проекцию, подложку, тип визуализации и стек. - [d3-data-visualization](https://affpapa.org/nevibecode/skills/d3-data-visualization.md) — скилл (официальный OpenAI) · OpenAI · Codex, ChatGPT · 13 установок — Скилл помогает собирать кастомные визуализации на D3: SVG- и DOM-графики, подписи, аннотации и интерактивность. - [anthropic-ui-skills](https://affpapa.org/nevibecode/skills/anthropic-ui-skills.md) — скилл · design-skills · Claude Code, Codex, Cursor +3 · 313 установок — Задаёт агенту правила интерфейсов в стиле Anthropic: светлый фон, шрифт Inter, сетка 4px. - [generative-ui](https://affpapa.org/nevibecode/skills/assistant-ui-generative-ui.md) — скилл · assistant-ui · Claude Code, Codex, Cursor +3 · 1000 установок — Скилл для assistant-ui: модель собирает интерфейс из готовых компонентов во время ответа, а не заполняет заранее написанный вами. - [webflow-mcp:figma-to-webflow](https://affpapa.org/nevibecode/skills/webflow-mcpfigma-to-webflow.md) — скилл · webflow · Claude Code, Codex, Cursor +3 · 373 установки — Переносит макеты и компоненты из Figma в Webflow через Figma MCP и Webflow MCP, создавая нативные классы и стили. - [internationalization-i18n](https://affpapa.org/nevibecode/skills/secondsky-internationalization-i18n.md) — скилл · secondsky · Claude Code, Codex, Cursor +3 · 433 установки — Скилл помогает внедрить мультиязычность через i18next, gettext или браузерный Intl API. - [minimax-image-understanding](https://affpapa.org/nevibecode/skills/minimax-image-understanding.md) — скилл · imsus · Claude Code, Codex, Cursor +3 · 556 установок — Скилл передаёт изображения в визуальную модель MiniMax через инструмент understand_image. - [bun-nextjs](https://affpapa.org/nevibecode/skills/bun-nextjs.md) — скилл · secondsky · Claude Code, Codex, Cursor +3 · 429 установок — Настраивает запуск Next.js на рантайме Bun. - [prompt-api](https://affpapa.org/nevibecode/skills/prompt-api.md) — скилл · webmaxru · Claude Code, Codex, Cursor +3 · 447 установок — Настраивает и отлаживает встроенный браузерный Prompt API в веб-приложениях на JavaScript и TypeScript. - [vtex-io-storefront-theme-app](https://affpapa.org/nevibecode/skills/vtex-io-storefront-theme-app.md) — скилл · vtex · Claude Code, Codex, Cursor +3 · 1000 установок — Скилл помогает собирать и настраивать приложения витрины VTEX IO: объявлять маршруты, компоновать блоки шаблонов и связывать тему с Site Editor. - [tdesign-miniprogram](https://affpapa.org/nevibecode/skills/tdesign-miniprogram.md) — скилл · joneqian · Claude Code, Codex, Cursor +3 · 396 установок — Скилл подсказывает агенту, как собирать интерфейс мини-программ WeChat на компонентах TDesign от Tencent: 60+ элементов, тёмная тема, кастомизация. - [websocket-implementation](https://affpapa.org/nevibecode/skills/secondsky-websocket-implementation.md) — скилл · secondsky · Claude Code, Codex, Cursor +3 · 425 установок — Скилл для агента, который пишет сервер и клиент WebSocket: комнаты, переподключение, масштабирование через Redis. - [tauri](https://affpapa.org/nevibecode/skills/full-stack-skills-tauri.md) — скилл · full-stack-skills · Claude Code, Codex, Cursor +3 · 530 установок — Каталог-навигатор для разработки на Tauri v2. - [uniwind](https://affpapa.org/nevibecode/skills/pproenca-uniwind.md) — скилл · pproenca · Claude Code, Codex, Cursor +3 · 341 установка — Скилл с 45+ правилами по Uniwind — Tailwind-биндингам для React Native. - [ios-animations](https://affpapa.org/nevibecode/skills/ios-animations.md) — скилл · pproenca · Claude Code, Codex, Cursor +3 · 340 установок — Правила анимаций для SwiftUI под Swift 6.2 и архитектуру Clinic MVVM-C. - [capacitor-react](https://affpapa.org/nevibecode/skills/capacitor-react.md) — скилл · capawesome-team · Claude Code, Codex, Cursor +3 · 873 установки — Направляет ИИ-агента при разработке мобильных приложений на Capacitor с React 18+. - [amplify-workflow](https://affpapa.org/nevibecode/skills/amplify-workflow.md) — скилл · cline · Claude Code, Codex, Cursor +3 · 965 установок — Скилл настраивает приложения на AWS Amplify Gen2 с TypeScript-бэкендом. - [alba-inertia](https://affpapa.org/nevibecode/skills/alba-inertia.md) — скилл · inertia-rails · Claude Code, Codex, Cursor +3 · 376 установок — Настраивает сериализацию в Inertia Rails через Alba и Typelizer. - [gsap-greensock](https://affpapa.org/nevibecode/skills/gsap-greensock.md) — скилл · dylantarre · Claude Code, Codex, Cursor +3 · 730 установок — Скилл подсказывает агенту, как применить 12 диснеевских принципов анимации в GreenSock: от сжатия и растяжения до движения по дуге через твины и таймлайны. Дальше: https://affpapa.org/nevibecode/skills/topic/frontend.md?page=58 ## Уточнить [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