# Skills for Frontend and UI Skills for Frontend and UI: what each one does, an install command and example prompts. 2909 cards · page 33 of 73 - HTML: https://affpapa.org/en/nevibecode/skills/topic/frontend?page=33 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [css-native](https://affpapa.org/en/nevibecode/skills/css-native.md) — skill · AThevon · Claude Code, Codex, Cursor +3 · 1100 installs — A skill that tells your coding agent when plain CSS is enough for animations and visual effects, and when to reach for a library. - [gsap](https://affpapa.org/en/nevibecode/skills/athevon-gsap.md) — skill · AThevon · Claude Code, Codex, Cursor +3 · 997 installs — This skill helps an agent write GSAP animations with timelines, staggered effects, and ScrollTrigger. - [canvas-generative](https://affpapa.org/en/nevibecode/skills/canvas-generative.md) — skill · AThevon · Claude Code, Codex, Cursor +3 · 995 installs — A skill for algorithmic graphics on Canvas 2D: particles, flow fields, noise, fractals and L-systems. - [r3f-interaction](https://affpapa.org/en/nevibecode/skills/r3f-interaction.md) — skill · EnzeD · Claude Code, Codex, Cursor +3 · 3300 installs — Configures pointer events, object picking, dragging, and camera controls in React Three Fiber. - [llm-icon-finder](https://affpapa.org/en/nevibecode/skills/llm-icon-finder.md) — skill · daymade · Claude Code, Codex, Cursor +3 · 952 installs — This skill finds icon URLs for AI models and providers in the lobe-icons library and can download them as SVG, PNG or WEBP. - [antv-x6-editor](https://affpapa.org/en/nevibecode/skills/antv-x6-editor.md) — skill · antvis · Claude Code, Codex, Cursor +3 · 676 installs — Teaches the agent to build flowchart, DAG and ER diagram editors on @antv/x6, wire up plugins and track down rendering bugs. - [framer-motion](https://affpapa.org/en/nevibecode/skills/athevon-framer-motion.md) — skill · AThevon · Claude Code, Codex, Cursor +3 · 990 installs — Guides coding agents on Framer Motion and Motion patterns in React: layout transitions, gestures, and DOM-direct motion values. - [desktop-principles](https://affpapa.org/en/nevibecode/skills/desktop-principles.md) — skill · AThevon · Claude Code, Codex, Cursor +3 · 982 installs — A skill with desktop UX rules: hover states, pointer precision, keyboard shortcuts, multi-window patterns. - [om-auto-qa-pr](https://affpapa.org/en/nevibecode/skills/om-auto-qa-pr.md) — skill · open-mercato · Claude Code, Codex, Cursor +3 · 3200 installs — Verifies UI changes in a real browser, captures screenshots, and produces pass or fail reports. - [swap-integration](https://affpapa.org/en/nevibecode/skills/swap-integration.md) — skill · uniswap · Claude Code, Codex, Cursor +3 · 2200 installs — Integrates Uniswap token swaps into frontends, backend scripts, and smart contracts. - [mobile-principles](https://affpapa.org/en/nevibecode/skills/mobile-principles.md) — skill · AThevon · Claude Code, Codex, Cursor +3 · 974 installs — A rule set for mobile interfaces: tap target sizes, no-hover doctrine, thumb zones, safe areas and gestures. - [ecommerce-checkout-optimization](https://affpapa.org/en/nevibecode/skills/ecommerce-checkout-optimization.md) — skill · nexscope-ai · Claude Code, Codex, Cursor +3 · 1200 installs — Walks through your checkout funnel and points at where buyers abandon the cart. - [qt-ui-design](https://affpapa.org/en/nevibecode/skills/qt-ui-design.md) — skill · qt-ai-skills · Claude Code, Codex, Cursor +3 · 1100 installs — A skill that walks an AI agent through designing or auditing interfaces for Qt/QML apps, the web and embedded panels: layout, navigation, contrast, hit targets. - [qt-qml](https://affpapa.org/en/nevibecode/skills/qt-qml.md) — skill · qt-ai-skills · Claude Code, Codex, Cursor +3 · 1100 installs — Enforces QML coding standards during component authoring, refactoring, and code review. - [interface-kit](https://affpapa.org/en/nevibecode/skills/interface-kit.md) — skill · JuliusBrussee · Claude Code, Codex, Cursor +3 · 2200 installs — A skill that gives the agent a working order for interface code: accessibility first, then type, grid, color, motion. - [product-showcase](https://affpapa.org/en/nevibecode/skills/product-showcase.md) — skill · jezweb · Claude Code, Codex, Cursor +3 · 1100 installs — This skill turns a running web app into a multi-page site with real screenshots and visual workflow guides. - [onboarding-ux](https://affpapa.org/en/nevibecode/skills/onboarding-ux.md) — skill · jezweb · Claude Code, Codex, Cursor +3 · 1100 installs — This skill walks your app as a first-time user, finds where they get stuck, and writes the copy plus code for empty states, hints and welcome screens. - [ui-craft](https://affpapa.org/en/nevibecode/skills/ui-craft.md) — skill · educlopez · Claude Code, Codex, Cursor +3 · 1400 installs — A design and implementation skill for interfaces: it inspects the project first, then writes code. - [ui-mobile](https://affpapa.org/en/nevibecode/skills/ui-mobile.md) — skill · alinaqi · Claude Code, Codex, Cursor +3 · 1200 installs — Gives the agent hard rules for mobile interfaces: 44×44 touch targets, WCAG 2.1 AA contrast, visible button boundaries. - [compatibility-testing](https://affpapa.org/en/nevibecode/skills/compatibility-testing.md) — skill · proffesor-for-testing · Claude Code, Codex, Cursor +3 · 651 installs — Organizes cross-browser and responsive layout testing across devices and screen sizes. - [workflow-progress-screenshots](https://affpapa.org/en/nevibecode/skills/workflow-progress-screenshots.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 341 installs — Instructs coding agents to capture and send real visual progress screenshots automatically. - [compose-multiplatform](https://affpapa.org/en/nevibecode/skills/compose-multiplatform.md) — skill · AThevon · Claude Code, Codex, Cursor +3 · 951 installs — Provides Compose Multiplatform patterns for Android, iOS, Desktop, and Web. - [apple-launch-film](https://affpapa.org/en/nevibecode/skills/apple-launch-film.md) — skill · charlie947 · Claude Code, Codex, Cursor +3 · 1500 installs — Builds an Apple-style Mac launch film entirely in code: menu bar, notch, widgets and gradient wallpapers. - [title-sequence-3d](https://affpapa.org/en/nevibecode/skills/title-sequence-3d.md) — skill · charlie947 · Claude Code, Codex, Cursor +3 · 1500 installs — Creates cinematic 3D title sequences in code using Three.js and Claude Code. - [launch-video](https://affpapa.org/en/nevibecode/skills/launch-video.md) — skill · charlie947 · Claude Code, Codex, Cursor +3 · 1500 installs — Builds 30-45 second product launch promo videos as self-contained HTML files with deterministic frame seeking for MP4 export. - [ux-designer](https://affpapa.org/en/nevibecode/skills/ux-designer.md) — skill · szilu · Claude Code, Codex, Cursor +3 · 1600 installs — A skill for reviewing and building interfaces: it checks accessibility, screen states and microcopy, and supplies the numbers for spacing and contrast. - [swiftui-motion](https://affpapa.org/en/nevibecode/skills/swiftui-motion.md) — skill · AThevon · Claude Code, Codex, Cursor +3 · 943 installs — Provides SwiftUI animation rules and decision trees for coding agents. - [compose-motion](https://affpapa.org/en/nevibecode/skills/compose-motion.md) — skill · AThevon · Claude Code, Codex, Cursor +3 · 943 installs — A skill for Jetpack Compose animation: picks the right API for the job and hands over ready spring specs. - [swiftui-graphics](https://affpapa.org/en/nevibecode/skills/swiftui-graphics.md) — skill · AThevon · Claude Code, Codex, Cursor +3 · 939 installs — A skill for advanced SwiftUI visuals: Metal shaders, .visualEffect, iOS 26 Liquid Glass and Canvas. - [compose-graphics](https://affpapa.org/en/nevibecode/skills/compose-graphics.md) — skill · AThevon · Claude Code, Codex, Cursor +3 · 937 installs — A skill for advanced Jetpack Compose visuals: Material 3 Expressive spring physics, AGSL shaders, Canvas drawing and graphicsLayer effects. - [frontend-testing-debugging](https://affpapa.org/en/nevibecode/skills/frontend-testing-debugging.md) — skill (official OpenAI) · OpenAI · Codex, ChatGPT · 159 installs — Guides coding agents through structured frontend testing, UI checks, and bug investigations. - [design-system](https://affpapa.org/en/nevibecode/skills/builderos-design-system.md) — skill · BuilderOS · Claude Code, Codex, Cursor +3 · 1800 installs — Extracts design tokens from UI screenshots or mockups into docs/design.md for agents and a mirrored docs/design.html style guide. - [svelte5-best-practices](https://affpapa.org/en/nevibecode/skills/svelte5-best-practices.md) — skill · ejirocodes · Claude Code, Codex, Cursor +3 · 16600 installs — A skill that feeds your coding agent Svelte 5 runes, snippets and SvelteKit patterns while you write or refactor components. - [swiss-design](https://affpapa.org/en/nevibecode/skills/swiss-design.md) — skill · zeke · Claude Code, Codex, Cursor +3 · 951 installs — A skill that hands your coding agent a Swiss International Style design system: IBM Plex Sans type, a 12-column grid, stone palette and one accent color. - [paper-cinder-transition](https://affpapa.org/en/nevibecode/skills/paper-cinder-transition.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 330 installs — A WebGL transition where a line of fire eats the old page and reveals the next scene live behind it. - [responsive-patterns](https://affpapa.org/en/nevibecode/skills/responsive-patterns.md) — skill · OrchestKit · Claude Code, Codex, Cursor +3 · 1600 installs — Supplies container query guidelines, fluid typography rules, and CSS subgrid patterns for React components. - [craft-design-engineering](https://affpapa.org/en/nevibecode/skills/craft-design-engineering.md) — skill · gustavo-fior · Claude Code, Codex, Cursor +3 · 479 installs — A skill that hands your agent design engineering rules: type, colour, spacing, motion and numbers. - [wireframe](https://affpapa.org/en/nevibecode/skills/wireframe.md) — skill · ghaida · Claude Code, Codex, Cursor +3 · 2300 installs — Designs what sits on a screen, where it goes and what matters most. - [3d-orbit-inspect-demo](https://affpapa.org/en/nevibecode/skills/3d-orbit-inspect-demo.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 321 installs — A Three.js skill where the object leans under the cursor and lifts into your hand on click. - [edgeone](https://affpapa.org/en/nevibecode/skills/edgeone.md) — skill · aahl · Claude Code, Codex, Cursor +3 · 2200 installs — Deploys HTML content or web projects to EdgeOne Pages and returns a public URL. Next: https://affpapa.org/en/nevibecode/skills/topic/frontend.md?page=34 ## 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