# Skills for Frontend and UI Skills for Frontend and UI: what each one does, an install command and example prompts. 2909 cards · page 20 of 73 - HTML: https://affpapa.org/en/nevibecode/skills/topic/frontend?page=20 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [vintage](https://affpapa.org/en/nevibecode/skills/vintage.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2300 installs — Generates retro design-system specifications with skeuomorphic details, pixel typography, and strict accessibility criteria. - [cafe](https://affpapa.org/en/nevibecode/skills/cafe.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2300 installs — This skill gives coding agents a cafe-inspired UI system with warm colors, soft type, and clear layout rules. - [flat](https://affpapa.org/en/nevibecode/skills/flat.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2400 installs — Gives your coding agent a flat-design rulebook: tokens, type scale, component states and accessibility. - [dramatic](https://affpapa.org/en/nevibecode/skills/dramatic.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2300 installs — Generates high-contrast design system guidelines with dark surfaces and Outfit typography. - [ant](https://affpapa.org/en/nevibecode/skills/ant.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2400 installs — A skill that hands your agent the Ant Design rulebook: tokens, component states, accessibility. - [cosmic](https://affpapa.org/en/nevibecode/skills/cosmic.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2400 installs — Applies a futuristic sci-fi design system with dark themes and neon accents. - [artistic](https://affpapa.org/en/nevibecode/skills/artistic.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2400 installs — Gives your coding agent a design-system rulebook: high contrast, expressive type, bold color tokens. - [friendly](https://affpapa.org/en/nevibecode/skills/friendly.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2400 installs — This skill makes the agent author design-system guidelines in a friendly style: rounded shapes, generous whitespace, soft pastels. - [bold](https://affpapa.org/en/nevibecode/skills/bold.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2400 installs — This skill guides agents to write design system documentation with heavy typography and WCAG 2.2 AA accessibility. - [gradient](https://affpapa.org/en/nevibecode/skills/gradient.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2400 installs — The skill turns your agent into a design-system author: tokens, type scale, component states and accessibility criteria for gradient-rich UI. - [colorful](https://affpapa.org/en/nevibecode/skills/colorful.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2400 installs — A design-system skill that hands your agent tokens, type scale, component states and accessibility rules. - [creative](https://affpapa.org/en/nevibecode/skills/creative.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2400 installs — Generates design system guidelines for playful landing pages using Bangers typography and token-based styling. - [doodle](https://affpapa.org/en/nevibecode/skills/doodle.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2400 installs — This skill sets a playful doodle style for interface guidance with handwritten fonts, sketches, and imperfect lines. - [spacious](https://affpapa.org/en/nevibecode/skills/spacious.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2400 installs — Turns your agent into a design-system author: generous whitespace, an 8pt grid, colour tokens. - [paper](https://affpapa.org/en/nevibecode/skills/paper.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2400 installs — Generates Paper Design UI guidelines with tactile print styling, strict typography tokens, and WCAG 2.2 AA accessibility rules. - [futuristic](https://affpapa.org/en/nevibecode/skills/futuristic.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2400 installs — This skill gives an agent a futuristic design system with typography, tokens, component states, and accessibility rules. - [trees](https://affpapa.org/en/nevibecode/skills/trees.md) — skill · pierrecomputer · Claude Code, Codex, Cursor +3 · 307 installs — Guides agents on rendering and controlling file trees with @pierre/trees. - [tailwindcss](https://affpapa.org/en/nevibecode/skills/tailwindcss.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1700 installs — A skill that steers your coding agent through Tailwind CSS UI work: layout, typography, responsive variants, theming and component patterns. - [optimize-web-animations](https://affpapa.org/en/nevibecode/skills/optimize-web-animations.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1700 installs — Pauses offscreen CSS, Canvas, and WebGL animations and fixes frontend memory leaks. - [progressive-blur](https://affpapa.org/en/nevibecode/skills/progressive-blur.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1700 installs — This skill creates a top or bottom CSS progressive blur with layered backdrop-filter masks. - [cobejs](https://affpapa.org/en/nevibecode/skills/cobejs.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1700 installs — A skill that walks the agent through building a small spinning globe with cobe, markers included. - [native-feel-cross-platform-desktop](https://affpapa.org/en/nevibecode/skills/native-feel-cross-platform-desktop.md) — skill · yetone · Claude Code, Codex, Cursor +3 · 608 installs — A skill for designing cross-platform desktop apps that feel native: windowing, hotkeys, materials, fast launch. - [anti-ui-slop](https://affpapa.org/en/nevibecode/skills/davepoon-anti-ui-slop.md) — skill · davepoon · Claude Code, Codex, Cursor +3 · 475 installs — Keeps a coding agent from shipping a generic screen: it reads the product context, covers the required states, and checks the rendered result for visible breakage. - [sega](https://affpapa.org/en/nevibecode/skills/sega.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2200 installs — Defines rules for an arcade-inspired design system with VT323 typography, 0px corners, and chunky push buttons. - [matrix](https://affpapa.org/en/nevibecode/skills/matrix.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2200 installs — This skill guides a dark Matrix-style interface with tokens, component states, and accessibility checks. - [riso](https://affpapa.org/en/nevibecode/skills/riso.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2200 installs — Turns your coding agent into a design-system author for a two-color risograph look: warm paper, pink accent, blue headings. - [fiction](https://affpapa.org/en/nevibecode/skills/fiction.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2200 installs — Generates design system guidelines in a cartoonesque children's book style with cream backgrounds, thick outlines, Cossette Texte typography, and WCAG 2.2 AA checks. - [terracotta](https://affpapa.org/en/nevibecode/skills/terracotta.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2300 installs — A skill that hands your coding agent the Terracotta design system: cream surfaces, ink-brown serif headlines and one terracotta accent. - [impeccable](https://affpapa.org/en/nevibecode/skills/typeuish-impeccable.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2300 installs — The skill turns your agent into a design-system author: tokens, type scale, component states, accessibility criteria. - [codex](https://affpapa.org/en/nevibecode/skills/typeuish-codex.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2300 installs — Enforces a radically minimal monochrome design system and generates component specifications compliant with WCAG 2.2 AA. - [sketch](https://affpapa.org/en/nevibecode/skills/sketch.md) — skill · typeui.sh · Claude Code, Codex, Cursor +3 · 2300 installs — This skill defines a hand-drawn design system for AI-assisted UI work. - [blender-web-pipeline](https://affpapa.org/en/nevibecode/skills/blender-web-pipeline.md) — skill · freshtechbro · Claude Code, Codex, Cursor +3 · 3500 installs — Exports Blender models and animations into web-ready glTF 2.0 assets. - [figma-build](https://affpapa.org/en/nevibecode/skills/figma-build.md) — skill · awdr74100 · Claude Code, Codex, Cursor +3 · 1300 installs — Builds or updates a design in a connected Figma file from code or a description, reusing its components, variables, and styles. - [swiftui-animation](https://affpapa.org/en/nevibecode/skills/swiftui-animation.md) — skill · dpearson2699 · Claude Code, Codex, Cursor +3 · 5400 installs — Guides your agent through SwiftUI motion APIs. - [webgl-3d-object](https://affpapa.org/en/nevibecode/skills/webgl-3d-object.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1600 installs — Guides coding agents to generate standalone Three.js 3D objects with physical materials, directional lighting, and proper memory cleanup. - [video-to-superprompt](https://affpapa.org/en/nevibecode/skills/video-to-superprompt.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1600 installs — Turns a reference video into a detailed build prompt for UI, motion and scrolling behavior. - [webgl-landing-steering](https://affpapa.org/en/nevibecode/skills/webgl-landing-steering.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1600 installs — Guides visual direction, Three.js architecture, and performance budgets for WebGL landing pages before writing front-end code. - [masked-reveal](https://affpapa.org/en/nevibecode/skills/masked-reveal.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1600 installs — This skill reveals words through an overflow mask as text enters the viewport with GSAP ScrollTrigger. - [nuxt-seo](https://affpapa.org/en/nevibecode/skills/nuxt-seo.md) — skill · onmax · Claude Code, Codex, Cursor +3 · 3100 installs — Guides an agent through Nuxt SEO setup for crawl rules and structured data. - [stripe-apps](https://affpapa.org/en/nevibecode/skills/stripe-stripe-apps.md) — skill · stripe · Claude Code, Codex, Cursor +3 · 1500 installs — Guides coding agents in building, modifying, and reviewing Stripe Apps, Dashboard extensions, and billing scripts. Next: https://affpapa.org/en/nevibecode/skills/topic/frontend.md?page=21 ## 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