# Skills for Frontend and UI Skills for Frontend and UI: what each one does, an install command and example prompts. 2909 cards · page 41 of 73 - HTML: https://affpapa.org/en/nevibecode/skills/topic/frontend?page=41 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [netlify-edge-functions](https://affpapa.org/en/nevibecode/skills/netlify-edge-functions.md) — skill · netlify · Claude Code, Codex, Cursor +3 · 3100 installs — Write, route, cache and debug Netlify edge functions on Deno: middleware, geo redirects, caching, streaming SSR. - [expo-react-native-performance](https://affpapa.org/en/nevibecode/skills/expo-react-native-performance.md) — skill · pproenca · Claude Code, Codex, Cursor +3 · 1500 installs — Performance guidelines with 42 prioritized rules for Expo React Native apps. - [web-3d-asset-pipeline](https://affpapa.org/en/nevibecode/skills/web-3d-asset-pipeline.md) — skill (official OpenAI) · OpenAI · Codex, ChatGPT · 58 installs — Guides browser-game 3D assets from Blender cleanup to GLB or glTF preparation. - [window-management](https://affpapa.org/en/nevibecode/skills/window-management.md) — skill (official OpenAI) · OpenAI · Codex, ChatGPT · 58 installs — Configures macOS 15+ SwiftUI windows and scenes: toolbar chrome, drag regions, placement, and launch restoration. - [muse](https://affpapa.org/en/nevibecode/skills/muse.md) — skill · simota · Claude Code, Codex, Cursor +3 · 711 installs — A skill for design tokens: defines color, spacing, typography and shadows, then moves existing code onto semantic tokens. - [swiftui-design-principles](https://affpapa.org/en/nevibecode/skills/swiftui-design-principles.md) — skill · arjitj2 · Claude Code, Codex, Cursor +3 · 1300 installs — A skill that hands your coding agent fixed rules for spacing, type and color in SwiftUI and WidgetKit, so the UI reads as a native app instead of generated markup. - [mapbox-cartography](https://affpapa.org/en/nevibecode/skills/mapbox-cartography.md) — skill · mapbox · Claude Code, Codex, Cursor +3 · 2100 installs — A skill that feeds your agent cartographic rules: layer hierarchy, color palettes, typography and zoom strategy for Mapbox styles. - [mapbox-data-visualization-patterns](https://affpapa.org/en/nevibecode/skills/mapbox-data-visualization-patterns.md) — skill · mapbox · Claude Code, Codex, Cursor +3 · 2100 installs — Data visualization patterns for Mapbox GL JS in Claude Code, covering choropleth maps, heatmaps, and 3D styling. - [swiftui-patterns](https://affpapa.org/en/nevibecode/skills/swiftui-patterns.md) — skill (official OpenAI) · OpenAI · Codex, ChatGPT · 57 installs — Sets desktop-first macOS SwiftUI architecture, scene models, toolbars, split views, and clean multi-file project layouts. - [frontend-react-best-practices](https://affpapa.org/en/nevibecode/skills/frontend-react-best-practices.md) — skill · sergiodxa · Claude Code, Codex, Cursor +3 · 1200 installs — A skill with 33 React performance rules: fewer wasted re-renders, leaner bundles, cleaner component composition. - [auditing-performance](https://affpapa.org/en/nevibecode/skills/auditing-performance.md) — skill · spencerpauly · Claude Code, Codex, Cursor +3 · 476 installs — A skill that audits app performance: bundle size, rendering, database queries and Core Web Vitals. - [react-flow](https://affpapa.org/en/nevibecode/skills/framara-react-flow.md) — skill · framara · Claude Code, Codex, Cursor +3 · 823 installs — A skill that guides coding agents through React Flow (@xyflow/react): custom nodes and edges, state, layout, typing and debugging. - [laravel-inertia-react](https://affpapa.org/en/nevibecode/skills/laravel-inertia-react.md) — skill · AsyrafHussin · Claude Code, Codex, Cursor +3 · 2000 installs — A skill that hands your agent ready rules for Inertia pages, useForm handling and shared data across Laravel and React. - [netlify-identity](https://affpapa.org/en/nevibecode/skills/netlify-identity.md) — skill · netlify · Claude Code, Codex, Cursor +3 · 3000 installs — A skill that walks your agent through signup, login and OAuth on a Netlify site with @netlify/identity. - [netlify-image-cdn](https://affpapa.org/en/nevibecode/skills/netlify-image-cdn.md) — skill · netlify · Claude Code, Codex, Cursor +3 · 3000 installs — Guides your agent on transforming images on demand via Netlify Image CDN. - [kinetic-typography](https://affpapa.org/en/nevibecode/skills/kinetic-typography.md) — skill · iart-ai · Claude Code, Codex, Cursor +3 · 2200 installs — Generates expressive kinetic text animations, split-text reveals, and variable font effects in CSS, GSAP, Framer Motion, and Remotion. - [shadcn](https://affpapa.org/en/nevibecode/skills/pedronauck-shadcn.md) — skill · pedronauck · Claude Code, Codex, Cursor +3 · 369 installs — Guides AI agents through shadcn/ui and Radix UI best practices. - [template-builder-ui](https://affpapa.org/en/nevibecode/skills/template-builder-ui.md) — skill · sentdm · Claude Code, Codex, Cursor +3 · 2900 installs — Helps design and audit tenant-facing Sent v3 template builders, preview interfaces, channel validation, and lifecycle states before submitting to providers. - [react-data-fetching](https://affpapa.org/en/nevibecode/skills/react-data-fetching.md) — skill · patterns.dev · Claude Code, Codex, Cursor +3 · 1100 installs — Teaches your agent modern React data fetching: parallel requests, caching, deduplication, Suspense. - [react-render-optimization](https://affpapa.org/en/nevibecode/skills/react-render-optimization.md) — skill · patterns.dev · Claude Code, Codex, Cursor +3 · 1100 installs — A skill that teaches your agent React rendering patterns: kills unnecessary re-renders, fixes memoization and state design. - [presentational-container-pattern](https://affpapa.org/en/nevibecode/skills/presentational-container-pattern.md) — skill · patterns.dev · Claude Code, Codex, Cursor +3 · 1100 installs — Teaches agents the presentational and container pattern to split data fetching from React UI. - [react-composition-2026](https://affpapa.org/en/nevibecode/skills/react-composition-2026.md) — skill · patterns.dev · Claude Code, Codex, Cursor +3 · 1100 installs — A skill that pushes your agent away from boolean props and rigid component APIs toward compound components, explicit variants and children. - [hooks-pattern](https://affpapa.org/en/nevibecode/skills/hooks-pattern.md) — skill · patterns.dev · Claude Code, Codex, Cursor +3 · 1100 installs — A skill that teaches your agent React Hooks and helps pull repeated stateful logic into custom hooks. - [web-accessibility](https://affpapa.org/en/nevibecode/skills/hoodini-web-accessibility.md) — skill · hoodini · Claude Code, Codex, Cursor +3 · 455 installs — A skill that steers your coding agent toward accessible web UI: ARIA patterns, keyboard focus handling, screen reader support, all following WCAG 2.1. - [tanstack](https://affpapa.org/en/nevibecode/skills/tanstack.md) — skill · pedronauck · Claude Code, Codex, Cursor +3 · 360 installs — Get focused guidance for React changes involving TanStack Query, Router, or Form. - [mapbox-style-quality](https://affpapa.org/en/nevibecode/skills/mapbox-style-quality.md) — skill · mapbox · Claude Code, Codex, Cursor +3 · 2000 installs — A skill that walks your agent through Mapbox style QA: expression and GeoJSON validation, WCAG contrast checks, and style optimization. - [uni-helper](https://affpapa.org/en/nevibecode/skills/uni-helper.md) — skill · FlippeDround · Claude Code, Codex, Cursor +3 · 794 installs — A skill reference for the uni-helper ecosystem: Vite plugins, libraries and utilities for uni-app. - [react-mcp](https://affpapa.org/en/nevibecode/skills/react-mcp.md) — skill · assistant-ui · Claude Code, Codex, Cursor +3 · 4000 installs — A skill for wiring @assistant-ui/react-mcp into an app: users connect their own MCP servers in the browser and the tools show up in chat. - [observability](https://affpapa.org/en/nevibecode/skills/assistant-ui-observability.md) — skill · assistant-ui · Claude Code, Codex, Cursor +3 · 4000 installs — Wires Langfuse, LangSmith or Helicone into assistant-ui AI SDK backend routes and renders collected spans with the experimental @assistant-ui/react-o11y. - [motion](https://affpapa.org/en/nevibecode/skills/motiondivision-motion.md) — skill · motiondivision · Claude Code, Codex, Cursor +3 · 717 installs — This skill guides Motion and CSS animation work, finds docs and examples, and helps inspect performance issues. - [tailwindcss-mobile-first](https://affpapa.org/en/nevibecode/skills/tailwindcss-mobile-first.md) — skill · JosiahSiegel · Claude Code, Codex, Cursor +3 · 2100 installs — A skill that walks your coding agent through mobile-first responsive design with Tailwind CSS v4. - [seo-auditing](https://affpapa.org/en/nevibecode/skills/seo-auditing.md) — skill · spencerpauly · Claude Code, Codex, Cursor +3 · 456 installs — Audits technical SEO in web projects, covering meta tags, structured data, robots.txt, sitemaps, and Core Web Vitals. - [openclaw-control-center](https://affpapa.org/en/nevibecode/skills/openclaw-control-center.md) — skill · reason-machines · Claude Code, Codex, Cursor +3 · 4400 installs — A local control panel for OpenClaw agents, covering tasks, token usage, session handoffs, memory, and documents. - [v4-sdk-integration](https://affpapa.org/en/nevibecode/skills/v4-sdk-integration.md) — skill · uniswap · Claude Code, Codex, Cursor +3 · 729 installs — A skill that walks the agent through the Uniswap v4 SDK: swaps via Universal Router, quotes, pool state reads and LP position handling. - [sap-sac-custom-widget](https://affpapa.org/en/nevibecode/skills/sap-sac-custom-widget.md) — skill · secondsky · Claude Code, Codex, Cursor +3 · 609 installs — Guides custom widget development for SAP Analytics Cloud: Web Components, data feeds, styling panels. - [minimalist](https://affpapa.org/en/nevibecode/skills/tasteskill-minimalist.md) — skill · tasteskill · Claude Code, Codex, Cursor +3 · 319 installs — A web design skill that generates section reference images, analyzes them, and only then writes the frontend. - [zustand](https://affpapa.org/en/nevibecode/skills/pedronauck-zustand.md) — skill · pedronauck · Claude Code, Codex, Cursor +3 · 353 installs — A skill that feeds your coding agent Zustand patterns: domain stores, selector hooks, middleware and persistence. - [redesign](https://affpapa.org/en/nevibecode/skills/educlopez-redesign.md) — skill · educlopez · Claude Code, Codex, Cursor +3 · 469 installs — Redesigns web apps and sites without breaking existing SEO, brand colors, or conversion forms. - [copilots](https://affpapa.org/en/nevibecode/skills/copilots.md) — skill · assistant-ui · Claude Code, Codex, Cursor +3 · 3900 installs — An assistant-ui skill that teaches the agent to read page state, click rendered components and mutate their state through React hooks. - [seeker-connect](https://affpapa.org/en/nevibecode/skills/seeker-connect.md) — skill · solana-mobile · Claude Code, Codex, Cursor +3 · 7000 installs — Wires a web, React Native or Kotlin dapp to the built-in wallet on a Seeker phone: Solana sign-in, message and transaction signing. Next: https://affpapa.org/en/nevibecode/skills/topic/frontend.md?page=42 ## 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