# Skills for Frontend and UI Skills for Frontend and UI: what each one does, an install command and example prompts. 2909 cards · page 10 of 73 - HTML: https://affpapa.org/en/nevibecode/skills/topic/frontend?page=10 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [expo-project-structure](https://affpapa.org/en/nevibecode/skills/expo-project-structure.md) — skill · expo · Claude Code, Codex, Cursor +3 · 22000 installs — Sets up a starter folder layout for a new Expo Router project. - [emilkowalski-motion](https://affpapa.org/en/nevibecode/skills/emilkowalski-motion.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2300 installs — Adds micro-interactions, state transitions and motion to an existing interface. - [threejs-interaction](https://affpapa.org/en/nevibecode/skills/threejs-interaction.md) — skill · CloudAI-X · Claude Code, Codex, Cursor +3 · 14300 installs — Teaches your agent how to set up raycasting, camera controls, and object dragging in three.js for WebGL and WebGPU. - [antislop-human](https://affpapa.org/en/nevibecode/skills/antislop-human.md) — skill · miqdadbadjuber · Claude Code, Codex, Cursor +3 · 5900 installs — An accessibility skill for AI agents that checks UI contrast, keyboard focus, and control states. - [expo-dom](https://affpapa.org/en/nevibecode/skills/expo-dom.md) — skill · expo · Claude Code, Codex, Cursor +3 · 21000 installs — Runs web code in a webview on native platforms and renders as-is on web. - [antislop-layoutmobile](https://affpapa.org/en/nevibecode/skills/antislop-layoutmobile.md) — skill · miqdadbadjuber · Claude Code, Codex, Cursor +3 · 5700 installs — A skill for responsive layouts across phone and desktop widths. - [threejs-postprocessing](https://affpapa.org/en/nevibecode/skills/threejs-postprocessing.md) — skill · CloudAI-X · Claude Code, Codex, Cursor +3 · 13700 installs — A skill that adds post-processing pass chains to Three.js: bloom, depth of field, ambient occlusion, and custom screen shaders. - [streamdown](https://affpapa.org/en/nevibecode/skills/streamdown.md) — skill · vercel · Claude Code, Codex, Cursor +3 · 3200 installs — Renders Markdown in React components with streaming support for AI agents, Shiki syntax highlighting, Mermaid diagrams, and KaTeX math rendering. - [threejs-lighting](https://affpapa.org/en/nevibecode/skills/threejs-lighting.md) — skill · CloudAI-X · Claude Code, Codex, Cursor +3 · 13300 installs — Three.js r186 lighting skill for WebGL and WebGPU. - [vue-options-api-best-practices](https://affpapa.org/en/nevibecode/skills/vue-options-api-best-practices.md) — skill · github.com/vuejs-ai · Claude Code, Codex, Cursor +3 · 11600 installs — Guidance for Vue 3 Options API components, covering TypeScript, method context, and lifecycle hook pitfalls. - [conversion-tracking](https://affpapa.org/en/nevibecode/skills/conversion-tracking.md) — skill · coreyhaines31 · Claude Code, Codex, Cursor +3 · 3400 installs — Sets up, audits, and fixes web conversion tracking across ad platforms and analytics. - [expo-app-clip](https://affpapa.org/en/nevibecode/skills/expo-app-clip.md) — skill · expo · Claude Code, Codex, Cursor +3 · 19800 installs — Adds an iOS App Clip target to Expo projects — a lightweight app invoked from a URL without App Store installation. - [expo-web-to-native](https://affpapa.org/en/nevibecode/skills/expo-web-to-native.md) — skill · expo · Claude Code, Codex, Cursor +3 · 19600 installs — Guides an existing React web app into a native iOS/Android app with Expo. - [claude-design](https://affpapa.org/en/nevibecode/skills/badtechbandit-claude-design.md) — skill · BadTechBandit · Claude Code, Codex, Cursor +3 · 645 installs — Skill for building HTML artifacts — landing pages, prototypes, decks — in Claude Code, Codex and Cursor. - [threejs-loaders](https://affpapa.org/en/nevibecode/skills/threejs-loaders.md) — skill · CloudAI-X · Claude Code, Codex, Cursor +3 · 12900 installs — Teaches your AI agent to load glTF models, textures, and HDR maps in three.js r186. - [threejs-textures](https://affpapa.org/en/nevibecode/skills/threejs-textures.md) — skill · CloudAI-X · Claude Code, Codex, Cursor +3 · 12600 installs — Guides texture loading, color spaces, and transforms for Three.js r186. - [uncodixfy](https://affpapa.org/en/nevibecode/skills/uncodixfy.md) — skill · cyxzdev · Claude Code, Codex, Cursor +3 · 5600 installs — Teaches the agent to skip the default Codex aesthetic: soft gradients, floating panels, decorative copy. - [ui-ux-pro-max](https://affpapa.org/en/nevibecode/skills/athevon-ui-ux-pro-max.md) — skill · AThevon · Claude Code, Codex, Cursor +3 · 948 installs — Generates design systems, palettes, and typography pairs across 22 stacks using a local rule dataset. - [building-components](https://affpapa.org/en/nevibecode/skills/building-components.md) — skill · vercel · Claude Code, Codex, Cursor +3 · 14700 installs — Guidance for accessible UI components, composable APIs, design tokens, documentation, and package distribution. - [create-design-md](https://affpapa.org/en/nevibecode/skills/create-design-md.md) — skill · ibelick · Claude Code, Codex, Cursor +3 · 4400 installs — Creates or updates a DESIGN.md file from a code repository or website. - [debugging-streamlit](https://affpapa.org/en/nevibecode/skills/debugging-streamlit.md) — skill · streamlit · Claude Code, Codex, Cursor +3 · 493 installs — Runs Streamlit full-stack debugging with hot-reload, dedicated session logs, and Playwright UI screenshot helpers for testing frontend and backend changes. - [design-dna](https://affpapa.org/en/nevibecode/skills/design-dna.md) — skill · zanwei · Claude Code, Codex, Cursor +3 · 6500 installs — Extracts design tokens, style and visual effects from references, then applies the profile to a design. - [image-to-code](https://affpapa.org/en/nevibecode/skills/nexu-io-image-to-code.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 1800 installs — A skill for visually important web tasks. - [gpt-taste](https://affpapa.org/en/nevibecode/skills/gpt-taste.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 1800 installs — Enforces strict frontend design rules: prevents multi-line hero titles, fixes empty bento grid cells, and adds advanced GSAP scroll physics. - [redesign-existing-projects](https://affpapa.org/en/nevibecode/skills/redesign-existing-projects.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 1900 installs — Audits an existing interface and updates a website or app without changing its working product structure. - [export-download-debugging](https://affpapa.org/en/nevibecode/skills/export-download-debugging.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 1800 installs — Diagnoses and resolves failed downloads, broken File System Access API calls, and 0 KB file exports in browsers and Electron shells. - [ui-ux-designer](https://affpapa.org/en/nevibecode/skills/ui-ux-designer.md) — skill · sickn33 · Claude Code, Codex, Cursor +3 · 3100 installs — This skill supports interface design, user flows, and design systems with research and accessibility checks. - [expo-design-system](https://affpapa.org/en/nevibecode/skills/expo-design-system.md) — skill · expo · Claude Code, Codex, Cursor +3 · 16700 installs — Builds and audits a design system in Expo apps by centralizing design tokens, structuring reusable components, and eliminating hardcoded styles. - [p5js](https://affpapa.org/en/nevibecode/skills/p5js.md) — skill · SHL0MS, Hermes Agent · Claude Code, Codex, Cursor +3 · 535 installs — Produces p5.js sketches in the browser: generative art, interactive data viz, 3D WebGL scenes, audio-reactive visuals. - [minimalist-ui](https://affpapa.org/en/nevibecode/skills/leonxlnx-minimalist-ui.md) — skill · Leonxlnx · Claude Code, Codex, Cursor +3 · 395 installs — Enforces editorial UI design rules with a warm monochrome palette and bento grids. - [industrial-brutalist-ui](https://affpapa.org/en/nevibecode/skills/industrial-brutalist-ui.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 1700 installs — A skill that locks in a raw mechanical visual style for dashboards, portfolios and editorial sites. - [design-taste-frontend-v1](https://affpapa.org/en/nevibecode/skills/design-taste-frontend-v1.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 1700 installs — The original v1 frontend taste skill for clean React and Tailwind CSS output. - [imagegen-frontend-mobile](https://affpapa.org/en/nevibecode/skills/imagegen-frontend-mobile.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 1700 installs — Generates premium mobile screen images and flows for iOS, Android, and cross-platform with clean hierarchy, readable text, and controlled palettes. - [imagegen-frontend-web](https://affpapa.org/en/nevibecode/skills/imagegen-frontend-web.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 1700 installs — Directs AI to generate section-by-section web design references. - [angular-new-app](https://affpapa.org/en/nevibecode/skills/angular-new-app.md) — skill · Angular Team @ Google · Claude Code, Codex, Cursor +3 · 19300 installs — A skill that scaffolds new Angular applications via the Angular CLI. - [design-md](https://affpapa.org/en/nevibecode/skills/hermes-agent-design-md.md) — skill · Hermes Agent · Claude Code, Codex, Cursor +3 · 523 installs — Create and validate DESIGN.md token specs, compare revisions, and export design tokens to Tailwind or W3C DTCG formats. - [ce-test-browser](https://affpapa.org/en/nevibecode/skills/ce-test-browser.md) — skill · EveryInc · Claude Code, Codex, Cursor +3 · 3000 installs — Runs end-to-end browser checks on pages modified by your branch or pull request. - [react-expert](https://affpapa.org/en/nevibecode/skills/reactjs-react-expert.md) — skill · reactjs · Claude Code, Codex, Cursor +3 · 1300 installs — Researches React APIs and internals directly against tests, commits, and pull requests. - [chatgpt-app-builder](https://affpapa.org/en/nevibecode/skills/chatgpt-app-builder.md) — skill · alpic-ai · Claude Code, Codex, Cursor +3 · 7100 installs — Walks through the full lifecycle of a ChatGPT plugin, from idea to directory submission. - [seo-review](https://affpapa.org/en/nevibecode/skills/seo-review.md) — skill · leonardomso · Claude Code, Codex, Cursor +3 · 644 installs — Runs targeted SEO audits on JavaScript concept guides to optimize search visibility and featured snippets. Next: https://affpapa.org/en/nevibecode/skills/topic/frontend.md?page=11 ## 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