# Skills for Frontend and UI Skills for Frontend and UI: what each one does, an install command and example prompts. 2909 cards · page 25 of 73 - HTML: https://affpapa.org/en/nevibecode/skills/topic/frontend?page=25 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [build-daily-inspiration-sites](https://affpapa.org/en/nevibecode/skills/build-daily-inspiration-sites.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1200 installs — Creates separate Codex tasks for original landing pages from a completed UI inspiration pack. - [build-threejs-enemy-systems](https://affpapa.org/en/nevibecode/skills/build-threejs-enemy-systems.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1200 installs — Designs data-driven enemy archetypes and movesets for Three.js action games. - [build-game-inventory](https://affpapa.org/en/nevibecode/skills/build-game-inventory.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1200 installs — Build or repair game inventory flows for items, loot, equipment, drag and drop, saves, and progression without losing item state. - [author-game-levels](https://affpapa.org/en/nevibecode/skills/author-game-levels.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1200 installs — Builds and refines readable, flat-plane Three.js game levels. - [pixijs](https://affpapa.org/en/nevibecode/skills/pixijs.md) — skill · pixijs · Claude Code, Codex, Cursor +3 · 6900 installs — Routes PixiJS v8 tasks to specialized sub-skills for rendering and scene setup. - [swift-charts](https://affpapa.org/en/nevibecode/skills/swift-charts.md) — skill · dpearson2699 · Claude Code, Codex, Cursor +3 · 4000 installs — A skill that steers your coding agent through Swift Charts work on iOS 26+. - [swiftui-gestures](https://affpapa.org/en/nevibecode/skills/swiftui-gestures.md) — skill · dpearson2699 · Claude Code, Codex, Cursor +3 · 4000 installs — Guides gesture implementation in SwiftUI, from tap and drag recognition to multi-gesture composition and conflict handling. - [swiftui-uikit-interop](https://affpapa.org/en/nevibecode/skills/swiftui-uikit-interop.md) — skill · dpearson2699 · Claude Code, Codex, Cursor +3 · 4100 installs — Bridges UIKit and SwiftUI views, controllers, and shared state without lifecycle conflicts or duplicated data. - [email-template-builder](https://affpapa.org/en/nevibecode/skills/email-template-builder.md) — skill · Alireza Rezvani · Claude Code · 602 installs — Builds transactional email systems with React Email or MJML, provider integrations and local previews. - [platform-flexipage-generate](https://affpapa.org/en/nevibecode/skills/platform-flexipage-generate.md) — skill · forcedotcom · Claude Code, Codex, Cursor +3 · 6000 installs — Builds and validates Salesforce Lightning FlexiPages using CLI scaffolding. - [design-systems-slds-apply](https://affpapa.org/en/nevibecode/skills/design-systems-slds-apply.md) — skill · forcedotcom · Claude Code, Codex, Cursor +3 · 6000 installs — A skill that teaches the agent to build Salesforce Lightning Design System interfaces: blueprints, styling hooks, utility classes and icons. - [remotion-motion-graphics](https://affpapa.org/en/nevibecode/skills/remotion-motion-graphics.md) — skill · haidrrrry · Claude Code, Codex, Cursor +3 · 1100 installs — A coding-agent skill that makes Remotion code follow motion design rules instead of shipping linear fades and flat backgrounds. - [scroll-reveal-libraries](https://affpapa.org/en/nevibecode/skills/scroll-reveal-libraries.md) — skill · freshtechbro · Claude Code, Codex, Cursor +3 · 2400 installs — Adds lightweight scroll-triggered reveal animations using the AOS library. - [react-spring-physics](https://affpapa.org/en/nevibecode/skills/react-spring-physics.md) — skill · freshtechbro · Claude Code, Codex, Cursor +3 · 2400 installs — A skill for physics-based React animation with React Spring and Popmotion. - [design-systems-slds-validate](https://affpapa.org/en/nevibecode/skills/design-systems-slds-validate.md) — skill · forcedotcom · Claude Code, Codex, Cursor +3 · 5900 installs — Checks Lightning Web Components against SLDS, runs the linter plus its own CSS and markup analysis, and returns a graded scorecard. - [compose-ui-testing-patterns](https://affpapa.org/en/nevibecode/skills/compose-ui-testing-patterns.md) — skill · chrisbanes · Claude Code, Codex, Cursor +3 · 2200 installs — Guides Jetpack Compose UI testing for semantics, screenshots, keyboard input, focus, and interaction state. - [performance-lighthouse-runner](https://affpapa.org/en/nevibecode/skills/performance-lighthouse-runner.md) — skill · Jeremy Longshore · Claude Code, Codex, Cursor +3 · 632 installs — This skill offers step-by-step guidance and helps generate code and configurations for frontend performance work. - [platform-custom-application-generate](https://affpapa.org/en/nevibecode/skills/platform-custom-application-generate.md) — skill · forcedotcom · Claude Code, Codex, Cursor +3 · 5800 installs — Generates Salesforce Lightning CustomApplication metadata with tab navigation, custom branding, and action overrides. - [critique-typography](https://affpapa.org/en/nevibecode/skills/critique-typography.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 2000 installs — Audits typography on a rendered screen: scale usage, readability, consistency and token compliance. - [critique-visual-hierarchy](https://affpapa.org/en/nevibecode/skills/critique-visual-hierarchy.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 2000 installs — This skill reviews a rendered screen across four dimensions and tells you where the eye actually lands. - [brand-guidelines](https://affpapa.org/en/nevibecode/skills/getsentry-brand-guidelines.md) — skill · getsentry · Claude Code, Codex, Cursor +3 · 2500 installs — Applies Sentry brand and copy guidelines to user-facing text, error states, and UI flows. - [nuxthub](https://affpapa.org/en/nevibecode/skills/nuxthub.md) — skill · onmax · Claude Code, Codex, Cursor +3 · 2200 installs — Configures NuxtHub v0.10.8 apps with Drizzle ORM databases, KV storage, and blobs. - [pwa-development](https://affpapa.org/en/nevibecode/skills/pwa-development.md) — skill · alinaqi · Claude Code, Codex, Cursor +3 · 4100 installs — A skill for building Progressive Web Apps: manifest, service worker, caching strategies and offline mode. - [playcanvas-engine](https://affpapa.org/en/nevibecode/skills/playcanvas-engine.md) — skill · freshtechbro · Claude Code, Codex, Cursor +3 · 2300 installs — Guides 3D web app and browser game development using the PlayCanvas WebGL/WebGPU engine. - [aframe-webxr](https://affpapa.org/en/nevibecode/skills/aframe-webxr.md) — skill · freshtechbro · Claude Code, Codex, Cursor +3 · 2300 installs — A skill that gets your agent writing A-Frame scenes in HTML: 3D, VR, AR and 360-degree media with little JavaScript. - [barba-js](https://affpapa.org/en/nevibecode/skills/barba-js.md) — skill · freshtechbro · Claude Code, Codex, Cursor +3 · 2400 installs — A skill for Barba.js: helps wire up smooth transitions between pages without full reloads and hook them into GSAP. - [full-page-screenshot](https://affpapa.org/en/nevibecode/skills/full-page-screenshot.md) — skill · Alireza Rezvani · Claude Code · 564 installs — Captures an entire web page as one PNG, including content below the fold. - [internal-dev-workbench](https://affpapa.org/en/nevibecode/skills/internal-dev-workbench.md) — skill · Pranay Prakash · Claude Code, Codex, Cursor +3 · 645 installs — This skill starts a tmux workspace for Workflow SDK development, with separate worktree URLs for the Next.js workbench and observability UI. - [design-systems-slds2-migrate](https://affpapa.org/en/nevibecode/skills/design-systems-slds2-migrate.md) — skill · forcedotcom · Claude Code, Codex, Cursor +3 · 5600 installs — Runs the SLDS linter over your components and walks you through fixing violations while moving Lightning Web Components from SLDS 1 to SLDS 2. - [shadcn-ui](https://affpapa.org/en/nevibecode/skills/jezweb-shadcn-ui.md) — skill · jezweb · Claude Code, Codex, Cursor +3 · 3600 installs — Installs and configures shadcn/ui components in a React project: picks them by task, keeps install order and dependencies straight. - [publish-project-to-github](https://affpapa.org/en/nevibecode/skills/publish-project-to-github.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1100 installs — Packages a local project into a GitHub repository, audits files for leaked secrets, generates a verified README, and configures GitHub Pages. - [build-interactive-particle-trail](https://affpapa.org/en/nevibecode/skills/build-interactive-particle-trail.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1100 installs — A skill for pointer-driven particle trails: the cursor or finger leaves discrete motes that fly on their own path. - [web-technique-to-skill](https://affpapa.org/en/nevibecode/skills/web-technique-to-skill.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1100 installs — Turns a visual or interaction technique you already built into a reusable web-design skill, with a demo that proves both the mechanism and the visual fidelity. - [add-mouse-driven-orbit](https://affpapa.org/en/nevibecode/skills/add-mouse-driven-orbit.md) — skill · MengTo · Claude Code, Codex, Cursor +3 · 1200 installs — Adds subtle mouse-driven orbit and parallax to Three.js hero sections without OrbitControls. - [design-audit](https://affpapa.org/en/nevibecode/skills/bencium-design-audit.md) — skill · bencium · Claude Code, Codex, Cursor +3 · 4100 installs — Audits an app’s visual design and produces a phased refinement plan. - [good-css](https://affpapa.org/en/nevibecode/skills/good-css.md) — skill · vojtaholik · Claude Code, Codex, Cursor +3 · 1500 installs — Replaces breakpoint ladders, layout wrappers and helper scripts with modern CSS. - [form-design](https://affpapa.org/en/nevibecode/skills/form-design.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 1900 installs — Designs forms end to end, covering field order, grouping, validation, and accessibility. - [aesthetic-usability](https://affpapa.org/en/nevibecode/skills/aesthetic-usability.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 1900 installs — Applies the Aesthetic-Usability Effect when visual polish affects perceived ease of use and trust. - [critique-composition](https://affpapa.org/en/nevibecode/skills/critique-composition.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 1900 installs — Critiques balance, negative space, visual rhythm, and gestalt grouping on rendered screens. - [tipkit](https://affpapa.org/en/nevibecode/skills/tipkit.md) — skill · dpearson2699 · Claude Code, Codex, Cursor +3 · 3600 installs — This skill helps implement and review Apple TipKit prompts, from inline help to tips attached to controls. Next: https://affpapa.org/en/nevibecode/skills/topic/frontend.md?page=26 ## 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