# Skills for Frontend and UI Skills for Frontend and UI: what each one does, an install command and example prompts. 2909 cards · page 51 of 73 - HTML: https://affpapa.org/en/nevibecode/skills/topic/frontend?page=51 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [countdown-video](https://affpapa.org/en/nevibecode/skills/countdown-video.md) — skill · iart-ai · Claude Code, Codex, Cursor +3 · 1700 installs — A skill for building countdown videos: frame-accurate timers, digit roll transitions, mm:ss or dd:hh:mm:ss formatting. - [capacitor-deep-linking](https://affpapa.org/en/nevibecode/skills/capacitor-deep-linking.md) — skill · Cap-go · Claude Code, Codex, Cursor +3 · 1300 installs — Configures and debugs custom URL schemes, iOS Universal Links, and Android App Links in Capacitor apps. - [safe-area-handling](https://affpapa.org/en/nevibecode/skills/safe-area-handling.md) — skill · Cap-go · Claude Code, Codex, Cursor +3 · 1300 installs — Fixes Capacitor layouts where content sits under the notch, Dynamic Island, home indicator or the Android gesture bar. - [debugging-capacitor](https://affpapa.org/en/nevibecode/skills/debugging-capacitor.md) — skill · Cap-go · Claude Code, Codex, Cursor +3 · 1300 installs — Diagnoses runtime bugs in Capacitor iOS and Android apps, fixing blank screens, plugin bridge errors, and network restrictions. - [angular-best-practices](https://affpapa.org/en/nevibecode/skills/angular-best-practices.md) — skill · Boise-State-Development · Claude Code, Codex, Cursor +3 · 756 installs — Keeps your agent inside Angular 21 conventions: signals, standalone components, reactive forms. - [nuxtjs-vue-typescript](https://affpapa.org/en/nevibecode/skills/nuxtjs-vue-typescript.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 834 installs — Coding guidelines for Nuxt 3 and Vue 3 projects using TypeScript and Tailwind CSS. - [extract](https://affpapa.org/en/nevibecode/skills/adobe-extract.md) — skill · adobe · Claude Code, Codex, Cursor +3 · 496 installs — Crawls an existing website to extract its design tokens, palette, typography, and UI assets into stardust/current/. - [bundle-size-optimization](https://affpapa.org/en/nevibecode/skills/bundle-size-optimization.md) — skill · aj-geddes · Claude Code, Codex, Cursor +3 · 561 installs — Cuts JavaScript and CSS bundle sizes using code splitting and tree shaking. - [relational-database-web-cloudbase](https://affpapa.org/en/nevibecode/skills/relational-database-web-cloudbase.md) — skill · TencentCloudBase · Claude Code, Codex, Cursor +3 · 899 installs — Sets the init pattern for @cloudbase/js-sdk in the browser so you get one shared CloudBase relational DB client and Supabase-style queries. - [responsive-design](https://affpapa.org/en/nevibecode/skills/mindrally-responsive-design.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 830 installs — A skill that hands your coding agent a set of responsive design rules: mobile-first CSS, flexible layouts, media queries, adaptive images and type. - [sveltekit-svelte5-tailwind-skill](https://affpapa.org/en/nevibecode/skills/sveltekit-svelte5-tailwind-skill.md) — skill · claude-skills · Claude Code, Codex, Cursor +3 · 561 installs — A skill that helps an agent build sites on SvelteKit 2, Svelte 5 and Tailwind CSS v4. - [ghost](https://affpapa.org/en/nevibecode/skills/ghost.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 828 installs — Gives your agent working knowledge of Ghost CMS theme development: Handlebars templates, partials, Tailwind CSS and Alpine.js wiring, image and SEO work. - [ionic-angular](https://affpapa.org/en/nevibecode/skills/ionic-angular.md) — skill · capawesome-team · Claude Code, Codex, Cursor +3 · 1500 installs — A skill that walks your coding agent through Angular patterns in Ionic: routing, lazy loading, forms, page lifecycle hooks. - [e2e-playwright-testing](https://affpapa.org/en/nevibecode/skills/e2e-playwright-testing.md) — skill · Agent Skills Contributors · Claude Code, Codex, Cursor +3 · 803 installs — A skill that guides the agent through writing Playwright E2E tests: locators, auth reuse, forms, assertions and CI config. - [direct](https://affpapa.org/en/nevibecode/skills/direct.md) — skill · adobe · Claude Code, Codex, Cursor +3 · 488 installs — Translates freeform redesign intent into target specifications for an existing website. - [vite](https://affpapa.org/en/nevibecode/skills/mindrally-vite.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 820 installs — Supplies your coding agent with vetted Vite recipes for HMR, chunk splitting, framework plugins, and Vitest setups. - [neo4j-nvl-skill](https://affpapa.org/en/nevibecode/skills/neo4j-nvl-skill.md) — skill · neo4j-contrib · Claude Code, Codex, Cursor +3 · 716 installs — Renders Neo4j graphs in browsers with Canvas or WebGL2, covering React 19 wrappers and interaction handlers. - [21st-ui-review](https://affpapa.org/en/nevibecode/skills/21st-ui-review.md) — skill · 21st-dev · Claude Code, Codex, Cursor +3 · 1300 installs — Reviews existing UI for accessibility, responsive behavior and drift from the project's design system. - [21st-ui-explore](https://affpapa.org/en/nevibecode/skills/21st-ui-explore.md) — skill · 21st-dev · Claude Code, Codex, Cursor +3 · 1400 installs — This skill sketches several genuinely different UI directions from your project's design system plus 21st references. - [prepare-migration](https://affpapa.org/en/nevibecode/skills/prepare-migration.md) — skill · adobe · Claude Code, Codex, Cursor +3 · 487 installs — Orchestrates full-site redesign migration prep: crawls pages, confirms module catalogs, and builds design canon before running the migration. - [blazor-expert](https://affpapa.org/en/nevibecode/skills/blazor-expert.md) — skill · markpitt · Claude Code, Codex, Cursor +3 · 688 installs — Blazor reference skill for Claude Code covering Server, WebAssembly, and Hybrid models. - [angular](https://affpapa.org/en/nevibecode/skills/mindrally-angular.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 816 installs — Configures your AI agent to follow official Angular and TypeScript conventions with standalone components, reactive signals, and strict interfaces. - [motion](https://affpapa.org/en/nevibecode/skills/mindrally-motion.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 812 installs — Guides coding agents to build hardware-accelerated animations using the Motion library in vanilla JavaScript and TypeScript. - [web-development](https://affpapa.org/en/nevibecode/skills/mindrally-web-development.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 815 installs — A skill that hands the agent web development conventions: Bootstrap grid, Django views and models, HTMX attributes. - [Web Design Builder](https://affpapa.org/en/nevibecode/skills/web-design-builder.md) — skill · rknall · Claude Code, Codex, Cursor +3 · 416 installs — Turns a spec or a plain description into HTML5/CSS/JS, then checks accessibility and behaviour through Playwright MCP. - [state-management](https://affpapa.org/en/nevibecode/skills/state-management.md) — skill · agent-skills · Claude Code, Codex, Cursor +3 · 790 installs — A skill that hands your agent ready patterns for TanStack Query v5 and Zustand v5: fetching, caching, mutations, optimistic updates and client stores. - [web-motion-design](https://affpapa.org/en/nevibecode/skills/web-motion-design.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 1300 installs — A skill that tells your agent how to build CSS animations, JS transitions and React or Vue motion using Disney's 12 animation principles. - [real-time-features](https://affpapa.org/en/nevibecode/skills/real-time-features.md) — skill · aj-geddes · Claude Code, Codex, Cursor +3 · 543 installs — Equips coding assistants with architectural patterns for WebSockets, Server-Sent Events, and long polling. - [web-performance-audit](https://affpapa.org/en/nevibecode/skills/web-performance-audit.md) — skill · aj-geddes · Claude Code, Codex, Cursor +3 · 543 installs — This skill measures page load times, finds bottlenecks and points at what to fix. - [instantdb](https://affpapa.org/en/nevibecode/skills/instantdb.md) — skill · instantdb · Claude Code, Codex, Cursor +3 · 1400 installs — A skill that steers the agent through building apps on InstantDB: schema, permissions, queries, file storage. - [wechat-miniprogram-skill](https://affpapa.org/en/nevibecode/skills/wechat-miniprogram-skill.md) — skill · Gourdbaby · Claude Code, Codex, Cursor +3 · 1400 installs — Turns your coding agent into a native WeChat Mini Program developer: performance, code size and platform compatibility rules baked in. - [webpack-bundler](https://affpapa.org/en/nevibecode/skills/webpack-bundler.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 802 installs — A skill that tells the agent how to write and fix Webpack configs: chunk splitting, tree shaking, loaders and plugins. - [browser-debugging](https://affpapa.org/en/nevibecode/skills/browser-debugging.md) — skill · aj-geddes · Claude Code, Codex, Cursor +3 · 540 installs — A skill for chasing client-side bugs: JavaScript errors, broken layouts, slow pages. - [filament-pro](https://affpapa.org/en/nevibecode/skills/filament-pro.md) — skill · marcelorodrigo · Claude Code, Codex, Cursor +3 · 1200 installs — A skill that walks your agent through Filament v5 admin panels: resources, forms, tables, widgets and Livewire v4 tests. - [three-js](https://affpapa.org/en/nevibecode/skills/three-js.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 798 installs — Guides agent development for Three.js and React Three Fiber with TypeScript standards, render optimization, and resource disposal. - [design-system-creation](https://affpapa.org/en/nevibecode/skills/design-system-creation.md) — skill · aj-geddes · Claude Code, Codex, Cursor +3 · 537 installs — A skill that lays out a design system: tokens, components, docs and governance. - [blazor](https://affpapa.org/en/nevibecode/skills/blazor.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 798 installs — A skill that gives your coding agent Blazor rules: component lifecycle, data binding, state management and render optimization. - [distinctive-frontend](https://affpapa.org/en/nevibecode/skills/distinctive-frontend.md) — skill · podo · Claude Code, Codex, Cursor +3 · 588 installs — Generates web interfaces with bold visual identity, replacing generic AI palettes and fonts with distinct themes like Cyberpunk, Brutalist, Vaporwave, and Nordic Minimalism. - [ionic](https://affpapa.org/en/nevibecode/skills/ionic.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 797 installs — Gives the agent a set of Ionic rules: feature-based structure, built-in components, SCSS theming, lazy loading and Firebase. - [graphic-design](https://affpapa.org/en/nevibecode/skills/graphic-design.md) — skill · travisjneuman · Claude Code, Codex, Cursor +3 · 492 installs — A skill that hands your coding agent a graphic design reference: color, typography, grids, file formats. Next: https://affpapa.org/en/nevibecode/skills/topic/frontend.md?page=52 ## 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