# Skills for Frontend and UI Skills for Frontend and UI: what each one does, an install command and example prompts. 2909 cards · page 11 of 73 - HTML: https://affpapa.org/en/nevibecode/skills/topic/frontend?page=11 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [cookie-debugging](https://affpapa.org/en/nevibecode/skills/cookie-debugging.md) — skill · ChromeDevTools · Claude Code, Codex, Cursor +3 · 870 installs — Skill for inspecting cookies, sessions, and authentication errors via Chrome DevTools MCP. - [extract-design](https://affpapa.org/en/nevibecode/skills/extract-design.md) — skill · Manavarya09 · Claude Code, Codex, Cursor +3 · 2900 installs — This skill analyzes a website URL and generates files describing its design system. - [ffmpeg](https://affpapa.org/en/nevibecode/skills/ffmpeg.md) — skill · digitalsamba · Claude Code, Codex, Cursor +3 · 11700 installs — Production-ready FFmpeg recipes for video resizing, compression, audio extraction, and asset preparation for Remotion. - [remotion](https://affpapa.org/en/nevibecode/skills/calesthio-remotion.md) — skill · calesthio · Claude Code, Codex, Cursor +3 · 1200 installs — Teaches AI agents toolkit-specific Remotion patterns, including custom transition shaders and 30 fps video rules. - [react-native](https://affpapa.org/en/nevibecode/skills/react-native.md) — skill · vercel-labs · Claude Code, Codex, Cursor +3 · 3200 installs — This skill turns JSON specs into native React Native mobile UIs. - [uizze-ui](https://affpapa.org/en/nevibecode/skills/uizze-ui.md) — skill · UIZZE · Claude Code, Codex, Cursor +3 · 144000 installs — Guides the agent through layout fixes, typography adjustments, and UI state handling. - [ui](https://affpapa.org/en/nevibecode/skills/tw93-ui.md) — skill · tw93 · Claude Code, Codex, Cursor +3 · 4300 installs — This skill builds and refines production interfaces with a clear visual direction and screenshot-based checks. - [material-ui-tailwind](https://affpapa.org/en/nevibecode/skills/material-ui-tailwind.md) — skill · mui · Claude Code, Codex, Cursor +3 · 365 installs — This skill explains how to combine Material UI with Tailwind CSS, handle CSS layer order, pass utility classes to components, and work with Tailwind v3. - [frontend-design](https://affpapa.org/en/nevibecode/skills/sickn33-frontend-design.md) — skill · sickn33 · Claude Code, Codex, Cursor +3 · 2600 installs — Teaches the agent to create memorable interfaces instead of generic layouts: picks an aesthetic direction, checks accessibility, writes clean code. - [design-guide](https://affpapa.org/en/nevibecode/skills/design-guide.md) — skill · paperclipai · Claude Code, Codex, Cursor +3 · 366 installs — This skill defines Paperclip rules for UI components, tokens, typography, and status systems. - [hairline-create](https://affpapa.org/en/nevibecode/skills/hairline-create.md) — skill · lucasmarkes · Claude Code, Codex, Cursor +3 · 5200 installs — Generates interactive isometric line figures using the Hairline engine and outputs them as self-contained HTML files. - [fullstack-dev](https://affpapa.org/en/nevibecode/skills/fullstack-dev.md) — skill · MiniMax-AI · Claude Code, Codex, Cursor +3 · 3400 installs — Guides full-stack backend architecture and frontend integration. - [lottie-bodymovin](https://affpapa.org/en/nevibecode/skills/lottie-bodymovin.md) — skill · calesthio · Claude Code, Codex, Cursor +3 · 1100 installs — Applies Disney's 12 animation principles to Lottie vector animations. - [visual-style](https://affpapa.org/en/nevibecode/skills/visual-style.md) — skill · calesthio · Claude Code, Codex, Cursor +3 · 1100 installs — Creates, extracts, and ports portable design systems in visual-style.md files. - [remotion-best-practices](https://affpapa.org/en/nevibecode/skills/vercel-labs-remotion-best-practices.md) — skill · vercel-labs · Claude Code, Codex, Cursor +3 · 1500 installs — This skill gives coding agents Remotion guidance for React projects, from animation and audio to compositions and video parameters. - [paseo-plugin](https://affpapa.org/en/nevibecode/skills/paseo-plugin.md) — skill · getpaseo · Claude Code, Codex, Cursor +3 · 1400 installs — Builds and manages local Paseo plugins with UI panels, slash commands, lifecycle hooks, and daemon RPCs. - [gpui-kit](https://affpapa.org/en/nevibecode/skills/gpui-kit.md) — skill · longbridge · Claude Code, Codex, Cursor +3 · 1000 installs — This skill guides AI coding assistants in building Rust desktop apps with the gpui-kit crate. - [frontend-dev](https://affpapa.org/en/nevibecode/skills/frontend-dev.md) — skill · MiniMax-AI · Claude Code, Codex, Cursor +3 · 3200 installs — Orchestrates frontend development, motion design, AI-generated media, and conversion copy. - [audit-website](https://affpapa.org/en/nevibecode/skills/audit-website.md) — skill · squirrelscan · Claude Code, Codex, Cursor +3 · 73900 installs — Runs squirrel CLI audits against a website, pinpoints SEO, performance, and security issues, and applies fixes directly to source code. - [inspector-docs](https://affpapa.org/en/nevibecode/skills/inspector-docs.md) — skill · CopilotKit · Claude Code, Codex, Cursor +3 · 1100 installs — Keeps CopilotKit documentation aligned with shipped Inspector overlay panes. - [native-sdk](https://affpapa.org/en/nevibecode/skills/native-sdk.md) — skill · vercel-labs · Claude Code, Codex, Cursor +3 · 1500 installs — Teaches coding agents to scaffold and build native desktop apps using Native SDK. - [senior-fullstack](https://affpapa.org/en/nevibecode/skills/sickn33-senior-fullstack.md) — skill · sickn33 · Claude Code, Codex, Cursor +3 · 2300 installs — This skill guides implementation of features spanning interface, backend, database and deployment. - [javascript-pro](https://affpapa.org/en/nevibecode/skills/httpsgithubcomjeffallan-javascript-pro.md) — skill · https://github.com/Jeffallan · Claude Code, Codex, Cursor +3 · 6100 installs — Skill for writing, debugging, and refactoring JavaScript code with ES2023+, async/await, ESM modules, and Node.js APIs. - [gpui-kit-design-guides](https://affpapa.org/en/nevibecode/skills/gpui-kit-design-guides.md) — skill · longbridge · Claude Code, Codex, Cursor +3 · 987 installs — Supplies normative desktop interface rules for GPUI Kit applications. - [threejs-textures](https://affpapa.org/en/nevibecode/skills/calesthio-threejs-textures.md) — skill · calesthio · Claude Code, Codex, Cursor +3 · 1000 installs — Skill for working with Three.js textures: image loading, UV coordinates, cubemaps, HDR environments and optimization. - [threejs-interaction](https://affpapa.org/en/nevibecode/skills/calesthio-threejs-interaction.md) — skill · calesthio · Claude Code, Codex, Cursor +3 · 1100 installs — Ready-made patterns for Three.js user input, raycasting, and camera controls. - [threejs-geometry](https://affpapa.org/en/nevibecode/skills/calesthio-threejs-geometry.md) — skill · calesthio · Claude Code, Codex, Cursor +3 · 1100 installs — Reference collection for creating Three.js meshes and custom geometry. - [threejs-postprocessing](https://affpapa.org/en/nevibecode/skills/calesthio-threejs-postprocessing.md) — skill · calesthio · Claude Code, Codex, Cursor +3 · 1100 installs — This skill helps an agent add Three.js post-processing such as glow, blur, depth of field, and screen effects. - [threejs-loaders](https://affpapa.org/en/nevibecode/skills/calesthio-threejs-loaders.md) — skill · calesthio · Claude Code, Codex, Cursor +3 · 1100 installs — A skill for Three.js asset loading: GLTF models, textures, HDR environments, and progress tracking via LoadingManager. - [threejs-materials](https://affpapa.org/en/nevibecode/skills/calesthio-threejs-materials.md) — skill · calesthio · Claude Code, Codex, Cursor +3 · 1100 installs — Reference for Three.js materials: PBR, basic, phong, custom shaders. - [threejs-animation](https://affpapa.org/en/nevibecode/skills/calesthio-threejs-animation.md) — skill · calesthio · Claude Code, Codex, Cursor +3 · 1100 installs — This skill helps an agent build Three.js motion with keyframes, bones, morph targets, and clip blending. - [threejs-lighting](https://affpapa.org/en/nevibecode/skills/calesthio-threejs-lighting.md) — skill · calesthio · Claude Code, Codex, Cursor +3 · 1100 installs — Reference guide for configuring lights and shadows in Three.js scenes. - [threejs-fundamentals](https://affpapa.org/en/nevibecode/skills/calesthio-threejs-fundamentals.md) — skill · calesthio · Claude Code, Codex, Cursor +3 · 1100 installs — A skill for building Three.js scenes, setting up cameras and renderers, and working with Object3D hierarchies and transforms. - [threejs-shaders](https://affpapa.org/en/nevibecode/skills/calesthio-threejs-shaders.md) — skill · calesthio · Claude Code, Codex, Cursor +3 · 1100 installs — This skill helps write Three.js shaders, change vertices, and build custom fragment effects. - [sketch](https://affpapa.org/en/nevibecode/skills/hermes-agent-adapted-from-gsd-sketch.md) — skill · Hermes Agent (adapted from gsd-build/get-shit-done) · Claude Code, Codex, Cursor +3 · 403 installs — Generates 2-3 HTML mockup variants to compare design directions before you commit to production code. - [better-icons](https://affpapa.org/en/nevibecode/skills/better-icons.md) — skill · better-auth · Claude Code, Codex, Cursor +3 · 5900 installs — Searches over 200 icon sets through Iconify and pulls SVG files directly into project directories from the terminal. - [unit-test-vue-pinia](https://affpapa.org/en/nevibecode/skills/unit-test-vue-pinia.md) — skill (official GitHub) · github · GitHub Copilot · 1800 installs — Writes and reviews unit tests for Vue 3, TypeScript, Vitest and Pinia code. - [nextjs-developer](https://affpapa.org/en/nevibecode/skills/nextjs-developer.md) — skill · https://github.com/Jeffallan · Claude Code, Codex, Cursor +3 · 5800 installs — Configures Next.js 14+ application architecture using App Router, React Server Components, and Server Actions. - [logo-generator](https://affpapa.org/en/nevibecode/skills/logo-generator.md) — skill · op7418 · Claude Code, Codex, Cursor +3 · 3900 installs — Generates SVG logos with at least six design variants and creates high-end showcase images using 12 professional background styles via Gemini API. - [superdesign](https://affpapa.org/en/nevibecode/skills/superdesign.md) — skill · superdesigndev · Claude Code, Codex, Cursor +3 · 11200 installs — Create and refine interfaces, presentations, and graphics on the Superdesign canvas. Next: https://affpapa.org/en/nevibecode/skills/topic/frontend.md?page=12 ## 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