# Skills for Frontend and UI Skills for Frontend and UI: what each one does, an install command and example prompts. 2909 cards · page 30 of 73 - HTML: https://affpapa.org/en/nevibecode/skills/topic/frontend?page=30 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [migrate-design-system](https://affpapa.org/en/nevibecode/skills/migrate-design-system.md) — skill · plugin87 · Claude Code, Codex, Cursor +3 · 487 installs — Maps your design tokens to another system and back: Material 3, Apple HIG, Fluent 2, shadcn/ui, Radix. - [icon-set-generator](https://affpapa.org/en/nevibecode/skills/icon-set-generator.md) — skill · jezweb · Claude Code, Codex, Cursor +3 · 1900 installs — Draws a set of SVG icons for one project: same grid, same stroke, same corners. - [prototype](https://affpapa.org/en/nevibecode/skills/plugin87-prototype.md) — skill · plugin87 · Claude Code, Codex, Cursor +3 · 484 installs — Guides interface design across a five-tier fidelity ladder from content to code. - [compose-performance](https://affpapa.org/en/nevibecode/skills/compose-performance.md) — skill · chrisbanes · Claude Code, Codex, Cursor +3 · 1100 installs — A skill for investigating Jetpack Compose recomposition cost: find the phase causing the work and fix it at the boundary where it starts. - [compose-state-and-effects](https://affpapa.org/en/nevibecode/skills/compose-state-and-effects.md) — skill · chrisbanes · Claude Code, Codex, Cursor +3 · 1100 installs — This skill guides state ownership and side-effect choices in Jetpack Compose. - [token-build](https://affpapa.org/en/nevibecode/skills/token-build.md) — skill · plugin87 · Claude Code, Codex, Cursor +3 · 480 installs — Generate web and mobile theme files from DTCG JSON tokens, or wire the build into CI. - [axiom-uikit](https://affpapa.org/en/nevibecode/skills/axiom-uikit.md) — skill · CharlesWiltgen · Claude Code, Codex, Cursor +3 · 1200 installs — Routes UIKit and SwiftUI bridging, Auto Layout fixes, animations, Combine pipelines, and TextKit tasks. - [figma-integration](https://affpapa.org/en/nevibecode/skills/plugin87-figma-integration.md) — skill · plugin87 · Claude Code, Codex, Cursor +3 · 478 installs — Sync project tokens and components with Figma in either direction. - [serial-position-effect](https://affpapa.org/en/nevibecode/skills/serial-position-effect.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 1000 installs — A skill that applies the serial position effect: it tells the agent which items belong first and last, and what lands in the memory valley. - [teslers-law](https://affpapa.org/en/nevibecode/skills/teslers-law.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 1000 installs — Applies Tesler's Law to help you balance complexity between the interface and the user. - [zeigarnik-effect](https://affpapa.org/en/nevibecode/skills/zeigarnik-effect.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 1000 installs — A skill for designing progress bars, saved drafts and reminders about unfinished steps. - [jakobs-law](https://affpapa.org/en/nevibecode/skills/jakobs-law.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 1100 installs — Applies Jakob's Law to evaluate whether breaking familiar UI conventions is worth the cognitive cost. - [antv-g6-graph](https://affpapa.org/en/nevibecode/skills/antv-g6-graph.md) — skill · antvis · Claude Code, Codex, Cursor +3 · 1100 installs — Walks your agent through G6 v5 syntax for network graphs, trees and flow charts. - [zod](https://affpapa.org/en/nevibecode/skills/pymodel-zod.md) — skill · PyModel · Claude Code, Codex, Cursor +3 · 476 installs — A set of 46 validation and type inference rules for Zod 4 in TypeScript projects. - [revealjs](https://affpapa.org/en/nevibecode/skills/revealjs.md) — skill · ryanbbrown · Claude Code, Codex, Cursor +3 · 736 installs — This skill turns your content into a reveal.js presentation: an HTML file with slides plus CSS for the theme. - [auth0](https://affpapa.org/en/nevibecode/skills/auth0.md) — skill · Auth0 · Claude Code, Codex, Cursor +3 · 5200 installs — Sets up authentication, API protection, and session tokens across frameworks. - [responsiveness-check](https://affpapa.org/en/nevibecode/skills/responsiveness-check.md) — skill · jezweb · Claude Code, Codex, Cursor +3 · 1800 installs — Resizes a page through viewport widths in one browser session, screenshots each one, and reports where the layout gives way. - [seo-local-business](https://affpapa.org/en/nevibecode/skills/seo-local-business.md) — skill · jezweb · Claude Code, Codex, Cursor +3 · 1800 installs — Generates a complete local SEO package: meta tags, JSON-LD LocalBusiness schema, robots.txt, and sitemap.xml for service-based websites. - [apollo-client](https://affpapa.org/en/nevibecode/skills/apollo-client.md) — skill · apollographql · Claude Code, Codex, Cursor +3 · 5600 installs — A skill that walks your agent through Apollo Client 4.x in React: queries, mutations, caching, local state and error troubleshooting. - [ipados-design-guidelines](https://affpapa.org/en/nevibecode/skills/ipados-design-guidelines.md) — skill · platform-design-skills · Claude Code, Codex, Cursor +3 · 1200 installs — Apple Human Interface Guidelines for iPad, packaged as a skill: adaptive layouts, multitasking, sidebar navigation and pointer support. - [email-render-builder](https://affpapa.org/en/nevibecode/skills/email-render-builder.md) — skill · aaron-he-zhu · Claude Code, Codex, Cursor +3 · 1000 installs — Turns an approved email creative into responsive HTML and checks how it renders in Gmail, Outlook, Apple Mail and on mobile. - [anywidget-generator](https://affpapa.org/en/nevibecode/skills/anywidget-generator.md) — skill · marimo-team · Claude Code, Codex, Cursor +3 · 3600 installs — A skill that steers the agent through building custom anywidget components for marimo notebooks: JavaScript in _esm, styles in _css, wrapped with mo.ui.anywidget. - [neon-realtime](https://affpapa.org/en/nevibecode/skills/neon-realtime.md) — skill · neondatabase · Claude Code, Codex, Cursor +3 · 6000 installs — Turns any SQL query live: the client subscribes to row changes in Lakebase Postgres and gets them in batches. - [experience-lwr-site-generate](https://affpapa.org/en/nevibecode/skills/experience-lwr-site-generate.md) — skill · forcedotcom · Claude Code, Codex, Cursor +3 · 2700 installs — Builds and edits Salesforce Experience Cloud LWR sites through DigitalExperience metadata: pages, routes, themes, guest access. - [tailwind-v4-shadcn](https://affpapa.org/en/nevibecode/skills/tailwind-v4-shadcn.md) — skill · secondsky · Claude Code, Codex, Cursor +3 · 8100 installs — Sets up Tailwind CSS v4 with shadcn/ui, Vite, and React. - [compose-component-design](https://affpapa.org/en/nevibecode/skills/compose-component-design.md) — skill · chrisbanes · Claude Code, Codex, Cursor +3 · 1000 installs — A skill for designing and reviewing reusable Jetpack Compose component APIs: slots, modifier parameters, root layout placement. - [elevenlabs-agents](https://affpapa.org/en/nevibecode/skills/elevenlabs-agents.md) — skill · jezweb · Claude Code, Codex, Cursor +3 · 1700 installs — Build ElevenLabs conversational voice agents with configured tools, a knowledge base, and SDK integration for an app or server. - [3d-virtual-tour](https://affpapa.org/en/nevibecode/skills/3d-virtual-tour.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 527 installs — A skill for building virtual tours through a 3D scene: authored camera paths, room navigation, orbit inspection. - [frontend-app-builder](https://affpapa.org/en/nevibecode/skills/frontend-app-builder.md) — skill (official OpenAI) · OpenAI · Codex, ChatGPT · 252 installs — This skill designs and builds frontend apps, websites, and games, then checks the result in a browser. - [experience-lwc-base-components-integrate](https://affpapa.org/en/nevibecode/skills/experience-lwc-base-components-integrate.md) — skill · forcedotcom · Claude Code, Codex, Cursor +3 · 2600 installs — Picks the right Lightning Base Component for a UI task and wires it into an LWC bundle without breaking SLDS. - [experience-lds-data-requirements-generate](https://affpapa.org/en/nevibecode/skills/experience-lds-data-requirements-generate.md) — skill · forcedotcom · Claude Code, Codex, Cursor +3 · 2600 installs — Turns ambiguous LWC data needs into clear Salesforce specifications. - [nextjs-performance](https://affpapa.org/en/nevibecode/skills/nextjs-performance.md) — skill · giuseppe-trisciuoglio · Claude Code, Codex, Cursor +3 · 4900 installs — A Next.js optimization skill: Core Web Vitals, images and fonts, caching, streaming, bundle size. - [frontend-slides-editable](https://affpapa.org/en/nevibecode/skills/frontend-slides-editable.md) — skill · archlizheng · Claude Code, Codex, Cursor +3 · 537 installs — Creates editable single-file HTML presentations with an in-browser editor. - [liquid-theme-standards](https://affpapa.org/en/nevibecode/skills/liquid-theme-standards.md) — skill · benjaminsehl · Claude Code, Codex, Cursor +3 · 2900 installs — Defines frontend coding conventions for Shopify Liquid themes. - [pp-figma](https://affpapa.org/en/nevibecode/skills/pp-figma.md) — skill · Giuliano Giacaglia · Claude Code, Codex, Cursor +3 · 726 installs — Extracts compact Figma frame payloads for AI codegen, audits comments, and detects stale components. - [3d-retina-resolution](https://affpapa.org/en/nevibecode/skills/3d-retina-resolution.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 512 installs — Keeps 3D canvases sharp on Retina and HiDPI displays, including fixed 200% rendering. - [react-patterns](https://affpapa.org/en/nevibecode/skills/giuseppe-trisciuoglio-react-patterns.md) — skill · giuseppe-trisciuoglio · Claude Code, Codex, Cursor +3 · 4800 installs — Teaches your agent React 19 and Next.js App Router patterns: Server Components, Server Actions, useOptimistic, Suspense boundaries. - [3d-sky-background](https://affpapa.org/en/nevibecode/skills/3d-sky-background.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 505 installs — Builds camera-correct 3D skies with procedural atmosphere, horizon haze, aligned sun lighting, and coherent environment reflections. - [tvos-design-guidelines](https://affpapa.org/en/nevibecode/skills/tvos-design-guidelines.md) — skill · platform-design-skills · Claude Code, Codex, Cursor +3 · 1100 installs — Provides Apple Human Interface Guidelines for tvOS apps. - [3d-falling-leaves](https://affpapa.org/en/nevibecode/skills/3d-falling-leaves.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 499 installs — A skill for Three.js and similar scenes: it walks the agent through falling leaves in world space, with tumble, sideways drift and instance recycling. Next: https://affpapa.org/en/nevibecode/skills/topic/frontend.md?page=31 ## 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