# Skills for Frontend and UI Skills for Frontend and UI: what each one does, an install command and example prompts. 2909 cards · page 58 of 73 - HTML: https://affpapa.org/en/nevibecode/skills/topic/frontend?page=58 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [bun-tanstack-start](https://affpapa.org/en/nevibecode/skills/bun-tanstack-start.md) — skill · secondsky · Claude Code, Codex, Cursor +3 · 414 installs — A skill that tells your agent how to build a TanStack Start app on the Bun runtime: routing, server functions, build config. - [nuxt-production](https://affpapa.org/en/nevibecode/skills/nuxt-production.md) — skill · Claude Skills Maintainers · Claude Code, Codex, Cursor +3 · 412 installs — Guides AI agents through Nuxt 4 production readiness, covering SSR hydration fixes, bundle optimization, Vitest suites, and Cloudflare deployments. - [react-flow-implementation](https://affpapa.org/en/nevibecode/skills/react-flow-implementation.md) — skill · existential-birds · Claude Code, Codex, Cursor +3 · 362 installs — Guides your coding agent in building diagram editors and node interfaces with @xyflow/react. - [orval](https://affpapa.org/en/nevibecode/skills/pproenca-orval.md) — skill · pproenca · Claude Code, Codex, Cursor +3 · 331 installs — 42 prioritized rules for generating type-safe TypeScript clients from OpenAPI specs with Orval. - [morphing-icons](https://affpapa.org/en/nevibecode/skills/morphing-icons.md) — skill · raphael-salaja · Claude Code, Codex, Cursor +3 · 362 installs — Builds icon components that transform through direct SVG line motion instead of crossfades, relying on a shared three-line structure. - [nuxt-ui-v4](https://affpapa.org/en/nevibecode/skills/nuxt-ui-v4.md) — skill · secondsky · Claude Code, Codex, Cursor +3 · 410 installs — A skill that gives your agent the Nuxt UI v4 component library: 125+ accessible components, Tailwind v4, dark mode. - [mui-base](https://affpapa.org/en/nevibecode/skills/mui-base.md) — skill · pproenca · Claude Code, Codex, Cursor +3 · 328 installs — A skill with 48 rules for building headless React component libraries the MUI Base UI way. - [css-native](https://affpapa.org/en/nevibecode/skills/dylantarre-css-native.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 716 installs — This skill gets your agent writing motion with plain CSS: @keyframes, transition, transform. - [ink](https://affpapa.org/en/nevibecode/skills/assistant-ui-ink.md) — skill · assistant-ui · Claude Code, Codex, Cursor +3 · 923 installs — A skill for building chat interfaces inside the terminal: it wires the assistant-ui runtime to Ink's renderer and prints assistant text as ANSI markdown. - [migrate-to-rsbuild](https://affpapa.org/en/nevibecode/skills/migrate-to-rsbuild.md) — skill · rstackjs · Claude Code, Codex, Cursor +3 · 326 installs — A skill that migrates webpack, Vite, Create React App, and Vue CLI projects to Rsbuild. - [saas-productivity](https://affpapa.org/en/nevibecode/skills/saas-productivity.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 709 installs — Guides motion design for task, form, panel, and notification interfaces. - [nuxt-server](https://affpapa.org/en/nevibecode/skills/nuxt-server.md) — skill · Claude Skills Maintainers · Claude Code, Codex, Cursor +3 · 401 installs — A skill for Nuxt 4 server-side development with Nitro: API routes, middleware, databases and WebSockets. - [bun-bundler](https://affpapa.org/en/nevibecode/skills/bun-bundler.md) — skill · secondsky · Claude Code, Codex, Cursor +3 · 400 installs — Teaches your agent how to bundle JavaScript and TypeScript with Bun CLI and Bun.build API. - [turborepo](https://affpapa.org/en/nevibecode/skills/secondsky-turborepo.md) — skill · secondsky · Claude Code, Codex, Cursor +3 · 400 installs — Guides coding agents through Turborepo monorepo setup, task pipeline architecture, caching rules, and CI flags. - [shadcn-ui](https://affpapa.org/en/nevibecode/skills/existential-birds-shadcn-ui.md) — skill · existential-birds · Claude Code, Codex, Cursor +3 · 351 installs — Teaches your agent how to build shadcn/ui components: Radix primitives, Tailwind, CVA variants and data-slot. - [mobile-offline-support](https://affpapa.org/en/nevibecode/skills/secondsky-mobile-offline-support.md) — skill · secondsky · Claude Code, Codex, Cursor +3 · 398 installs — A skill for offline-first mobile apps: local storage, a sync queue and conflict resolution, so the agent stops assuming the network is always there. - [vitest](https://affpapa.org/en/nevibecode/skills/claude-mpm-team-vitest.md) — skill · Claude MPM Team · Claude Code, Codex, Cursor +3 · 931 installs — Guides the agent in configuring Vitest, writing unit tests, checking TypeScript types, and creating mocks in Vite projects. - [ionic-app-upgrades](https://affpapa.org/en/nevibecode/skills/ionic-app-upgrades.md) — skill · capawesome-team · Claude Code, Codex, Cursor +3 · 834 installs — Walks the agent through a major Ionic upgrade: step-by-step migrations for Angular, React and Vue, plus component and CSS variable breaking changes. - [ui-design-patterns](https://affpapa.org/en/nevibecode/skills/ui-design-patterns.md) — skill · manutej · Claude Code, Codex, Cursor +3 · 853 installs — A reference on common interface patterns: navigation, forms, data display, feedback and accessibility. - [react-native](https://affpapa.org/en/nevibecode/skills/assistant-ui-react-native.md) — skill · assistant-ui · Claude Code, Codex, Cursor +3 · 909 installs — A skill for building assistant-ui chat surfaces in Expo and bare React Native: native primitives, the AI SDK runtime and a transport to your backend. - [tailwindcss-responsive-darkmode](https://affpapa.org/en/nevibecode/skills/tailwindcss-responsive-darkmode.md) — skill · JosiahSiegel · Claude Code, Codex, Cursor +3 · 476 installs — A Tailwind CSS skill covering responsive layout, dark mode, runtime theme switching and FOUC prevention. - [bun-react-ssr](https://affpapa.org/en/nevibecode/skills/bun-react-ssr.md) — skill · secondsky · Claude Code, Codex, Cursor +3 · 395 installs — A skill for building server-rendered React on Bun: renderToString, streaming, hydration and a hand-rolled router. - [vitest](https://affpapa.org/en/nevibecode/skills/sentimony-vitest.md) — skill · sentimony · Claude Code, Codex, Cursor +3 · 2600 installs — Configures, runs, and audits Vitest suites in JavaScript and TypeScript projects. - [webapp-to-capacitor](https://affpapa.org/en/nevibecode/skills/webapp-to-capacitor.md) — skill · Cap-go · Claude Code, Codex, Cursor +3 · 665 installs — Plans and runs the move from a web app, PWA or SPA to a Capacitor iOS and Android app that survives store review. - [ui5-typescript-conversion](https://affpapa.org/en/nevibecode/skills/ui5-typescript-conversion.md) — skill · cline · Claude Code, Codex, Cursor +3 · 910 installs — A skill that walks a SAPUI5 or OpenUI5 project through a TypeScript conversion: build setup, types, then the code itself. - [ux-principles](https://affpapa.org/en/nevibecode/skills/ux-principles.md) — skill · manutej · Claude Code, Codex, Cursor +3 · 836 installs — Gives your coding agent usability heuristics, user research methods and accessibility checks, so interface work follows known rules instead of guesswork. - [data-visualizer](https://affpapa.org/en/nevibecode/skills/data-visualizer.md) — skill · daffy0208 · Claude Code, Codex, Cursor +3 · 572 installs — Guides coding agents in building charts and interactive dashboards. - [instrument-product-analytics](https://affpapa.org/en/nevibecode/skills/instrument-product-analytics.md) — skill · PostHog · Claude Code, Codex, Cursor +3 · 666 installs — Adds PostHog capture calls so you can track what users actually do. - [nuxt-core](https://affpapa.org/en/nevibecode/skills/nuxt-core.md) — skill · Claude Skills Maintainers · Claude Code, Codex, Cursor +3 · 390 installs — A skill that gives your coding agent the Nuxt 4 fundamentals: directory layout, config, routing, SEO and error handling. - [legend-list-best-practices](https://affpapa.org/en/nevibecode/skills/legend-list-best-practices.md) — skill · LegendApp · Claude Code, Codex, Cursor +3 · 546 installs — A skill for @legendapp/list work: it implements the list by the library's own contracts or audits existing usage for recycling, measurement and scroll anchoring bugs. - [tauri-app-planning](https://affpapa.org/en/nevibecode/skills/tauri-app-planning.md) — skill · full-stack-skills · Claude Code, Codex, Cursor +3 · 484 installs — Turns a vague idea into a concrete Tauri 2.0 plan: requirement analysis, plugin selection, architecture and window orchestration. - [nuxt-data](https://affpapa.org/en/nevibecode/skills/nuxt-data.md) — skill · Claude Skills Maintainers · Claude Code, Codex, Cursor +3 · 388 installs — A skill for Nuxt 4 data work: composables, useFetch and useAsyncData, state with useState and Pinia. - [daisyui](https://affpapa.org/en/nevibecode/skills/bobmatnyc-daisyui.md) — skill · bobmatnyc · Claude Code, Codex, Cursor +3 · 903 installs — Supplies your coding assistant with daisyUI patterns, semantic classes for 50+ Tailwind CSS components, and built-in themes. - [app-shell](https://affpapa.org/en/nevibecode/skills/app-shell.md) — skill · dembrandt · Claude Code, Codex, Cursor +3 · 328 installs — Design guidelines for top bars, app switchers, tenant indicators, and status bars. - [bun-nuxt](https://affpapa.org/en/nevibecode/skills/bun-nuxt.md) — skill · secondsky · Claude Code, Codex, Cursor +3 · 387 installs — A skill that tells the agent how to run Nuxt 3 on Bun: scripts, Nitro preset, server routes and deployment. - [don-norman-principles-audit](https://affpapa.org/en/nevibecode/skills/don-norman-principles-audit.md) — skill · mastepanoski · Claude Code, Codex, Cursor +3 · 366 installs — Runs a UX review against Don Norman's seven design principles and returns a report with severity levels and fixes. - [tailwind-refactor](https://affpapa.org/en/nevibecode/skills/tailwind-refactor.md) — skill · pproenca · Claude Code, Codex, Cursor +3 · 308 installs — A skill for refactoring Tailwind CSS classes: migrating from v3 to v4, replacing deprecated utilities and cleaning up code without changing the visual output. - [ionic-app-creation](https://affpapa.org/en/nevibecode/skills/ionic-app-creation.md) — skill · capawesome-team · Claude Code, Codex, Cursor +3 · 801 installs — This skill walks an agent through creating an Ionic app with Ionic CLI, including framework, starter template, Capacitor, and Tailwind choices. - [ag-update](https://affpapa.org/en/nevibecode/skills/ag-update.md) — skill · ag-grid · Claude Code, Codex, Cursor +3 · 1400 installs — Walks your agent through upgrading AG Grid, AG Charts and AG Studio dependencies and writes the migration plan to files. - [shadcn-layouts](https://affpapa.org/en/nevibecode/skills/shadcn-layouts.md) — skill · jwynia · Claude Code, Codex, Cursor +3 · 457 installs — Teaches the agent the CSS models behind shadcn and Tailwind layouts, so height, scroll and flex/grid problems get fixed instead of guessed at. Next: https://affpapa.org/en/nevibecode/skills/topic/frontend.md?page=59 ## 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