# Skills for Frontend and UI Skills for Frontend and UI: what each one does, an install command and example prompts. 2909 cards · page 4 of 73 - HTML: https://affpapa.org/en/nevibecode/skills/topic/frontend?page=4 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [turnstile-spin](https://affpapa.org/en/nevibecode/skills/turnstile-spin.md) — skill · cloudflare · Claude Code, Codex, Cursor +3 · 93100 installs — Sets up Cloudflare Turnstile bot verification across existing frontend and backend code, including widget embedding and server-side siteverify. - [browser-qa](https://affpapa.org/en/nevibecode/skills/browser-qa.md) — skill · affaan-m · Claude Code, Codex, Cursor +3 · 4900 installs — Drives a live page through a browser MCP: console errors, Core Web Vitals, forms, screenshots at three widths and axe-core. - [nextjs-turbopack](https://affpapa.org/en/nevibecode/skills/nextjs-turbopack.md) — skill · affaan-m · Claude Code, Codex, Cursor +3 · 5000 installs — This skill covers Turbopack in Next.js 16+, when webpack may be needed, and the middleware.ts to proxy.ts change. - [design-system](https://affpapa.org/en/nevibecode/skills/affaan-m-design-system.md) — skill · affaan-m · Claude Code, Codex, Cursor +3 · 5000 installs — Builds a design system out of the styles already in your repo, or audits them: tokens, a ten-point UI score, and a check for generic AI styling. - [next-partial-prefetching-optimizer](https://affpapa.org/en/nevibecode/skills/next-partial-prefetching-optimizer.md) — skill · vercel · Claude Code, Codex, Cursor +3 · 2400 installs — Tunes Next.js 16.3+ client link prefetching under Partial Prefetching. - [better-typography](https://affpapa.org/en/nevibecode/skills/better-typography.md) — skill · jakubkrehel · Claude Code, Codex, Cursor +3 · 34200 installs — Reviews interface typography and applies fixes through the project’s styling system. - [react-performance](https://affpapa.org/en/nevibecode/skills/react-performance.md) — skill · affaan-m · Claude Code, Codex, Cursor +3 · 4900 installs — A performance optimization skill for React 18/19 and Next.js. - [remotion-video-creation](https://affpapa.org/en/nevibecode/skills/remotion-video-creation.md) — skill · affaan-m · Claude Code, Codex, Cursor +3 · 4900 installs — This skill gives coding agents Remotion guidance for React video work, from animation and audio to captions, charts, and transitions. - [react-patterns](https://affpapa.org/en/nevibecode/skills/affaan-m-react-patterns.md) — skill · affaan-m · Claude Code, Codex, Cursor +3 · 4900 installs — A skill for Claude and other AI editors that steers the agent toward idiomatic React 18/19: hooks discipline, server/client boundaries, forms, data fetching. - [stitch::code-to-design](https://affpapa.org/en/nevibecode/skills/stitchcode-to-design.md) — skill (official Google) · google-labs-code · Claude Code, Codex, Cursor +3 · 10200 installs — Moves an existing frontend into Stitch by extracting standalone HTML and a design system, then uploading both to a project. - [baseline-ui](https://affpapa.org/en/nevibecode/skills/baseline-ui.md) — skill · ibelick · Claude Code, Codex, Cursor +3 · 24200 installs — Cleans up AI-generated UI code by fixing layout issues, typography, spacing, and animations. - [chrome-devtools](https://affpapa.org/en/nevibecode/skills/chrome-devtools.md) — skill (official GitHub) · github · GitHub Copilot · 15258 installs — Controls a live Chrome browser through Chrome DevTools MCP for page actions, debugging, and performance traces. - [build-mcp-app](https://affpapa.org/en/nevibecode/skills/build-mcp-app.md) — skill (official Anthropic) · Anthropic · Claude Code · 6458 installs — Learn to add interactive forms, pickers and visual widgets to an MCP server. - [ui-demo](https://affpapa.org/en/nevibecode/skills/ui-demo.md) — skill · affaan-m · Claude Code, Codex, Cursor +3 · 4700 installs — Records demo videos of a web app with Playwright: visible cursor, steady pacing, a story-shaped flow. - [react-testing](https://affpapa.org/en/nevibecode/skills/react-testing.md) — skill · affaan-m · Claude Code, Codex, Cursor +3 · 4800 installs — A skill for writing React component, hook and page tests with React Testing Library, Vitest or Jest, MSW network mocks and axe accessibility assertions. - [vite-patterns](https://affpapa.org/en/nevibecode/skills/vite-patterns.md) — skill · affaan-m · Claude Code, Codex, Cursor +3 · 4800 installs — This skill guides Vite configuration, plugins, HMR, environment variables, and builds. - [frontend-a11y](https://affpapa.org/en/nevibecode/skills/frontend-a11y.md) — skill · affaan-m · Claude Code, Codex, Cursor +3 · 4800 installs — Accessibility patterns for React and Next.js covering forms, ARIA, keyboard input, and focus. - [brand-landingpage](https://affpapa.org/en/nevibecode/skills/brand-landingpage.md) — skill · Travis D. Elliott · Claude Code, Codex, Cursor · 39476 installs — This skill interviews you about the product and its visual direction, then builds a landing page through Stitch. - [vite](https://affpapa.org/en/nevibecode/skills/vite.md) — skill · Anthony Fu · Claude Code, Codex, Cursor +3 · 39900 installs — This skill covers Vite configuration, plugin development, SSR builds, and the Vite 8 move to Rolldown. - [stitch::upload-to-stitch](https://affpapa.org/en/nevibecode/skills/stitchupload-to-stitch.md) — skill (official Google) · google-labs-code · Claude Code, Codex, Cursor +3 · 9900 installs — Uploads local images, mockups, extracted HTML, and design markdown to a Stitch project over HTTP, bypassing MCP base64 token limits. - [stitch::extract-static-html](https://affpapa.org/en/nevibecode/skills/stitchextract-static-html.md) — skill (official Google) · google-labs-code · Claude Code, Codex, Cursor +3 · 10000 installs — This skill saves a rendered app page as a standalone HTML file with CSS and images embedded. - [motion-advanced](https://affpapa.org/en/nevibecode/skills/motion-advanced.md) — skill · jeff · Claude Code, Codex, Cursor +3 · 4600 installs — Advanced gesture and animation patterns for React and Next.js. - [make-interfaces-feel-better](https://affpapa.org/en/nevibecode/skills/affaan-m-make-interfaces-feel-better.md) — skill · affaan-m · Claude Code, Codex, Cursor +3 · 4700 installs — This skill helps review and refine interface details such as spacing, typography, interaction states, and motion. - [dart-flutter-patterns](https://affpapa.org/en/nevibecode/skills/dart-flutter-patterns.md) — skill · affaan-m · Claude Code, Codex, Cursor +3 · 4700 installs — Copy-paste Dart and Flutter patterns: null safety, state, navigation, networking. - [documentation-lookup](https://affpapa.org/en/nevibecode/skills/documentation-lookup.md) — skill · affaan-m · Claude Code, Codex, Cursor +3 · 4700 installs — Fetches live library and framework documentation via the Context7 MCP server instead of stale training data. - [motion-foundations](https://affpapa.org/en/nevibecode/skills/motion-foundations.md) — skill · jeff · Claude Code, Codex, Cursor +3 · 4700 installs — Defines motion tokens, spring presets, performance rules and prefers-reduced-motion support for motion/react. - [motion-patterns](https://affpapa.org/en/nevibecode/skills/motion-patterns.md) — skill · jeff · Claude Code, Codex, Cursor +3 · 4700 installs — A skill with reusable animation patterns for React and Next.js. - [better-colors](https://affpapa.org/en/nevibecode/skills/better-colors.md) — skill · jakubkrehel · Claude Code, Codex, Cursor +3 · 32600 installs — Audits color systems, generates ramps, and maps semantic tokens to roles. - [angular-developer](https://affpapa.org/en/nevibecode/skills/affaan-m-angular-developer.md) — skill · affaan-m · Claude Code, Codex, Cursor +3 · 4500 installs — Scaffolds Angular code tailored to your project version, guides reactivity with Signals, and verifies builds with the CLI. - [benchmark](https://affpapa.org/en/nevibecode/skills/benchmark.md) — skill · affaan-m · Claude Code, Codex, Cursor +3 · 4500 installs — This skill measures page, API, and build performance, then compares results before and after a change. - [nuxt4-patterns](https://affpapa.org/en/nevibecode/skills/nuxt4-patterns.md) — skill · affaan-m · Claude Code, Codex, Cursor +3 · 4600 installs — A skill for Nuxt 4 work: hydration safety, route rules, lazy loading and SSR-safe data fetching with useFetch and useAsyncData. - [swiftui-patterns](https://affpapa.org/en/nevibecode/skills/affaan-m-swiftui-patterns.md) — skill · affaan-m · Claude Code, Codex, Cursor +3 · 4600 installs — Guides AI agents on modern SwiftUI architecture: @Observable state, type-safe navigation, and view performance. - [compose-multiplatform-patterns](https://affpapa.org/en/nevibecode/skills/compose-multiplatform-patterns.md) — skill · affaan-m · Claude Code, Codex, Cursor +3 · 4600 installs — Patterns for Compose Multiplatform and Jetpack Compose in KMP projects, covering state, navigation, theming, performance, and platform-specific UI. - [feature-flags](https://affpapa.org/en/nevibecode/skills/feature-flags.md) — skill · react · Claude Code, Codex, Cursor +3 · 1200 installs — A skill for working with feature flags in the React repo: where flags live, how to gate tests, and why a channel-specific test fails. - [verify](https://affpapa.org/en/nevibecode/skills/react-verify.md) — skill · react · Claude Code, Codex, Cursor +3 · 1200 installs — Validates code changes against React repository requirements before committing. - [web-design-reviewer](https://affpapa.org/en/nevibecode/skills/web-design-reviewer.md) — skill (official GitHub) · github · GitHub Copilot · 13957 installs — This skill inspects a running website, spots layout, responsive, and accessibility issues, and can fix them in the source code. - [better-layout](https://affpapa.org/en/nevibecode/skills/better-layout.md) — skill · jakubkrehel · Claude Code, Codex, Cursor +3 · 30800 installs — A skill that sets grouping, alignment, reading order and responsive structure, then stress-tests the result by resizing, translating and mirroring it for RTL. - [fixing-accessibility](https://affpapa.org/en/nevibecode/skills/fixing-accessibility.md) — skill · ibelick · Claude Code, Codex, Cursor +3 · 21800 installs — This skill audits HTML accessibility and suggests focused fixes. - [better-interface](https://affpapa.org/en/nevibecode/skills/better-interface.md) — skill · jakubkrehel · Claude Code, Codex, Cursor +3 · 30000 installs — Runs a cross-discipline interface review covering accessibility, layout, copy, typography, color, and UI polish into one ranked report. - [vue](https://affpapa.org/en/nevibecode/skills/vue.md) — skill · Anthony Fu · Claude Code, Codex, Cursor +3 · 35800 installs — This skill guides agents through Vue 3 Composition API, script setup, and reactivity. Next: https://affpapa.org/en/nevibecode/skills/topic/frontend.md?page=5 ## Refine [react](https://affpapa.org/en/nevibecode/tag/react.md) · [ui](https://affpapa.org/en/nevibecode/tag/ui.md) · [typescript](https://affpapa.org/en/nevibecode/tag/typescript.md) · [css](https://affpapa.org/en/nevibecode/tag/css.md) · [animation](https://affpapa.org/en/nevibecode/tag/animation.md) · [accessibility](https://affpapa.org/en/nevibecode/tag/accessibility.md) · [design-system](https://affpapa.org/en/nevibecode/tag/design-system.md) · [nextjs](https://affpapa.org/en/nevibecode/tag/nextjs.md) · [tailwind](https://affpapa.org/en/nevibecode/tag/tailwind.md) · [javascript](https://affpapa.org/en/nevibecode/tag/javascript.md) · [webgl](https://affpapa.org/en/nevibecode/tag/webgl.md) · [typography](https://affpapa.org/en/nevibecode/tag/typography.md) ## Narrow this list Parameters: `?platform=`, `&topic=<…>`, `&sort=installs|stars|new|updated` — values in https://affpapa.org/en/nevibecode/agents.md --- NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md