# Skills for Frontend and UI Skills for Frontend and UI: what each one does, an install command and example prompts. 2909 cards · page 44 of 73 - HTML: https://affpapa.org/en/nevibecode/skills/topic/frontend?page=44 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [react-flow](https://affpapa.org/en/nevibecode/skills/react-flow.md) — skill · existential-birds · Claude Code, Codex, Cursor +3 · 1300 installs — Provides workflow diagram patterns using @xyflow/react. - [adding-error-tracking](https://affpapa.org/en/nevibecode/skills/adding-error-tracking.md) — skill · spencerpauly · Claude Code, Codex, Cursor +3 · 386 installs — This skill wires Sentry into a web app: error tracking, performance traces and source maps. - [comparing-branches-visually](https://affpapa.org/en/nevibecode/skills/comparing-branches-visually.md) — skill · spencerpauly · Claude Code, Codex, Cursor +3 · 383 installs — Checks out two branches in separate worktrees, runs both dev servers on different ports, screenshots the same pages and reports before/after. - [react-web](https://affpapa.org/en/nevibecode/skills/react-web.md) — skill · alinaqi · Claude Code, Codex, Cursor +3 · 339 installs — Enforces test-first development for React components and pages using React Testing Library. - [static-rendering](https://affpapa.org/en/nevibecode/skills/static-rendering.md) — skill · patterns.dev · Claude Code, Codex, Cursor +3 · 910 installs — A skill that walks your agent through static generation: which pages can be pre-rendered to HTML at build time and how to do it in Next.js. - [site-architecture](https://affpapa.org/en/nevibecode/skills/alinaqi-site-architecture.md) — skill · alinaqi · Claude Code, Codex, Cursor +3 · 336 installs — Sets up technical SEO foundations: robots.txt rules, XML sitemaps, Open Graph metadata, and crawler access for search engines and AI bots. - [iphone-duo-vertical-bars](https://affpapa.org/en/nevibecode/skills/iphone-duo-vertical-bars.md) — skill · mirzaaghazadeh · Claude Code, Codex, Cursor +3 · 596 installs — A skill that tells the agent how to move toolbars, navigation bars and tab bars onto the vertical axis on iPhone Duo, and what the code needs first. - [nextjs-shadcn](https://affpapa.org/en/nevibecode/skills/nextjs-shadcn.md) — skill · laguagu · Claude Code, Codex, Cursor +3 · 835 installs — A skill that steers the agent through building Next.js interfaces with shadcn/ui, picking typography, theme, backgrounds and motion for the product. - [adding-analytics](https://affpapa.org/en/nevibecode/skills/adding-analytics.md) — skill · spencerpauly · Claude Code, Codex, Cursor +3 · 371 installs — Guides the AI agent in setting up PostHog analytics, page view tracking, feature flags, and session replay across web apps. - [programmatic-seo](https://affpapa.org/en/nevibecode/skills/openclaudia-programmatic-seo.md) — skill · OpenClaudia · Claude Code, Codex, Cursor +3 · 419 installs — Walks you through building many similar SEO pages from one template and a data source: cities, comparisons, integrations. - [streaming-ssr](https://affpapa.org/en/nevibecode/skills/streaming-ssr.md) — skill · patterns.dev · Claude Code, Codex, Cursor +3 · 883 installs — Teaches the agent to flush HTML in chunks with renderToPipeableStream and Suspense. - [signup-flow-cro](https://affpapa.org/en/nevibecode/skills/openclaudia-signup-flow-cro.md) — skill · OpenClaudia · Claude Code, Codex, Cursor +3 · 417 installs — Audits registration funnels and reduces form abandonment. - [adding-stripe](https://affpapa.org/en/nevibecode/skills/adding-stripe.md) — skill · spencerpauly · Claude Code, Codex, Cursor +3 · 369 installs — Walks the agent through Stripe setup: SDK, keys, checkout sessions, webhooks and a customer portal for subscriptions. - [slide-creator](https://affpapa.org/en/nevibecode/skills/slide-creator.md) — skill · Starchild-ai-agent · Claude Code, Codex, Cursor +3 · 4100 installs — Builds 16:9 presentation slide decks using HTML and CSS, then renders them to PDF via headless Chromium. - [adding-feature-flags](https://affpapa.org/en/nevibecode/skills/adding-feature-flags.md) — skill · spencerpauly · Claude Code, Codex, Cursor +3 · 361 installs — Adds feature toggles for gradual rollouts and A/B tests using PostHog or local environment variables. - [tanstack-virtual](https://affpapa.org/en/nevibecode/skills/tanstack-virtual.md) — skill · tanstack-skills · Claude Code, Codex, Cursor +3 · 2500 installs — A skill that shows the agent how to wire up TanStack Virtual so only visible rows render in long lists, tables and grids. - [tailwindcss](https://affpapa.org/en/nevibecode/skills/mindrally-tailwindcss.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 1500 installs — Tells the agent how to write TailwindCSS: utility classes in markup, mobile-first breakpoints, dark mode through the dark: variant. - [mobile-touch](https://affpapa.org/en/nevibecode/skills/mobile-touch.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 2400 installs — A skill that steers your coding agent through gesture, haptic and animation work on iOS and Android. - [playwright](https://affpapa.org/en/nevibecode/skills/pymodel-playwright.md) — skill · PyModel · Claude Code, Codex, Cursor +3 · 485 installs — A Playwright skill for Next.js with 45 rules across 8 categories, from test architecture to CI debugging. - [framer-motion](https://affpapa.org/en/nevibecode/skills/pproenca-framer-motion.md) — skill · pproenca · Claude Code, Codex, Cursor +3 · 1100 installs — Optimizes React animations using Framer Motion guidelines: slashes bundle size, eliminates unnecessary re-renders, and polishes gesture or scroll transitions. - [react-native-moq](https://affpapa.org/en/nevibecode/skills/react-native-moq.md) — skill · software-mansion-labs · Claude Code, Codex, Cursor +3 · 398 installs — This skill guides live video, audio, and data work over a MoQ relay in React Native. - [api-design](https://affpapa.org/en/nevibecode/skills/margelo-api-design.md) — skill · margelo · Claude Code, Codex, Cursor +3 · 609 installs — This skill shapes and reviews public APIs for TypeScript, JavaScript, React, and React Native libraries before implementation. - [maplibre-mapbox-migration](https://affpapa.org/en/nevibecode/skills/maplibre-mapbox-migration.md) — skill · maplibre · Claude Code, Codex, Cursor +3 · 464 installs — Guides the transition from Mapbox GL JS to MapLibre GL JS across imports, CSS, and tile configurations. - [sap-fiori-add-visual-filter](https://affpapa.org/en/nevibecode/skills/sap-fiori-tools-sap-fiori-add-visual-filter.md) — skill · sap-fiori-tools · Claude Code, Codex, Cursor +3 · 603 installs — Adds chart-based visual filters to SAP Fiori Elements filter bars and value help dialogs using CAP or ABAP RAP. - [typescript-react-reviewer](https://affpapa.org/en/nevibecode/skills/typescript-react-reviewer.md) — skill · dotneet · Claude Code, Codex, Cursor +3 · 9000 installs — A code review skill for TypeScript and React 19 apps. - [css-animation-creator](https://affpapa.org/en/nevibecode/skills/css-animation-creator.md) — skill · OneWave-AI · Claude Code, Codex, Cursor +3 · 805 installs — A coding-agent skill for writing CSS animations, transitions, micro-interactions and scroll effects. - [sap-fiori-app-development](https://affpapa.org/en/nevibecode/skills/sap-fiori-app-development.md) — skill · sap-fiori-tools · Claude Code, Codex, Cursor +3 · 595 installs — A skill that tells the agent how to build SAP Fiori Elements apps: List Report, Object Page, Worklist, wired to CAP or an OData service. - [sap-fiori-analytical-chart](https://affpapa.org/en/nevibecode/skills/sap-fiori-analytical-chart.md) — skill · sap-fiori-tools · Claude Code, Codex, Cursor +3 · 591 installs — A skill that puts an aggregated chart above the table on a SAP Fiori Elements List Report. - [chart](https://affpapa.org/en/nevibecode/skills/chart.md) — skill · Starchild-ai-agent · Claude Code, Codex, Cursor +3 · 3900 installs — Builds interactive charts on Apache ECharts: line, bar, candlestick, scatter. - [mapbox-ios-patterns](https://affpapa.org/en/nevibecode/skills/mapbox-ios-patterns.md) — skill · mapbox · Claude Code, Codex, Cursor +3 · 1500 installs — Official integration patterns for Mapbox Maps SDK v11 on iOS in Swift, SwiftUI and UIKit. - [mapbox-mcp-devkit-patterns](https://affpapa.org/en/nevibecode/skills/mapbox-mcp-devkit-patterns.md) — skill · mapbox · Claude Code, Codex, Cursor +3 · 1500 installs — A skill that shows your AI assistant how to drive the Mapbox MCP DevKit Server: styles, tokens, validation and docs lookup from the chat. - [sap-fiori-eslint-plugin](https://affpapa.org/en/nevibecode/skills/sap-fiori-eslint-plugin.md) — skill · sap-fiori-tools · Claude Code, Codex, Cursor +3 · 584 installs — This skill sets up, migrates and runs ESLint with @sap-ux/eslint-plugin-fiori-tools in SAP Fiori projects. - [sap-fiori-create-cli](https://affpapa.org/en/nevibecode/skills/sap-fiori-create-cli.md) — skill · sap-fiori-tools · Claude Code, Codex, Cursor +3 · 584 installs — Wires the @sap-ux/create CLI into your agent: generate SAP Fiori apps, add configs, convert projects. - [frontend-accessibility-best-practices](https://affpapa.org/en/nevibecode/skills/frontend-accessibility-best-practices.md) — skill · sergiodxa · Claude Code, Codex, Cursor +3 · 863 installs — A skill with 7 accessibility rules for React: semantic markup, screen readers, keyboard support, user preferences. - [css-architecture](https://affpapa.org/en/nevibecode/skills/css-architecture.md) — skill · aj-geddes · Claude Code, Codex, Cursor +3 · 959 installs — A skill that gives your coding agent conventions for structuring CSS with BEM, SMACSS and CSS-in-JS. - [pulsar-haptics](https://affpapa.org/en/nevibecode/skills/pulsar-haptics.md) — skill · software-mansion-labs · Claude Code, Codex, Cursor +3 · 380 installs — Integrates Software Mansion Pulsar haptic feedback across mobile and web frameworks. - [animation-designer](https://affpapa.org/en/nevibecode/skills/animation-designer.md) — skill · daffy0208 · Claude Code, Codex, Cursor +3 · 1900 installs — A skill that hands your agent ready-made web animation patterns: page transitions, component reveals, parallax and micro-interactions. - [aem-cli](https://affpapa.org/en/nevibecode/skills/aem-cli.md) — skill · adobe · Claude Code, Codex, Cursor +3 · 840 installs — Helps configure and run the Adobe AEM CLI for Edge Delivery Services, resolve dev server errors, manage TLS, and handle content sync. - [lorem-ipsum](https://affpapa.org/en/nevibecode/skills/lorem-ipsum.md) — skill · intellectronica · Claude Code, Codex, Cursor +3 · 511 installs — Generates structured lorem ipsum filler text using a bundled Python script. - [react-query](https://affpapa.org/en/nevibecode/skills/react-query.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 1400 installs — Tells the agent how to fetch and cache server data in React: queries, mutations, invalidation and optimistic updates. Next: https://affpapa.org/en/nevibecode/skills/topic/frontend.md?page=45 ## 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