# Skills for Frontend and UI Skills for Frontend and UI: what each one does, an install command and example prompts. 2909 cards · page 21 of 73 - HTML: https://affpapa.org/en/nevibecode/skills/topic/frontend?page=21 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [angular-ssr](https://affpapa.org/en/nevibecode/skills/angular-ssr.md) — skill · analogjs · Claude Code, Codex, Cursor +3 · 3900 installs — A skill for Angular SSR, hydration, and prerendering tasks. - [create-canvas](https://affpapa.org/en/nevibecode/skills/create-canvas.md) — skill · ibelick · Claude Code, Codex, Cursor +3 · 381 installs — This skill builds a freeform canvas inside your project so UI variants sit side by side, move around, and get compared without a page reload. - [code-to-prd](https://affpapa.org/en/nevibecode/skills/code-to-prd.md) — skill · Alireza Rezvani · Claude Code · 763 installs — This skill turns a codebase into a PRD covering pages, routes, APIs, and user actions. - [roku](https://affpapa.org/en/nevibecode/skills/roku.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2000 installs — Gives the agent a written design system for an app dashboard: purple palette, top-bar navigation, card layouts. - [power](https://affpapa.org/en/nevibecode/skills/power.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2000 installs — Turns the agent into a design-system author for a dark, monochrome look with bold headings. - [geometric](https://affpapa.org/en/nevibecode/skills/geometric.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2000 installs — Defines structured design system guidelines using Inter typography and neutral colors. - [stitch](https://affpapa.org/en/nevibecode/skills/stitch.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2000 installs — stitch gives an AI coding agent concrete design-system rules for data-heavy interfaces, including tokens, component states, accessibility, and QA. - [data-table-filters](https://affpapa.org/en/nevibecode/skills/data-table-filters.md) — skill · openstatusHQ · Claude Code, Codex, Cursor +3 · 476 installs — This skill helps build React tables with filters, sorting, virtualization, and infinite scroll. - [web3d-integration-patterns](https://affpapa.org/en/nevibecode/skills/web3d-integration-patterns.md) — skill · freshtechbro · Claude Code, Codex, Cursor +3 · 3200 installs — This skill helps plan 3D web experiences that combine Three.js, React Three Fiber, and animation libraries. - [globe-gl](https://affpapa.org/en/nevibecode/skills/globe-gl.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1500 installs — Sets up 3D globe visualizations using globe.gl with WebGL and ThreeJS. - [vantajs](https://affpapa.org/en/nevibecode/skills/vantajs.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1500 installs — Adds animated Vanta.js backgrounds and explains setup for static sites, React, and Next.js. - [atmosphere-background](https://affpapa.org/en/nevibecode/skills/atmosphere-background.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1500 installs — A skill for building a dark atmospheric backdrop: vertical light folds drift slowly across the frame and the glow concentrates in one corner or along the lower edge. - [editorial-tech](https://affpapa.org/en/nevibecode/skills/editorial-tech.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1500 installs — Guides code agents to blend magazine typography with technical product UI using asymmetrical grids, mono labels, and restrained accent color. - [css-alpha-masking](https://affpapa.org/en/nevibecode/skills/css-alpha-masking.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1500 installs — This skill adds CSS alpha masks with gradient edge fades. - [stitched-full-page-capture](https://affpapa.org/en/nevibecode/skills/stitched-full-page-capture.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1500 installs — Stitches a full-page screenshot from settled viewport slices when a one-shot fullPage capture comes back blank. - [glass-dark-ui](https://affpapa.org/en/nevibecode/skills/glass-dark-ui.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1500 installs — Builds dark glassmorphism layouts with frosted surfaces and gradient masked borders. - [build-threejs-scroll-worlds](https://affpapa.org/en/nevibecode/skills/build-threejs-scroll-worlds.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1500 installs — Builds scroll-controlled Three.js worlds that stay spatially continuous across authored chapters. - [container-lines](https://affpapa.org/en/nevibecode/skills/container-lines.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1500 installs — This skill adds thin vertical guide lines at the edges of the content container, plus mini corner squares on sections. - [company-logos](https://affpapa.org/en/nevibecode/skills/company-logos.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1500 installs — Guides agents to use Iconify Simple Icons in a 64x64 box instead of plain text names or random raster images. - [matterjs](https://affpapa.org/en/nevibecode/skills/matterjs.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1500 installs — Walks the agent through a Matter.js scene: engine, render, runner, bodies and mouse dragging. - [css-border-gradient](https://affpapa.org/en/nevibecode/skills/css-border-gradient.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1500 installs — Applies refined gradient border treatments to cards, modals, and buttons in CSS or Tailwind. - [scroll-scrubbed-visual-sequence](https://affpapa.org/en/nevibecode/skills/scroll-scrubbed-visual-sequence.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1500 installs — Builds reversible visual scenes driven by native scrolling, from product assembly to interface walkthroughs. - [unsplash-asset-images](https://affpapa.org/en/nevibecode/skills/unsplash-asset-images.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1600 installs — This skill picks Unsplash photos for avatars, headshots, backgrounds and wallpapers, and names the ratios and resolutions you need. - [scroll-world-storytelling](https://affpapa.org/en/nevibecode/skills/scroll-world-storytelling.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1600 installs — Turns articles, case studies, and product journeys into visual scroll-driven landing pages. - [staggered-word-reveal](https://affpapa.org/en/nevibecode/skills/staggered-word-reveal.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1600 installs — Builds word-by-word text reveals as content enters the viewport. - [landing-page-generator](https://affpapa.org/en/nevibecode/skills/landing-page-generator.md) — skill · Alireza Rezvani · Claude Code · 754 installs — Generates Next.js/React TSX landing pages with Tailwind CSS. - [navigation-event](https://affpapa.org/en/nevibecode/skills/navigation-event.md) — skill · Google LLC · Claude Code, Codex, Cursor +3 · 546 installs — Intercepts back gestures and sets up Predictive Back animations via androidx.navigationevent in Compose Android. - [typography-scale](https://affpapa.org/en/nevibecode/skills/typography-scale.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 2600 installs — Builds a modular type scale with sizes, weights and line heights. - [flutter-animations](https://affpapa.org/en/nevibecode/skills/flutter-animations.md) — skill · Stanislav \[MADTeacher\] Chernyshev · Claude Code, Codex, Cursor +3 · 15400 installs — A skill that adds, fixes, refactors or explains Flutter animations, from implicit widgets to springs and Hero transitions. - [ios-accessibility](https://affpapa.org/en/nevibecode/skills/ios-accessibility.md) — skill · dpearson2699 · Claude Code, Codex, Cursor +3 · 4900 installs — Guides accessibility reviews and code adjustments for Apple user interfaces. - [remotion-render](https://affpapa.org/en/nevibecode/skills/101-skills-remotion-render.md) — skill · 101-skills · Claude Code, Codex, Cursor +3 · 109700 installs — This skill sends a Remotion React component to inference.sh and gets back an MP4. - [ui-screenshots](https://affpapa.org/en/nevibecode/skills/ui-screenshots.md) — skill (official GitHub) · github · GitHub Copilot · 209 installs — A skill that photographs web pages and desktop windows so the agent can document visual changes before and after a code edit. - [bencium-impact-designer](https://affpapa.org/en/nevibecode/skills/bencium-impact-designer.md) — skill · bencium · Claude Code, Codex, Cursor +3 · 5400 installs — Creates frontend interfaces with a clear visual direction. - [nuxt-content](https://affpapa.org/en/nevibecode/skills/nuxt-content.md) — skill · onmax · Claude Code, Codex, Cursor +3 · 2800 installs — A skill for @nuxt/content work: collections, schemas, queries and Markdown rendering. - [square](https://affpapa.org/en/nevibecode/skills/square.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2000 installs — This skill gives the agent a full set of Square design-system rules: tokens, type scale, component states and accessibility criteria. - [pulse](https://affpapa.org/en/nevibecode/skills/typeuish-pulse.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2000 installs — Provides rules for the vibrant Pulse design system with 4px borders, orange color tokens, and Limelight typography. - [basic](https://affpapa.org/en/nevibecode/skills/basic.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2000 installs — This skill guides AI toward print-inspired interfaces for books, magazines, and reports. - [color-system](https://affpapa.org/en/nevibecode/skills/color-system.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 2500 installs — This skill walks an agent through building a product palette: tonal scales, semantic roles and WCAG contrast checks. - [visual-hierarchy](https://affpapa.org/en/nevibecode/skills/visual-hierarchy.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 2500 installs — This skill sets the order in which interface elements attract attention through size, weight, colour, spacing, and position. - [animated-component-libraries](https://affpapa.org/en/nevibecode/skills/animated-component-libraries.md) — skill · freshtechbro · Claude Code, Codex, Cursor +3 · 2900 installs — Helps AI coding agents integrate pre-built animated React components from Magic UI and React Bits. Next: https://affpapa.org/en/nevibecode/skills/topic/frontend.md?page=22 ## 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