# Skills for Frontend and UI Skills for Frontend and UI: what each one does, an install command and example prompts. 2909 cards · page 36 of 73 - HTML: https://affpapa.org/en/nevibecode/skills/topic/frontend?page=36 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [dt-obs-frontends](https://affpapa.org/en/nevibecode/skills/dt-obs-frontends.md) — skill · Dynatrace · Claude Code, Codex, Cursor +3 · 2500 installs — A skill that teaches your agent to query Dynatrace Real User Monitoring: Core Web Vitals, sessions, frontend errors and frontend-backend linking in DQL. - [shadertoy](https://affpapa.org/en/nevibecode/skills/shadertoy.md) — skill · bfollington · Claude Code, Codex, Cursor +3 · 1500 installs — Provides GLSL ES conventions and math patterns for writing Shadertoy shaders. - [frontend-design](https://affpapa.org/en/nevibecode/skills/cline-frontend-design.md) — skill · cline · Claude Code, Codex, Cursor +3 · 7300 installs — The skill makes the agent pick a bold visual direction before writing code, then hold it through every detail. - [tokens](https://affpapa.org/en/nevibecode/skills/tokens.md) — skill · educlopez · Claude Code, Codex, Cursor +3 · 855 installs — Scans a project for design tokens and checks them against a three-layer contract, or proposes a minimal spine when none exist. - [superwall-editor](https://affpapa.org/en/nevibecode/skills/superwall-editor.md) — skill · superwall · Claude Code, Codex, Cursor +3 · 3600 installs — A skill that lets a terminal agent build and edit Superwall paywalls, onboarding and web2app flows. - [finalize](https://affpapa.org/en/nevibecode/skills/finalize.md) — skill · educlopez · Claude Code, Codex, Cursor +3 · 852 installs — Runs your interface through a detector, token audit and a 10-pass finish bar, then returns READY, NOT READY or BLOCKED before you commit. - [brief](https://affpapa.org/en/nevibecode/skills/educlopez-brief.md) — skill · educlopez · Claude Code, Codex, Cursor +3 · 851 installs — Generates or updates a durable design brief in .ui-craft/brief.md. - [ux-extract](https://affpapa.org/en/nevibecode/skills/ux-extract.md) — skill · jezweb · Claude Code, Codex, Cursor +3 · 664 installs — Walks a reference web app screen by screen, captures every state and builds a UX pattern library your own build can be measured against. - [game-ui-frontend](https://affpapa.org/en/nevibecode/skills/game-ui-frontend.md) — skill (official OpenAI) · OpenAI · Codex, ChatGPT · 98 installs — Guides browser game interface design for HUDs, overlays, and menus. - [assistant-ui](https://affpapa.org/en/nevibecode/skills/assistant-ui.md) — skill · assistant-ui · Claude Code, Codex, Cursor +3 · 7200 installs — Guides AI chat interface development in React: package selection, runtime adapters, and state architecture for assistant-ui. - [cargo-hosting](https://affpapa.org/en/nevibecode/skills/cargo-hosting.md) — skill · getcargo · Claude Code, Codex, Cursor +3 · 9800 installs — Teaches the agent to scaffold, deploy, and promote static web apps and serverless edge workers via the Cargo CLI. - [angular-architecture](https://affpapa.org/en/nevibecode/skills/angular-architecture.md) — skill · gentleman-programming · Claude Code, Codex, Cursor +3 · 320 installs — A skill that decides where Angular components go, how files are named, and which style guide rules to follow. - [landing-page-conversion-audit](https://affpapa.org/en/nevibecode/skills/landing-page-conversion-audit.md) — skill (official GitHub) · github · GitHub Copilot · 28 installs — Audits landing pages and checkouts for conversion leaks on paid traffic. - [no-use-effect](https://affpapa.org/en/nevibecode/skills/no-use-effect.md) — skill · Factory-AI · Claude Code, Codex, Cursor +3 · 1000 installs — A skill that stops the agent from writing useEffect in React code and points to five replacements. - [react-2026](https://affpapa.org/en/nevibecode/skills/react-2026.md) — skill · patterns.dev · Claude Code, Codex, Cursor +3 · 1900 installs — Guides stack choices for new and migrating React projects. - [ai-ui-patterns](https://affpapa.org/en/nevibecode/skills/ai-ui-patterns.md) — skill · patterns.dev · Claude Code, Codex, Cursor +3 · 2000 installs — A skill that tells your agent how to build React chat interfaces: streaming responses, conversation state, error handling. - [ux-compare](https://affpapa.org/en/nevibecode/skills/ux-compare.md) — skill · jezweb · Claude Code, Codex, Cursor +3 · 647 installs — Reads pattern libraries from ux-extract and builds a comparison document: where apps converge, where they diverge, and what to do in a new build. - [r3f-loaders](https://affpapa.org/en/nevibecode/skills/r3f-loaders.md) — skill · EnzeD · Claude Code, Codex, Cursor +3 · 1800 installs — Guides 3D asset loading and reuse in React Three Fiber. - [r3f-physics](https://affpapa.org/en/nevibecode/skills/r3f-physics.md) — skill · EnzeD · Claude Code, Codex, Cursor +3 · 1800 installs — Guides an AI coding agent through adding Rapier physics to React Three Fiber. - [tanstack-table](https://affpapa.org/en/nevibecode/skills/tanstack-table.md) — skill · tanstack-skills · Claude Code, Codex, Cursor +3 · 5400 installs — This skill teaches the agent how to build headless tables with TanStack Table v8. - [webmcpify](https://affpapa.org/en/nevibecode/skills/webmcpify.md) — skill (official GitHub) · github · GitHub Copilot · 27 installs — webmcpify maps a web app’s actions to WebMCP tools, then checks them in a browser. - [checklist-design](https://affpapa.org/en/nevibecode/skills/checklist-design.md) — skill · Checklist Design · Claude Code, Codex, Cursor +3 · 1100 installs — Audits websites, web apps, and mobile interfaces against Checklist Design checklists. - [flutter-adaptive-ui](https://affpapa.org/en/nevibecode/skills/flutter-adaptive-ui.md) — skill · Stanislav \[MADTeacher\] Chernyshev · Claude Code, Codex, Cursor +3 · 2000 installs — This skill guides agents through building adaptive Flutter interfaces for mobile and desktop screens. - [frontend-design](https://affpapa.org/en/nevibecode/skills/ilm-alan-frontend-design.md) — skill · Ilm-Alan · Claude Code, Codex, Cursor +3 · 580 installs — A skill that locks a frontend to one visual direction — palette, type, structure and texture — and keeps on-screen copy honest. - [maplibre-tile-sources](https://affpapa.org/en/nevibecode/skills/maplibre-tile-sources.md) — skill · maplibre · Claude Code, Codex, Cursor +3 · 982 installs — Works out whether a dataset should load as GeoJSON straight from a file or as vector and raster tiles. - [nuqs](https://affpapa.org/en/nevibecode/skills/nuqs.md) — skill · pproenca · Claude Code, Codex, Cursor +3 · 2300 installs — A skill with 39 nuqs rules covering typed parsers, adapters, Server Components and URL update performance. - [integration-privy](https://affpapa.org/en/nevibecode/skills/integration-privy.md) — skill · solana-mobile · Claude Code, Codex, Cursor +3 · 11600 installs — A skill that wires Privy authentication into a Solana Expo Android app on top of Mobile Wallet Adapter, using Sign-In-With-Solana. - [solana-mobile-wallet](https://affpapa.org/en/nevibecode/skills/solana-mobile-wallet.md) — skill · solana-mobile · Claude Code, Codex, Cursor +3 · 11600 installs — Add wallet connection and transaction signing to a React Native Expo app with Mobile Wallet Adapter. - [nextjs-cache-architecture](https://affpapa.org/en/nevibecode/skills/nextjs-cache-architecture.md) — skill · mohamed-hossam1 · Claude Code, Codex, Cursor +3 · 5000 installs — Structures caching architecture in Next.js 16+ App Router projects. - [mies](https://affpapa.org/en/nevibecode/skills/mies.md) — skill · deeflect · Claude Code, Codex, Cursor +3 · 9600 installs — A design skill that pushes your coding agent to cut what does not earn its place and polish what stays. - [r3f-best-practices](https://affpapa.org/en/nevibecode/skills/r3f-best-practices.md) — skill · three-agent-skills · Claude Code, Codex, Cursor +3 · 1500 installs — A skill with 70+ rules for writing, reviewing, and optimizing React Three Fiber code. - [apple-hig-designer](https://affpapa.org/en/nevibecode/skills/apple-hig-designer.md) — skill · jamesrochabrun · Claude Code, Codex, Cursor +3 · 1000 installs — Generates native iOS interfaces for iPhone, iPad, and Apple Watch following Apple Human Interface Guidelines. - [email-html-mjml](https://affpapa.org/en/nevibecode/skills/email-html-mjml.md) — skill · Framix · Claude Code, Codex, Cursor +3 · 947 installs — Builds responsive email templates in MJML 5.x and compiles them to HTML that holds up in Outlook and Gmail. - [design-better](https://affpapa.org/en/nevibecode/skills/design-better.md) — skill · BuilderOS · Claude Code, Codex, Cursor +3 · 1100 installs — A skill that pushes any coding agent toward designer-quality frontend work: hierarchy, states, accessibility, motion. - [qt-qml-test](https://affpapa.org/en/nevibecode/skills/qt-qml-test.md) — skill · qt-ai-skills · Claude Code, Codex, Cursor +3 · 597 installs — Generates Qt Quick Test suites for QML components. - [design-system](https://affpapa.org/en/nevibecode/skills/rampstackco-design-system.md) — skill · rampstackco · Claude Code, Codex, Cursor +3 · 311 installs — Builds or audits a design system: tokens, component library, naming conventions, contribution model and docs. - [scrape-webpage](https://affpapa.org/en/nevibecode/skills/scrape-webpage.md) — skill · adobe · Claude Code, Codex, Cursor +3 · 1800 installs — This skill collects webpage content, metadata, and images, then saves a cleaned HTML file and analysis outputs. - [extension-camera](https://affpapa.org/en/nevibecode/skills/extension-camera.md) — skill · caffeinelabs · Claude Code, Codex, Cursor +3 · 28100 installs — Adds instructions for integrating a React useCamera hook into web apps. - [extension-qr-code](https://affpapa.org/en/nevibecode/skills/extension-qr-code.md) — skill · caffeinelabs · Claude Code, Codex, Cursor +3 · 28200 installs — Adds QR code scanning through the device camera to a React app. - [react-vite-best-practices](https://affpapa.org/en/nevibecode/skills/react-vite-best-practices.md) — skill · agent-skills · Claude Code, Codex, Cursor +3 · 2900 installs — A skill with 23 rules for optimizing React apps built with Vite: build config, code splitting, HMR, assets, env variables and bundle analysis. Next: https://affpapa.org/en/nevibecode/skills/topic/frontend.md?page=37 ## 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