# Skills for Frontend and UI Skills for Frontend and UI: what each one does, an install command and example prompts. 2909 cards · page 3 of 73 - HTML: https://affpapa.org/en/nevibecode/skills/topic/frontend?page=3 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [brag](https://affpapa.org/en/nevibecode/skills/brag.md) — skill · latent-spaces · Claude Code, Codex, Cursor +3 · 20300 installs — Generates a short, polished launch video from project source code using Hyperframes. - [make-interfaces-feel-better](https://affpapa.org/en/nevibecode/skills/make-interfaces-feel-better.md) — skill · jakubkrehel · Claude Code, Codex, Cursor +3 · 73400 installs — This skill guides small UI refinements, from icon alignment to motion. - [find-docs](https://affpapa.org/en/nevibecode/skills/find-docs.md) — skill · upstash · Claude Code, Codex, Cursor +3 · 9400 installs — Pulls up-to-date documentation, API references and code examples for any library through the Context7 CLI. - [baoyu-markdown-to-html](https://affpapa.org/en/nevibecode/skills/baoyu-markdown-to-html.md) — skill · JimLiu · Claude Code, Codex, Cursor +3 · 32200 installs — Turns a Markdown file into styled HTML with inline CSS and WeChat-ready themes. - [interface-design](https://affpapa.org/en/nevibecode/skills/interface-design.md) — skill · Dammyjay93 · Claude Code, Codex, Cursor +3 · 30800 installs — This skill guides product UI work for dashboards, admin panels, SaaS apps, and tools. - [taste-design](https://affpapa.org/en/nevibecode/skills/taste-design.md) — skill (official Google) · google-labs-code · Claude Code, Codex, Cursor +3 · 20200 installs — Generates agent-ready DESIGN.md files for Google Stitch screens. - [html-ppt](https://affpapa.org/en/nevibecode/skills/html-ppt.md) — skill · lewislulu · Claude Code, Codex, Cursor +3 · 20900 installs — Create static HTML slide decks from templates, with themes, animations and keyboard navigation. - [baoyu-compress-image](https://affpapa.org/en/nevibecode/skills/baoyu-compress-image.md) — skill · JimLiu · Claude Code, Codex, Cursor +3 · 28200 installs — Compresses images into WebP or PNG using local tools like sips and cwebp. - [tailwind-design-system](https://affpapa.org/en/nevibecode/skills/tailwind-design-system.md) — skill · Seth Hobson · Claude Code, Codex, Cursor · 70180 installs — Helps build design systems with Tailwind CSS v4, from theme tokens to component variants. - [react-doctor](https://affpapa.org/en/nevibecode/skills/react-doctor.md) — skill · millionco · Claude Code, Codex, Cursor +3 · 19200 installs — Audits React codebases for architecture, accessibility, and rendering issues. - [frost-sequence-camera-orbit](https://affpapa.org/en/nevibecode/skills/frost-sequence-camera-orbit.md) — skill · heygen-com · Claude Code, Codex, Cursor +3 · 10000 installs — Builds a 22.5-second scene where an orbiting camera follows an ice logo that breaks apart, reforms into two text moments, and fades. - [orbit-card](https://affpapa.org/en/nevibecode/skills/orbit-card.md) — skill · heygen-com · Claude Code, Codex, Cursor +3 · 10000 installs — Adds a 10-second 1920×1080 HyperFrames motion block where a single feature card orbits a dot sphere using exported Blender camera paths. - [canopy-part-title](https://affpapa.org/en/nevibecode/skills/canopy-part-title.md) — skill · heygen-com · Claude Code, Codex, Cursor +3 · 10000 installs — A HyperFrames block where a canopy of leaves crosses the frame, parts, and uncovers two headlines. - [code-slice-hero](https://affpapa.org/en/nevibecode/skills/code-slice-hero.md) — skill · heygen-com · Claude Code, Codex, Cursor +3 · 10000 installs — Animates a tiled headline flip via WebGL 2 and Canvas 2D to reveal a rear phrase. - [glass-shard-title](https://affpapa.org/en/nevibecode/skills/glass-shard-title.md) — skill · heygen-com · Claude Code, Codex, Cursor +3 · 10000 installs — Turns a headline into flying glass panes: shards drift in through fog, rotate, and tile themselves into the letters. - [cuboid-carousel](https://affpapa.org/en/nevibecode/skills/cuboid-carousel.md) — skill · heygen-com · Claude Code, Codex, Cursor +3 · 10000 installs — A skill that renders a 3D carousel of bevelled cuboids carrying card content: they fly in from the right, ride a wave, and exit left. - [accessibility](https://affpapa.org/en/nevibecode/skills/web-quality-skills-accessibility.md) — skill · web-quality-skills · Claude Code, Codex, Cursor +3 · 64100 installs — This skill audits a rendered page for accessibility and points to the components behind each failure. - [chrome-devtools](https://affpapa.org/en/nevibecode/skills/chromedevtools-chrome-devtools.md) — skill · ChromeDevTools · Claude Code, Codex, Cursor +3 · 8600 installs — This skill connects Chrome DevTools through MCP for page debugging, browser automation, performance checks, and network inspection. - [nuxt-ui](https://affpapa.org/en/nevibecode/skills/nuxt-ui.md) — skill · nuxt · Claude Code, Codex, Cursor +3 · 19800 installs — Guides AI agents in building interfaces with @nuxt/ui v4, covering semantic Tailwind CSS theming, layout patterns, and component selection. - [figma-implement-design](https://affpapa.org/en/nevibecode/skills/openai-figma-implement-design.md) — skill (official OpenAI) · openai · Claude Code, Codex, Cursor +3 · 6700 installs — This skill turns Figma nodes into application UI code while preserving layout, tokens, assets, and visual details. - [bmad-agent-ux-designer](https://affpapa.org/en/nevibecode/skills/bmad-agent-ux-designer.md) — skill · bmad-code-org · Claude Code, Codex, Cursor +3 · 11800 installs — Activates Sally, a dedicated UX designer persona for crafting interaction design and interface specifications. - [bmad-ux](https://affpapa.org/en/nevibecode/skills/bmad-ux.md) — skill · bmad-code-org · Claude Code, Codex, Cursor +3 · 11600 installs — Captures UX vision into DESIGN.md and EXPERIENCE.md documents. - [frontend-patterns](https://affpapa.org/en/nevibecode/skills/frontend-patterns.md) — skill · affaan-m · Claude Code, Codex, Cursor +3 · 5900 installs — A skill for React and Next.js work: component patterns, state, data fetching, and render performance. - [web-perf](https://affpapa.org/en/nevibecode/skills/cloudflare-web-perf.md) — skill · cloudflare · Claude Code, Codex, Cursor +3 · 110200 installs — Audit Core Web Vitals, diagnose rendering bottlenecks, and inspect network dependencies directly through your agent. - [imagegen](https://affpapa.org/en/nevibecode/skills/imagegen.md) — skill (official OpenAI) · openai · Claude Code, Codex, Cursor +3 · 5700 installs — This skill creates and edits raster images such as illustrations, textures, sprites, and mockups. - [playground](https://affpapa.org/en/nevibecode/skills/playground.md) — skill (official Anthropic) · Anthropic · Claude Code · 7967 installs — Builds interactive HTML playgrounds with controls, a live preview, and a generated prompt. - [app-store-screenshots](https://affpapa.org/en/nevibecode/skills/parthjadhav-app-store-screenshots.md) — skill · ParthJadhav · Claude Code, Codex, Cursor +3 · 15000 installs — Scaffolds a Next.js and ShadCN editor where you design and export App Store and Google Play screenshots. - [playwright-interactive](https://affpapa.org/en/nevibecode/skills/playwright-interactive.md) — skill (official OpenAI) · openai · Claude Code, Codex, Cursor +3 · 5500 installs — Keeps a Playwright session alive for local web and Electron debugging. - [chrome-devtools-cli](https://affpapa.org/en/nevibecode/skills/chrome-devtools-cli.md) — skill · ChromeDevTools · Claude Code, Codex, Cursor +3 · 6800 installs — Lets AI coding agents interact with Chrome DevTools to automate clicks, inspect DOM snapshots, profile performance, and debug heap memory from the terminal. - [better-ui](https://affpapa.org/en/nevibecode/skills/better-ui.md) — skill · jakubkrehel · Claude Code, Codex, Cursor +3 · 39300 installs — This skill sets concrete rules for surface details, icons, shadows, and motion. - [lavish](https://affpapa.org/en/nevibecode/skills/lavish.md) — skill · Kun Chen (kunchenguid) · Claude Code, Codex, Cursor +3 · 22900 installs — Turns plans, comparisons, reports, and other visual agent responses into HTML files that users can annotate and send back as feedback. - [frontend-slides](https://affpapa.org/en/nevibecode/skills/frontend-slides.md) — skill · affaan-m · Claude Code, Codex, Cursor +3 · 5500 installs — Creates animation-rich HTML presentations from scratch or converts PPT/PPTX files into browser slides. - [web-design-engineer](https://affpapa.org/en/nevibecode/skills/web-design-engineer.md) — skill · ConardLi · Claude Code, Codex, Cursor +3 · 8700 installs — Directs your coding agent to craft polished web interfaces in HTML, CSS, JavaScript, and React. - [frontend-design-direction](https://affpapa.org/en/nevibecode/skills/frontend-design-direction.md) — skill · affaan-m · Claude Code, Codex, Cursor +3 · 5300 installs — Sets a product-specific direction for web UI and helps check hierarchy, content states, responsive behavior, accessibility, and rendered results. - [fixing-motion-performance](https://affpapa.org/en/nevibecode/skills/fixing-motion-performance.md) — skill · ibelick · Claude Code, Codex, Cursor +3 · 26900 installs — Audits and fixes UI animation performance issues like layout thrashing, blur lag, and scroll jank. - [liquid-glass-design](https://affpapa.org/en/nevibecode/skills/liquid-glass-design.md) — skill · affaan-m · Claude Code, Codex, Cursor +3 · 5200 installs — A skill that feeds your coding agent the iOS 26 Liquid Glass patterns for SwiftUI, UIKit and WidgetKit. - [stitch::generate-design](https://affpapa.org/en/nevibecode/skills/stitchgenerate-design.md) — skill (official Google) · google-labs-code · Claude Code, Codex, Cursor +3 · 10800 installs — Turns a text prompt or an image into a finished UI screen through Stitch MCP, then edits it with targeted prompts. - [accessibility](https://affpapa.org/en/nevibecode/skills/affaan-m-accessibility.md) — skill · affaan-m · Claude Code, Codex, Cursor +3 · 5100 installs — Designs and audits user interfaces to WCAG 2.2 Level AA across Web, iOS, and Android. - [build-dashboard](https://affpapa.org/en/nevibecode/skills/anthropics-build-dashboard.md) — skill (official Anthropic) · anthropics · Claude Code, Codex, Cursor +3 · 9100 installs — Builds a self-contained HTML dashboard with Chart.js charts, KPI cards, and filterable tables. - [stitch::extract-design-md](https://affpapa.org/en/nevibecode/skills/stitchextract-design-md.md) — skill (official Google) · google-labs-code · Claude Code, Codex, Cursor +3 · 10600 installs — Extracts a complete DESIGN.md design system directly from frontend source files without building or rendering the project. Next: https://affpapa.org/en/nevibecode/skills/topic/frontend.md?page=4 ## 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