# Skills for Frontend and UI Skills for Frontend and UI: what each one does, an install command and example prompts. 2909 cards · page 16 of 73 - HTML: https://affpapa.org/en/nevibecode/skills/topic/frontend?page=16 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [migrate-nativewind-to-uniwind](https://affpapa.org/en/nevibecode/skills/migrate-nativewind-to-uniwind.md) — skill · uni-stack · Claude Code, Codex, Cursor +3 · 2000 installs — A skill that automates migrating React Native projects from NativeWind to Uniwind. - [react-router](https://affpapa.org/en/nevibecode/skills/react-router.md) — skill · TanStack · Claude Code, Codex, Cursor +3 · 547 installs — A skill that teaches your coding agent the React bindings for TanStack Router: hook reference, components, and a file-based routing setup on Vite. - [principle-experience-first](https://affpapa.org/en/nevibecode/skills/principle-experience-first.md) — skill · backnotprop · Claude Code, Codex, Cursor +3 · 5100 installs — A principle skill that shifts priority toward the user when product, UX, or feature-scope tradeoffs come up. - [wpds](https://affpapa.org/en/nevibecode/skills/wpds.md) — skill · WordPress · Claude Code, Codex, Cursor +3 · 4000 installs — Feeds WordPress Design System docs to your agent through an MCP server, so UI work lands on real components and tokens instead of guesses. - [narrow-react-prop-types](https://affpapa.org/en/nevibecode/skills/narrow-react-prop-types.md) — skill · humanlayer · Claude Code, Codex, Cursor +3 · 1300 installs — A skill that cuts React component prop types back to the contract your live code actually uses, then makes stories and tests match it instead of weakening it. - [clerk-setup](https://affpapa.org/en/nevibecode/skills/clerk-setup.md) — skill · clerk · Claude Code, Codex, Cursor +3 · 56600 installs — Configures Clerk authentication via the Clerk CLI or scaffolds a fresh app with auth preconfigured. - [typescript-variables](https://affpapa.org/en/nevibecode/skills/typescript-variables.md) — skill · mkosir · Claude Code, Codex, Cursor +3 · 3800 installs — Applies TypeScript variable conventions: const assertions, enum replacement with literal types, unions over boolean flags, null vs undefined distinction. - [typescript-discriminated-unions](https://affpapa.org/en/nevibecode/skills/typescript-discriminated-unions.md) — skill · mkosir · Claude Code, Codex, Cursor +3 · 3800 installs — Guides coding agents to apply discriminated unions in TypeScript, eliminating invalid states and enabling exhaustiveness checks. - [clerk-custom-ui](https://affpapa.org/en/nevibecode/skills/clerk-custom-ui.md) — skill · clerk · Claude Code, Codex, Cursor +3 · 55200 installs — A Clerk skill that has the agent build custom sign-in and sign-up forms with hooks, or restyle the pre-built components to fit your brand. - [angular-signals](https://affpapa.org/en/nevibecode/skills/angular-signals.md) — skill · analogjs · Claude Code, Codex, Cursor +3 · 8800 installs — Helps manage reactive state in Angular v20+ with signals and replaces RxJS patterns. - [clerk-nextjs-patterns](https://affpapa.org/en/nevibecode/skills/clerk-nextjs-patterns.md) — skill · clerk · Claude Code, Codex, Cursor +3 · 53400 installs — Provides authentication and authorization patterns for Next.js with Clerk. - [design-everyday-things](https://affpapa.org/en/nevibecode/skills/design-everyday-things.md) — skill · wondelai · Claude Code, Codex, Cursor +3 · 5600 installs — A skill that walks an interface through the principles of The Design of Everyday Things: affordances, signifiers, constraints, feedback. - [wear-compose-m3](https://affpapa.org/en/nevibecode/skills/wear-compose-m3.md) — skill · Google LLC · Claude Code, Codex, Cursor +3 · 1200 installs — Teaches the agent Wear OS Compose Material3: migrating off Material 2.5 and Horologist, canonical component samples, and the toolchain floors you need. - [tanstack-query-best-practices](https://affpapa.org/en/nevibecode/skills/tanstack-query-best-practices.md) — skill · DeckardGer · Claude Code, Codex, Cursor +3 · 12800 installs — A rule set for TanStack Query in React: query keys, caching, mutations, SSR. - [shaders](https://affpapa.org/en/nevibecode/skills/shaders.md) — skill · shader-effects-inc · Claude Code, Codex, Cursor +3 · 548 installs — A skill for WebGPU visuals: animated backgrounds, gradients, glass, distortion and particles from the shaders component library in React, Vue, Svelte, Solid or plain JS. - [tailwind-4-docs](https://affpapa.org/en/nevibecode/skills/tailwind-4-docs.md) — skill · Lombiq · Claude Code, Codex, Cursor +3 · 17600 installs — The skill syncs a local snapshot of the Tailwind CSS v4 docs so your agent answers utility, config and v3-to-v4 migration questions from official text. - [tailwindcss-development](https://affpapa.org/en/nevibecode/skills/tailwindcss-development.md) — skill · laravel · Claude Code, Codex, Cursor +3 · 942 installs — Writes and fixes Tailwind classes in Blade, JSX and Vue templates. - [senior-frontend](https://affpapa.org/en/nevibecode/skills/senior-frontend.md) — skill · Alireza Rezvani · Claude Code · 1630 installs — This skill supports React and Next.js work, from project scaffolding to bundle checks. - [generate](https://affpapa.org/en/nevibecode/skills/generate.md) — skill · Alireza Rezvani · Claude Code · 1624 installs — The generate skill writes Playwright tests from a user story, URL, component name or feature description. - [bklit-ui](https://affpapa.org/en/nevibecode/skills/bklit-ui.md) — skill · bklit · Claude Code, Codex, Cursor +3 · 1200 installs — Installs Bklit UI chart components into a React or Next.js app, then shows how to compose series, axes and tooltips without hand-rolled SVG. - [high-perf-browser](https://affpapa.org/en/nevibecode/skills/high-perf-browser.md) — skill · wondelai · Claude Code, Codex, Cursor +3 · 5300 installs — A Claude Code skill that traces slow page loads back to round trips: handshakes, HTTP/2 and HTTP/3, render-blocking resources and the critical rendering path. - [maui-theming](https://affpapa.org/en/nevibecode/skills/maui-theming.md) — skill · dotnet · Claude Code, Codex, Cursor +3 · 3200 installs — A skill that walks the agent through light and dark themes in .NET MAUI: AppThemeBinding, ResourceDictionary swapping, system theme detection. - [maui-data-binding](https://affpapa.org/en/nevibecode/skills/maui-data-binding.md) — skill · dotnet · Claude Code, Codex, Cursor +3 · 3200 installs — A skill that gives your coding agent the rules for XAML and C# data bindings in .NET MAUI, from compiled bindings to change notification. - [maui-dependency-injection](https://affpapa.org/en/nevibecode/skills/maui-dependency-injection.md) — skill · dotnet · Claude Code, Codex, Cursor +3 · 3200 installs — Guides dependency injection setup in .NET MAUI projects. - [antd](https://affpapa.org/en/nevibecode/skills/antd.md) — skill · ant-design · Claude Code, Codex, Cursor +3 · 6100 installs — Guides an agent through Ant Design API checks, project diagnostics, and version migrations when working with antd code. - [build-awwwards-quality-sites](https://affpapa.org/en/nevibecode/skills/build-awwwards-quality-sites.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 3100 installs — Provides art direction and implementation rules for motion-led, interactive websites. - [webgpu-threejs-tsl](https://affpapa.org/en/nevibecode/skills/webgpu-threejs-tsl.md) — skill · dgreenheck · Claude Code, Codex, Cursor +3 · 1600 installs — Guides an agent through Three.js work with WebGPU, TSL node materials, GPU compute shaders, and post-processing effects. - [react-start](https://affpapa.org/en/nevibecode/skills/react-start.md) — skill · TanStack · Claude Code, Codex, Cursor +3 · 454 installs — Guides agents through TanStack Start with React. - [web-haptics](https://affpapa.org/en/nevibecode/skills/web-haptics.md) — skill · lochie · Claude Code, Codex, Cursor +3 · 812 installs — Teaches your coding agent to add tactile feedback to mobile web interfaces using the zero-dependency web-haptics library and Apple HIG rules. - [web-prototype](https://affpapa.org/en/nevibecode/skills/web-prototype.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 300 installs — Builds one self-contained HTML prototype from a seed template and eight section skeletons. - [create-verification-skill](https://affpapa.org/en/nevibecode/skills/tester-army-create-verification-skill.md) — skill · tester-army · Claude Code, Codex, Cursor +3 · 388 installs — Generates a project-local verify- skill on top of e2e. - [improve-threejs](https://affpapa.org/en/nevibecode/skills/improve-threejs.md) — skill · millionco · Claude Code, Codex, Cursor +3 · 316 installs — Audits Three.js and React Three Fiber apps for frame-loop issues, GPU memory leaks and rendering defects. - [testing-for-xss-vulnerabilities](https://affpapa.org/en/nevibecode/skills/testing-for-xss-vulnerabilities.md) — skill · mahipal · Claude Code, Codex, Cursor +3 · 647 installs — Tests web applications for reflected, stored, and DOM XSS. - [configure-auth](https://affpapa.org/en/nevibecode/skills/configure-auth.md) — skill · dotnet · Claude Code, Codex, Cursor +3 · 3100 installs — Adds authentication and authorization to a Blazor Web App based on its render mode. - [maui-safe-area](https://affpapa.org/en/nevibecode/skills/maui-safe-area.md) — skill · dotnet · Claude Code, Codex, Cursor +3 · 3200 installs — Safe area and edge-to-edge layout guidance for .NET 10+. - [maui-collectionview](https://affpapa.org/en/nevibecode/skills/maui-collectionview.md) — skill · dotnet · Claude Code, Codex, Cursor +3 · 3200 installs — A reference skill for CollectionView in .NET MAUI: item templates, grids, grouping, incremental loading and swipe actions. - [start-core](https://affpapa.org/en/nevibecode/skills/start-core.md) — skill · TanStack · Claude Code, Codex, Cursor +3 · 447 installs — This skill covers the TanStack Start foundation: the Vite plugin, router factory, root route, and server functions. - [modern-css](https://affpapa.org/en/nevibecode/skills/modern-css.md) — skill · paulirish · Claude Code, Codex, Cursor +3 · 544 installs — Gives an agent a modern CSS reference for new stylesheets, legacy CSS refactors, and questions about newer browser features. - [roblox-ui](https://affpapa.org/en/nevibecode/skills/roblox-ui.md) — skill · gamedev-skills · Claude Code, Codex, Cursor +3 · 4000 installs — A skill for building Roblox interfaces: ScreenGui lifecycle, responsive UDim2 layouts, gamepad and touch input. - [use-js-interop](https://affpapa.org/en/nevibecode/skills/use-js-interop.md) — skill · dotnet · Claude Code, Codex, Cursor +3 · 3000 installs — Sets up and audits JavaScript interop in Blazor components. Next: https://affpapa.org/en/nevibecode/skills/topic/frontend.md?page=17 ## 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