# Skills for Frontend and UI Skills for Frontend and UI: what each one does, an install command and example prompts. 2909 cards · page 18 of 73 - HTML: https://affpapa.org/en/nevibecode/skills/topic/frontend?page=18 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [frontend-design](https://affpapa.org/en/nevibecode/skills/julianoczkowski-frontend-design.md) — skill · julianoczkowski · Claude Code, Codex, Cursor +3 · 5500 installs — Generates production-grade UI based on established design philosophies. - [shadcn-ui](https://affpapa.org/en/nevibecode/skills/giuseppe-trisciuoglio-shadcn-ui.md) — skill · giuseppe-trisciuoglio · Claude Code, Codex, Cursor +3 · 22400 installs — A skill that tells the agent how to install and configure shadcn/ui components: buttons, dialogs, tables, and forms with React Hook Form and Zod. - [senior-qa](https://affpapa.org/en/nevibecode/skills/senior-qa.md) — skill · Alireza Rezvani · Claude Code · 1178 installs — This skill creates unit, integration, and E2E test stubs for React and Next.js. - [router-plugin](https://affpapa.org/en/nevibecode/skills/router-plugin.md) — skill · TanStack · Claude Code, Codex, Cursor +3 · 339 installs — Configures the TanStack Router bundler plugin for route generation and code splitting. - [design-brief](https://affpapa.org/en/nevibecode/skills/design-brief.md) — skill · julianoczkowski · Claude Code, Codex, Cursor +3 · 5300 installs — Interviews you about a feature, scans the codebase, and saves a design brief as markdown. - [brief-to-tasks](https://affpapa.org/en/nevibecode/skills/brief-to-tasks.md) — skill · julianoczkowski · Claude Code, Codex, Cursor +3 · 5200 installs — Converts a design brief into an ordered checklist of vertical slice tasks and saves it as a markdown file. - [design-flow](https://affpapa.org/en/nevibecode/skills/design-flow.md) — skill · julianoczkowski · Claude Code, Codex, Cursor +3 · 5300 installs — Walks you from clarifying questions to built components across six phases, confirming before each next step. - [beui](https://affpapa.org/en/nevibecode/skills/beui.md) — skill · starc007 · Claude Code, Codex, Cursor +3 · 844 installs — Selects and installs animated React components from beUI via MCP or shadcn registry. - [angular-directives](https://affpapa.org/en/nevibecode/skills/angular-directives.md) — skill · analogjs · Claude Code, Codex, Cursor +3 · 5700 installs — An Angular directives skill that is no longer maintained. - [angular-di](https://affpapa.org/en/nevibecode/skills/angular-di.md) — skill · analogjs · Claude Code, Codex, Cursor +3 · 5700 installs — A dependency injection skill for Angular v20+ using inject() and tokens. - [migrate-oai-app](https://affpapa.org/en/nevibecode/skills/migrate-oai-app.md) — skill · modelcontextprotocol · Claude Code, Codex, Cursor +3 · 1100 installs — Guides developers migrating interactive widgets from OpenAI Apps SDK to MCP Apps SDK. - [threejs-webgl](https://affpapa.org/en/nevibecode/skills/threejs-webgl.md) — skill · freshtechbro · Claude Code, Codex, Cursor +3 · 4600 installs — Configures coding agents to build Three.js scenes, set up WebGL or WebGPU renderers, adjust lighting, and load glTF models for web 3D apps. - [beautiful-shadows](https://affpapa.org/en/nevibecode/skills/beautiful-shadows.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 2200 installs — A skill that hands your agent three exact Tailwind arbitrary shadow classes for cards, panels and popovers. - [leanback-to-compose-tv-migration](https://affpapa.org/en/nevibecode/skills/leanback-to-compose-tv-migration.md) — skill · Google LLC · Claude Code, Codex, Cursor +3 · 772 installs — A skill that guides the move from Leanback and Android Views to Jetpack Compose for TV. - [ui-design-system](https://affpapa.org/en/nevibecode/skills/ui-design-system.md) — skill · Alireza Rezvani · Claude Code · 1076 installs — This skill builds design tokens, component structures, and responsive calculations. - [glassmorphism](https://affpapa.org/en/nevibecode/skills/typeuish-glassmorphism.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2900 installs — Guides the agent in creating glassmorphism design system rules with translucent layers, blur, and high contrast. - [cinematic-scroll-storytelling](https://affpapa.org/en/nevibecode/skills/cinematic-scroll-storytelling.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 2100 installs — Generates scroll-driven landing page animations using Lenis and GSAP ScrollTrigger. - [blog-chart](https://affpapa.org/en/nevibecode/skills/blog-chart.md) — skill · AgriciDaniel · Claude Code, Codex, Cursor +3 · 2500 installs — Builds inline SVG charts for blog posts in HTML or MDX. - [angular-tooling](https://affpapa.org/en/nevibecode/skills/angular-tooling.md) — skill · analogjs · Claude Code, Codex, Cursor +3 · 5200 installs — A skill for driving Angular CLI in Angular v20+ projects: scaffolding, code generation, builds and tests. - [ui](https://affpapa.org/en/nevibecode/skills/ui.md) — skill · Unity-Technologies · Claude Code, Codex, Cursor +3 · 5000 installs — Picks the right Unity UI system for a request and hands it to a matching skill. - [premium](https://affpapa.org/en/nevibecode/skills/premium.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2700 installs — Sets Apple-inspired design-system guidance for tokens, spacing, typography and accessibility. - [editorial](https://affpapa.org/en/nevibecode/skills/editorial.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2700 installs — A skill that turns your agent into an editorial design-system author: serif type scale, 8pt grid, color tokens, component states and accessibility checks. - [react-native-unistyles-v3](https://affpapa.org/en/nevibecode/skills/react-native-unistyles-v3.md) — skill · jpudysz · Claude Code, Codex, Cursor +3 · 529 installs — A skill that walks the agent through react-native-unistyles v3: Babel or Metro setup, themes, breakpoints, variants and common breakages. - [bencium-innovative-ux-designer](https://affpapa.org/en/nevibecode/skills/bencium-innovative-ux-designer.md) — skill · bencium · Claude Code, Codex, Cursor +3 · 7500 installs — A skill that develops an independent visual language: ten typography-led HTML directions, a human pick, then production. - [d3k](https://affpapa.org/en/nevibecode/skills/d3k.md) — skill · vercel-labs · Claude Code, Codex, Cursor +3 · 859 installs — Runs a project dev server and a monitored browser with a shared chronological event timeline. - [threejs](https://affpapa.org/en/nevibecode/skills/mengto-threejs.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 2000 installs — Guides your agent through building and debugging interactive Three.js scenes: scene, camera, lights, glTF loading, controls and performance. - [animation-on-scroll](https://affpapa.org/en/nevibecode/skills/animation-on-scroll.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 2000 installs — A skill that wires up scroll-reveal with IntersectionObserver, plus Tailwind animation classes and keyframes. - [preline-mcp](https://affpapa.org/en/nevibecode/skills/preline-mcp.md) — skill · htmlstreamofficial · Claude Code, Codex, Cursor +3 · 349 installs — The skill wires up the Preline MCP server so your agent can drop Preline UI components and blocks straight into your HTML files. - [convert-web-app](https://affpapa.org/en/nevibecode/skills/convert-web-app.md) — skill · modelcontextprotocol · Claude Code, Codex, Cursor +3 · 966 installs — Guides the conversion of an existing web app into an MCP App while retaining standalone browser use. - [threejs-performance](https://affpapa.org/en/nevibecode/skills/threejs-performance.md) — skill · CloudAI-X · Claude Code, Codex, Cursor +3 · 1400 installs — This skill helps diagnose slow three.js scenes through render counters, memory metrics, CPU timing, shadows and GPU work. - [wp-patterns](https://affpapa.org/en/nevibecode/skills/wp-patterns.md) — skill · WordPress · Claude Code, Codex, Cursor +3 · 2200 installs — Creates and updates WordPress block patterns, then checks registration and markup. - [landing-page-guide-v2](https://affpapa.org/en/nevibecode/skills/landing-page-guide-v2.md) — skill · bear2u · Claude Code, Codex, Cursor +3 · 1300 installs — A skill that walks the agent through aesthetic direction, a design system and 11 must-have landing page elements. - [clerk](https://affpapa.org/en/nevibecode/skills/clerk.md) — skill · clerk · Claude Code, Codex, Cursor +3 · 30000 installs — Reads your Clerk question and routes it to the right sub-skill: setup, CLI, framework patterns, billing, webhooks. - [a11y-audit](https://affpapa.org/en/nevibecode/skills/a11y-audit.md) — skill · Alireza Rezvani · Claude Code · 970 installs — Scans web projects for WCAG 2.2 Level A and AA issues, suggests fixes, then checks the result again. - [macos-design-guidelines](https://affpapa.org/en/nevibecode/skills/macos-design-guidelines.md) — skill · platform-design-skills · Claude Code, Codex, Cursor +3 · 4300 installs — Supplies Apple Human Interface Guidelines for macOS apps in SwiftUI and AppKit. - [animation-systems](https://affpapa.org/en/nevibecode/skills/animation-systems.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1900 installs — Motion design guide for clean, product-grade web animations like Stripe, Linear, and Apple. - [payload](https://affpapa.org/en/nevibecode/skills/payload.md) — skill · payloadcms · Claude Code, Codex, Cursor +3 · 6900 installs — Guides Payload CMS development across collections, hooks, and access control. - [bento](https://affpapa.org/en/nevibecode/skills/bento.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2500 installs — A skill for bento-style interfaces with modular cards, clear hierarchy, and soft spacing. - [enterprise](https://affpapa.org/en/nevibecode/skills/enterprise.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2500 installs — This skill gives your agent a dark design system for data dashboards: modular grids, glass-like panels, tokens and accessibility rules. - [clean](https://affpapa.org/en/nevibecode/skills/clean.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2600 installs — Generates minimal design system guidelines using an 8pt grid, strict color tokens, and WCAG 2.2 AA accessibility rules. Next: https://affpapa.org/en/nevibecode/skills/topic/frontend.md?page=19 ## 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