# Skills for Frontend and UI Skills for Frontend and UI: what each one does, an install command and example prompts. 2909 cards · page 65 of 73 - HTML: https://affpapa.org/en/nevibecode/skills/topic/frontend?page=65 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [depth](https://affpapa.org/en/nevibecode/skills/depth.md) — skill · aladicf · Claude Code, Codex, Cursor +3 · 537 installs — Establishes elevation scales, two-part shadows, and inset surfaces. - [ux-usability-foundations](https://affpapa.org/en/nevibecode/skills/ux-usability-foundations.md) — skill · hueyexe · Claude Code, Codex, Cursor +3 · 559 installs — Guides an AI agent to design, review, and refine interfaces around usability principles, error prevention, and user mental models. - [lynx-typescript](https://affpapa.org/en/nevibecode/skills/lynx-typescript.md) — skill · lynx-community · Claude Code, Codex, Cursor +3 · 425 installs — Configures TypeScript for Lynx and ReactLynx projects, providing patterns for event types, global properties, and custom native components. - [formisch](https://affpapa.org/en/nevibecode/skills/formisch.md) — skill · open-circle · Claude Code, Codex, Cursor +3 · 418 installs — A skill that teaches your agent to build forms with Formisch, the headless Valibot-based library. - [imagery](https://affpapa.org/en/nevibecode/skills/imagery.md) — skill · aladicf · Claude Code, Codex, Cursor +3 · 533 installs — Audits UI photos, screenshots, and icons to fix contrast issues, preserve layout bounds, and align visual styles. - [information-architecture-navigation](https://affpapa.org/en/nevibecode/skills/information-architecture-navigation.md) — skill · hueyexe · Claude Code, Codex, Cursor +3 · 556 installs — A skill for designing navigation, labels, taxonomy and search in a digital product. - [framer-motion-react](https://affpapa.org/en/nevibecode/skills/framer-motion-react.md) — skill · C-Jeril · Claude Code, Codex, Cursor +3 · 822 installs — A Framer Motion skill for React and Next.js: AnimatePresence, layout animations, useAnimation, and the SSR workarounds that keep hydration quiet. - [frontend-design-review](https://affpapa.org/en/nevibecode/skills/dauquangthanh-frontend-design-review.md) — skill · DauQuangThanh · Claude Code, Codex, Cursor +3 · 458 installs — Audits UI mockups, design tokens, and components for WCAG 2.1 AA accessibility, responsive behavior, and design system consistency before engineering begins. - [optimize](https://affpapa.org/en/nevibecode/skills/aladicf-optimize.md) — skill · aladicf · Claude Code, Codex, Cursor +3 · 536 installs — A skill that tracks down why an interface feels slow: load time, janky animations, heavy images, bloated bundles. - [bolder](https://affpapa.org/en/nevibecode/skills/bolder.md) — skill · aladicf · Claude Code, Codex, Cursor +3 · 535 installs — A skill for when a design feels too safe and generic. - [framer-motion-scroll](https://affpapa.org/en/nevibecode/skills/framer-motion-scroll.md) — skill · C-Jeril · Claude Code, Codex, Cursor +3 · 803 installs — A Framer Motion skill that tells your agent how to build scroll-linked animations, parallax and progress indicators. - [exploring-autocapture-events](https://affpapa.org/en/nevibecode/skills/exploring-autocapture-events.md) — skill · PostHog · Claude Code, Codex, Cursor +3 · 435 installs — Guides exploration of $autocapture data from posthog-js. - [delight](https://affpapa.org/en/nevibecode/skills/delight.md) — skill · aladicf · Claude Code, Codex, Cursor +3 · 523 installs — Adds joy and personality to interfaces: success states, empty screens, loading moments, hover details. - [mobile-design](https://affpapa.org/en/nevibecode/skills/manutej-mobile-design.md) — skill · manutej · Claude Code, Codex, Cursor +3 · 545 installs — A skill for mobile interfaces: touch targets, gestures, thumb zones, safe areas and mobile-first layout for small screens. - [showcase](https://affpapa.org/en/nevibecode/skills/showcase.md) — skill · aladicf · Claude Code, Codex, Cursor +3 · 521 installs — Guides the agent to build technically ambitious web interfaces with View Transitions and WebGL rendering. - [figma-design](https://affpapa.org/en/nevibecode/skills/figma-design.md) — skill · manutej · Claude Code, Codex, Cursor +3 · 542 installs — A Figma skill covering components, auto layout, variables, prototyping and plugin development. - [extract](https://affpapa.org/en/nevibecode/skills/aladicf-extract.md) — skill · aladicf · Claude Code, Codex, Cursor +3 · 520 installs — Finds duplicated UI patterns, extracts them into shared components, sets up design tokens, and refactors existing calls. - [integrate-fusion-agent](https://affpapa.org/en/nevibecode/skills/integrate-fusion-agent.md) — skill · cognitedata · Claude Code, Codex, Cursor +3 · 1700 installs — This skill wires the Atlas/EOS sidebar into a Flows/Fusion app through @cognite/app-sdk instead of an embedded chat. - [migrate-app-to-flows](https://affpapa.org/en/nevibecode/skills/migrate-app-to-flows.md) — skill · cognitedata · Claude Code, Codex, Cursor +3 · 1700 installs — Automates migrating legacy Dune web applications to the new Flows app hosting (appsApi). - [web-audio-api](https://affpapa.org/en/nevibecode/skills/web-audio-api.md) — skill · martinholovsky · Claude Code, Codex, Cursor +3 · 395 installs — Gives the agent working knowledge of Web Audio API: signal synthesis, frequency visualisation, mic input and spatial sound for interfaces. - [observability](https://affpapa.org/en/nevibecode/skills/observability.md) — skill (official OpenAI) · Vercel Labs · Codex, ChatGPT · 7 installs — Configures logging and metrics for applications hosted on Vercel. - [ai-elements](https://affpapa.org/en/nevibecode/skills/ai-elements.md) — skill (official OpenAI) · Vercel Labs · Codex, ChatGPT · 7 installs — This skill guides React AI interfaces built with ai-elements and shadcn/ui. - [grammar-of-graphics-and-declarative-visualization](https://affpapa.org/en/nevibecode/skills/grammar-of-graphics-and-declarative-visualization.md) — skill (official OpenAI) · OpenAI · Codex, ChatGPT · 7 installs — Generates tabular charts using Vega-Lite, Vega, and Observable Plot. - [raycast-extension](https://affpapa.org/en/nevibecode/skills/raycast-extension.md) — skill · johnlindquist · Claude Code, Codex, Cursor +3 · 321 installs — This skill guides an agent through Raycast extensions built with React and TypeScript. - [quieter](https://affpapa.org/en/nevibecode/skills/quieter.md) — skill · aladicf · Claude Code, Codex, Cursor +3 · 513 installs — A coding-agent skill that cuts saturation, contrast and visual noise in a UI while keeping hierarchy and character. - [tanstack-query](https://affpapa.org/en/nevibecode/skills/bobmatnyc-tanstack-query.md) — skill · bobmatnyc · Claude Code, Codex, Cursor +3 · 583 installs — Guides AI assistants in configuring TanStack Query for React, handling server state, background caching, and optimistic updates. - [onboard](https://affpapa.org/en/nevibecode/skills/aladicf-onboard.md) — skill · aladicf · Claude Code, Codex, Cursor +3 · 521 installs — Designs a product's first run: what a new user sees, in what order, and how they reach their first win. - [security-ux](https://affpapa.org/en/nevibecode/skills/security-ux.md) — skill · aladicf · Claude Code, Codex, Cursor +3 · 519 installs — A skill for designing sign-in, MFA and account recovery screens so that security feels like control, not punishment. - [billing-sdk](https://affpapa.org/en/nevibecode/skills/billing-sdk.md) — skill · dodopayments · Claude Code, Codex, Cursor +3 · 810 installs — Guides the integration of Dodo Payments billing UI, pricing tables, and subscription management in React and Next.js apps. - [interaction-patterns-components](https://affpapa.org/en/nevibecode/skills/interaction-patterns-components.md) — skill · hueyexe · Claude Code, Codex, Cursor +3 · 539 installs — Guides the agent through picking and critiquing UI interaction patterns and reusable components: navigation, tables, modals, forms, states. - [applicationinsights-web-ts](https://affpapa.org/en/nevibecode/skills/applicationinsights-web-ts.md) — skill · Microsoft · Claude Code, GitHub Copilot · 38 installs — Set up Application Insights telemetry for browser apps, including page views, requests, and exceptions. - [framer-motion-layout](https://affpapa.org/en/nevibecode/skills/framer-motion-layout.md) — skill · C-Jeril · Claude Code, Codex, Cursor +3 · 770 installs — Provides layout animation patterns for Framer Motion, covering shared element transitions with layoutId, reorderable lists, and exit sequences via AnimatePresence. - [forms-inputs-checkout](https://affpapa.org/en/nevibecode/skills/forms-inputs-checkout.md) — skill · hueyexe · Claude Code, Codex, Cursor +3 · 524 installs — A skill for designing, critiquing and implementing forms, validation and checkout flows without breaking accessibility. - [framer-motion-gestures](https://affpapa.org/en/nevibecode/skills/framer-motion-gestures.md) — skill · C-Jeril · Claude Code, Codex, Cursor +3 · 766 installs — A skill covering Framer Motion gesture animations: drag, pan, tap, hover and focus. - [localize](https://affpapa.org/en/nevibecode/skills/aladicf-localize.md) — skill · aladicf · Claude Code, Codex, Cursor +3 · 497 installs — Guides i18n architecture across UI layouts, ICU string formatting, RTL styles, and locale routing for multilingual web apps. - [framer-motion-variants](https://affpapa.org/en/nevibecode/skills/framer-motion-variants.md) — skill · C-Jeril · Claude Code, Codex, Cursor +3 · 759 installs — Teaches coding agents to coordinate Framer Motion animations using variants, staggered lists, and custom state machines. - [indicator-dashboard](https://affpapa.org/en/nevibecode/skills/indicator-dashboard.md) — skill · marketcalls · Claude Code, Codex, Cursor +3 · 570 installs — Creates technical analysis dashboards with Plotly Dash or Streamlit. - [stream-android](https://affpapa.org/en/nevibecode/skills/stream-android.md) — skill · GetStream · Claude Code, Codex, Cursor +3 · 491 installs — A skill that wires Stream Chat, Video and Feeds into Android apps: package setup, auth, chat screens, calls and feeds. - [responsive-design](https://affpapa.org/en/nevibecode/skills/manutej-responsive-design.md) — skill · manutej · Claude Code, Codex, Cursor +3 · 511 installs — Guides coding agents in mobile-first responsive layout work using CSS Grid, Flexbox, and fluid sizing. - [vuejs-development](https://affpapa.org/en/nevibecode/skills/vuejs-development.md) — skill · manutej · Claude Code, Codex, Cursor +3 · 509 installs — A skill that gives your coding agent a Vue 3 reference: reactivity, Composition API, single-file components and directives. Next: https://affpapa.org/en/nevibecode/skills/topic/frontend.md?page=66 ## 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