# Skills for Frontend and UI Skills for Frontend and UI: what each one does, an install command and example prompts. 2909 cards · page 32 of 73 - HTML: https://affpapa.org/en/nevibecode/skills/topic/frontend?page=32 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [nextjs-code-review](https://affpapa.org/en/nevibecode/skills/nextjs-code-review.md) — skill · giuseppe-trisciuoglio · Claude Code, Codex, Cursor +3 · 3800 installs — Reviews Next.js App Router code before merges, covering component boundaries, Server Actions, caching and routes. - [zod-validation-utilities](https://affpapa.org/en/nevibecode/skills/zod-validation-utilities.md) — skill · giuseppe-trisciuoglio · Claude Code, Codex, Cursor +3 · 3800 installs — Guides Zod v4 validation for TypeScript APIs, forms, and configuration. - [logo-animation](https://affpapa.org/en/nevibecode/skills/logo-animation.md) — skill · iart-ai · Claude Code, Codex, Cursor +3 · 2800 installs — A coding-agent skill that builds logo motion: intros, app splashes, loader loops, SVG draw-ons. - [color-motion](https://affpapa.org/en/nevibecode/skills/color-motion.md) — skill · iart-ai · Claude Code, Codex, Cursor +3 · 2800 installs — Builds motion design palettes in OKLCH, fixes muddy CSS gradient midpoints, and resolves gamma shift issues in After Effects video renders. - [experience-lwc-runtime-observe](https://affpapa.org/en/nevibecode/skills/experience-lwc-runtime-observe.md) — skill · forcedotcom · Claude Code, Codex, Cursor +3 · 2000 installs — Runs a local Salesforce LWC preview via the CLI and inspects the rendered runtime DOM. - [experience-lds-best-practices-apply](https://affpapa.org/en/nevibecode/skills/experience-lds-best-practices-apply.md) — skill · forcedotcom · Claude Code, Codex, Cursor +3 · 2000 installs — Reviews a Lightning Web Component's data layer and fixes it: when UIAPI is enough, when Apex is justified, and how to stop stale data after a save. - [experience-lwc-design-generate](https://affpapa.org/en/nevibecode/skills/experience-lwc-design-generate.md) — skill · forcedotcom · Claude Code, Codex, Cursor +3 · 2100 installs — Creates Lightning Web Components from Figma designs or PRD specs. - [mvvm-toolkit-messenger](https://affpapa.org/en/nevibecode/skills/mvvm-toolkit-messenger.md) — skill (official GitHub) · github · GitHub Copilot · 56 installs — A GitHub Copilot skill for CommunityToolkit.Mvvm Messenger: wires ViewModels together over pub/sub instead of direct references. - [sentry-sdk-upgrade](https://affpapa.org/en/nevibecode/skills/sentry-sdk-upgrade.md) — skill · getsentry · Claude Code, Codex, Cursor +3 · 3100 installs — This skill guides major version upgrades for the Sentry JavaScript SDK, like migrating from v7 to v8 or v9. - [sentry-react-sdk](https://affpapa.org/en/nevibecode/skills/sentry-react-sdk.md) — skill · getsentry · Claude Code, Codex, Cursor +3 · 3100 installs — Walks a React project through full Sentry setup: it scans your dependencies, proposes a feature set, and writes the config. - [motion-principles](https://affpapa.org/en/nevibecode/skills/motion-principles.md) — skill · AThevon · Claude Code, Codex, Cursor +3 · 1100 installs — A foundational motion design skill establishing timing budgets, easing curves, reduced-motion compliance, and jank prevention for Web, SwiftUI, and Compose. - [nextjs-deployment](https://affpapa.org/en/nevibecode/skills/nextjs-deployment.md) — skill · giuseppe-trisciuoglio · Claude Code, Codex, Cursor +3 · 3700 installs — Provides production deployment patterns for Next.js. - [nextjs-data-fetching](https://affpapa.org/en/nevibecode/skills/nextjs-data-fetching.md) — skill · giuseppe-trisciuoglio · Claude Code, Codex, Cursor +3 · 3700 installs — Provides Next.js App Router data fetching patterns, covering Server Components, ISR caching strategies, and SWR or React Query client integration. - [flowchart-creator](https://affpapa.org/en/nevibecode/skills/flowchart-creator.md) — skill · mhattingpete · Claude Code, Codex, Cursor +3 · 735 installs — Turns a process into a single HTML file with an SVG flowchart. - [shopify](https://affpapa.org/en/nevibecode/skills/mrgoonie-shopify.md) — skill · mrgoonie · Claude Code, Codex, Cursor +3 · 450 installs — A skill for building on Shopify: apps, checkout and admin extensions, Liquid themes, plus GraphQL and REST API work. - [better-auth](https://affpapa.org/en/nevibecode/skills/better-auth.md) — skill · giuseppe-trisciuoglio · Claude Code, Codex, Cursor +3 · 3600 installs — A skill with ready-made Better Auth patterns: NestJS backend, Drizzle ORM and PostgreSQL, social login, plus plugins like 2FA and passkey. - [experience-lds-graphql-generate](https://affpapa.org/en/nevibecode/skills/experience-lds-graphql-generate.md) — skill · forcedotcom · Claude Code, Codex, Cursor +3 · 1900 installs — This skill builds Salesforce LDS GraphQL queries and mutations from your org's schema and wires them into a Lightning Web Component. - [experience-aura-lwc-migrate](https://affpapa.org/en/nevibecode/skills/experience-aura-lwc-migrate.md) — skill · forcedotcom · Claude Code, Codex, Cursor +3 · 1900 installs — Analyzes Salesforce Aura bundles and generates a framework-agnostic PRD for migration to LWC. - [localize](https://affpapa.org/en/nevibecode/skills/localize.md) — skill · ghaida · Claude Code, Codex, Cursor +3 · 2700 installs — Adapts user experience and UI patterns across cultures and languages, covering RTL layouts, trust signals, and legal compliance. - [include](https://affpapa.org/en/nevibecode/skills/include.md) — skill · ghaida · Claude Code, Codex, Cursor +3 · 2700 installs — Embeds digital accessibility and WCAG 2.2 standards directly into UI design workflows before handoff. - [fortify](https://affpapa.org/en/nevibecode/skills/fortify.md) — skill · ghaida · Claude Code, Codex, Cursor +3 · 2700 installs — Hardens interface flows against real-world failures: empty states, partial loading, network drops, and unhandled validation errors. - [web-testing](https://affpapa.org/en/nevibecode/skills/web-testing.md) — skill · mrgoonie · Claude Code, Codex, Cursor +3 · 442 installs — A web testing skill covering unit, integration, E2E, load, security, visual and accessibility checks. - [mantine-custom-components](https://affpapa.org/en/nevibecode/skills/mantine-custom-components.md) — skill · mantinedev · Claude Code, Codex, Cursor +3 · 3600 installs — Teaches AI agents to build custom components for Mantine 9.x and React 19. - [ecommerce-landing-page](https://affpapa.org/en/nevibecode/skills/ecommerce-landing-page.md) — skill · nexscope-ai · Claude Code, Codex, Cursor +3 · 1300 installs — Audits e-commerce landing pages and generates conversion optimization plans: reviews the hero section, CTA placement, trust signals, and A/B test hypotheses. - [vite-flare-starter](https://affpapa.org/en/nevibecode/skills/vite-flare-starter.md) — skill · jezweb · Claude Code, Codex, Cursor +3 · 1200 installs — Clones the vite-flare-starter template and configures it into your own Cloudflare Workers app, with React, Hono, D1 and Drizzle, auth and Workers AI already in place. - [motion-background](https://affpapa.org/en/nevibecode/skills/motion-background.md) — skill · iart-ai · Claude Code, Codex, Cursor +3 · 2700 installs — Teaches your assistant to build subtle background animations like CSS mesh gradients or 2D canvas particle fields without hurting readability. - [macos-patterns](https://affpapa.org/en/nevibecode/skills/macos-patterns.md) — skill · fayazara · Claude Code, Codex, Cursor +3 · 670 installs — Guides native macOS app work with menu bar UI, windows, focus behaviour and platform-specific APIs. - [sentry-browser-sdk](https://affpapa.org/en/nevibecode/skills/sentry-browser-sdk.md) — skill · getsentry · Claude Code, Codex, Cursor +3 · 2900 installs — Walks the agent through Sentry setup for browser JavaScript: checks the project for frameworks, picks an install path, then configures error monitoring, tracing and replay. - [msw-ui-system](https://affpapa.org/en/nevibecode/skills/msw-ui-system.md) — skill · MSW-Git · Claude Code, Codex, Cursor +3 · 9700 installs — Guides coding agents through building MapleStory Worlds interfaces: generates .ui layouts, configures UI components, and handles .mlua UUID bindings. - [mantine-combobox](https://affpapa.org/en/nevibecode/skills/mantine-combobox.md) — skill · mantinedev · Claude Code, Codex, Cursor +3 · 3500 installs — Teaches the agent to build dropdowns, autocompletes and multiselects on Mantine's Combobox primitives. - [horizontal-scroll-scenes](https://affpapa.org/en/nevibecode/skills/horizontal-scroll-scenes.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 367 installs — A skill for chapters that travel left to right while the reader scrolls down. - [motion-effects](https://affpapa.org/en/nevibecode/skills/motion-effects.md) — skill · charlie947 · Claude Code, Codex, Cursor +3 · 1500 installs — Builds one of 16 motion effects in your own brand as a single 8-second looping HTML file that exports frame-exact to MP4 or GIF. - [typegpu](https://affpapa.org/en/nevibecode/skills/typegpu.md) — skill · software-mansion-labs · Claude Code, Codex, Cursor +3 · 1600 installs — A skill that helps the agent write TypeGPU code: shaders, buffers, pipelines and the @typegpu/react hooks, with the type plumbing handled. - [mobile-responsiveness](https://affpapa.org/en/nevibecode/skills/mobile-responsiveness.md) — skill · hoodini · Claude Code, Codex, Cursor +3 · 1400 installs — Provides mobile-first responsive design patterns, touch gesture handlers, fluid typography rules, and safe area handling for web apps. - [macos-settings-ui](https://affpapa.org/en/nevibecode/skills/macos-settings-ui.md) — skill · fayazara · Claude Code, Codex, Cursor +3 · 650 installs — Builds a native macOS settings window in SwiftUI: sidebar, grouped Form panes and liquid glass window chrome for macOS 26. - [graphql-operations](https://affpapa.org/en/nevibecode/skills/graphql-operations.md) — skill · apollographql · Claude Code, Codex, Cursor +3 · 3600 installs — A skill that keeps your agent writing GraphQL queries, mutations and fragments against the real schema. - [tanstack-query](https://affpapa.org/en/nevibecode/skills/tanstack-query.md) — skill · tanstack-skills · Claude Code, Codex, Cursor +3 · 9900 installs — A skill that tells your agent how to use TanStack Query v5: caching, invalidation, mutations and optimistic updates. - [remotion-video](https://affpapa.org/en/nevibecode/skills/remotion-video.md) — skill · iart-ai · Claude Code, Codex, Cursor +3 · 2600 installs — A skill for building MP4, GIF and WebM videos in React, where every frame is a pure function of useCurrentFrame, so renders stay deterministic. - [design-audit](https://affpapa.org/en/nevibecode/skills/design-audit.md) — skill · AThevon · Claude Code, Codex, Cursor +3 · 1000 installs — Scans frontend codebases for accessibility flaws, motion bugs, and AI design tells. - [threejs-r3f](https://affpapa.org/en/nevibecode/skills/threejs-r3f.md) — skill · AThevon · Claude Code, Codex, Cursor +3 · 1000 installs — A skill covering Three.js and React Three Fiber: scene setup, hooks, postprocessing and performance rules. Next: https://affpapa.org/en/nevibecode/skills/topic/frontend.md?page=33 ## 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