# Skills for Frontend and UI Skills for Frontend and UI: what each one does, an install command and example prompts. 2909 cards · page 56 of 73 - HTML: https://affpapa.org/en/nevibecode/skills/topic/frontend?page=56 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [flutter-duit-bdui](https://affpapa.org/en/nevibecode/skills/flutter-duit-bdui.md) — skill · MADTeacher · Claude Code, Codex, Cursor +3 · 343 installs — Guides Flutter backend-driven UI integration with flutter_duit, handling driver lifecycle, custom widgets, and version-specific API contracts. - [nextjs-server-navigation](https://affpapa.org/en/nevibecode/skills/nextjs-server-navigation.md) — skill · wsimmonds · Claude Code, Codex, Cursor +3 · 303 installs — Teaches AI assistants how to handle navigation in Next.js Server Components using and redirect() without adding 'use client' unnecessarily. - [frontend-design](https://affpapa.org/en/nevibecode/skills/mager-frontend-design.md) — skill · mager · Claude Code, Codex, Cursor +3 · 1700 installs — A skill that gives the agent a specific design stance: type, palette, tactile states. - [bun-sveltekit](https://affpapa.org/en/nevibecode/skills/bun-sveltekit.md) — skill · secondsky · Claude Code, Codex, Cursor +3 · 499 installs — Tells the agent how to build and run SvelteKit apps on Bun: SSR, adapters, bun:sqlite and file handling. - [nextjs-dynamic-routes-params](https://affpapa.org/en/nevibecode/skills/nextjs-dynamic-routes-params.md) — skill · wsimmonds · Claude Code, Codex, Cursor +3 · 303 installs — A skill that steers the agent through App Router dynamic segments and the params prop in Next.js 15+. - [design-system-generator](https://affpapa.org/en/nevibecode/skills/design-system-generator.md) — skill · OneWave-AI · Claude Code, Codex, Cursor +3 · 300 installs — Builds a design system from tokens, base components and docs. - [rspress-custom-theme](https://affpapa.org/en/nevibecode/skills/rspress-custom-theme.md) — skill · rstackjs · Claude Code, Codex, Cursor +3 · 408 installs — A skill that walks your agent through Rspress v2 theme changes, from CSS variables up to replacing built-in components. - [designing-beautiful-websites](https://affpapa.org/en/nevibecode/skills/designing-beautiful-websites.md) — skill · tristanmanchester · Claude Code, Codex, Cursor +3 · 2800 installs — A skill for planning, building and reviewing web interfaces: page structure, responsive behaviour, visual language and interaction states. - [progressive-web-app](https://affpapa.org/en/nevibecode/skills/secondsky-progressive-web-app.md) — skill · secondsky · Claude Code, Codex, Cursor +3 · 500 installs — A skill for building installable web apps: manifest, service worker, offline support and an install prompt. - [react-testing-library](https://affpapa.org/en/nevibecode/skills/pproenca-react-testing-library.md) — skill · pproenca · Claude Code, Codex, Cursor +3 · 402 installs — A skill with 43 React Testing Library rules. - [tanstack-table](https://affpapa.org/en/nevibecode/skills/claude-skills-maintainers-tanstack-table.md) — skill · Claude Skills Maintainers · Claude Code, Codex, Cursor +3 · 494 installs — Provides headless table patterns for TanStack Table with server pagination, sorting, and Cloudflare D1 integration. - [webmcp](https://affpapa.org/en/nevibecode/skills/webmcp.md) — skill · webmaxru · Claude Code, Codex, Cursor +3 · 514 installs — Configures client-side WebMCP integrations in JavaScript and TypeScript apps. - [konsta-ui](https://affpapa.org/en/nevibecode/skills/konsta-ui.md) — skill · Cap-go · Claude Code, Codex, Cursor +3 · 836 installs — A skill that walks your agent through Konsta UI v5 setup in Capacitor and helps track down why components render unstyled. - [react-optimise](https://affpapa.org/en/nevibecode/skills/react-optimise.md) — skill · pproenca · Claude Code, Codex, Cursor +3 · 396 installs — A skill that walks through React app performance: React Compiler, bundle size, rendering, data fetching, Core Web Vitals. - [ui-design-aesthetics](https://affpapa.org/en/nevibecode/skills/ui-design-aesthetics.md) — skill · NickCrew · Claude Code, Codex, Cursor +3 · 357 installs — This skill feeds the agent rules for typography, color and motion so generated interfaces stop looking like default AI output. - [efecto-web-design](https://affpapa.org/en/nevibecode/skills/efecto-web-design.md) — skill · pablostanley · Claude Code, Codex, Cursor +3 · 691 installs — Build web pages and app interfaces in Efecto with JSX, Tailwind CSS, and MCP tools. - [cmux-sidebar-builder](https://affpapa.org/en/nevibecode/skills/cmux-sidebar-builder.md) — skill · manaflow-ai · Claude Code, Codex, Cursor +3 · 636 installs — A skill that walks the agent through writing and revising cmux custom sidebars in the SwiftUI-style dialect cmux interprets at runtime. - [image-seo](https://affpapa.org/en/nevibecode/skills/image-seo.md) — skill · adobe · Claude Code, Codex, Cursor +3 · 316 installs — Checks alt text, dimensions, lazy loading and fetch priority on AEM Edge Delivery Services pages, then reports what to fix. - [sitemap-audit](https://affpapa.org/en/nevibecode/skills/sitemap-audit.md) — skill · adobe · Claude Code, Codex, Cursor +3 · 316 installs — Audits AEM Edge Delivery Services sitemaps against the query index, flags broken URLs, draft leaks, and invalid lastmod dates before indexing issues arise. - [ios-ux-design](https://affpapa.org/en/nevibecode/skills/ios-ux-design.md) — skill · mosif16 · Claude Code, Codex, Cursor +3 · 543 installs — A skill that gives your coding agent iOS design expertise: HIG compliance checks, SwiftUI pattern review, and implementation specs for interface fixes. - [md-slides](https://affpapa.org/en/nevibecode/skills/md-slides.md) — skill · Alireza Rezvani · Claude Code · 15 installs — Turns a Markdown deck into a single-file HTML presentation with keyboard controls, speaker notes, and PDF printing. - [product-page-seo](https://affpapa.org/en/nevibecode/skills/adobe-product-page-seo.md) — skill · adobe · Claude Code, Codex, Cursor +3 · 314 installs — Audits whether search crawlers can see your AEM Edge Delivery Services product pages, then tells you what to fix. - [figma-ui-skills](https://affpapa.org/en/nevibecode/skills/figma-ui-skills.md) — skill · design-skills · Claude Code, Codex, Cursor +3 · 346 installs — Applies Figma UI constraints: light mode, Inter font, and a 4px grid. - [react-composition-patterns](https://affpapa.org/en/nevibecode/skills/react-composition-patterns.md) — skill · vercel · Claude Code, Codex, Cursor +3 · 481 installs — Teaches coding agents clean React composition patterns. - [design-system-creation](https://affpapa.org/en/nevibecode/skills/secondsky-design-system-creation.md) — skill · secondsky · Claude Code, Codex, Cursor +3 · 481 installs — A skill that walks the agent through building a design system: tokens, typography, components and their docs. - [elements](https://affpapa.org/en/nevibecode/skills/elements.md) — skill · assistant-ui · Claude Code, Codex, Cursor +3 · 1100 installs — Adds and configures styled assistant-ui components in your codebase. - [shadcn-component-boundaries](https://affpapa.org/en/nevibecode/skills/shadcn-component-boundaries.md) — skill · purrfold · Claude Code, Codex, Cursor +3 · 2900 installs — Sets architectural boundaries for shadcn UI components. - [project-architecture](https://affpapa.org/en/nevibecode/skills/project-architecture.md) — skill · purrfold · Claude Code, Codex, Cursor +3 · 2900 installs — Enforces server-first boundaries in Next.js and Astro projects. - [vercel-ui-skills](https://affpapa.org/en/nevibecode/skills/vercel-ui-skills.md) — skill · design-skills · Claude Code, Codex, Cursor +3 · 342 installs — Pins your agent to Vercel's look: light surfaces, Inter, a 4px grid. - [shadcn-inertia](https://affpapa.org/en/nevibecode/skills/shadcn-inertia.md) — skill · inertia-rails · Claude Code, Codex, Cursor +3 · 432 installs — Adapts shadcn/ui components for Inertia.js Rails React applications instead of Next.js. - [headless-caching-strategy](https://affpapa.org/en/nevibecode/skills/headless-caching-strategy.md) — skill · vtex · Claude Code, Codex, Cursor +3 · 1100 installs — Sets caching rules and TTL values for headless VTEX storefronts. - [headless-intelligent-search](https://affpapa.org/en/nevibecode/skills/headless-intelligent-search.md) — skill · vtex · Claude Code, Codex, Cursor +3 · 1100 installs — Build VTEX Intelligent Search into a headless storefront, with facets, autocomplete and search analytics. - [faststore-storefront](https://affpapa.org/en/nevibecode/skills/faststore-storefront.md) — skill · vtex · Claude Code, Codex, Cursor +3 · 1100 installs — Guides AI coding agents through VTEX FastStore storefront development: React 18 components, section overrides, SCSS styling constraints, and CMS schema sync. - [vtex-io-messages-and-i18n](https://affpapa.org/en/nevibecode/skills/vtex-io-messages-and-i18n.md) — skill · vtex · Claude Code, Codex, Cursor +3 · 1100 installs — Keeps user-facing copy in the VTEX IO messages infrastructure instead of hardcoded strings in JSX and resolvers. - [vtex-io-render-runtime-and-blocks](https://affpapa.org/en/nevibecode/skills/vtex-io-render-runtime-and-blocks.md) — skill · vtex · Claude Code, Codex, Cursor +3 · 1100 installs — Teaches the agent to expose React components as Store Framework blocks in VTEX IO: store/interfaces.json entries, composition and theme wiring. - [vtex-io-admin-react](https://affpapa.org/en/nevibecode/skills/vtex-io-admin-react.md) — skill · vtex · Claude Code, Codex, Cursor +3 · 1100 installs — Guides coding agents in building VTEX IO admin pages with React, enforcing official design systems, bounded tables, and predictable feedback states. - [revenuecat-customer-center](https://affpapa.org/en/nevibecode/skills/revenuecat-customer-center.md) — skill · RevenueCat · Claude Code, Codex, Cursor +3 · 715 installs — Adds RevenueCat's ready-made Customer Center screen so subscribers can cancel, request refunds and restore purchases without custom UI. - [image-to-code](https://affpapa.org/en/nevibecode/skills/image-to-code.md) — skill (official OpenAI) · OpenAI · Codex, ChatGPT · 14 installs — Translates screenshots, mockups, and AI images into responsive frontend code. - [design-with-taste](https://affpapa.org/en/nevibecode/skills/design-with-taste.md) — skill · cristicretu · Claude Code, Codex, Cursor +3 · 758 installs — A skill that gives the agent a design philosophy: gradual revelation, fluid transitions and selective emphasis. - [inertia-rails-setup](https://affpapa.org/en/nevibecode/skills/inertia-rails-setup.md) — skill · inertia-rails · Claude Code, Codex, Cursor +3 · 419 installs — Detects your frontend framework and backend gems in an Inertia Rails project, offers missing dependencies, and writes instructions into CLAUDE.md. Next: https://affpapa.org/en/nevibecode/skills/topic/frontend.md?page=57 ## 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