# Skills for Frontend and UI Skills for Frontend and UI: what each one does, an install command and example prompts. 2909 cards · page 43 of 73 - HTML: https://affpapa.org/en/nevibecode/skills/topic/frontend?page=43 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [recording-browser-flow-as-test](https://affpapa.org/en/nevibecode/skills/recording-browser-flow-as-test.md) — skill · spencerpauly · Claude Code, Codex, Cursor +3 · 406 installs — Walks through browser interactions step by step via MCP and outputs a clean Playwright test based on accessibility tree selectors. - [three-webgl-game](https://affpapa.org/en/nevibecode/skills/three-webgl-game.md) — skill (official OpenAI) · OpenAI · Codex, ChatGPT · 48 installs — Scaffolds browser 3D games with plain Three.js, TypeScript, and Vite, adding Rapier physics and direct render loop control without React. - [create-component](https://affpapa.org/en/nevibecode/skills/create-component.md) — skill · AEM Dev Agent · Claude Code, Codex, Cursor +3 · 1000 installs — Generates complete AEM components with HTL markup, Sling Models, dialogs, and tests. - [isometric-animation](https://affpapa.org/en/nevibecode/skills/isometric-animation.md) — skill · iart-ai · Claude Code, Codex, Cursor +3 · 1400 installs — A skill for isometric and 2.5D animation: stacked layers, extruded blocks, exploded diagrams and gentle camera drift. - [whiteboard-animation](https://affpapa.org/en/nevibecode/skills/whiteboard-animation.md) — skill · iart-ai · Claude Code, Codex, Cursor +3 · 1400 installs — Guides agents in generating VideoScribe-style whiteboard explainers with animated SVG strokes and a marker hand following the pen tip. - [diagram-animation](https://affpapa.org/en/nevibecode/skills/diagram-animation.md) — skill · iart-ai · Claude Code, Codex, Cursor +3 · 1500 installs — A coding-agent skill that turns a static diagram or chart into a step-by-step reveal: nodes, edges, labels, growing bars. - [godot-ui](https://affpapa.org/en/nevibecode/skills/godot-ui.md) — skill · Zate · Claude Code, Codex, Cursor +3 · 2700 installs — Gives the agent working knowledge of Godot Control nodes, themes and common screens. - [screenshotting-changelog](https://affpapa.org/en/nevibecode/skills/screenshotting-changelog.md) — skill · spencerpauly · Claude Code, Codex, Cursor +3 · 401 installs — Builds a visual changelog for a pull request: captures pages before and after your UI edits and drops the image pairs into the PR body. - [react-server-components](https://affpapa.org/en/nevibecode/skills/react-server-components.md) — skill · patterns.dev · Claude Code, Codex, Cursor +3 · 954 installs — A skill that teaches React Server Components: which components belong on the server and where 'use client' goes. - [ui-design](https://affpapa.org/en/nevibecode/skills/ui-design.md) — skill · TencentCloudBase · Claude Code, Codex, Cursor +3 · 1800 installs — Makes the agent output a design specification — palette, fonts, layout — before it writes any interface code. - [web-development](https://affpapa.org/en/nevibecode/skills/web-development.md) — skill · TencentCloudBase · Claude Code, Codex, Cursor +3 · 1800 installs — A skill for implementing, debugging and shipping a web frontend once the product direction is settled. - [progressive-hydration](https://affpapa.org/en/nevibecode/skills/progressive-hydration.md) — skill · patterns.dev · Claude Code, Codex, Cursor +3 · 952 installs — A skill that tells the agent how to split hydration of a server-rendered React app and defer JavaScript for non-critical sections. - [updating-npm-package](https://affpapa.org/en/nevibecode/skills/updating-npm-package.md) — skill · spencerpauly · Claude Code, Codex, Cursor +3 · 398 installs — Updates npm dependencies safely by checking npmjs.com and adapting to the version jump. - [react-native-patterns](https://affpapa.org/en/nevibecode/skills/react-native-patterns.md) — skill · spencerpauly · Claude Code, Codex, Cursor +3 · 399 installs — This skill guides an agent building React Native and Expo apps, covering navigation, platform-specific code, styling, lists, and native modules. - [use-user-controlled-wallets](https://affpapa.org/en/nevibecode/skills/use-user-controlled-wallets.md) — skill · circlefin · Claude Code, Codex, Cursor +3 · 949 installs — A skill for building non-custodial wallets on Circle's SDK, with Google, Apple, Facebook, email OTP or PIN login and keys the user keeps. - [react-selective-hydration](https://affpapa.org/en/nevibecode/skills/react-selective-hydration.md) — skill · patterns.dev · Claude Code, Codex, Cursor +3 · 943 installs — Guides your coding agent in setting up selective hydration and streaming SSR in React 18+. - [nitro-fetch](https://affpapa.org/en/nevibecode/skills/nitro-fetch.md) — skill · Margelo · Claude Code, Codex, Cursor +3 · 616 installs — A skill that points AI assistants at the real react-native-nitro-fetch APIs instead of invented ones: fetch, WebSocket, TextDecoder, prefetching. - [md-document](https://affpapa.org/en/nevibecode/skills/md-document.md) — skill · Alireza Rezvani · Claude Code · 49 installs — Turns long markdown — specs, RFCs, reports, plans — into a single HTML file with a sticky table of contents, search and code-copy buttons. - [frontend-design-review](https://affpapa.org/en/nevibecode/skills/frontend-design-review.md) — skill · microsoft · Claude Code, GitHub Copilot · 237 installs — This skill reviews and creates frontend interfaces with checks for design quality, accessibility, and design-system use. - [server-side-rendering](https://affpapa.org/en/nevibecode/skills/server-side-rendering.md) — skill · patterns.dev · Claude Code, Codex, Cursor +3 · 942 installs — A skill that walks your agent through server-side rendering in React and tells you when SSR pays off and when static or client rendering is the better call. - [particle-system](https://affpapa.org/en/nevibecode/skills/particle-system.md) — skill · iart-ai · Claude Code, Codex, Cursor +3 · 1400 installs — A coding-agent skill for building particle systems: confetti, snow, smoke, sparks, connected-dot backgrounds and GPU particles with Three.js Points. - [threejs-animation](https://affpapa.org/en/nevibecode/skills/iart-ai-threejs-animation.md) — skill · iart-ai · Claude Code, Codex, Cursor +3 · 1400 installs — A coding-agent skill for Three.js and React Three Fiber motion: scenes, GLTF clips, scroll-linked cameras, instancing and GPU cleanup. - [aceternity-ui](https://affpapa.org/en/nevibecode/skills/aceternity-ui.md) — skill · Claude Skills Maintainers · Claude Code, Codex, Cursor +3 · 1500 installs — This skill gives your agent the Aceternity UI playbook: 100+ animated React components for Next.js with Tailwind. - [converting-css-modules-to-tailwind](https://affpapa.org/en/nevibecode/skills/converting-css-modules-to-tailwind.md) — skill · spencerpauly · Claude Code, Codex, Cursor +3 · 392 installs — Moves one component off CSS Modules and onto Tailwind utility classes, then removes the module file and its import. - [responsive-web-design](https://affpapa.org/en/nevibecode/skills/responsive-web-design.md) — skill · aj-geddes · Claude Code, Codex, Cursor +3 · 1100 installs — A skill that steers your coding agent toward mobile-first CSS with Flexbox, Grid and media queries. - [hyva-theme-list](https://affpapa.org/en/nevibecode/skills/hyva-theme-list.md) — skill · hyva-themes · Claude Code, Codex, Cursor +3 · 1300 installs — Walks a Magento 2 project and prints the path of every Hyvä theme it finds. - [hyva-playwright-test](https://affpapa.org/en/nevibecode/skills/hyva-playwright-test.md) — skill · hyva-themes · Claude Code, Codex, Cursor +3 · 1300 installs — Guides writing Playwright end-to-end tests for Hyvä Magento storefronts using Alpine.js. - [hyva-ui-component](https://affpapa.org/en/nevibecode/skills/hyva-ui-component.md) — skill · hyva-themes · Claude Code, Codex, Cursor +3 · 1300 installs — This skill applies template-based Hyvä UI components to a selected theme. - [hyva-render-media-image](https://affpapa.org/en/nevibecode/skills/hyva-render-media-image.md) — skill · hyva-themes · Claude Code, Codex, Cursor +3 · 1300 installs — Writes responsive markup for Hyvä Theme templates through the Media view model. - [hyva-compile-tailwind-css](https://affpapa.org/en/nevibecode/skills/hyva-compile-tailwind-css.md) — skill · hyva-themes · Claude Code, Codex, Cursor +3 · 1300 installs — Builds Tailwind CSS stylesheets for Hyvä themes in Magento 2. - [hyva-child-theme](https://affpapa.org/en/nevibecode/skills/hyva-child-theme.md) — skill · hyva-themes · Claude Code, Codex, Cursor +3 · 1300 installs — Builds a Hyvä child theme inside a Magento 2 project, including its frontend structure and Tailwind CSS setup. - [hyva-alpine-component](https://affpapa.org/en/nevibecode/skills/hyva-alpine-component.md) — skill · hyva-themes · Claude Code, Codex, Cursor +3 · 1300 installs — Guides the agent through building Alpine.js components for Hyvä themes in Magento 2 that keep working when Content Security Policy is strict. - [mapbox-store-locator-patterns](https://affpapa.org/en/nevibecode/skills/mapbox-store-locator-patterns.md) — skill · mapbox · Claude Code, Codex, Cursor +3 · 1700 installs — Store locator patterns for Mapbox GL JS. - [nextjs](https://affpapa.org/en/nevibecode/skills/pproenca-nextjs.md) — skill · pproenca · Claude Code, Codex, Cursor +3 · 1200 installs — This skill guides Next.js 16 App Router work, from caching and Server Components to routing and codebase reviews. - [electron-dev](https://affpapa.org/en/nevibecode/skills/electron-dev.md) — skill · jamditis · Claude Code, Codex, Cursor +3 · 305 installs — A skill for building Electron desktop apps with React, TypeScript and Vite: IPC, tray, PTY terminals, packaging. - [storybook-stories](https://affpapa.org/en/nevibecode/skills/storybook-stories.md) — skill · Pedro Nauck · Claude Code, Codex, Cursor +3 · 305 installs — Writes and edits Storybook stories the way your repo already does it. - [analytics-metrics](https://affpapa.org/en/nevibecode/skills/analytics-metrics.md) — skill · hoodini · Claude Code, Codex, Cursor +3 · 380 installs — A skill that hands your agent ready Recharts components: line, bar and pie charts plus KPI cards. - [incremental-static-rendering](https://affpapa.org/en/nevibecode/skills/incremental-static-rendering.md) — skill · patterns.dev · Claude Code, Codex, Cursor +3 · 918 installs — Teaches your coding agent Incremental Static Regeneration in Next.js. - [cross-browser-testing](https://affpapa.org/en/nevibecode/skills/cross-browser-testing.md) — skill · kindlmann · Claude Code, Codex, Cursor +3 · 1100 installs — A skill that picks which browsers to test, wires them into Playwright or a cloud grid, and keeps a log of known engine divergences. - [accessibility-testing](https://affpapa.org/en/nevibecode/skills/accessibility-testing.md) — skill · kindlmann · Claude Code, Codex, Cursor +3 · 1100 installs — An accessibility skill that runs axe-core through Playwright, audits keyboard navigation and screen readers, and validates ARIA patterns. Next: https://affpapa.org/en/nevibecode/skills/topic/frontend.md?page=44 ## 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