# Skills for Frontend and UI Skills for Frontend and UI: what each one does, an install command and example prompts. 2909 cards · page 49 of 73 - HTML: https://affpapa.org/en/nevibecode/skills/topic/frontend?page=49 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [optimized-nextjs-typescript](https://affpapa.org/en/nevibecode/skills/optimized-nextjs-typescript.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 1000 installs — Sets opinionated Next.js and TypeScript standards focusing on React Server Components, Zod schemas, and Tailwind CSS styling. - [vuejs-typescript-best-practices](https://affpapa.org/en/nevibecode/skills/vuejs-typescript-best-practices.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 1000 installs — Hands your agent a rulebook for Vue.js and TypeScript: Composition API, Pinia, VueUse, Tailwind, plus Vite build tuning. - [figma-code-connect](https://affpapa.org/en/nevibecode/skills/figma-code-connect.md) — skill (official OpenAI) · Figma · Codex, ChatGPT · 28 installs — Creates and updates Code Connect templates that tie Figma components to code snippets. - [motion-designer](https://affpapa.org/en/nevibecode/skills/motion-designer.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 1600 installs — A skill that turns your coding agent into a motion designer: timing specs, easing curves and handoff notes for UI animation. - [remotion-video-toolkit](https://affpapa.org/en/nevibecode/skills/remotion-video-toolkit.md) — skill · shreefentsar · Claude Code, Codex, Cursor +3 · 779 installs — A skill that teaches your AI agent to write Remotion code: animations, timing, MP4 rendering, captions, charts and 3D. - [site-specification](https://affpapa.org/en/nevibecode/skills/site-specification.md) — skill · cline · Claude Code, Codex, Cursor +3 · 2100 installs — Turns brief website ideas or brand images into a JSON design specification with layout requirements, target audience, and Google Fonts. - [ui-design](https://affpapa.org/en/nevibecode/skills/mindrally-ui-design.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 981 installs — Gives the agent a checklist for interfaces: accessibility, responsive layout, performance. - [tailwind-best-practices](https://affpapa.org/en/nevibecode/skills/tailwind-best-practices.md) — skill · agent-skills · Claude Code, Codex, Cursor +3 · 954 installs — Tailwind CSS v3.4+ and v4 conventions for AI coding agents. - [shadcn](https://affpapa.org/en/nevibecode/skills/pproenca-shadcn.md) — skill · pproenca · Claude Code, Codex, Cursor +3 · 724 installs — A skill with 58 shadcn/ui rules that tells your agent how to add components, build forms and keep accessibility intact. - [internationalization-i18n](https://affpapa.org/en/nevibecode/skills/internationalization-i18n.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 978 installs — This skill gives the agent a rulebook for internationalization: translations, locale-aware dates and numbers, RTL layout. - [audit-speed](https://affpapa.org/en/nevibecode/skills/audit-speed.md) — skill · calm-north · Claude Code, Codex, Cursor +3 · 2400 installs — Traces why a page is slow: LCP, CLS, INP, FCP and TTFB with root-cause trees and a fix list. - [chrome-extension-ui](https://affpapa.org/en/nevibecode/skills/chrome-extension-ui.md) — skill · pproenca · Claude Code, Codex, Cursor +3 · 719 installs — A rule set for Chrome extension interfaces: when to use a popup versus a side panel, how to keep navigation keyboard-accessible, how to handle loading and errors. - [image-optimization](https://affpapa.org/en/nevibecode/skills/aj-geddes-image-optimization.md) — skill · aj-geddes · Claude Code, Codex, Cursor +3 · 656 installs — A skill that walks your agent through compressing images and picking modern formats. - [guide-swiftui-animations](https://affpapa.org/en/nevibecode/skills/guide-swiftui-animations.md) — skill · Prisma-Labs-Dev · Claude Code, Codex, Cursor +3 · 347 installs — A guide skill for SwiftUI motion: implicit and explicit animations, transitions, phase and keyframe animations, the Animatable protocol. - [chrome-extension](https://affpapa.org/en/nevibecode/skills/pproenca-chrome-extension.md) — skill · pproenca · Claude Code, Codex, Cursor +3 · 717 installs — A skill with 67 rules for Chrome Extensions on Manifest V3. - [brand-designer](https://affpapa.org/en/nevibecode/skills/brand-designer.md) — skill · daffy0208 · Claude Code, Codex, Cursor +3 · 1300 installs — Walks you through building a brand identity: logo concepts, color palette, typography and guidelines. - [tanstack-ai](https://affpapa.org/en/nevibecode/skills/tanstack-ai.md) — skill · tanstack-skills · Claude Code, Codex, Cursor +3 · 1600 installs — Guides agents on TanStack AI patterns for text streaming, tool calling, and typed output in React or Solid. - [tanstack-db](https://affpapa.org/en/nevibecode/skills/tanstack-db.md) — skill · tanstack-skills · Claude Code, Codex, Cursor +3 · 1600 installs — This skill guides agents through TanStack DB collections, live queries, and optimistic mutations for client-side application data. - [typography-expert](https://affpapa.org/en/nevibecode/skills/typography-expert.md) — skill · curiositech · Claude Code, Codex, Cursor +3 · 413 installs — Curates typeface pairings, fluid clamp scales, and variable font axes while retiring overused defaults like Inter, Roboto, and Montserrat. - [webflow-mcp:site-activity](https://affpapa.org/en/nevibecode/skills/webflow-mcpsite-activity.md) — skill · webflow · Claude Code, Codex, Cursor +3 · 757 installs — Inspects Webflow Enterprise activity logs to identify who made changes across pages, styles, and CMS before you publish. - [zustand-state-management](https://affpapa.org/en/nevibecode/skills/zustand-state-management.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 959 installs — Enforces Zustand store best practices in React and TypeScript apps, covering store slices, SSR, and testing. - [typescript](https://affpapa.org/en/nevibecode/skills/mindrally-typescript.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 955 installs — Enforces strict TypeScript standards and functional code patterns in your AI assistant. - [hyva-cms-component](https://affpapa.org/en/nevibecode/skills/hyva-cms-component.md) — skill · hyva-themes · Claude Code, Codex, Cursor +3 · 762 installs — Walks you through building a custom Hyvä CMS component for Magento 2: module, fields, PHTML template and setup:upgrade. - [svelte-components](https://affpapa.org/en/nevibecode/skills/svelte-components.md) — skill · spences10 · Claude Code, Codex, Cursor +3 · 531 installs — Tells your agent how to build Svelte components: headless libraries, custom elements, and forms that cannot wrap their inputs. - [pixi-js](https://affpapa.org/en/nevibecode/skills/pixi-js.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 948 installs — A skill that steers your coding agent toward performant Pixi.js games in TypeScript, with mobile and rendering advice baked in. - [layout-paradigms-and-consistency](https://affpapa.org/en/nevibecode/skills/layout-paradigms-and-consistency.md) — skill · dembrandt · Claude Code, Codex, Cursor +3 · 734 installs — Selects screen paradigms like feeds, boards, tables, and split views to maintain layout consistency across app pages and marketing funnels. - [react](https://affpapa.org/en/nevibecode/skills/mindrally-react.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 944 installs — This skill gives your agent a fixed React style: hooks, Server Components, Tailwind, TypeScript. - [hyva-cms-custom-field](https://affpapa.org/en/nevibecode/skills/hyva-cms-custom-field.md) — skill · hyva-themes · Claude Code, Codex, Cursor +3 · 752 installs — Generates custom inputs and modal handlers for Hyvä CMS components. - [flutter-navigation](https://affpapa.org/en/nevibecode/skills/flutter-navigation.md) — skill · Stanislav \[MADTeacher\] Chernyshev · Claude Code, Codex, Cursor +3 · 589 installs — A skill that makes your coding agent handle Flutter navigation: Navigator, go_router, deep links, redirects and browser history. - [internationalization-i18n](https://affpapa.org/en/nevibecode/skills/aj-geddes-internationalization-i18n.md) — skill · aj-geddes · Claude Code, Codex, Cursor +3 · 633 installs — A skill that walks your agent through shipping a multi-language app: string extraction, translation catalogs, plurals, locale-aware dates and numbers, RTL. - [antdv-next](https://affpapa.org/en/nevibecode/skills/antdv-next.md) — skill · Antdv Next team · Claude Code, Codex, Cursor +3 · 1400 installs — The skill gives your agent a local copy of the Antdv Next docs: component APIs, demos, theme tokens. - [react-nextjs-patterns](https://affpapa.org/en/nevibecode/skills/react-nextjs-patterns.md) — skill · duyet · Claude Code, Codex, Cursor +3 · 1100 installs — App Router conventions for React and Next.js projects. - [dd-browser-sdk](https://affpapa.org/en/nevibecode/skills/dd-browser-sdk.md) — skill · datadog-labs · Claude Code, Codex, Cursor +3 · 577 installs — Routes coding agents through Datadog Browser SDK upgrades from v4 to v7 and automates sourcemap uploads across major bundlers. - [hyva-cms-components-dump](https://affpapa.org/en/nevibecode/skills/hyva-cms-components-dump.md) — skill · hyva-themes · Claude Code, Codex, Cursor +3 · 744 installs — Dumps every Hyvä CMS component available in a Magento 2 project, merged across the modules that are switched on. - [data-visualization](https://affpapa.org/en/nevibecode/skills/data-visualization.md) — skill (official OpenAI) · OpenAI · Codex, ChatGPT · 26 installs — This skill routes web visualization tasks, from chart selection to maps, software diagrams, and exports. - [cloud-storage-web](https://affpapa.org/en/nevibecode/skills/cloud-storage-web.md) — skill · TencentCloudBase · Claude Code, Codex, Cursor +3 · 1000 installs — Lets the agent upload and manage CloudBase storage files from browser code with @cloudbase/js-sdk, including temporary download links. - [flutter](https://affpapa.org/en/nevibecode/skills/flutter.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 925 installs — Enforces Flutter and Dart standards: feature-first clean architecture, state management with Riverpod or BLoC, and strict limits on widget tree depth. - [threejs-3d-graphics](https://affpapa.org/en/nevibecode/skills/threejs-3d-graphics.md) — skill · omer-metin · Claude Code, Codex, Cursor +3 · 457 installs — Configures the agent as a senior Three.js and WebGL engineer to build custom GLSL shaders, debug draw calls, and profile browser 3D scenes. - [color-accessibility](https://affpapa.org/en/nevibecode/skills/color-accessibility.md) — skill · aj-geddes · Claude Code, Codex, Cursor +3 · 619 installs — Guides accessible palette design under WCAG AA and AAA standards, including support for color blindness. - [deno-frontend](https://affpapa.org/en/nevibecode/skills/deno-frontend.md) — skill · denoland · Claude Code, Codex, Cursor +3 · 408 installs — Guides frontend development on Deno. Next: https://affpapa.org/en/nevibecode/skills/topic/frontend.md?page=50 ## 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