# Skills for Frontend and UI Skills for Frontend and UI: what each one does, an install command and example prompts. 2909 cards · page 72 of 73 - HTML: https://affpapa.org/en/nevibecode/skills/topic/frontend?page=72 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [storefront-builder](https://affpapa.org/en/nevibecode/skills/storefront-builder.md) — skill · saleor · Claude Code, Codex, Cursor +3 · 384 installs — Walks an agent through building a Saleor storefront: GraphQL wiring, design, then catalog with variant selection. - [interactive-portfolio](https://affpapa.org/en/nevibecode/skills/interactive-portfolio.md) — skill · davila7 · Claude Code · 608 installs — A skill that shapes a personal portfolio so a visitor gets who you are and what you do within seconds. - [playwright-interactive-sandbox](https://affpapa.org/en/nevibecode/skills/playwright-interactive-sandbox.md) — skill · customware-ai · Claude Code, Codex, Cursor +3 · 400 installs — This skill runs iterative web UI checks through a persistent Node.js Playwright workflow. - [safe-action-tanstack-query](https://affpapa.org/en/nevibecode/skills/safe-action-tanstack-query.md) — skill · next-safe-action · Claude Code, Codex, Cursor +3 · 438 installs — Connects next-safe-action mutations to TanStack Query with typed error handling, cache updates, and invalidation. - [frontend-dev-guidelines](https://affpapa.org/en/nevibecode/skills/frontend-dev-guidelines.md) — skill · davila7 · Claude Code · 556 installs — A skill that gives the agent one set of rules for React and TypeScript work: Suspense, lazy loading, features layout, MUI v7 and TanStack. - [claude-d3js-skill](https://affpapa.org/en/nevibecode/skills/claude-d3js-skill.md) — skill · davila7 · Claude Code · 531 installs — Tells the agent how to build non-standard d3.js visualisations: network graphs, geographic maps, choreographed transitions. - [primevue](https://affpapa.org/en/nevibecode/skills/primevue.md) — skill · kindy · Claude Code, Codex, Cursor +3 · 527 installs — Sets up PrimeVue in Vue 3 and Vite projects. - [frontend-ui-dark-ts](https://affpapa.org/en/nevibecode/skills/frontend-ui-dark-ts.md) — skill · Microsoft · Claude Code, GitHub Copilot · 5 installs — A skill for building dark React interfaces with Tailwind CSS: custom theming, glassmorphism, Framer Motion animations. - [implement_lenis_scroll](https://affpapa.org/en/nevibecode/skills/implement-lenis-scroll.md) — skill · jerrar670 · Claude Code, Codex, Cursor +3 · 468 installs — A skill that walks the agent through wiring Lenis into a React or Next.js app: package install, a wrapper component, layout integration. - [mobile-first-website-design](https://affpapa.org/en/nevibecode/skills/mobile-first-website-design.md) — skill · Kiren Srinivasan · Claude Code, Codex, Cursor +3 · 318 installs — A skill that walks the agent through landing and marketing pages: style-free structure first, identity second, implementation from the narrowest width up. - [design-like-im-5](https://affpapa.org/en/nevibecode/skills/design-like-im-5.md) — skill · Kiren Srinivasan · Claude Code, Codex, Cursor +3 · 304 installs — A skill for designing and reviewing interfaces: keeps the user-facing core simple and checks states, inputs and screen sizes. - [dtcg-tokens](https://affpapa.org/en/nevibecode/skills/dtcg-tokens.md) — skill · Kiren Srinivasan · Claude Code, Codex, Cursor +3 · 303 installs — Turn multimodal source material into DTCG tokens, evidence data, and an HTML proof artifact. - [zoom-video-sdk-web](https://affpapa.org/en/nevibecode/skills/zoom-video-sdk-web.md) — skill (official OpenAI) · Zoom · Codex, ChatGPT · ★ 7604 — Walks your agent through building a custom video session with the Zoom Video SDK for Web: joining, camera, screen share, recording. - [ui-toolkit](https://affpapa.org/en/nevibecode/skills/ui-toolkit.md) — skill (official OpenAI) · Zoom · Codex, ChatGPT · ★ 7604 — A skill that walks the agent through wiring a prebuilt Zoom Video SDK web UI into your app. - [zoom-meeting-sdk-web-component-view](https://affpapa.org/en/nevibecode/skills/zoom-meeting-sdk-web-component-view.md) — skill (official OpenAI) · Zoom · Codex, ChatGPT · ★ 7604 — This skill guides agents through embedding a Zoom meeting with Component View. - [zoom-meeting-sdk-web-client-view](https://affpapa.org/en/nevibecode/skills/zoom-meeting-sdk-web-client-view.md) — skill (official OpenAI) · Zoom · Codex, ChatGPT · ★ 7604 — A Claude and Claude skill that helps wire up the Zoom Meeting SDK Web in Client View — a full-page meeting with the familiar Zoom interface. - [stripe-apps](https://affpapa.org/en/nevibecode/skills/stripe-apps.md) — skill (official OpenAI) · Stripe · Codex, ChatGPT · ★ 7604 — This skill guides Stripe App work from scaffolding and Dashboard UI to webhooks, uploads, versioning, and marketplace release. - [shopify-polaris-checkout-extensions](https://affpapa.org/en/nevibecode/skills/shopify-polaris-checkout-extensions.md) — skill (official OpenAI) · Shopify · Codex, ChatGPT · ★ 7604 — Writes Shopify checkout UI extension code: searches the docs, validates the result and scaffolds new extensions through Shopify CLI. - [shopify-polaris-admin-extensions](https://affpapa.org/en/nevibecode/skills/shopify-polaris-admin-extensions.md) — skill (official OpenAI) · Shopify · Codex, ChatGPT · ★ 7604 — A skill that steers Claude through building Shopify admin UI extensions: look up the docs, write Polaris code, then validate it before you get an answer. - [magicpath](https://affpapa.org/en/nevibecode/skills/magicpath.md) — skill (official OpenAI) · MagicPathAI · Codex, ChatGPT · ★ 7604 — This skill wires the agent to the MagicPath platform: it finds canvas components, installs them into your repo and edits them as code. - [ui-mockup](https://affpapa.org/en/nevibecode/skills/ui-mockup.md) — skill · mvschwarz · Claude Code, Codex, Cursor +3 · ★ 8227 — Create ASCII wireframes, standalone HTML screens, or live prototypes from product requirements. - [zustand-store-ts](https://affpapa.org/en/nevibecode/skills/zustand-store-ts.md) — skill · Microsoft · Claude Code, GitHub Copilot · 3 installs — A skill that sets the pattern for Zustand stores in TypeScript: separate state and action types, subscribeWithSelector, individual selectors. - [auteur](https://affpapa.org/en/nevibecode/skills/auteur.md) — skill · agiwhitelist · Claude Code, Codex, Cursor +3 · ★ 1042 — A skill that designs and builds web experiences from scratch: landing pages, cinematic scroll-directed sites, and multi-screen products in one style. - [accessibility](https://affpapa.org/en/nevibecode/skills/accessibility.md) — skill · web-quality-skills · Claude Code · 325 installs — This skill guides Claude Code through web accessibility reviews based on WCAG 2.1. - [react-patterns](https://affpapa.org/en/nevibecode/skills/react-patterns.md) — skill · davila7 · Claude Code · 321 installs — Get guidance on React components, hooks, state choices, and performance. - [core-web-vitals](https://affpapa.org/en/nevibecode/skills/core-web-vitals.md) — skill · web-quality-skills · Claude Code · 315 installs — This skill examines LCP, INP, and CLS and suggests code changes for loading, responsiveness, and layout stability. - [ui-dev](https://affpapa.org/en/nevibecode/skills/ui-dev.md) — skill · elirantutia · Claude Code, Codex, Cursor +3 · ★ 1388 — Guides UI work in a vanilla TypeScript renderer, with patterns for components, dialogs, dropdowns, and styling. - [add-npm-dependency](https://affpapa.org/en/nevibecode/skills/add-npm-dependency.md) — skill · elirantutia · Claude Code, Codex, Cursor +3 · ★ 1388 — A skill that walks the agent through npm dependency changes in an Electron app: three build targets, CSS copying, native module rebuilds. - [web-quality-audit](https://affpapa.org/en/nevibecode/skills/web-quality-audit.md) — skill · web-quality-skills · Claude Code · 294 installs — This skill reviews a project for performance, accessibility, SEO, and web best practices. - [frontend-to-backend-requirements](https://affpapa.org/en/nevibecode/skills/frontend-to-backend-requirements.md) — skill · davila7 · Claude Code · 278 installs — A skill that helps a frontend developer tell backend what data a screen needs, without dictating the API shape. - [i18n-localization](https://affpapa.org/en/nevibecode/skills/i18n-localization.md) — skill · davila7 · Claude Code · 251 installs — A Claude skill covering internationalization and localization: translation keys, locale files, RTL layout and a checker script. - [nextjs-developer](https://affpapa.org/en/nevibecode/skills/httpsgithubcomjeffallan-nextjs-developer.md) — skill · https://github.com/Jeffallan · Claude Code, Codex, Cursor +3 · ★ 4679 — Build Next.js 14+ apps with App Router using guidance for server components, data fetching, SEO, and deployment preparation. - [data-viz-renderer](https://affpapa.org/en/nevibecode/skills/data-viz-renderer.md) — skill · zebbern · Claude Code, Codex, Cursor +3 · ★ 4679 — Turn JSON data into standalone HTML/SVG infographics, from metric cards to process diagrams. - [html-injection-testing](https://affpapa.org/en/nevibecode/skills/html-injection-testing.md) — skill · zebbern · Claude Code · 234 installs — This skill guides checks for HTML injection in web apps and helps assess how injected markup affects rendered pages. - [angular](https://affpapa.org/en/nevibecode/skills/angular.md) — skill · davila7 · Claude Code · 216 installs — This skill guides Angular v20+ work with Signals, standalone components, zoneless setup, SSR, and reactive code. - [tanstack-query-expert](https://affpapa.org/en/nevibecode/skills/tanstack-query-expert.md) — skill · davila7 · Claude Code · 196 installs — This skill guides TanStack Query work in React and Next.js, from query design and cache handling to mutations and server-side hydration. - [develop-timeline-studio-plugin](https://affpapa.org/en/nevibecode/skills/develop-timeline-studio-plugin.md) — skill · MartinDelophy · Claude Code, Codex, Cursor +3 · ★ 901 — Guides work on image and video generation connectors for Timeline Studio, from provider checks to importing finished media. - [astro](https://affpapa.org/en/nevibecode/skills/astro.md) — skill · suhaibjanjua · Claude Code · 157 installs — This skill guides Astro projects with Markdown or MDX content and selectively hydrated interactive components. - [performance-profiling](https://affpapa.org/en/nevibecode/skills/performance-profiling.md) — skill · davila7 · Claude Code · 132 installs — A Claude skill that keeps the agent on a fixed loop: measure, find the bottleneck, change one thing, confirm the result. - [react-useeffect](https://affpapa.org/en/nevibecode/skills/react-useeffect.md) — skill · davila7 · Claude Code · 127 installs — A skill that walks through React's useEffect rules from the official docs and points out what to use instead when an Effect is unnecessary. Next: https://affpapa.org/en/nevibecode/skills/topic/frontend.md?page=73 ## 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