# Skills for Frontend and UI Skills for Frontend and UI: what each one does, an install command and example prompts. 2909 cards · page 60 of 73 - HTML: https://affpapa.org/en/nevibecode/skills/topic/frontend?page=60 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [hover-interactions](https://affpapa.org/en/nevibecode/skills/hover-interactions.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 604 installs — A skill for mouse hover effects: button highlights, card lifts, link underlines, image zooms. - [ui-ux-polish](https://affpapa.org/en/nevibecode/skills/ui-ux-polish.md) — skill · oakoss · Claude Code, Codex, Cursor +3 · 539 installs — A skill that runs repeated polish passes on a working web app, treating desktop and mobile separately and checking accessibility along the way. - [awesome-design-md](https://affpapa.org/en/nevibecode/skills/awesome-design-md.md) — skill · wearescientist · Claude Code, Codex, Cursor +3 · 666 installs — Picks a matching DESIGN.md style from a bundled library and applies it to frontend work: layout, color, type, spacing. - [dotnet-wpf-modern](https://affpapa.org/en/nevibecode/skills/dotnet-wpf-modern.md) — skill · wshaddix · Claude Code, Codex, Cursor +3 · 301 installs — A skill that steers your coding agent through modern WPF: generic host, MVVM Toolkit, Fluent theme, current C# features. - [frontend-architecture](https://affpapa.org/en/nevibecode/skills/frontend-architecture.md) — skill · manutej · Claude Code, Codex, Cursor +3 · 722 installs — A skill for planning frontend structure: layers, patterns, state management and module boundaries. - [legend-state-best-practices](https://affpapa.org/en/nevibecode/skills/legend-state-best-practices.md) — skill · LegendApp · Claude Code, Codex, Cursor +3 · 475 installs — A skill that sets the rules for @legendapp/state: observable ownership, subscriptions, effects and persistence. - [flipoff-split-flap-display](https://affpapa.org/en/nevibecode/skills/flipoff-split-flap-display.md) — skill · reason-machines · Claude Code, Codex, Cursor +3 · 849 installs — A skill for building, restyling and embedding FlipOff, a framework-free split-flap board emulator that runs in any browser. - [playfulness-fun](https://affpapa.org/en/nevibecode/skills/playfulness-fun.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 594 installs — A skill for animations that entertain: exaggerated bounces, wiggles and springy easing. - [blockbench-plugins](https://affpapa.org/en/nevibecode/skills/blockbench-plugins.md) — skill · jasonjgardner · Claude Code, Codex, Cursor +3 · 647 installs — Guides JavaScript plugin development for the Blockbench 3D editor, covering custom actions, UI dialogs, Vue panels, and undoable model edits. - [ionic-react](https://affpapa.org/en/nevibecode/skills/ionic-react.md) — skill · capawesome-team · Claude Code, Codex, Cursor +3 · 717 installs — Walks the agent through Ionic Framework apps built with React: project layout, IonReactRouter, lifecycle hooks and state management. - [vtex-io-storefront-theme-versioning](https://affpapa.org/en/nevibecode/skills/vtex-io-storefront-theme-versioning.md) — skill · vtex · Claude Code, Codex, Cursor +3 · 777 installs — Guides coding agents through publishing, updating, or rolling back VTEX IO storefront themes without losing merchant Site Editor data across major versions. - [wix-vibe-headless](https://affpapa.org/en/nevibecode/skills/wix-vibe-headless.md) — skill · wix · Claude Code, Codex, Cursor +3 · 404 installs — Connects an existing frontend to a live Wix site using client-side REST and a public client ID. - [elegance-sophistication](https://affpapa.org/en/nevibecode/skills/elegance-sophistication.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 585 installs — Prompting rules for AI agents to craft restrained, luxury-focused UI motion. - [pump-analyzer-solana](https://affpapa.org/en/nevibecode/skills/pump-analyzer-solana.md) — skill · reason-machines · Claude Code, Codex, Cursor +3 · 837 installs — A static front end for watching Pump.fun token launches on Solana: a WebSocket feed, price and volume charts, and alerts on your own criteria. - [react-coding-style](https://affpapa.org/en/nevibecode/skills/react-coding-style.md) — skill · LegendApp · Claude Code, Codex, Cursor +3 · 466 installs — A skill that steers your coding agent through React implementation and review: narrow subscriptions, stable identities, honest hook dependencies. - [data-visualization](https://affpapa.org/en/nevibecode/skills/dylantarre-data-visualization.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 583 installs — Applies Disney's 12 animation principles to charts, dashboards, and data transitions. - [liveblocks-best-practices](https://affpapa.org/en/nevibecode/skills/liveblocks-best-practices.md) — skill · liveblocks · Claude Code, Codex, Cursor +3 · 882 installs — A Liveblocks skill that feeds your agent reference docs on rooms, comments, presence and auth, plus the errors people hit most. - [creative-director](https://affpapa.org/en/nevibecode/skills/dylantarre-creative-director.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 581 installs — Directs project animation vision and standards using Disney's 12 principles of motion. - [ui-visual-composition](https://affpapa.org/en/nevibecode/skills/ui-visual-composition.md) — skill · hueyexe · Claude Code, Codex, Cursor +3 · 707 installs — Teaches AI coding agents to critique and construct visual UI layouts. - [transition-sequences](https://affpapa.org/en/nevibecode/skills/transition-sequences.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 575 installs — A skill for multi-step animation: page transitions, onboarding flows, wizard steps. - [carousels-sliders](https://affpapa.org/en/nevibecode/skills/carousels-sliders.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 575 installs — Applies traditional animation principles to carousels, sliders, and image galleries to build fluid horizontal navigation. - [ionic-vue](https://affpapa.org/en/nevibecode/skills/ionic-vue.md) — skill · capawesome-team · Claude Code, Codex, Cursor +3 · 697 installs — Walks the agent through Ionic Vue development: project layout, routing, lifecycle hooks and composables. - [tailwindcss-fundamentals-v4](https://affpapa.org/en/nevibecode/skills/tailwindcss-fundamentals-v4.md) — skill · JosiahSiegel · Claude Code, Codex, Cursor +3 · 389 installs — A skill covering Tailwind CSS v4: install steps, CSS-first config with @theme, v3-to-v4 migration and the new utilities. - [frontend-design](https://affpapa.org/en/nevibecode/skills/aladicf-frontend-design.md) — skill · aladicf · Claude Code, Codex, Cursor +3 · 675 installs — Walks the agent through a decision order: task and hierarchy first, systems next, colour and decoration last. - [education-learning](https://affpapa.org/en/nevibecode/skills/education-learning.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 570 installs — A skill for animation work in e-learning and tutoring apps: it sets timings, answer feedback and progress cues. - [nuxt-seo](https://affpapa.org/en/nevibecode/skills/secondsky-nuxt-seo.md) — skill · secondsky · Claude Code, Codex, Cursor +3 · 324 installs — A skill covering the eight Nuxt SEO v5 modules: robots.txt, sitemaps, OG images, Schema.org and meta tags. - [travel-hospitality](https://affpapa.org/en/nevibecode/skills/travel-hospitality.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 568 installs — Guides AI coding agents on animation rules and timing standards for travel booking platforms and hospitality apps. - [dramatic-2000ms-plus](https://affpapa.org/en/nevibecode/skills/dramatic-2000ms-plus.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 566 installs — A skill for animation sequences over 2000ms: cinematic intros, story sequences, premium onboarding. - [open-pencil-design-editor](https://affpapa.org/en/nevibecode/skills/open-pencil-design-editor.md) — skill · reason-machines · Claude Code, Codex, Cursor +3 · 810 installs — Teaches your coding agent to inspect, modify, and export local .fig design files using OpenPencil CLI commands or an MCP server. - [loading-states](https://affpapa.org/en/nevibecode/skills/dylantarre-loading-states.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 565 installs — A skill for loading indicators: spinners, progress bars, skeletons and shimmer. - [rive-animations](https://affpapa.org/en/nevibecode/skills/rive-animations.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 564 installs — A skill that walks your agent through building Rive animations on Disney's 12 principles: state machines, inputs, timing, React hooks. - [notifications-toasts](https://affpapa.org/en/nevibecode/skills/notifications-toasts.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 561 installs — Guides AI assistants on animating toasts and system alerts using classic animation principles. - [tailwindcss](https://affpapa.org/en/nevibecode/skills/martinholovsky-tailwindcss.md) — skill · martinholovsky · Claude Code, Codex, Cursor +3 · 498 installs — A skill that teaches AI agents to style the JARVIS assistant UI with Tailwind utility classes: dark HUD theme, responsive grids, animations, and tests before implementation. - [vtex-io-rootpath](https://affpapa.org/en/nevibecode/skills/vtex-io-rootpath.md) — skill · vtex · Claude Code, Codex, Cursor +3 · 740 installs — A skill for VTEX IO apps in multi-binding stores: shows how to build URLs with the binding's path prefix. - [frontend-developer](https://affpapa.org/en/nevibecode/skills/dylantarre-frontend-developer.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 558 installs — Translates Disney's 12 animation principles into code for UI transitions and micro-interactions. - [navigation-menus](https://affpapa.org/en/nevibecode/skills/navigation-menus.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 557 installs — A skill for animating navbars, dropdowns and sidebars: timings, easing curves and transition states built on Disney's principles. - [instrument-integration](https://affpapa.org/en/nevibecode/skills/instrument-integration.md) — skill · PostHog · Claude Code, Codex, Cursor +3 · 537 installs — This skill adds the PostHog SDK to an app: it detects the stack, installs the package, writes the initialization and env vars. - [typescript-data-visualization-engineering](https://affpapa.org/en/nevibecode/skills/typescript-data-visualization-engineering.md) — skill (official OpenAI) · OpenAI · Codex, ChatGPT · 9 installs — Guides typed data visualization architecture in TypeScript, covering data contracts, state boundaries, and renderer selection from D3 to WebGL. - [gantt-chart-visualization](https://affpapa.org/en/nevibecode/skills/gantt-chart-visualization.md) — skill (official OpenAI) · OpenAI · Codex, ChatGPT · 9 installs — Designs Gantt charts, audits schedule models, and selects frontend visualization stacks. - [canvas2d-data-visualization](https://affpapa.org/en/nevibecode/skills/canvas2d-data-visualization.md) — skill (official OpenAI) · OpenAI · Codex, ChatGPT · 9 installs — Renders data visualizations with Canvas2D when DOM overhead slows down the page. Next: https://affpapa.org/en/nevibecode/skills/topic/frontend.md?page=61 ## 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