# Skills for Frontend and UI Skills for Frontend and UI: what each one does, an install command and example prompts. 2909 cards · page 29 of 73 - HTML: https://affpapa.org/en/nevibecode/skills/topic/frontend?page=29 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [antv-g2-chart](https://affpapa.org/en/nevibecode/skills/antv-g2-chart.md) — skill · antvis · Claude Code, Codex, Cursor +3 · 1400 installs — This skill guides agents through building and tuning G2 v5 visualizations, diagnosing rendering problems, and handling V4 migrations. - [axiom-swiftui](https://affpapa.org/en/nevibecode/skills/axiom-swiftui.md) — skill · CharlesWiltgen · Claude Code, Codex, Cursor +3 · 1500 installs — A routing skill for SwiftUI work: takes a symptom like a stale view or janky scroll and points to the right reference, auditor or debugging path. - [storefront-best-practices](https://affpapa.org/en/nevibecode/skills/storefront-best-practices.md) — skill · medusajs · Claude Code, Codex, Cursor +3 · 4600 installs — This skill guides storefront work, from product pages and carts to checkout flows. - [design-review](https://affpapa.org/en/nevibecode/skills/plugin87-design-review.md) — skill · plugin87 · Claude Code, Codex, Cursor +3 · 594 installs — The skill scores a screen or flow across six weighted dimensions, runs Nielsen's heuristics and returns a prioritized findings table. - [rams](https://affpapa.org/en/nevibecode/skills/rams.md) — skill · brianlovin · Claude Code, Codex, Cursor +3 · 3000 installs — Reviews UI components for WCAG 2.1 compliance and visual styling bugs. - [building-admin-dashboard-customizations](https://affpapa.org/en/nevibecode/skills/building-admin-dashboard-customizations.md) — skill · medusajs · Claude Code, Codex, Cursor +3 · 4400 installs — Guides AI agents in building Medusa Admin dashboard extensions, widgets, and custom UI routes. - [Frontend Responsive Design Standards](https://affpapa.org/en/nevibecode/skills/frontend-responsive-design-standards.md) — skill · am-will · Claude Code, Codex, Cursor +3 · 1200 installs — A skill that gives your coding agent rules for mobile-first layouts: breakpoints, relative units, touch targets and content priority. - [favicon-gen](https://affpapa.org/en/nevibecode/skills/favicon-gen.md) — skill · jezweb · Claude Code, Codex, Cursor +3 · 2200 installs — Generates complete favicon packages and web manifests from logos, text monograms, or brand colors. - [ui-ux](https://affpapa.org/en/nevibecode/skills/ui-ux.md) — skill · evondev · Claude Code, Codex, Cursor +3 · 884 installs — A skill that makes the agent follow a design process: brief, 2–3 wireframes, then code. - [a11y-audit](https://affpapa.org/en/nevibecode/skills/plugin87-a11y-audit.md) — skill · plugin87 · Claude Code, Codex, Cursor +3 · 550 installs — Audits UI and design against WCAG 2.2 and ARIA patterns. - [frontend-design-deslop](https://affpapa.org/en/nevibecode/skills/frontend-design-deslop.md) — skill · samber · Claude Code, Codex, Cursor +3 · 4800 installs — A skill that steers generated interfaces away from the default AI look: typography, OKLCH color, design tokens, dark mode, accessibility. - [building-storefronts](https://affpapa.org/en/nevibecode/skills/building-storefronts.md) — skill · medusajs · Claude Code, Codex, Cursor +3 · 4200 installs — A skill for building Medusa storefronts: it tells the agent how to call APIs through the SDK and React Query without breaking requests. - [sentry](https://affpapa.org/en/nevibecode/skills/brianlovin-sentry.md) — skill · brianlovin · Claude Code, Codex, Cursor +3 · 2800 installs — Guides an agent through Sentry error capture and performance tracing in Next.js code. - [react-doctor](https://affpapa.org/en/nevibecode/skills/brianlovin-react-doctor.md) — skill · brianlovin · Claude Code, Codex, Cursor +3 · 2800 installs — The skill scans a React codebase against 47+ rules and returns a 0-100 score with file paths and line numbers. - [bun](https://affpapa.org/en/nevibecode/skills/bun.md) — skill · brianlovin · Claude Code, Codex, Cursor +3 · 2800 installs — Configures the assistant to use the Bun runtime instead of Node.js and npm. - [favicon](https://affpapa.org/en/nevibecode/skills/favicon.md) — skill · brianlovin · Claude Code, Codex, Cursor +3 · 2800 installs — Creates favicon files from one source image, then updates the web manifest and project HTML. - [design-tokens](https://affpapa.org/en/nevibecode/skills/plugin87-design-tokens.md) — skill · plugin87 · Claude Code, Codex, Cursor +3 · 538 installs — Create, extend, and validate DTCG design tokens with a three-tier structure. - [redesign](https://affpapa.org/en/nevibecode/skills/redesign.md) — skill · plugin87 · Claude Code, Codex, Cursor +3 · 535 installs — This skill audits an existing interface and revises its design while preserving working features. - [mvvm-toolkit-di](https://affpapa.org/en/nevibecode/skills/mvvm-toolkit-di.md) — skill (official GitHub) · github · GitHub Copilot · 92 installs — Wires CommunityToolkit.Mvvm ViewModels into Microsoft.Extensions.DependencyInjection across WPF, WinUI 3, .NET MAUI, Uno, and Avalonia projects. - [apply-aesthetic](https://affpapa.org/en/nevibecode/skills/apply-aesthetic.md) — skill · plugin87 · Claude Code, Codex, Cursor +3 · 529 installs — Picks a visual direction — an archetype or a named design system — and resolves it into your project's tokens. - [experience-ui-bundle-project-generate](https://affpapa.org/en/nevibecode/skills/experience-ui-bundle-project-generate.md) — skill · forcedotcom · Claude Code, Codex, Cursor +3 · 3200 installs — Generates a ready-to-develop Salesforce UI bundle starter project from a template via Salesforce CLI. - [platform-lightning-type-widget-coordinate](https://affpapa.org/en/nevibecode/skills/platform-lightning-type-widget-coordinate.md) — skill · forcedotcom · Claude Code, Codex, Cursor +3 · 3200 installs — Coordinates an Apex-backed Lightning Type with an HXL widget. - [design-code](https://affpapa.org/en/nevibecode/skills/design-code.md) — skill · plugin87 · Claude Code, Codex, Cursor +3 · 525 installs — This skill generates component and screen code for a requested framework. - [shopify-liquid-themes](https://affpapa.org/en/nevibecode/skills/shopify-liquid-themes.md) — skill · benjaminsehl · Claude Code, Codex, Cursor +3 · 3600 installs — Tells the agent how Shopify theme files are organised and how Liquid works, so it can write sections, blocks and snippets that fit the existing structure. - [platform-conventions](https://affpapa.org/en/nevibecode/skills/platform-conventions.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 1100 installs — The skill maps what iOS and Android each mandate in their interfaces, where the two diverge, and when a single cross-platform design makes sense. - [law-of-continuity](https://affpapa.org/en/nevibecode/skills/law-of-continuity.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 1100 installs — A skill about the Law of Continuity: alignment, arrows and lines set the path the eye follows across an interface. - [law-of-closure](https://affpapa.org/en/nevibecode/skills/law-of-closure.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 1100 installs — Teaches the agent to build UI on implied boundaries: drop redundant borders, draw icons from minimal cues, and let negative space carry the structure. - [law-of-figure-ground](https://affpapa.org/en/nevibecode/skills/law-of-figure-ground.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 1100 installs — A skill that sorts out which layer of an interface reads as foreground and which as background, and helps you set that relationship on purpose. - [law-of-similarity](https://affpapa.org/en/nevibecode/skills/law-of-similarity.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 1100 installs — Applies the Gestalt Law of Similarity to group UI elements across distance using shared color, shape, and size. - [design-component](https://affpapa.org/en/nevibecode/skills/design-component.md) — skill · plugin87 · Claude Code, Codex, Cursor +3 · 522 installs — Produces UI component specifications covering anatomy, 8 interactive states, tokens, and accessibility. - [playwriter](https://affpapa.org/en/nevibecode/skills/brianlovin-playwriter.md) — skill · brianlovin · Claude Code, Codex, Cursor +3 · 2700 installs — This skill connects an agent to the Chrome tab you already have open through the Playwriter CLI. - [mvvm-toolkit](https://affpapa.org/en/nevibecode/skills/mvvm-toolkit.md) — skill (official GitHub) · github · GitHub Copilot · 89 installs — Guides GitHub Copilot to scaffold ViewModels, source generator attributes, commands, and validation for CommunityToolkit.Mvvm. - [design-qa](https://affpapa.org/en/nevibecode/skills/plugin87-design-qa.md) — skill · plugin87 · Claude Code, Codex, Cursor +3 · 516 installs — This skill sets up checks for tokens, contrast, accessibility, and visual regressions. - [vitest-midscene-e2e](https://affpapa.org/en/nevibecode/skills/vitest-midscene-e2e.md) — skill · web-infra-dev · Claude Code, Codex, Cursor +3 · 2100 installs — Connects Vitest with Midscene to build AI-driven UI tests across Web, Android, and iOS using natural language. - [chrome-extension](https://affpapa.org/en/nevibecode/skills/chrome-extension.md) — skill · samber · Claude Code, Codex, Cursor +3 · 4500 installs — Guides agents through Chrome extension work with Manifest V3. - [brandkit](https://affpapa.org/en/nevibecode/skills/plugin87-brandkit.md) — skill · plugin87 · Claude Code, Codex, Cursor +3 · 510 installs — Build a token-based design foundation from a product brief, with separate light and dark themes and contrast checks. - [aesthetic](https://affpapa.org/en/nevibecode/skills/aesthetic.md) — skill · mrgoonie · Claude Code, Codex, Cursor +3 · 714 installs — A skill that walks your coding agent through interface design: reading other people's layouts, generating design images, and iterating until they hold up. - [triage-frontend-issues](https://affpapa.org/en/nevibecode/skills/triage-frontend-issues.md) — skill · getsentry · Claude Code, Codex, Cursor +3 · 1300 installs — A skill that clears noise from the sentry/javascript issue queue in Sentry and leaves real bugs for a human. - [ui-designer](https://affpapa.org/en/nevibecode/skills/daymade-ui-designer.md) — skill · daymade · Claude Code, Codex, Cursor +3 · 1600 installs — Extracts a design system from UI screenshots and prepares an implementation prompt for React. - [crxjs](https://affpapa.org/en/nevibecode/skills/crxjs.md) — skill · samber · Claude Code, Codex, Cursor +3 · 4300 installs — A skill for building Chrome extensions with CRXJS: it walks the agent through real HMR for popup, content scripts and side panels. Next: https://affpapa.org/en/nevibecode/skills/topic/frontend.md?page=30 ## 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