# Skills for Frontend and UI Skills for Frontend and UI: what each one does, an install command and example prompts. 2909 cards · page 13 of 73 - HTML: https://affpapa.org/en/nevibecode/skills/topic/frontend?page=13 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [flutter-dev](https://affpapa.org/en/nevibecode/skills/flutter-dev.md) — skill · MiniMax-AI · Claude Code, Codex, Cursor +3 · 2000 installs — A Flutter development guide for widget patterns, Riverpod, Bloc, and GoRouter. - [uniwind](https://affpapa.org/en/nevibecode/skills/uniwind.md) — skill · uni-stack · Claude Code, Codex, Cursor +3 · 4500 installs — A skill that hands the agent Uniwind's rules and reference files, so it builds and debugs Tailwind CSS v4 interfaces in React Native instead of guessing APIs. - [chat-motion-overlay](https://affpapa.org/en/nevibecode/skills/chat-motion-overlay.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 829 installs — Builds animated chat scenes from text or screenshots, then prepares them for Remotion rendering. - [react19-test-patterns](https://affpapa.org/en/nevibecode/skills/react19-test-patterns.md) — skill (official GitHub) · github · GitHub Copilot · 1200 installs — A migration reference for updating test files to work with React 19. - [remotion](https://affpapa.org/en/nevibecode/skills/vercel-labs-remotion.md) — skill · vercel-labs · Claude Code, Codex, Cursor +3 · 1700 installs — A skill that turns JSON timeline specs into ready-made video compositions via Remotion. - [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/nexu-io-design-taste-frontend.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 808 installs — Skill for landing pages, portfolios and redesigns. - [audio-and-sound](https://affpapa.org/en/nevibecode/skills/audio-and-sound.md) — skill · phaserjs · Claude Code, Codex, Cursor +3 · 944 installs — Adds audio loading, background music, volume controls, and spatial audio to Phaser 4 games using SoundManager and the Web Audio API. - [write-unit-tests](https://affpapa.org/en/nevibecode/skills/write-unit-tests.md) — skill · tldraw · Claude Code, Codex, Cursor +3 · 498 installs — A skill that guides writing unit and integration tests in the tldraw repo: where test files belong, how to drive TestEditor, and which Vitest traps to avoid. - [react-native-dev](https://affpapa.org/en/nevibecode/skills/react-native-dev.md) — skill · MiniMax-AI · Claude Code, Codex, Cursor +3 · 1900 installs — A React Native and Expo reference set for your agent: routing, lists, animation, state, tests and shipping. - [resource-curator](https://affpapa.org/en/nevibecode/skills/resource-curator.md) — skill · leonardomso · Claude Code, Codex, Cursor +3 · 320 installs — Audits, discovers, and organizes external learning resources for JavaScript concept documentation. - [landing-page-design](https://affpapa.org/en/nevibecode/skills/elayadesign-landing-page-design.md) — skill · elayadesign · Claude Code, Codex, Cursor +3 · 1800 installs — A skill that walks the agent through a landing page: intake questions and page structure first, then fixed rules for type, spacing and backgrounds. - [kumo-design](https://affpapa.org/en/nevibecode/skills/kumo-design.md) — skill · cloudflare · Claude Code, Codex, Cursor +3 · 1500 installs — Cloudflare product design rules for coding agents: guides layout, typography, dialogs, and animations in Kumo UI dashboards. - [tweens](https://affpapa.org/en/nevibecode/skills/tweens.md) — skill · phaserjs · Claude Code, Codex, Cursor +3 · 899 installs — Teaches coding agents how to animate properties in Phaser 4 using TweenManager, tween chains, stagger offsets, and number counters. - [visual-verdict](https://affpapa.org/en/nevibecode/skills/visual-verdict.md) — skill · Yeachan-Heo · Claude Code, Codex, Cursor +3 · 901 installs — A visual QA skill that compares generated UI screenshots against reference images and returns a structured JSON verdict for layout iterations. - [react19-concurrent-patterns](https://affpapa.org/en/nevibecode/skills/react19-concurrent-patterns.md) — skill (official GitHub) · github · GitHub Copilot · 1100 installs — Preserves React 18 concurrent patterns during React 19 migrations and guides the adoption of use(), useOptimistic, and Actions. - [frontend-developer](https://affpapa.org/en/nevibecode/skills/frontend-developer.md) — skill · sickn33 · Claude Code, Codex, Cursor +3 · 1300 installs — Guides an agent through React and Next.js interface work, from responsive components to client-side state and accessibility. - [radix-ui-design-system](https://affpapa.org/en/nevibecode/skills/radix-ui-design-system.md) — skill · sickn33 · Claude Code, Codex, Cursor +3 · 1300 installs — Builds accessible design systems and headless UI components with Radix UI primitives. - [refero-design](https://affpapa.org/en/nevibecode/skills/refero-design.md) — skill · referodesign · Claude Code, Codex, Cursor +3 · 12000 installs — A research-led skill for UI and product design that grounds work in references before code. - [preline-theme-generator](https://affpapa.org/en/nevibecode/skills/preline-theme-generator.md) — skill · htmlstreamofficial · Claude Code, Codex, Cursor +3 · 1300 installs — Generates custom Preline UI theme CSS from brand colors or mood descriptions. - [visual-edit-precision](https://affpapa.org/en/nevibecode/skills/visual-edit-precision.md) — skill · Adit Jain · Claude Code, Codex, Cursor · 2800 installs — Skill for targeted UI changes when you show elements on a screenshot or point them out in code. - [image](https://affpapa.org/en/nevibecode/skills/vercel-labs-image.md) — skill · vercel-labs · Claude Code, Codex, Cursor +3 · 1500 installs — Turns JSON specs into SVG and PNG images via Satori. - [write-example](https://affpapa.org/en/nevibecode/skills/write-example.md) — skill · tldraw · Claude Code, Codex, Cursor +3 · 445 installs — Guides coding agents through creating SDK examples for tldraw, enforcing folder naming, frontmatter fields, and React component conventions. - [huggingface-gradio](https://affpapa.org/en/nevibecode/skills/huggingface-gradio.md) — skill · huggingface · Claude Code, Codex, Cursor +3 · 2300 installs — This skill helps you build and modify Python Gradio interfaces for machine learning demos. - [zustand-5](https://affpapa.org/en/nevibecode/skills/zustand-5.md) — skill · prowler-cloud · Claude Code, Codex, Cursor +3 · 911 installs — Zustand 5 state management patterns for Claude Code: basic stores, selectors, persist middleware, and slice composition. - [text-and-bitmaptext](https://affpapa.org/en/nevibecode/skills/text-and-bitmaptext.md) — skill · phaserjs · Claude Code, Codex, Cursor +3 · 823 installs — Helps AI agents configure and render text in Phaser 4. - [write-e2e-tests](https://affpapa.org/en/nevibecode/skills/write-e2e-tests.md) — skill · tldraw · Claude Code, Codex, Cursor +3 · 430 installs — Guides Playwright E2E testing for tldraw, including UI actions, menus, and canvas shapes. - [game-object-components](https://affpapa.org/en/nevibecode/skills/game-object-components.md) — skill · phaserjs · Claude Code, Codex, Cursor +3 · 800 installs — Reference guide for Phaser 4 game object components and mixins. - [control-ui](https://affpapa.org/en/nevibecode/skills/control-ui.md) — skill · cursor · Claude Code, Codex, Cursor +3 · 2400 installs — Inspects and tests local web, IDE, or Electron interfaces via browser automation and CDP. - [time-and-timers](https://affpapa.org/en/nevibecode/skills/time-and-timers.md) — skill · phaserjs · Claude Code, Codex, Cursor +3 · 792 installs — Guides AI agents on configuring Clock, TimerEvent delays, loops, and Timelines in Phaser 4. - [react-email](https://affpapa.org/en/nevibecode/skills/vercel-labs-react-email.md) — skill · vercel-labs · Claude Code, Codex, Cursor +3 · 1400 installs — Turns JSON email specs into HTML or plain-text output with React Email. - [vue](https://affpapa.org/en/nevibecode/skills/vercel-labs-vue.md) — skill · vercel-labs · Claude Code, Codex, Cursor +3 · 1400 installs — A skill to convert JSON specifications into Vue 3 components with data binding, visibility conditions, and action handling. - [image-to-ui](https://affpapa.org/en/nevibecode/skills/image-to-ui.md) — skill · UIZZE · Claude Code, Codex, Cursor +3 · 63500 installs — Turn a screenshot, mockup, or sketch into working interface code. - [userinterface-wiki](https://affpapa.org/en/nevibecode/skills/userinterface-wiki.md) — skill · raphael-salaja · Claude Code, Codex, Cursor +3 · 4500 installs — Handbook of 152 UI/UX rules for web interfaces. - [adaptive](https://affpapa.org/en/nevibecode/skills/adaptive.md) — skill · Google LLC · Claude Code, Codex, Cursor +3 · 2400 installs — Guides the agent in adapting Android Compose UI for foldables, tablets, desktop, and phones. - [filters-and-postfx](https://affpapa.org/en/nevibecode/skills/filters-and-postfx.md) — skill · phaserjs · Claude Code, Codex, Cursor +3 · 777 installs — Applies visual filters and post-processing in Phaser 4. - [react19-source-patterns](https://affpapa.org/en/nevibecode/skills/react19-source-patterns.md) — skill (official GitHub) · github · GitHub Copilot · 967 installs — A reference for moving React source files to React 19, covering API changes, refs, context, and props. - [anti-ui-slop](https://affpapa.org/en/nevibecode/skills/anti-ui-slop.md) — skill (official GitHub) · UIZZE · GitHub Copilot · 967 installs — This skill helps coding agents build product-specific interfaces instead of generic UI. - [kill-ai-slop](https://affpapa.org/en/nevibecode/skills/kill-ai-slop.md) — skill · yetone · Claude Code, Codex, Cursor +3 · 3200 installs — Finds and removes the generic visual and copy tics that make a site look machine-generated. - [render-textures](https://affpapa.org/en/nevibecode/skills/render-textures.md) — skill · phaserjs · Claude Code, Codex, Cursor +3 · 773 installs — Explains off-screen rendering in Phaser 4, covering RenderTexture game objects, DynamicTexture assets, Stamp helpers, and command buffers. - [physics-matter](https://affpapa.org/en/nevibecode/skills/physics-matter.md) — skill · phaserjs · Claude Code, Codex, Cursor +3 · 758 installs — Helps AI agents configure Matter.js physics in Phaser 4, including rigid bodies, composite shapes, constraints, and mouse dragging. Next: https://affpapa.org/en/nevibecode/skills/topic/frontend.md?page=14 ## 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