# Skills for Frontend and UI Skills for Frontend and UI: what each one does, an install command and example prompts. 2909 cards · page 23 of 73 - HTML: https://affpapa.org/en/nevibecode/skills/topic/frontend?page=23 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [globe-particles](https://affpapa.org/en/nevibecode/skills/globe-particles.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1400 installs — Renders a 3D particle globe with a luminous spherical core and an orbital disc using WebGL and Three.js. - [agency-grid-layout-minimal](https://affpapa.org/en/nevibecode/skills/agency-grid-layout-minimal.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1400 installs — Sets a minimal agency-site direction with an editorial grid, oversized type and restrained image framing. - [unicorn-studio](https://affpapa.org/en/nevibecode/skills/unicorn-studio.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1400 installs — Guides you through embedding Unicorn Studio interactive WebGL scenes on a page: container setup, responsive sizing, performance tuning, layering with UI. - [skeuomorphic-ui](https://affpapa.org/en/nevibecode/skills/skeuomorphic-ui.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1400 installs — Generates tactile skeuomorphic web CSS with layered gradients, inset shadows, and reflective edges. - [background-grid-webgl](https://affpapa.org/en/nevibecode/skills/background-grid-webgl.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1500 installs — A skill that tells your coding agent how to build a perspective WebGL grid background with fading lines, particle haze and slow forward drift. - [finesse-ui](https://affpapa.org/en/nevibecode/skills/finesse-ui.md) — skill · mouse-lin · Claude Code, Codex, Cursor +3 · 1000 installs — A skill for building and refining web interfaces: landing pages, dashboards, mobile screens, single components. - [replica-diff](https://affpapa.org/en/nevibecode/skills/replica-diff.md) — skill · Jakeschincariol · Claude Code, Codex, Cursor +3 · 625 installs — Measures an app clone against the original by calculating feature parity scores from a matrix and diffing UI layouts without penalizing rebrands. - [epic-design](https://affpapa.org/en/nevibecode/skills/epic-design.md) — skill · Abbas Mir · Claude Code · 701 installs — A Claude Code skill that builds cinematic pages: scroll storytelling, parallax depth, animated text. - [nuxt-modules](https://affpapa.org/en/nevibecode/skills/nuxt-modules.md) — skill · onmax · Claude Code, Codex, Cursor +3 · 2700 installs — Guides the creation of Nuxt modules, covering local directory extensions, npm package publication, runtime injections, and CI/CD automation. - [replica-build](https://affpapa.org/en/nevibecode/skills/replica-build.md) — skill · Jakeschincariol · Claude Code, Codex, Cursor +3 · 622 installs — Rebuilds an app screen by screen from the recon map: shell first, then the core flow, then every screen with all its states. - [data-visualization](https://affpapa.org/en/nevibecode/skills/owl-listener-data-visualization.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 2400 installs — Guides your agent through picking a chart type and setting axes, labels and accessible colors so the result reads without a legend. - [layout-grid](https://affpapa.org/en/nevibecode/skills/layout-grid.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 2400 installs — This skill defines a responsive page grid: columns, gutters, margins and breakpoint behaviour. - [icon-system](https://affpapa.org/en/nevibecode/skills/icon-system.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 2400 installs — Sets design specifications for icon systems, covering grids, size tiers, naming rules, and accessibility. - [dark-mode-design](https://affpapa.org/en/nevibecode/skills/dark-mode-design.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 2400 installs — This skill turns an existing light palette into a dark theme: surface elevation, contrast, desaturated accents. - [use-igniteui-blazor](https://affpapa.org/en/nevibecode/skills/use-igniteui-blazor.md) — skill · dotnet · Claude Code, Codex, Cursor +3 · 1500 installs — Sets up and configures Ignite UI for Blazor Lite components in .NET 8.0+ applications. - [scandinavian-design](https://affpapa.org/en/nevibecode/skills/scandinavian-design.md) — skill · ericzakariasson · Claude Code, Codex, Cursor +3 · 1800 installs — This skill guides interface work toward calm layouts, restrained monochrome styling, and clearer hierarchy. - [spline-interactive](https://affpapa.org/en/nevibecode/skills/spline-interactive.md) — skill · freshtechbro · Claude Code, Codex, Cursor +3 · 2800 installs — Guides agents on integrating interactive Spline 3D scenes into web apps. - [gsap-scrolltrigger](https://affpapa.org/en/nevibecode/skills/freshtechbro-gsap-scrolltrigger.md) — skill · freshtechbro · Claude Code, Codex, Cursor +3 · 2800 installs — A skill that teaches the agent to write GSAP animations and ScrollTrigger scroll effects: tweens, timelines, pinning, parallax. - [awwwards](https://affpapa.org/en/nevibecode/skills/awwwards.md) — skill · juliobsz · Claude Code, Codex, Cursor +3 · 1300 installs — Turns a one-line prompt into a finished portfolio or landing page, using Awwwards Site of the Day as the quality bar. - [ux-writing](https://affpapa.org/en/nevibecode/skills/ux-writing.md) — skill · content-designer · Claude Code, Codex, Cursor +3 · 2700 installs — Writes and edits button labels, error messages, notifications and empty states against four standards: purposeful, concise, conversational, clear. - [swiftui-patterns](https://affpapa.org/en/nevibecode/skills/dpearson2699-swiftui-patterns.md) — skill · dpearson2699 · Claude Code, Codex, Cursor +3 · 4500 installs — Guides SwiftUI view work around state, composition, environment wiring, and isolated previews. - [responsive-design](https://affpapa.org/en/nevibecode/skills/owl-listener-responsive-design.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 2300 installs — A skill that steers your coding agent toward layouts and interactions that hold up across screen sizes and input methods. - [spacing-system](https://affpapa.org/en/nevibecode/skills/spacing-system.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 2300 installs — Builds a systematic spacing scale from a 4px or 8px base unit with rules for padding and margins. - [presentation-creator](https://affpapa.org/en/nevibecode/skills/presentation-creator.md) — skill · getsentry · Claude Code, Codex, Cursor +3 · 2900 installs — Creates interactive React and Vite slide decks with Sentry styling. - [react-devtools](https://affpapa.org/en/nevibecode/skills/react-devtools.md) — skill · callstackincubator · Claude Code, Codex, Cursor +3 · 2600 installs — The skill connects your agent to a running React or React Native app and exposes the component tree, props, hooks and profiler data. - [animejs](https://affpapa.org/en/nevibecode/skills/animejs.md) — skill · freshtechbro · Claude Code, Codex, Cursor +3 · 2800 installs — A skill that feeds your coding agent Anime.js syntax: timelines, stagger, SVG morphing and keyframe sequences. - [apple-hig-expert](https://affpapa.org/en/nevibecode/skills/apple-hig-expert.md) — skill · Alireza Rezvani · Claude Code · 662 installs — Audits iOS, macOS, watchOS, and visionOS interfaces against Apple HIG. - [build-game-audio-feedback](https://affpapa.org/en/nevibecode/skills/build-game-audio-feedback.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1300 installs — Guides an agent through designing responsive audio cues for a Three.js or browser game: hits, blocks, music states. - [optimize-threejs-games](https://affpapa.org/en/nevibecode/skills/optimize-threejs-games.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1300 installs — A skill that profiles and speeds up Three.js and WebGL games: it finds whether the CPU or the GPU is the bottleneck, then fixes it without breaking gameplay. - [liquid-metal-border](https://affpapa.org/en/nevibecode/skills/liquid-metal-border.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1300 installs — Guides React work with animated metal-fx WebGL borders for buttons, cards, and selected controls when visual states need a metallic frame. - [beam-glow-states](https://affpapa.org/en/nevibecode/skills/beam-glow-states.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1300 installs — A React skill that wires the border-beam animated edge glow into loading, selected, current, focus and pressed states. - [no-ai-design-slop](https://affpapa.org/en/nevibecode/skills/no-ai-design-slop.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1300 installs — A passive quality gate for UI work: it flags reflex design choices and common interface defects while you build or revise a screen. - [documentary-brutalist-agency](https://affpapa.org/en/nevibecode/skills/documentary-brutalist-agency.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1300 installs — A skill for building creative agency and portfolio sites: billboard typography, hard black-and-white chapters, documentary collages. - [thinking-orbs](https://affpapa.org/en/nevibecode/skills/thinking-orbs.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1300 installs — Guides coding agents to implement animated AI status indicators using the React thinking-orbs package. - [editorial-service-booking](https://affpapa.org/en/nevibecode/skills/editorial-service-booking.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1300 installs — Guidance for service websites with appointments, from editorial treatment browsing to booking states that retain each selection. - [operational-enterprise-ai](https://affpapa.org/en/nevibecode/skills/operational-enterprise-ai.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1300 installs — A skill for building or reworking enterprise product pages: system boundaries, approvals, audit, exceptions and rollback. - [browser-video-recording](https://affpapa.org/en/nevibecode/skills/browser-video-recording.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1300 installs — Renders 60 fps 4:3 4K browser demo videos from in-app browser screenshots. - [add-shader-cursor-trail](https://affpapa.org/en/nevibecode/skills/add-shader-cursor-trail.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1300 installs — Installs a WebGPU hero effect: a twinkling white halftone trail that follows the pointer, with chromatic ripples and film grain. - [shaders-cursor-ripples](https://affpapa.org/en/nevibecode/skills/shaders-cursor-ripples.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1400 installs — Adds interactive WebGPU fluid distortion over existing images using the Shaders library. - [swiftui-navigation](https://affpapa.org/en/nevibecode/skills/swiftui-navigation.md) — skill · dpearson2699 · Claude Code, Codex, Cursor +3 · 4400 installs — Provides SwiftUI navigation architectures, covering typed stacks, multi-column layouts, sheets, and tabs. Next: https://affpapa.org/en/nevibecode/skills/topic/frontend.md?page=24 ## 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