# Skills for Frontend and UI Skills for Frontend and UI: what each one does, an install command and example prompts. 2909 cards · page 42 of 73 - HTML: https://affpapa.org/en/nevibecode/skills/topic/frontend?page=42 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [ui-web](https://affpapa.org/en/nevibecode/skills/ui-web.md) — skill · alinaqi · Claude Code, Codex, Cursor +3 · 393 installs — Design skill enforcing WCAG 2.1 AA accessibility, Tailwind CSS tokens, dark mode contrast, and glassmorphic UI patterns. - [wcag-accessibility-audit](https://affpapa.org/en/nevibecode/skills/wcag-accessibility-audit.md) — skill · mastepanoski · Claude Code, Codex, Cursor +3 · 1600 installs — Checks websites and web apps against WCAG 2.1 and 2.2, exposing accessibility barriers and reviewing A, AA, or AAA conformance. - [industrial-brutalist](https://affpapa.org/en/nevibecode/skills/industrial-brutalist.md) — skill · tasteskill · Claude Code, Codex, Cursor +3 · 311 installs — A skill for sites in industrial brutalism and tactical telemetry style. - [web-game-foundations](https://affpapa.org/en/nevibecode/skills/web-game-foundations.md) — skill (official OpenAI) · OpenAI · Codex, ChatGPT · 52 installs — Defines browser game architecture before coding begins. - [view-refactor](https://affpapa.org/en/nevibecode/skills/view-refactor.md) — skill (official OpenAI) · OpenAI · Codex, ChatGPT · 52 installs — This skill restructures macOS SwiftUI views and scenes. - [network-request-auditing](https://affpapa.org/en/nevibecode/skills/network-request-auditing.md) — skill · spencerpauly · Claude Code, Codex, Cursor +3 · 435 installs — Audits browser fetch and XHR calls after UI interactions to find errors, duplicate requests, and latency issues. - [dark-mode-testing](https://affpapa.org/en/nevibecode/skills/dark-mode-testing.md) — skill · spencerpauly · Claude Code, Codex, Cursor +3 · 436 installs — Toggles light and dark mode in the browser, screenshots both states, and points out hardcoded colors, invisible text and contrast failures. - [mapbox-search-integration](https://affpapa.org/en/nevibecode/skills/mapbox-search-integration.md) — skill · mapbox · Claude Code, Codex, Cursor +3 · 1900 installs — Walks your agent through the full Mapbox search rollout: discovery questions first, then a working integration with the right API and parameters. - [mapbox-token-security](https://affpapa.org/en/nevibecode/skills/mapbox-token-security.md) — skill · mapbox · Claude Code, Codex, Cursor +3 · 1900 installs — Security guidelines for Mapbox access tokens: scope management, URL restrictions, and client initialization guards. - [upgrade-react-native](https://affpapa.org/en/nevibecode/skills/upgrade-react-native.md) — skill · react-native-community · Claude Code, Codex, Cursor +3 · 1300 installs — Upgrades React Native Community CLI projects to a target version using diffs from the React Native Upgrade Helper. - [vite](https://affpapa.org/en/nevibecode/skills/anthony-fu-vite.md) — skill · Anthony Fu · Claude Code, Codex, Cursor +3 · 747 installs — A Vite 6.x skill that walks your agent through config files, plugin setup, the dev server and production builds. - [nextjs-app-architecture](https://affpapa.org/en/nevibecode/skills/nextjs-app-architecture.md) — skill · aurorascharff · Claude Code, Codex, Cursor +3 · 485 installs — A skill that keeps a Next.js 16 App Router codebase on one architecture: pages compose, features fetch. - [svelte-runes](https://affpapa.org/en/nevibecode/skills/svelte-runes.md) — skill · spences10 · Claude Code, Codex, Cursor +3 · 1000 installs — Guides coding agents on Svelte 5 runes without mixing legacy syntax. - [sveltekit-structure](https://affpapa.org/en/nevibecode/skills/sveltekit-structure.md) — skill · spences10 · Claude Code, Codex, Cursor +3 · 1000 installs — Tells the agent how to lay out routes, nested layouts and error boundaries in SvelteKit. - [quieter](https://affpapa.org/en/nevibecode/skills/educlopez-quieter.md) — skill · educlopez · Claude Code, Codex, Cursor +3 · 451 installs — An AI-coding skill that lowers visual noise in an interface: less motion, simpler layout, calmer color. - [writing-for-interfaces](https://affpapa.org/en/nevibecode/skills/writing-for-interfaces.md) — skill · andrewgleave · Claude Code, Codex, Cursor +3 · 1100 installs — Guides UI text drafting, error message rewrites, and button labels to keep interface copy aligned with product voice. - [finding-dev-server-url](https://affpapa.org/en/nevibecode/skills/finding-dev-server-url.md) — skill · spencerpauly · Claude Code, Codex, Cursor +3 · 425 installs — Scans running terminal sessions for dev server URLs and localhost ports. - [bolder](https://affpapa.org/en/nevibecode/skills/educlopez-bolder.md) — skill · educlopez · Claude Code, Codex, Cursor +3 · 445 installs — A skill that gives an interface more character: wider layout variance, more motion, one signature detail. - [shader-glsl](https://affpapa.org/en/nevibecode/skills/shader-glsl.md) — skill · iart-ai · Claude Code, Codex, Cursor +3 · 1400 installs — GLSL fragment shader skill for generating animated backgrounds, image transitions, and Three.js ShaderMaterial pipelines. - [converting-css-to-tailwind](https://affpapa.org/en/nevibecode/skills/converting-css-to-tailwind.md) — skill · spencerpauly · Claude Code, Codex, Cursor +3 · 423 installs — This skill walks a plain CSS file and rewrites its rules as Tailwind utility classes in your markup. - [now-reading-page](https://affpapa.org/en/nevibecode/skills/now-reading-page.md) — skill · readwiseio · Claude Code, Codex, Cursor +3 · 455 installs — Turns your Readwise Reader library into a single HTML page showing what you are reading now and what you finished recently. - [visual-testing](https://affpapa.org/en/nevibecode/skills/visual-testing.md) — skill · kindlmann · Claude Code, Codex, Cursor +3 · 1200 installs — A skill for visual regression testing: it compares screenshots against approved baselines and flags pixel-level differences that functional tests miss. - [render-props-pattern](https://affpapa.org/en/nevibecode/skills/render-props-pattern.md) — skill · patterns.dev · Claude Code, Codex, Cursor +3 · 1000 installs — A skill that walks through the render props pattern in React and tells you when a hook is the better call. - [client-side-rendering](https://affpapa.org/en/nevibecode/skills/client-side-rendering.md) — skill · patterns.dev · Claude Code, Codex, Cursor +3 · 1000 installs — A skill that walks through client-side rendering in React: when CSR fits, and when your page loses on SEO and first paint. - [hoc-pattern](https://affpapa.org/en/nevibecode/skills/hoc-pattern.md) — skill · patterns.dev · Claude Code, Codex, Cursor +3 · 1000 installs — Teaches your AI assistant the Higher-Order Component pattern to share logic across React components. - [compound-pattern](https://affpapa.org/en/nevibecode/skills/compound-pattern.md) — skill · patterns.dev · Claude Code, Codex, Cursor +3 · 1000 installs — Teaches the agent the compound component pattern for shared implicit state. - [nextjs](https://affpapa.org/en/nevibecode/skills/nextjs.md) — skill (official OpenAI) · Vercel Labs · Codex, ChatGPT · 50 installs — Guidance for building and debugging Next.js App Router projects. - [detecting-port-conflicts](https://affpapa.org/en/nevibecode/skills/detecting-port-conflicts.md) — skill · spencerpauly · Claude Code, Codex, Cursor +3 · 418 installs — Detects EADDRINUSE and port conflicts in terminal output, identifies blocking processes with lsof, and kills them or picks an open port for your dev server. - [swiftui-animation](https://affpapa.org/en/nevibecode/skills/jamesrochabrun-swiftui-animation.md) — skill · jamesrochabrun · Claude Code, Codex, Cursor +3 · 567 installs — Guides AI coding agents through building SwiftUI spring animations and Metal shader effects on iOS and macOS. - [godot-ui-rich-text](https://affpapa.org/en/nevibecode/skills/godot-ui-rich-text.md) — skill · thedivergentai · Claude Code, Codex, Cursor +3 · 400 installs — A skill for RichTextLabel work in Godot: BBCode markup, clickable links, custom shader effects and dialogue systems. - [iphone-duo-readiness](https://affpapa.org/en/nevibecode/skills/iphone-duo-readiness.md) — skill · mirzaaghazadeh · Claude Code, Codex, Cursor +3 · 630 installs — Audits iOS apps and prepares them for the foldable iPhone Duo. - [write-landing](https://affpapa.org/en/nevibecode/skills/write-landing.md) — skill · OpenClaudia · Claude Code, Codex, Cursor +3 · 468 installs — Writes landing page copy and wireframe structure for conversion and SEO. - [phaser-2d-game](https://affpapa.org/en/nevibecode/skills/phaser-2d-game.md) — skill (official OpenAI) · OpenAI · Codex, ChatGPT · 49 installs — Build 2D browser games with Phaser, TypeScript, and Vite. - [profiling-performance](https://affpapa.org/en/nevibecode/skills/profiling-performance.md) — skill · spencerpauly · Claude Code, Codex, Cursor +3 · 410 installs — This skill profiles web application CPU performance using browser MCP tools. - [ui-testing](https://affpapa.org/en/nevibecode/skills/ui-testing.md) — skill · alinaqi · Claude Code, Codex, Cursor +3 · 364 installs — An accessibility and visual QA checklist for components: detects invisible buttons, failing contrast ratios, and small touch targets. - [threejs-perf](https://affpapa.org/en/nevibecode/skills/threejs-perf.md) — skill · OpusGameLabs · Claude Code, Codex, Cursor +3 · 639 installs — Three.js optimization patterns that batch draw calls and accelerate updates for thousands of moving objects. - [vue](https://affpapa.org/en/nevibecode/skills/anthony-fu-vue.md) — skill · Anthony Fu · Claude Code, Codex, Cursor +3 · 706 installs — Guides agent code generation for Vue components and reactivity patterns. - [htmx](https://affpapa.org/en/nevibecode/skills/htmx.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 1700 installs — Development guidelines for HTMX: the agent writes markup with hx attributes and returns only the HTML fragments the page needs. - [scss-best-practices](https://affpapa.org/en/nevibecode/skills/scss-best-practices.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 1700 installs — Enforces SCSS best practices including the 7-1 folder structure, BEM naming, and a strict three-level nesting limit. - [browser-preview](https://affpapa.org/en/nevibecode/skills/browser-preview.md) — skill · Starchild-ai-agent · Claude Code, Codex, Cursor +3 · 4600 installs — Walks the agent through a broken Preview tab: service registry, ports, and static asset paths that 404 behind the proxy. Next: https://affpapa.org/en/nevibecode/skills/topic/frontend.md?page=43 ## 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