# Skills for Frontend and UI Skills for Frontend and UI: what each one does, an install command and example prompts. 2909 cards · page 34 of 73 - HTML: https://affpapa.org/en/nevibecode/skills/topic/frontend?page=34 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [playwright-e2e-testing](https://affpapa.org/en/nevibecode/skills/playwright-e2e-testing.md) — skill · fugazi · Claude Code, Codex, Cursor +3 · 615 installs — A skill for writing and maintaining Playwright E2E specs in TypeScript: user flows, forms, auth, API mocking and visual comparisons. - [web-frameworks](https://affpapa.org/en/nevibecode/skills/web-frameworks.md) — skill · mrgoonie · Claude Code, Codex, Cursor +3 · 372 installs — A skill group for full-stack work: it gives the agent references for Next.js, Turborepo monorepos and RemixIcon so it stops guessing at project structure. - [fire-paper-loader](https://affpapa.org/en/nevibecode/skills/fire-paper-loader.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 319 installs — Builds a burning-paper ring loader using WebGL 1 and OffscreenCanvas in a Worker. - [shopify-theme-optimization](https://affpapa.org/en/nevibecode/skills/shopify-theme-optimization.md) — skill · nexscope-ai · Claude Code, Codex, Cursor +3 · 1100 installs — A skill that audits Shopify theme speed and UX: Core Web Vitals, Liquid, image loading, mobile layout. - [brand-visual-generator](https://affpapa.org/en/nevibecode/skills/brand-visual-generator.md) — skill · kostja94 · Claude Code, Codex, Cursor +3 · 1400 installs — A skill that helps define or audit visual identity: typography, color palette, spacing, design tokens and frontend aesthetics. - [nextjs-react-typescript](https://affpapa.org/en/nevibecode/skills/nextjs-react-typescript.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 5200 installs — A skill that sets code style for Next.js App Router, React, TypeScript, Shadcn UI and Tailwind. - [design-loop](https://affpapa.org/en/nevibecode/skills/design-loop.md) — skill · jezweb · Claude Code, Codex, Cursor +3 · 1000 installs — The skill runs a baton-passing loop: it reads a task from a file, generates an HTML/Tailwind page, wires it into the site, then writes the next task. - [macos-notch-ui](https://affpapa.org/en/nevibecode/skills/macos-notch-ui.md) — skill · fayazara · Claude Code, Codex, Cursor +3 · 557 installs — Build a macOS panel that opens from the screen notch. - [tailwind-css](https://affpapa.org/en/nevibecode/skills/tailwind-css.md) — skill · PaulRBerg · Claude Code, Codex, Cursor +3 · 3000 installs — Guides coding agents on Tailwind CSS styling, v4 migrations, and class updates while enforcing real build checks and DOM inspection. - [yyl-remotion-video](https://affpapa.org/en/nevibecode/skills/yyl-remotion-video.md) — skill · ttfake92-lab · Claude Code, Codex, Cursor +3 · 503 installs — Turns an article, script or notes into a Remotion project and renders mp4. - [ui-components](https://affpapa.org/en/nevibecode/skills/ui-components.md) — skill · OrchestKit · Claude Code, Codex, Cursor +3 · 1500 installs — Supplies component library rules for shadcn/ui and Radix Primitives. - [nuxt-i18n](https://affpapa.org/en/nevibecode/skills/nuxt-i18n.md) — skill · onmax · Claude Code, Codex, Cursor +3 · 589 installs — A skill that walks your coding agent through @nuxtjs/i18n setup: locales, translated routes, language detection and locale SEO. - [playwright-core](https://affpapa.org/en/nevibecode/skills/playwright-core.md) — skill · testdino-hq · Claude Code, Codex, Cursor +3 · 778 installs — Provides battle-tested Playwright patterns for E2E, API, and component tests in TypeScript and JavaScript. - [ui-craft-dense-dashboard](https://affpapa.org/en/nevibecode/skills/ui-craft-dense-dashboard.md) — skill · educlopez · Claude Code, Codex, Cursor +3 · 1200 installs — Locks an agent into a data-first style for admin panels and analytics views: tight grid, mono numbers, semantic colors. - [uni-app](https://affpapa.org/en/nevibecode/skills/uni-app.md) — skill · FlippeDround · Claude Code, Codex, Cursor +3 · 2000 installs — A skill that feeds your agent a structured uni-app reference: components, APIs and build rules for iOS, Android, HarmonyOS, web and mini-programs. - [design](https://affpapa.org/en/nevibecode/skills/rshankras-design.md) — skill · rshankras · Claude Code, Codex, Cursor +3 · 677 installs — Design skills for Apple platform UI: Liquid Glass, animations, game feel, UX writing, SF Symbols and typography. - [zustand-patterns](https://affpapa.org/en/nevibecode/skills/zustand-patterns.md) — skill · OrchestKit · Claude Code, Codex, Cursor +3 · 1400 installs — A reference for Zustand 5.x state management: slices, middleware, Immer, useShallow, persistence and devtools. - [odoo-18](https://affpapa.org/en/nevibecode/skills/odoo-18.md) — skill · unclecatvn · Claude Code, Codex, Cursor +3 · 1500 installs — Odoo 18 development reference for AI agents. - [astro-framework](https://affpapa.org/en/nevibecode/skills/astro-framework.md) — skill · delineas · Claude Code, Codex, Cursor +3 · 2200 installs — A skill that turns your coding agent into a senior Astro engineer. - [react-pdf](https://affpapa.org/en/nevibecode/skills/molefrog-react-pdf.md) — skill · molefrog · Claude Code, Codex, Cursor +3 · 751 installs — Builds PDF documents using the @react-pdf/renderer library. - [om-ux-setup](https://affpapa.org/en/nevibecode/skills/om-ux-setup.md) — skill · open-mercato · Claude Code, Codex, Cursor +3 · 2500 installs — Pulls your repository's design system into .uxproof/ so UX skills judge code against your rules, not a built-in one. - [om-ux-review-pr](https://affpapa.org/en/nevibecode/skills/om-ux-review-pr.md) — skill · open-mercato · Claude Code, Codex, Cursor +3 · 2600 installs — Reviews UI changes in a real browser, tests user flows, and posts impact-ranked design findings with screenshot evidence. - [nextjs-seo](https://affpapa.org/en/nevibecode/skills/nextjs-seo.md) — skill · laguagu · Claude Code, Codex, Cursor +3 · 2400 installs — Audits and implements SEO for Next.js App Router, from metadata to indexing diagnosis. - [mantine-form](https://affpapa.org/en/nevibecode/skills/mantine-form.md) — skill · mantinedev · Claude Code, Codex, Cursor +3 · 2700 installs — A skill for building forms with @mantine/form: validation rules, zod and valibot schemas, nested fields and arrays. - [open-graph](https://affpapa.org/en/nevibecode/skills/open-graph.md) — skill · kostja94 · Claude Code, Codex, Cursor +3 · 1200 installs — Configures and audits Open Graph metadata for social preview cards. - [sentry-svelte-sdk](https://affpapa.org/en/nevibecode/skills/sentry-svelte-sdk.md) — skill · getsentry · Claude Code, Codex, Cursor +3 · 2100 installs — A skill that walks your agent through full Sentry setup in Svelte and SvelteKit: it scans the project, proposes a feature set and writes the config files. - [sap-fiori-guidelines](https://affpapa.org/en/nevibecode/skills/sap-fiori-guidelines.md) — skill · SAP · Claude Code, Codex, Cursor +3 · 1200 installs — A skill that feeds your agent the official SAP Fiori design system rules: buttons, forms, tables, page types, colors, accessibility and Joule patterns. - [motion-dev-animations](https://affpapa.org/en/nevibecode/skills/motion-dev-animations.md) — skill · Motion Dev Standards · Claude Code, Codex, Cursor +3 · 594 installs — Generates GPU-accelerated Motion.dev animations for React, Next.js, Svelte, and Astro. - [ue-ui-umg-slate](https://affpapa.org/en/nevibecode/skills/ue-ui-umg-slate.md) — skill · quodsoler · Claude Code, Codex, Cursor +3 · 1400 installs — Guides AI coding agents when writing or fixing Unreal Engine 5.8 UI in C++, covering UMG, Slate, Common UI, and MVVM. - [navigation-menu-generator](https://affpapa.org/en/nevibecode/skills/navigation-menu-generator.md) — skill · kostja94 · Claude Code, Codex, Cursor +3 · 1100 installs — A deprecated compatibility skill for navigation menu construction. - [favicon-generator](https://affpapa.org/en/nevibecode/skills/favicon-generator.md) — skill · kostja94 · Claude Code, Codex, Cursor +3 · 1100 installs — Walks through favicon and app icon setup: sizes, formats, HTML tags and what Google Search expects from the icon. - [affiliate-page-generator](https://affpapa.org/en/nevibecode/skills/affiliate-page-generator.md) — skill · kostja94 · Claude Code, Codex, Cursor +3 · 1100 installs — Deprecated compatibility stub for affiliate program page generation. - [mobile-friendly](https://affpapa.org/en/nevibecode/skills/mobile-friendly.md) — skill · kostja94 · Claude Code, Codex, Cursor +3 · 1100 installs — Audits the mobile version of a page: viewport, font size, tap targets, content parity with desktop. - [twitter-cards](https://affpapa.org/en/nevibecode/skills/twitter-cards.md) — skill · kostja94 · Claude Code, Codex, Cursor +3 · 1100 installs — Sets up and audits Twitter and X Card metadata for link previews in social feeds. - [core-web-vitals](https://affpapa.org/en/nevibecode/skills/kostja94-core-web-vitals.md) — skill · kostja94 · Claude Code, Codex, Cursor +3 · 1100 installs — This skill diagnoses LCP, INP, and CLS problems and turns them into prioritized fixes. - [image-optimization](https://affpapa.org/en/nevibecode/skills/image-optimization.md) — skill · kostja94 · Claude Code, Codex, Cursor +3 · 1100 installs — Guides responsive image markup, WebP compression, and sitemaps for Google Search. - [miniprogram-development](https://affpapa.org/en/nevibecode/skills/miniprogram-development.md) — skill · TencentCloudBase · Claude Code, Codex, Cursor +3 · 4400 installs — Guides the creation, debugging, preview, and deployment of WeChat Mini Programs. - [lynx-devtool](https://affpapa.org/en/nevibecode/skills/lynx-devtool.md) — skill · lynx-community · Claude Code, Codex, Cursor +3 · 6200 installs — Controls Lynx apps on Android, iOS, and Desktop using the agent-lynx CLI. - [react-hook-form](https://affpapa.org/en/nevibecode/skills/react-hook-form.md) — skill · pproenca · Claude Code, Codex, Cursor +3 · 3000 installs — Optimizes client-side forms using React Hook Form 7.82.0 and prevents unnecessary re-renders across field subscriptions, validation, and controlled UI inputs. - [sentry-tanstack-start-sdk](https://affpapa.org/en/nevibecode/skills/sentry-tanstack-start-sdk.md) — skill · getsentry · Claude Code, Codex, Cursor +3 · 1900 installs — Configures Sentry SDK in TanStack Start React applications. Next: https://affpapa.org/en/nevibecode/skills/topic/frontend.md?page=35 ## 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