# Skills for Frontend and UI Skills for Frontend and UI: what each one does, an install command and example prompts. 2909 cards · page 19 of 73 - HTML: https://affpapa.org/en/nevibecode/skills/topic/frontend?page=19 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [tanstack-router-best-practices](https://affpapa.org/en/nevibecode/skills/tanstack-router-best-practices.md) — skill · DeckardGer · Claude Code, Codex, Cursor +3 · 7100 installs — A rule set for TanStack Router in React: type safety, data loading, search params, navigation. - [tailwind-css-patterns](https://affpapa.org/en/nevibecode/skills/tailwind-css-patterns.md) — skill · giuseppe-trisciuoglio · Claude Code, Codex, Cursor +3 · 17700 installs — A skill that hands your agent ready Tailwind CSS patterns: responsive grids, cards, forms, dark mode. - [brutalism](https://affpapa.org/en/nevibecode/skills/brutalism.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2400 installs — This skill hands your agent a set of brutalist design rules: concrete aesthetics, jarring layouts, functional minimalism. - [material](https://affpapa.org/en/nevibecode/skills/material.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2400 installs — Enforces Material Design guidelines, typography scales, color tokens, and WCAG 2.2 AA rules when designing components with AI agents. - [corporate](https://affpapa.org/en/nevibecode/skills/corporate.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2400 installs — This skill gives an agent a corporate UI system with grids, tokens, component states, and accessibility rules. - [contemporary](https://affpapa.org/en/nevibecode/skills/contemporary.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2400 installs — Gives your agent rules for a current-era minimal UI: bento grids, dark mode, WCAG 2.2 AA accessibility. - [sleek](https://affpapa.org/en/nevibecode/skills/sleek.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2400 installs — Generates design system guidelines with an 8pt grid, Inter typography, concrete color tokens, and WCAG 2.2 AA accessibility standards. - [claymorphism](https://affpapa.org/en/nevibecode/skills/claymorphism.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2400 installs — A skill that turns your coding agent into a design-system author for claymorphism: puffy 3D shapes, tokens, typography and component states. - [storytelling](https://affpapa.org/en/nevibecode/skills/typeuish-storytelling.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2400 installs — A skill that turns the agent into a design-system author: tokens, component states, accessibility and a fixed output structure. - [modern](https://affpapa.org/en/nevibecode/skills/modern.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2400 installs — Generates editorial design system specs with IBM Plex Serif typography and minimal color tokens. - [neumorphism](https://affpapa.org/en/nevibecode/skills/neumorphism.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2500 installs — This skill guides agents in creating neumorphic UI with design tokens, component states, and accessibility checks. - [professional](https://affpapa.org/en/nevibecode/skills/professional.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2500 installs — Hands the agent a full set of design-system rules: tokens, typography, component states and accessibility criteria. - [refined](https://affpapa.org/en/nevibecode/skills/refined.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2500 installs — Directs coding agents to generate design system specifications using Playfair Display typography and Refined tokens. - [neobrutalism](https://affpapa.org/en/nevibecode/skills/neobrutalism.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2500 installs — This skill guides AI coding agents on neobrutalist UI with strong contrast, design tokens, component states, and accessibility checks. - [shadcn](https://affpapa.org/en/nevibecode/skills/typeuish-shadcn.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2500 installs — Gives the agent a shadcn/ui-style design system: tokens, typography, component states and accessibility criteria. - [react-component-performance](https://affpapa.org/en/nevibecode/skills/dimillian-react-component-performance.md) — skill · Dimillian · Claude Code, Codex, Cursor +3 · 1100 installs — Identifies React render hotspots, isolates fast-changing state, and eliminates re-render churn. - [gsap](https://affpapa.org/en/nevibecode/skills/mengto-gsap.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1800 installs — A skill that helps your coding agent write and debug GSAP web animations: timelines, ScrollTrigger, stagger, transforms. - [design-first-ui-prompting](https://affpapa.org/en/nevibecode/skills/design-first-ui-prompting.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1800 installs — Turns loose visual ideas into strict, design-system-style specifications for UI generation. - [gsap-scrolltrigger-storytelling](https://affpapa.org/en/nevibecode/skills/gsap-scrolltrigger-storytelling.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1800 installs — A skill for scroll-driven product storytelling: pinned scenes, progressive UI reveals and transitions between sections, built on GSAP ScrollTrigger. - [threejs-asset-pipeline](https://affpapa.org/en/nevibecode/skills/threejs-asset-pipeline.md) — skill · CloudAI-X · Claude Code, Codex, Cursor +3 · 1300 installs — A skill for compressing and validating glTF models before loading them in three.js: gltf-transform commands, Draco, meshopt, KTX2 and gltfjsx. - [threejs-react-three-fiber](https://affpapa.org/en/nevibecode/skills/threejs-react-three-fiber.md) — skill · CloudAI-X · Claude Code, Codex, Cursor +3 · 1300 installs — A skill for writing three.js scenes as React components. - [react-three-fiber](https://affpapa.org/en/nevibecode/skills/react-three-fiber.md) — skill · freshtechbro · Claude Code, Codex, Cursor +3 · 3800 installs — Teaches the agent to build declarative Three.js 3D scenes in React using JSX components, animation hooks, and Suspense loaders. - [tech-stack-evaluator](https://affpapa.org/en/nevibecode/skills/tech-stack-evaluator.md) — skill · Alireza Rezvani · Claude Code · 904 installs — Evaluates frameworks, libraries, and cloud providers with weighted scoring. - [huashu-motion](https://affpapa.org/en/nevibecode/skills/huashu-motion.md) — skill · 花叔 · Claude Code, Codex, Cursor +3 · 827 installs — Creates motion graphics, launch videos, and explainers as editable code. - [figma-codegen](https://affpapa.org/en/nevibecode/skills/figma-codegen.md) — skill · awdr74100 · Claude Code, Codex, Cursor +3 · 1300 installs — Generates framework-aware frontend code from Figma designs while reusing existing project components and design tokens. - [pinme](https://affpapa.org/en/nevibecode/skills/pinme.md) — skill · glitternetwork · Claude Code, Codex, Cursor +3 · 710 installs — Deploys static builds to IPFS and provisions full-stack apps on Cloudflare Workers and D1 databases. - [immersive](https://affpapa.org/en/nevibecode/skills/immersive.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2300 installs — Generates design system guidelines for exhibit-style interfaces with a deep green canvas, Oswald display typography, and hard shadows. - [claude](https://affpapa.org/en/nevibecode/skills/claude.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2300 installs — Turns your agent into a design-system author: warm parchment surfaces, near-black ink, one restrained accent. - [tetris](https://affpapa.org/en/nevibecode/skills/tetris.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2300 installs — A skill that makes the agent write design-system guidance in the spirit of the classic block game: playful colors, bold display type, compact layouts. - [pacman](https://affpapa.org/en/nevibecode/skills/pacman.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2300 installs — Guides coding agents to build 8-bit arcade design systems with pixel typography, dotted borders, high-contrast tokens, and strict WCAG 2.2 AA accessibility. - [perspective](https://affpapa.org/en/nevibecode/skills/perspective.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2300 installs — Turns the agent into a design-system author for isometric layouts, vanishing points and layered depth. - [expressive](https://affpapa.org/en/nevibecode/skills/expressive.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2300 installs — Guides AI agents to author design system rules with bold colors and IBM Plex Mono typography. - [skeumorphism](https://affpapa.org/en/nevibecode/skills/skeumorphism.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2300 installs — This skill guides skeuomorphic UI work with textures, 3D effects, and familiar physical metaphors. - [neon](https://affpapa.org/en/nevibecode/skills/typeuish-neon.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2300 installs — Turns your coding agent into an author of Neon design-system guidance: high-contrast color pairings, glow effects, tokens instead of raw values. - [retro](https://affpapa.org/en/nevibecode/skills/typeuish-retro.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2300 installs — Sets up a vintage design system with high-contrast palettes, Macondo typography, and WCAG 2.2 AA accessible component guidelines. - [vibrant](https://affpapa.org/en/nevibecode/skills/vibrant.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2300 installs — Gives your agent a full set of rules for a lively UI: color tokens, type scale, spacing and accessibility. - [levels](https://affpapa.org/en/nevibecode/skills/levels.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2300 installs — A skill that hands your coding agent the Levels design system: color tokens, component states, accessibility rules. - [dithered](https://affpapa.org/en/nevibecode/skills/dithered.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2300 installs — Provides design system guidelines for dithered dot-pattern aesthetics. - [fantasy](https://affpapa.org/en/nevibecode/skills/fantasy.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2300 installs — A game-inspired design-system skill for bold fantasy UI. - [mono](https://affpapa.org/en/nevibecode/skills/mono.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2300 installs — Turns your agent into a design-system author for a matrix-flavoured look: monospace type, high contrast, compact density. Next: https://affpapa.org/en/nevibecode/skills/topic/frontend.md?page=20 ## 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