# Скиллы по теме «Фронтенд и UI» Скиллы по теме «Фронтенд и UI»: у каждой карточки — что делает, команда установки и примеры запросов. 2909 карточек · страница 66 из 73 - HTML: https://affpapa.org/nevibecode/skills/topic/frontend?page=66 - Инструкция для агента: https://affpapa.org/nevibecode/agents.md - [glsl](https://affpapa.org/nevibecode/skills/glsl.md) — скилл · martinholovsky · Claude Code, Codex, Cursor +3 · 369 установок — Скилл по GLSL для голографических эффектов в HUD: панели со сканлайнами, энергетические поля, постобработка. - [diagnosing-missing-recordings](https://affpapa.org/nevibecode/skills/diagnosing-missing-recordings.md) — скилл · PostHog · Claude Code, Codex, Cursor +3 · 397 установок — Помогает понять, почему PostHog не записал сессию пользователя. - [claude-skill-app-onboarding-questionnaire](https://affpapa.org/nevibecode/skills/claude-skill-app-onboarding-questionnaire.md) — скилл · reason-machines · Claude Code, Codex, Cursor +3 · 582 установки — Разбирает код вашего приложения и собирает онбординг из экранов-вопросов: тексты, макеты и готовый код на нативном фреймворке. - [wpf-best-practices](https://affpapa.org/nevibecode/skills/wpf-best-practices.md) — скилл · jcurbelo · Claude Code, Codex, Cursor +3 · 584 установки — Скилл задаёт ориентиры для разработки WPF-приложений на C# и .NET. - [gsap-scrolltrigger](https://affpapa.org/nevibecode/skills/bbeierle12-gsap-scrolltrigger.md) — скилл · Bbeierle12 · Claude Code, Codex, Cursor +3 · 604 установки — Скилл для GSAP ScrollTrigger: привязка анимаций к прокрутке, пиннинг секций, параллакс и точки прилипания. - [harvard-art-museums-data-pipeline](https://affpapa.org/nevibecode/skills/harvard-art-museums-data-pipeline.md) — скилл · reason-machines · Claude Code, Codex, Cursor +3 · 2000 установок — Собирает данные Harvard Art Museums, раскладывает их по SQL-таблицам и помогает сделать дашборд Streamlit. - [e-commerce](https://affpapa.org/nevibecode/skills/e-commerce.md) — скилл · miles990 · Claude Code, Codex, Cursor +3 · 376 установок — Скилл для разработки интернет-магазинов: состояние корзины, оплата через Stripe, оформление заказа и склад. - [clerk-nextjs-skills](https://affpapa.org/nevibecode/skills/clerk-nextjs-skills.md) — скилл · gocallum · Claude Code, Codex, Cursor +3 · 436 установок — Подключает аутентификацию Clerk в Next.js 16 с App Router: proxy.ts, переменные окружения, защита маршрутов и MCP-сервер. - [lynx-trace-analysis](https://affpapa.org/nevibecode/skills/lynx-trace-analysis.md) — скилл · lynx-community · Claude Code, Codex, Cursor +3 · 362 установки — Скилл разбирает трейсы Lynx и находит причину тормозов: медленный старт, джанк при скролле, утечки памяти. - [swr](https://affpapa.org/nevibecode/skills/swr.md) — скилл (официальный OpenAI) · Vercel Labs · Codex, ChatGPT · 6 установок — Скилл подсказывает, как строить загрузку данных в React через SWR: кэшировать, обновлять, мутировать и загружать страницы. - [satori](https://affpapa.org/nevibecode/skills/satori.md) — скилл (официальный OpenAI) · Vercel Labs · Codex, ChatGPT · 6 установок — Помогает генерировать динамические OG-изображения в Next.js через Satori и @vercel/og с разметкой на HTML и CSS. - [routing-middleware](https://affpapa.org/nevibecode/skills/routing-middleware.md) — скилл (официальный OpenAI) · Vercel Labs · Codex, ChatGPT · 6 установок — Скилл обучает агента настройке Vercel Routing Middleware: перехвату запросов до кэша, редиректам и выбору между Edge, Node.js или Bun. - [geist](https://affpapa.org/nevibecode/skills/geist.md) — скилл (официальный OpenAI) · Vercel Labs · Codex, ChatGPT · 6 установок — Скилл подсказывает, как подключить Geist Sans, Geist Mono и Geist Pixel в Next.js и распределить их по интерфейсу. - [email](https://affpapa.org/nevibecode/skills/email.md) — скилл (официальный OpenAI) · Vercel Labs · Codex, ChatGPT · 6 установок — Настраивает отправку писем через Resend и шаблоны React Email в проектах на Vercel. - [url-to-code](https://affpapa.org/nevibecode/skills/url-to-code.md) — скилл (официальный OpenAI) · OpenAI · Codex, ChatGPT · 6 установок — Превращает живой сайт в рабочее frontend-приложение: захватывает элементы, стили, взаимодействия и ассеты через браузер. - [get-context](https://affpapa.org/nevibecode/skills/get-context.md) — скилл (официальный OpenAI) · OpenAI · Codex, ChatGPT · 6 установок — Скилл фиксирует бриф перед созданием интерфейса в Codex. - [figma-swiftui](https://affpapa.org/nevibecode/skills/figma-swiftui.md) — скилл (официальный OpenAI) · Figma · Codex, ChatGPT · 6 установок — Переводит дизайн Figma в SwiftUI и отправляет SwiftUI обратно в Figma. - [figma-implement-motion](https://affpapa.org/nevibecode/skills/figma-implement-motion.md) — скилл (официальный OpenAI) · Figma · Codex, ChatGPT · 6 установок — Переносит анимации и переходы из Figma в код на motion.dev или чистом CSS. - [nextjs-development](https://affpapa.org/nevibecode/skills/nextjs-development.md) — скилл · manutej · Claude Code, Codex, Cursor +3 · 471 установка — Набор инструкций по современной разработке на Next.js в каталоге app. - [react-patterns](https://affpapa.org/nevibecode/skills/manutej-react-patterns.md) — скилл · manutej · Claude Code, Codex, Cursor +3 · 471 установка — Скилл с готовыми рецептами React: хуки, композиция компонентов, управление состоянием и борьба с лишними ререндерами. - [mf](https://affpapa.org/nevibecode/skills/mf.md) — скилл · module-federation · Claude Code, Codex, Cursor +3 · 744 установки — Скилл, который отвечает на вопросы про Module Federation: конфигурация, общие зависимости, ошибки типов и рантайма, медленные сборки. - [react-development](https://affpapa.org/nevibecode/skills/react-development.md) — скилл · manutej · Claude Code, Codex, Cursor +3 · 464 установки — Скилл для ИИ-агента: подсказывает, как писать компоненты, хуки, состояние и эффекты в React по официальной документации. - [lynx-trace-record](https://affpapa.org/nevibecode/skills/lynx-trace-record.md) — скилл · lynx-community · Claude Code, Codex, Cursor +3 · 353 установки — Инструкция для ИИ-агента по записи трейсов производительности в приложениях на Lynx через скрипт trace_record. - [triaging-visual-review-runs](https://affpapa.org/nevibecode/skills/triaging-visual-review-runs.md) — скилл · PostHog · Claude Code, Codex, Cursor +3 · 368 установок — Разбирает прогоны Visual Review в PostHog, отсеивает флакающие скриншоты Playwright и Storybook и снимает блокировку с пуллреквестов. - [tailwind-css](https://affpapa.org/nevibecode/skills/manutej-tailwind-css.md) — скилл · manutej · Claude Code, Codex, Cursor +3 · 461 установка — Скилл по Tailwind CSS: утилитарные классы, адаптивность, тёмная тема и оптимизация сборки. - [angular-development](https://affpapa.org/nevibecode/skills/manutej-angular-development.md) — скилл · manutej · Claude Code, Codex, Cursor +3 · 461 установка — Скилл по Angular: компоненты, сервисы, DI, роутинг, формы и Signals. - [javascript-fundamentals](https://affpapa.org/nevibecode/skills/javascript-fundamentals.md) — скилл · manutej · Claude Code, Codex, Cursor +3 · 460 установок — Скилл даёт ИИ-агенту контекст по базовому синтаксису и паттернам JavaScript. - [frontend-crafting](https://affpapa.org/nevibecode/skills/frontend-crafting.md) — скилл · sentimony · Claude Code, Codex, Cursor +3 · 1400 установок — Скилл задаёт правила вёрстки и дизайна интерфейсов на HTML, CSS, React или Vue. - [pagespeed-insights](https://affpapa.org/nevibecode/skills/pagespeed-insights.md) — скилл · EnderPuentes · Claude Code, Codex, Cursor +3 · 1100 установок — Скилл разбирает производительность веб-страницы по правилам PageSpeed Insights: метрики Core Web Vitals, узкие места, плохие практики. - [web-accessibility](https://affpapa.org/nevibecode/skills/web-accessibility.md) — скилл · akillness · Claude Code, Codex, Cursor +3 · 529 установок — Классифицирует дефекты доступности веб-интерфейса, отсекает лишний ARIA-код и формирует чёткий план доработок с ручной проверкой. - [hono-jsx](https://affpapa.org/nevibecode/skills/honojs-hono-jsx.md) — скилл · honojs · Claude Code, Codex, Cursor +3 · 337 установок — Настраивает серверный рендеринг интерфейсов в приложениях Hono через hono/jsx и связку с Vite без библиотек React. - [3dsvg-interactive-react](https://affpapa.org/nevibecode/skills/3dsvg-interactive-react.md) — скилл · reason-machines · Claude Code, Codex, Cursor +3 · 529 установок — Превращает SVG и текст в интерактивные 3D-компоненты React через библиотеку 3dsvg. - [tailwind-patterns](https://affpapa.org/nevibecode/skills/tailwind-patterns.md) — скилл · davila7 · Claude Code · 2720 установок — Скилл для Claude, который задаёт агенту правила Tailwind CSS v4: конфигурация в CSS, контейнерные запросы, архитектура токенов. - [zustand](https://affpapa.org/nevibecode/skills/bobmatnyc-zustand.md) — скилл · bobmatnyc · Claude Code, Codex, Cursor +3 · 485 установок — Скилл по zustand: минимальный стейт-менеджер для React на хуках, без провайдеров и лишнего кода. - [dark-mode-implementer](https://affpapa.org/nevibecode/skills/dark-mode-implementer.md) — скилл · patricio0312rev · Claude Code, Codex, Cursor +3 · 373 установки — Настраивает тёмную и светлую тему интерфейса через CSS-переменные, классы Tailwind или React-контекст. - [designing-user-experience](https://affpapa.org/nevibecode/skills/designing-user-experience.md) — скилл · osmontero · Claude Code, Codex, Cursor +3 · 458 установок — Скилл для проектирования поведения интерфейса: потоки, формы, пустые, загрузочные и ошибочные состояния. - [glassmorphism](https://affpapa.org/nevibecode/skills/ainergiz-glassmorphism.md) — скилл · ainergiz · Claude Code, Codex, Cursor +3 · 526 установок — Скилл учит ассистента создавать интерфейсы с эффектом матового стекла: полупрозрачный фон, размытие и аккуратные рамки. - [svelte-development](https://affpapa.org/nevibecode/skills/svelte-development.md) — скилл · manutej · Claude Code, Codex, Cursor +3 · 434 установки — Скилл обучает ИИ-агента паттернам Svelte 5, включая руны реактивности, пропсы, эффекты и структуру компонентов. - [building-emdash-site](https://affpapa.org/nevibecode/skills/building-emdash-site.md) — скилл · emdash-cms · Claude Code, Codex, Cursor +3 · 756 установок — Скилл для сборки клиентской части проекта EmDash CMS на Astro: схема, сиды, запросы к контенту, меню и деплой. - [text-message-animation](https://affpapa.org/nevibecode/skills/text-message-animation.md) — скилл · iart-ai · Claude Code, Codex, Cursor +3 · 589 установок — Скилл превращает сценарий переписки в вертикальное видео: пузыри сообщений всплывают по одному, перед ответом пульсирует индикатор набора, поток сам прокручивается. Дальше: https://affpapa.org/nevibecode/skills/topic/frontend.md?page=67 ## Уточнить [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