# Skills for Frontend and UI Skills for Frontend and UI: what each one does, an install command and example prompts. 2909 cards · page 53 of 73 - HTML: https://affpapa.org/en/nevibecode/skills/topic/frontend?page=53 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [shopify](https://affpapa.org/en/nevibecode/skills/mindrally-shopify.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 717 installs — Development guidelines for Shopify themes, covering Liquid templates, Online Store 2.0 architecture, and cart operations. - [accessibility-compliance](https://affpapa.org/en/nevibecode/skills/aj-geddes-accessibility-compliance.md) — skill · aj-geddes · Claude Code, Codex, Cursor +3 · 482 installs — This skill guides accessibility work for WCAG 2.1/2.2, keyboard navigation, screen readers and a11y checks in web interfaces. - [web-performance-optimization](https://affpapa.org/en/nevibecode/skills/aj-geddes-web-performance-optimization.md) — skill · aj-geddes · Claude Code, Codex, Cursor +3 · 482 installs — A skill for speeding up web apps: code splitting, lazy loading, caching, compression and monitoring. - [animate](https://affpapa.org/en/nevibecode/skills/onewave-ai-animate.md) — skill · OneWave-AI · Claude Code, Codex, Cursor +3 · 394 installs — Creates animated videos and motion graphics from natural language prompts. - [playwright-visual-testing](https://affpapa.org/en/nevibecode/skills/playwright-visual-testing.md) — skill · manutej · Claude Code, Codex, Cursor +3 · 1400 installs — Use Playwright MCP to inspect web pages, capture screenshots, and exercise user flows. - [frontend-state-management](https://affpapa.org/en/nevibecode/skills/frontend-state-management.md) — skill · aj-geddes · Claude Code, Codex, Cursor +3 · 480 installs — A skill that guides your agent through frontend state management: Redux, MobX, Zustand or the Context API. - [cypress](https://affpapa.org/en/nevibecode/skills/cypress.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 712 installs — Instructs coding agents to generate resilient Cypress end-to-end tests with reliable selectors, network mocks, and proper command queuing. - [vercel-development](https://affpapa.org/en/nevibecode/skills/vercel-development.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 712 installs — A rule set that steers your coding agent toward Next.js App Router, React Server Components and the Vercel AI SDK. - [postcss-best-practices](https://affpapa.org/en/nevibecode/skills/postcss-best-practices.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 710 installs — Skill providing PostCSS configuration patterns, CSS minification rules, and build tool setup for Vite, Webpack, and Next.js. - [capacitor-splash-screen](https://affpapa.org/en/nevibecode/skills/capacitor-splash-screen.md) — skill · Cap-go · Claude Code, Codex, Cursor +3 · 1100 installs — A skill that traces why a Capacitor app flashes white at launch or never hides its splash, then fixes the config, Android 12+ theme and iOS storyboard. - [react-router-v7](https://affpapa.org/en/nevibecode/skills/react-router-v7.md) — skill · existential-birds · Claude Code, Codex, Cursor +3 · 572 installs — A skill that gives your agent React Router v7 practices: when to reach for a loader, a Form or a fetcher, and how nested routes fit together. - [data-viz-2025](https://affpapa.org/en/nevibecode/skills/data-viz-2025.md) — skill · curiositech · Claude Code, Codex, Cursor +3 · 304 installs — A skill for React, Next.js and TypeScript projects: helps build interactive charts, dashboards and data stories with Tailwind CSS. - [zod](https://affpapa.org/en/nevibecode/skills/secondsky-zod.md) — skill · secondsky · Claude Code, Codex, Cursor +3 · 647 installs — Provides Zod 4 schema patterns and type inference rules for agent sessions. - [dark-mode-design-expert](https://affpapa.org/en/nevibecode/skills/dark-mode-design-expert.md) — skill · curiositech · Claude Code, Codex, Cursor +3 · 304 installs — A skill for dark mode UI work: atmospheric palettes, WCAG contrast rules and tokens that cover both light and dark schemes. - [ionic-app-development](https://affpapa.org/en/nevibecode/skills/ionic-app-development.md) — skill · capawesome-team · Claude Code, Codex, Cursor +3 · 1300 installs — Guides coding agents through Ionic Framework development, covering 80+ UI components, CLI commands, and page lifecycle hooks for existing apps. - [ionic-expert](https://affpapa.org/en/nevibecode/skills/ionic-expert.md) — skill · capawesome-team · Claude Code, Codex, Cursor +3 · 1300 installs — A skill that hands your agent a working reference for Ionic Framework: components, CLI, theming, navigation and Angular, React, Vue patterns. - [angular-development](https://affpapa.org/en/nevibecode/skills/angular-development.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 705 installs — Tells the agent how to write Angular, SASS and TypeScript: strict typing, standalone components, signals. - [vtex-io-react-apps](https://affpapa.org/en/nevibecode/skills/vtex-io-react-apps.md) — skill · vtex · Claude Code, Codex, Cursor +3 · 1500 installs — A skill for VTEX IO frontend work: it guides React components under the react builder, theme block registration and Site Editor setup. - [esbuild-bundler](https://affpapa.org/en/nevibecode/skills/esbuild-bundler.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 697 installs — Teaches agents best practices for esbuild across browser and Node.js environments. - [wechat-miniprogram](https://affpapa.org/en/nevibecode/skills/wechat-miniprogram.md) — skill · joneqian · Claude Code, Codex, Cursor +3 · 593 installs — A skill for building WeChat Mini Programs: WXML templates, WXSS styles, WXS scripts, custom components and WeChat API calls. - [monorepo](https://affpapa.org/en/nevibecode/skills/monorepo.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 694 installs — A skill that hands your agent a rulebook for monorepos built on TypeScript, React, Next.js and Expo with Turbo. - [less-best-practices](https://affpapa.org/en/nevibecode/skills/less-best-practices.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 692 installs — This skill guides coding assistants on Less architecture, modular project layout, variable scales, and reusable mixins. - [hebrew-rtl-best-practices](https://affpapa.org/en/nevibecode/skills/hebrew-rtl-best-practices.md) — skill · skills-il · Claude Code, Codex, Cursor +3 · 695 installs — Guides your coding assistant through Hebrew right-to-left layout rules, CSS logical properties, and bidirectional text handling for web apps. - [rspack-v2-upgrade](https://affpapa.org/en/nevibecode/skills/rspack-v2-upgrade.md) — skill · rstackjs · Claude Code, Codex, Cursor +3 · 515 installs — Walks a Rspack 1.x project through the v2 upgrade: dependencies, config, build checks. - [localization-l10n](https://affpapa.org/en/nevibecode/skills/localization-l10n.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 689 installs — Guides AI coding assistants through localization best practices. - [remix](https://affpapa.org/en/nevibecode/skills/remix.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 686 installs — A skill that turns your coding agent into a Remix and TypeScript helper, with ready patterns for data loading, mutations and nested routes. - [scroll-animations](https://affpapa.org/en/nevibecode/skills/scroll-animations.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 1100 installs — A skill for animations tied to scrolling: reveal effects, parallax, sticky headers, progress bars. - [cra-to-next-migration](https://affpapa.org/en/nevibecode/skills/cra-to-next-migration.md) — skill · community · Claude Code, Codex, Cursor +3 · 900 installs — Guides code assistants through migrating Create React App codebases to Next.js 16+. - [muapi-ui-design](https://affpapa.org/en/nevibecode/skills/muapi-ui-design.md) — skill · SamurAIGPT · Claude Code, Codex, Cursor +3 · 2800 installs — Turns a product brief into a design spec for high-fidelity UI mockups and wireframes: atomic design, tokens, layout patterns. - [clerk-authentication](https://affpapa.org/en/nevibecode/skills/clerk-authentication.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 683 installs — Rules for wiring Clerk into Next.js: middleware, hooks, protected server actions and API routes. - [turbopack-bundler](https://affpapa.org/en/nevibecode/skills/turbopack-bundler.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 676 installs — Skill providing Turbopack configuration guidelines and best practices for Next.js. - [apollo-graphql](https://affpapa.org/en/nevibecode/skills/apollo-graphql.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 677 installs — A skill that gives the agent rules for Apollo Client work: queries, mutations, fragments, caching and optimistic updates in React GraphQL apps. - [monorepo-tamagui](https://affpapa.org/en/nevibecode/skills/monorepo-tamagui.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 677 installs — Gives your agent a rulebook for cross-platform monorepos built on Tamagui, Turbo, Next.js, Expo and Supabase. - [ratatui-tui](https://affpapa.org/en/nevibecode/skills/ratatui-tui.md) — skill · blacktop · Claude Code, Codex, Cursor +3 · 722 installs — Walks your agent through building terminal UIs with ratatui: project templates, widgets, layout, async events. - [react-native-cursor-rules](https://affpapa.org/en/nevibecode/skills/react-native-cursor-rules.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 670 installs — A rule set that tells your coding agent how to write React Native: typed TypeScript, functional components, fewer re-renders, tuned FlatLists. - [chart-animation](https://affpapa.org/en/nevibecode/skills/chart-animation.md) — skill · iart-ai · Claude Code, Codex, Cursor +3 · 1200 installs — Teaches agents to generate data-driven chart animations and bar chart races using Remotion and D3. - [eslint-prettier-config](https://affpapa.org/en/nevibecode/skills/eslint-prettier-config.md) — skill · patricio0312rev · Claude Code, Codex, Cursor +3 · 1100 installs — Sets up ESLint and Prettier in a TypeScript and React project: configs, rules, scripts and a pre-commit hook. - [performance-engineer](https://affpapa.org/en/nevibecode/skills/zhaono1-performance-engineer.md) — skill · zhaono1 · Claude Code, Codex, Cursor +3 · 707 installs — Pinpoints application bottlenecks and guides code optimization. - [frontend-react-router-best-practices](https://affpapa.org/en/nevibecode/skills/frontend-react-router-best-practices.md) — skill · sergiodxa · Claude Code, Codex, Cursor +3 · 401 installs — React Router architecture and performance rules for coding agents. - [ios-glass-ui-designer](https://affpapa.org/en/nevibecode/skills/ios-glass-ui-designer.md) — skill · heyman333 · Claude Code, Codex, Cursor +3 · 504 installs — Redesigns a mobile app UI to feel iOS-native: glass materials, SF Pro type, safe-area handling. Next: https://affpapa.org/en/nevibecode/skills/topic/frontend.md?page=54 ## 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