# Skills for Frontend and UI Skills for Frontend and UI: what each one does, an install command and example prompts. 2909 cards · page 17 of 73 - HTML: https://affpapa.org/en/nevibecode/skills/topic/frontend?page=17 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [plan-ui-change](https://affpapa.org/en/nevibecode/skills/plan-ui-change.md) — skill · dotnet · Claude Code, Codex, Cursor +3 · 3000 installs — Splits a complex Blazor page into focused components before the agent writes any code. - [collect-user-input](https://affpapa.org/en/nevibecode/skills/collect-user-input.md) — skill · dotnet · Claude Code, Codex, Cursor +3 · 3000 installs — A skill that walks the agent through Blazor forms, input components and validation. - [coordinate-components](https://affpapa.org/en/nevibecode/skills/coordinate-components.md) — skill · dotnet · Claude Code, Codex, Cursor +3 · 3000 installs — Helps AI agents share state across Blazor components without parent-child parameter chains. - [create-blazor-project](https://affpapa.org/en/nevibecode/skills/create-blazor-project.md) — skill · dotnet · Claude Code, Codex, Cursor +3 · 3000 installs — The skill walks the agent through picking a Blazor render mode and runs dotnet new blazor with the right flags. - [author-component](https://affpapa.org/en/nevibecode/skills/author-component.md) — skill · dotnet · Claude Code, Codex, Cursor +3 · 3100 installs — Creates and reviews Blazor components without JavaScript interop. - [fetch-and-send-data](https://affpapa.org/en/nevibecode/skills/fetch-and-send-data.md) — skill · dotnet · Claude Code, Codex, Cursor +3 · 3100 installs — Guides API calls and asynchronous data loading in Blazor components. - [component-canvas](https://affpapa.org/en/nevibecode/skills/component-canvas.md) — skill · ibelick · Claude Code, Codex, Cursor +3 · 685 installs — Builds a full-screen canvas where your project's components show up as they actually behave, with pan, zoom and variant comparisons. - [motion-framer](https://affpapa.org/en/nevibecode/skills/motion-framer.md) — skill · freshtechbro · Claude Code, Codex, Cursor +3 · 5900 installs — Guides an agent through Motion and Framer Motion animations for React interfaces, from hover effects to state and layout transitions. - [support-prerendering](https://affpapa.org/en/nevibecode/skills/support-prerendering.md) — skill · dotnet · Claude Code, Codex, Cursor +3 · 3000 installs — Configures interactive Blazor components to handle prerendering cleanly. - [flags-sdk](https://affpapa.org/en/nevibecode/skills/flags-sdk.md) — skill · vercel · Claude Code, Codex, Cursor +3 · 2600 installs — Set up the Flags SDK in Next.js or SvelteKit, connect a flag provider, and configure server-side evaluation. - [angular-forms](https://affpapa.org/en/nevibecode/skills/angular-forms.md) — skill · analogjs · Claude Code, Codex, Cursor +3 · 7100 installs — A Signal Forms skill for Angular v21+ that is no longer maintained. - [color-expert](https://affpapa.org/en/nevibecode/skills/meodai-color-expert.md) — skill · meodai · Claude Code, Codex, Cursor +3 · 2700 installs — A color theory and color science skill for designing OKLCH design system ramps, checking APCA contrast, and tuning generative palettes. - [vueuse-functions](https://affpapa.org/en/nevibecode/skills/vueuse-functions.md) — skill · SerKo · Claude Code, Codex, Cursor +3 · 3700 installs — This skill maps Vue.js and Nuxt tasks to VueUse functions and their usage patterns. - [open-edit](https://affpapa.org/en/nevibecode/skills/open-edit.md) — skill · veedstudio · Claude Code, Codex, Cursor +3 · 1100 installs — Skill for building and editing videos via HTML compositions and VEED CLI tools. - [senior-fullstack](https://affpapa.org/en/nevibecode/skills/senior-fullstack.md) — skill · Alireza Rezvani · Claude Code · 1390 installs — Scaffolds Next.js, FastAPI, MERN or Django projects and scores your codebase for quality and security issues. - [angular-routing](https://affpapa.org/en/nevibecode/skills/angular-routing.md) — skill · analogjs · Claude Code, Codex, Cursor +3 · 6800 installs — AnalogJS skill for routing in Angular v20+ projects. - [ui-ugui](https://affpapa.org/en/nevibecode/skills/ui-ugui.md) — skill · Unity-Technologies · Claude Code, Codex, Cursor +3 · 6400 installs — This skill inspects, creates, and revises Unity uGUI interfaces. - [create-datadriven-aspnetcore](https://affpapa.org/en/nevibecode/skills/create-datadriven-aspnetcore.md) — skill · dotnet · Claude Code, Codex, Cursor +3 · 2800 installs — Generates ASP.NET Core CRUD code — Razor Pages, Blazor components, controllers, and Minimal APIs — aligned with project styles and EF Core without CLI generators. - [diffs](https://affpapa.org/en/nevibecode/skills/diffs.md) — skill · pierrecomputer · Claude Code, Codex, Cursor +3 · 472 installs — A skill for building with @pierre/diffs: syntax-highlighted files, diffs, patches and merge conflicts inside your app. - [cmux-capture](https://affpapa.org/en/nevibecode/skills/cmux-capture.md) — skill · manaflow-ai · Claude Code, Codex, Cursor +3 · 383 installs — Capture a cmux window as an image or video from the CLI. - [design-lab](https://affpapa.org/en/nevibecode/skills/design-lab.md) — skill · 0xdesign · Claude Code, Codex, Cursor +3 · 2000 installs — A skill that interviews you about a UI task, builds five different directions in a throwaway lab, then turns the pick into an implementation plan. - [tanstack-start-best-practices](https://affpapa.org/en/nevibecode/skills/tanstack-start-best-practices.md) — skill · DeckardGer · Claude Code, Codex, Cursor +3 · 9800 installs — Best practice rules for full-stack React apps built with TanStack Start. - [react-email](https://affpapa.org/en/nevibecode/skills/react-email.md) — skill · Resend · Claude Code, Codex, Cursor +3 · 12600 installs — A skill for building HTML emails from React components. - [information-architecture](https://affpapa.org/en/nevibecode/skills/information-architecture.md) — skill · julianoczkowski · Claude Code, Codex, Cursor +3 · 5900 installs — Defines product structure and navigation before visual design begins. - [design-tokens](https://affpapa.org/en/nevibecode/skills/design-tokens.md) — skill · julianoczkowski · Claude Code, Codex, Cursor +3 · 5900 installs — Generates a design tokens file — CSS variables or Tailwind config — from a chosen aesthetic, with light and dark palettes. - [angular-http](https://affpapa.org/en/nevibecode/skills/angular-http.md) — skill · analogjs · Claude Code, Codex, Cursor +3 · 6500 installs — Guides HTTP data fetching in Angular v20+ using signals and HttpClient. - [shopify](https://affpapa.org/en/nevibecode/skills/shopify.md) — skill · Shopify · Claude Code, Codex, Cursor +3 · 4800 installs — Official developer skill for building on Shopify, covering Admin GraphQL APIs, Liquid themes, Polaris extensions, Hydrogen, and Shopify CLI. - [shadcn-ui-flutter](https://affpapa.org/en/nevibecode/skills/shadcn-ui-flutter.md) — skill · nank1ro · Claude Code, Codex, Cursor +3 · 678 installs — A skill that hands your agent the shadcn_ui docs for Flutter: theming, component pages and copy-ready examples. - [huggingface-lora-space-builder](https://affpapa.org/en/nevibecode/skills/huggingface-lora-space-builder.md) — skill · huggingface · Claude Code, Codex, Cursor +3 · 810 installs — Builds and publishes Gradio demos on Hugging Face Spaces for LoRA checkpoints. - [design-review](https://affpapa.org/en/nevibecode/skills/design-review.md) — skill · julianoczkowski · Claude Code, Codex, Cursor +3 · 5800 installs — Runs a structured design critique against the brief and the code: hierarchy, consistency, responsiveness, accessibility. - [skybridge](https://affpapa.org/en/nevibecode/skills/skybridge.md) — skill · alpic-ai · Claude Code, Codex, Cursor +3 · 1100 installs — A skill that walks you from idea to release for Claude plugins and MCP Apps: bootstrap, build, debug, deploy. - [router-query](https://affpapa.org/en/nevibecode/skills/router-query.md) — skill · TanStack · Claude Code, Codex, Cursor +3 · 366 installs — Guides the integration of TanStack Router and TanStack Query, covering router context setup, loader prefetching, and SSR QueryClient isolation. - [compose-expert](https://affpapa.org/en/nevibecode/skills/compose-expert.md) — skill · vitorpamplona · Claude Code, Codex, Cursor +3 · 1400 installs — Skill outlining shared Jetpack Compose rules in Amethyst: Navigation 3, adaptive shell layouts, and UI performance conventions. - [oklch-skill](https://affpapa.org/en/nevibecode/skills/oklch-skill.md) — skill · jakubkrehel · Claude Code, Codex, Cursor +3 · 4600 installs — Converts hex, RGB, and HSL to OKLCH, generates uniform palettes, and checks APCA or WCAG contrast. - [add-app-to-server](https://affpapa.org/en/nevibecode/skills/add-app-to-server.md) — skill · modelcontextprotocol · Claude Code, Codex, Cursor +3 · 1200 installs — A skill that gives the tools of a running MCP server an interactive HTML view. - [truesheet-usage](https://affpapa.org/en/nevibecode/skills/truesheet-usage.md) — skill · lodev09 · Claude Code, Codex, Cursor +3 · 828 installs — A skill that steers your coding agent through @lodev09/react-native-true-sheet: control patterns, detents, scrolling, navigation. - [page-mascot](https://affpapa.org/en/nevibecode/skills/page-mascot.md) — skill · nilbuild · Claude Code, Codex, Cursor +3 · 1300 installs — Puts a chibi character on your page that turns its head toward the pointer and reacts to clicks. - [cinematic-gsap-lenis-motion-system](https://affpapa.org/en/nevibecode/skills/cinematic-gsap-lenis-motion-system.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 2400 installs — Builds cinematic web animation systems using GSAP, ScrollTrigger, and Lenis. - [migrate](https://affpapa.org/en/nevibecode/skills/toss-migrate.md) — skill · toss · Claude Code, Codex, Cursor +3 · 314 installs — Reads your lodash code and shows how to swap each function for es-toolkit or es-toolkit/compat. - [svg-icon-generator](https://affpapa.org/en/nevibecode/skills/svg-icon-generator.md) — skill · Jeremy Longshore · Claude Code, Codex, Cursor +3 · 1300 installs — A skill for SVG icon work: it walks the agent through the steps, writes the code and checks the output. Next: https://affpapa.org/en/nevibecode/skills/topic/frontend.md?page=18 ## 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