# Skills for Frontend and UI Skills for Frontend and UI: what each one does, an install command and example prompts. 2909 cards · page 8 of 73 - HTML: https://affpapa.org/en/nevibecode/skills/topic/frontend?page=8 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [flutter-expert](https://affpapa.org/en/nevibecode/skills/httpsgithubcomjeffallan-flutter-expert.md) — skill · https://github.com/Jeffallan · Claude Code, Codex, Cursor +3 · 14300 installs — Skill for building cross-platform apps with Flutter 3+ and Dart. - [ui-skills-root](https://affpapa.org/en/nevibecode/skills/ui-skills-root.md) — skill · ibelick · Claude Code, Codex, Cursor +3 · 7100 installs — A UI task router that picks the right skill before interface work. - [vitepress](https://affpapa.org/en/nevibecode/skills/vitepress.md) — skill · Anthony Fu · Claude Code, Codex, Cursor +3 · 11800 installs — A VitePress skill that helps an agent configure the site, extend the theme and write Markdown with Vue components. - [vue-pinia-best-practices](https://affpapa.org/en/nevibecode/skills/vue-pinia-best-practices.md) — skill · github.com/vuejs-ai · Claude Code, Codex, Cursor +3 · 16900 installs — A skill covering Pinia best practices: avoid common store setup errors, preserve reactivity, and organize state management patterns in Vue projects. - [frontend-skill](https://affpapa.org/en/nevibecode/skills/frontend-skill.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 3000 installs — This skill helps agents create visually strong landing pages, websites, and app UIs with restrained composition. - [opentui](https://affpapa.org/en/nevibecode/skills/opentui.md) — skill · msmps · Claude Code, Codex, Cursor +3 · 64500 installs — Guides coding agents through building OpenTUI terminal interfaces, from choosing Core, React, or Solid to handling input, animations, and tests. - [material-ui-nextjs](https://affpapa.org/en/nevibecode/skills/material-ui-nextjs.md) — skill · mui · Claude Code, Codex, Cursor +3 · 727 installs — A skill for wiring Material UI into Next.js: SSR, Emotion cache, next/font, CSS layers, Link, and useSearchParams. - [expo-router](https://affpapa.org/en/nevibecode/skills/expo-router.md) — skill · expo · Claude Code, Codex, Cursor +3 · 27900 installs — Skill for file-based routing, stacks, modals and tabs in Expo Router. - [expo-brownfield](https://affpapa.org/en/nevibecode/skills/expo-brownfield.md) — skill · expo · Claude Code, Codex, Cursor +3 · 27900 installs — Embeds React Native and Expo into existing native iOS and Android apps. - [3d-web-experience](https://affpapa.org/en/nevibecode/skills/sickn33-3d-web-experience.md) — skill · sickn33 · Claude Code, Codex, Cursor +3 · 5200 installs — Helps build and debug web 3D scenes, product configurators, and portfolios. - [argent-screenshot-diff](https://affpapa.org/en/nevibecode/skills/argent-screenshot-diff.md) — skill · software-mansion · Claude Code, Codex, Cursor +3 · 25000 installs — Compares before and after screenshots to catch layout shifts, spacing, color and text rendering changes. - [presentation](https://affpapa.org/en/nevibecode/skills/presentation.md) — skill · iii-hq · Claude Code, Codex, Cursor +3 · 3500 installs — Turns a technical-spec directory into an interactive web presentation. - [popular-web-designs](https://affpapa.org/en/nevibecode/skills/popular-web-designs.md) — skill · Hermes Agent + Teknium (design systems sourced from VoltAgent/awesome-design-md) · Claude Code, Codex, Cursor +3 · 919 installs — 54 real-world design systems (Stripe, Linear, Vercel, Claude) with CSS tokens, typography, and components for building pages styled after known brands. - [shadcn-ui](https://affpapa.org/en/nevibecode/skills/nexu-io-shadcn-ui.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2900 installs — This skill helps an agent build structured, accessible UI components with shadcn/ui. - [swiftui-design](https://affpapa.org/en/nevibecode/skills/swiftui-design.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2900 installs — A skill that guides SwiftUI interface design by clear rules, avoiding typical AI-code mistakes. - [plan-design-review](https://affpapa.org/en/nevibecode/skills/plan-design-review.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2900 installs — The skill rates each design dimension from 0-10, explains what a 10 looks like, and flags AI Slop signals. - [flutter-animating-apps](https://affpapa.org/en/nevibecode/skills/flutter-animating-apps.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2900 installs — Implements animations and transitions in Flutter apps. - [ui-skills](https://affpapa.org/en/nevibecode/skills/ui-skills.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2900 installs — Opinionated UI constraints to guide agents building user interfaces. - [brand-guidelines](https://affpapa.org/en/nevibecode/skills/nexu-io-brand-guidelines.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2900 installs — This skill applies Anthropic’s brand colors and typography to artifacts. - [color-expert](https://affpapa.org/en/nevibecode/skills/color-expert.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2900 installs — A skill with 286K words of reference material on OKLCH, palette generation, contrast and pigment mixing. - [expo-data-fetching](https://affpapa.org/en/nevibecode/skills/expo-data-fetching.md) — skill · expo · Claude Code, Codex, Cursor +3 · 27500 installs — Configures data fetching, caching, and screen states in Expo apps. - [playwright-skill](https://affpapa.org/en/nevibecode/skills/playwright-skill.md) — skill · lackeyjb · Claude Code, Codex, Cursor +3 · 6900 installs — Write and run Playwright scripts directly in your IDE. - [angular-migration](https://affpapa.org/en/nevibecode/skills/angular-migration.md) — skill · Seth Hobson · Claude Code, Codex, Cursor · 10900 installs — Helps move AngularJS applications to Angular through a full rewrite or staged migration. - [algorithmic-art](https://affpapa.org/en/nevibecode/skills/nexu-io-algorithmic-art.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2800 installs — Creates generative graphics using p5.js with seeded randomness for reproducible renders. - [html-ppt-retro-quarterly-review](https://affpapa.org/en/nevibecode/skills/html-ppt-retro-quarterly-review.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2800 installs — A quarterly review template in bold blue-and-orange editorial style: three cinematic slides with slab headlines and a cream paper feel. - [field-notes-editorial-template](https://affpapa.org/en/nevibecode/skills/field-notes-editorial-template.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2800 installs — Generates a magazine-style editorial business report in a single HTML file. - [login-flow](https://affpapa.org/en/nevibecode/skills/login-flow.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2800 installs — Builds a standalone HTML prototype for a mobile app sign-in flow. - [shader-dev](https://affpapa.org/en/nevibecode/skills/shader-dev.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2800 installs — Provides GLSL shader techniques for ray marching, fluid simulation, and procedural graphics. - [after-hours-editorial-template](https://affpapa.org/en/nevibecode/skills/after-hours-editorial-template.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2800 installs — Generates luxury dark editorial presentations with haute-couture typography and cinematic transitions. - [platform-design](https://affpapa.org/en/nevibecode/skills/platform-design.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2800 installs — Brings 300+ design rules from Apple HIG, Material Design 3, and WCAG 2.2 into your coding agent for building cross-platform apps on iOS, Android, and web. - [theme-factory](https://affpapa.org/en/nevibecode/skills/nexu-io-theme-factory.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2800 installs — A skill with 10 preset themes for styling artifacts: slides, docs, reports, HTML landing pages. - [frontend-dev](https://affpapa.org/en/nevibecode/skills/nexu-io-frontend-dev.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2800 installs — Skill for building modern frontends with smooth animations, AI-generated content via MiniMax API, and generative art. - [agent-browser](https://affpapa.org/en/nevibecode/skills/nexu-io-agent-browser.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2800 installs — Automates browser actions via CLI and CDP. - [8-bit-orbit-video-template](https://affpapa.org/en/nevibecode/skills/8-bit-orbit-video-template.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2800 installs — This skill provides a retro 8-bit video template for Hyperframes. - [web-artifacts-builder](https://affpapa.org/en/nevibecode/skills/nexu-io-web-artifacts-builder.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2800 installs — Builds HTML artifacts for claude.ai with React and Tailwind — Anthropic's reference workflow for embeddable interfaces. - [frontend-slides](https://affpapa.org/en/nevibecode/skills/nexu-io-frontend-slides.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2800 installs — Generates animation-rich HTML presentations with visual style previews. - [react-native-best-practices](https://affpapa.org/en/nevibecode/skills/react-native-best-practices.md) — skill · callstackincubator · Claude Code, Codex, Cursor +3 · 30200 installs — Provides React Native performance guidelines based on Callstack practices. - [answer-me-with-html](https://affpapa.org/en/nevibecode/skills/answer-me-with-html.md) — skill · QingYunA · Claude Code, Codex, Cursor +3 · 5400 installs — This skill turns an agent reply into a one-page visual HTML explainer. - [mcp](https://affpapa.org/en/nevibecode/skills/mcp.md) — skill · vercel-labs · Claude Code, Codex, Cursor +3 · 5800 installs — This skill helps build MCP servers that render interactive json-render UIs in Claude, ChatGPT, Cursor, and VS Code. - [antislop](https://affpapa.org/en/nevibecode/skills/antislop.md) — skill · miqdadbadjuber · Claude Code, Codex, Cursor +3 · 7400 installs — A rule-based filter for generic AI output in interfaces and code. Next: https://affpapa.org/en/nevibecode/skills/topic/frontend.md?page=9 ## 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