# Skills for Frontend and UI Skills for Frontend and UI: what each one does, an install command and example prompts. 2909 cards · page 9 of 73 - HTML: https://affpapa.org/en/nevibecode/skills/topic/frontend?page=9 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [material-ui-styling](https://affpapa.org/en/nevibecode/skills/material-ui-styling.md) — skill · mui · Claude Code, Codex, Cursor +3 · 688 installs — Helps the agent pick the right Material UI styling layer: sx, styled(), theme components, or global CSS. - [expo-examples](https://affpapa.org/en/nevibecode/skills/expo-examples.md) — skill · expo · Claude Code, Codex, Cursor +3 · 26400 installs — Adapts official integration patterns from the expo/examples repository or scaffolds fresh projects with npx create-expo. - [screen-reader-testing](https://affpapa.org/en/nevibecode/skills/screen-reader-testing.md) — skill · Seth Hobson · Claude Code, Codex, Cursor · 10700 installs — This skill guides screen reader testing for web apps with VoiceOver, NVDA, and JAWS. - [threejs-fundamentals](https://affpapa.org/en/nevibecode/skills/threejs-fundamentals.md) — skill · CloudAI-X · Claude Code, Codex, Cursor +3 · 17400 installs — Sets up Three.js r186 scenes, cameras, renderers, and animation loops for WebGL or WebGPU with TSL. - [better-auth-best-practices](https://affpapa.org/en/nevibecode/skills/better-auth-best-practices.md) — skill · better-auth · Claude Code, Codex, Cursor +3 · 126700 installs — This skill guides Better Auth setup in TypeScript projects, covering the server, client, database, sessions, and plugins for email/password or OAuth flows. - [pixelbin-media](https://affpapa.org/en/nevibecode/skills/pixelbin-media.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2700 installs — A skill for generating and editing images and videos through Pixelbin and building website pages from them. - [wpds](https://affpapa.org/en/nevibecode/skills/nexu-io-wpds.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2700 installs — Applies official WordPress Design System tokens, typography, and component patterns to themes and sites. - [figma-code-connect-components](https://affpapa.org/en/nevibecode/skills/figma-code-connect-components.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2700 installs — Links Figma design components to code components through Code Connect. - [stitch-loop](https://affpapa.org/en/nevibecode/skills/nexu-io-stitch-loop.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2700 installs — A skill that runs an iterative feedback cycle between design and code: critique the layout → fix the code → verify fidelity. - [figma-generate-library](https://affpapa.org/en/nevibecode/skills/nexu-io-figma-generate-library.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2700 installs — Builds or updates a Figma design system library directly from your codebase. - [swiss-user-research-video-template](https://affpapa.org/en/nevibecode/skills/swiss-user-research-video-template.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2700 installs — Generates a Swiss-editorial user research deck as a single HTML file with warm paper aesthetics, minimalist layout, participant donut charts, and keyboard navigation. - [faq-page](https://affpapa.org/en/nevibecode/skills/faq-page.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2700 installs — Builds an HTML FAQ page with an accordion, search, and category filters. - [editorial-burgundy-principles-template](https://affpapa.org/en/nevibecode/skills/editorial-burgundy-principles-template.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2700 installs — Generates a three-slide editorial deck in burgundy and blush for manifestos, principles and culture narratives. - [swiss-creative-mode-template](https://affpapa.org/en/nevibecode/skills/swiss-creative-mode-template.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2700 installs — Builds an editorial, Swiss-style presentation page inside a self-contained HTML file. - [digits-fintech-swiss-template](https://affpapa.org/en/nevibecode/skills/digits-fintech-swiss-template.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2800 installs — A fintech deck template on a Swiss grid: black, warm paper, neon-lime accents. - [full-page-screenshot](https://affpapa.org/en/nevibecode/skills/nexu-io-full-page-screenshot.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2800 installs — This skill captures full-page screenshots of web pages using Chrome DevTools Protocol with no external dependencies. - [artifacts-builder](https://affpapa.org/en/nevibecode/skills/nexu-io-artifacts-builder.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2800 installs — A skill designed for generating multi-component claude.ai HTML artifacts. - [vue-router-best-practices](https://affpapa.org/en/nevibecode/skills/vue-router-best-practices.md) — skill · github.com/vuejs-ai · Claude Code, Codex, Cursor +3 · 15000 installs — Skill teaches AI coders Vue Router 4 patterns: navigation guards, route params handling, and component lifecycle synchronization. - [gsap-framer-scroll-animation](https://affpapa.org/en/nevibecode/skills/gsap-framer-scroll-animation.md) — skill (official GitHub) · Utkarsh Patrikar · GitHub Copilot · 3900 installs — This skill helps GitHub Copilot build scroll-driven motion with GSAP ScrollTrigger and Framer Motion. - [design-motion-principles](https://affpapa.org/en/nevibecode/skills/design-motion-principles.md) — skill · kylezantos · Claude Code, Codex, Cursor +3 · 12800 installs — Builds or audits UI motion with rules based on project context and interaction frequency. - [argent-lens](https://affpapa.org/en/nevibecode/skills/argent-lens.md) — skill · software-mansion · Claude Code, Codex, Cursor +3 · 22500 installs — Visual variant staging for UI elements in a native preview window. - [apple-design](https://affpapa.org/en/nevibecode/skills/dickwu-apple-design.md) — skill · dickwu · Claude Code, Codex, Cursor +3 · 9300 installs — Reviews app interfaces against Apple’s design guidance and helps spot issues in mockups, screenshots, and UI code. - [magic-ui](https://affpapa.org/en/nevibecode/skills/magic-ui.md) — skill · magicuidesign · Claude Code, Codex, Cursor +3 · 1200 installs — The magic-ui skill teaches Claude Code to work with Magic UI components in React and Next.js: select animations, install via shadcn registry, and check accessibility. - [build-zoom-contact-center-app](https://affpapa.org/en/nevibecode/skills/anthropics-build-zoom-contact-center-app.md) — skill (official Anthropic) · anthropics · Claude Code, Codex, Cursor +3 · 2100 installs — Reference skill for Zoom Contact Center architecture. - [build-zoom-virtual-agent](https://affpapa.org/en/nevibecode/skills/anthropics-build-zoom-virtual-agent.md) — skill (official Anthropic) · anthropics · Claude Code, Codex, Cursor +3 · 2100 installs — Reference skill for Zoom Virtual Agent development: web embeds, mobile wrappers, knowledge-base sync and chat lifecycle. - [build-zoom-video-sdk-app](https://affpapa.org/en/nevibecode/skills/anthropics-build-zoom-video-sdk-app.md) — skill (official Anthropic) · anthropics · Claude Code, Codex, Cursor +3 · 2100 installs — Reference skill for Zoom Video SDK — builds custom video apps with full UI control, no default Zoom interface. - [build-zoom-meeting-sdk-app](https://affpapa.org/en/nevibecode/skills/anthropics-build-zoom-meeting-sdk-app.md) — skill (official Anthropic) · anthropics · Claude Code, Codex, Cursor +3 · 2100 installs — Reference skill for embedding Zoom Meeting SDK across web and mobile applications. - [impeccable-design-polish](https://affpapa.org/en/nevibecode/skills/impeccable-design-polish.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2500 installs — Polishes existing HTML pages by removing generic AI styling cues, fixing mobile layout bugs, and tightening accessibility. - [threejs-shaders](https://affpapa.org/en/nevibecode/skills/threejs-shaders.md) — skill · CloudAI-X · Claude Code, Codex, Cursor +3 · 15600 installs — Guides the agent through writing GLSL shaders, custom materials, and TSL nodes for Three.js r186 across WebGL and WebGPU. - [create-adaptable-composable](https://affpapa.org/en/nevibecode/skills/create-adaptable-composable.md) — skill · github.com/vuejs-ai · Claude Code, Codex, Cursor +3 · 13800 installs — Skill for writing reusable Vue composables that accept values, refs, or getters and work the same way in all cases. - [material-ui-theming](https://affpapa.org/en/nevibecode/skills/material-ui-theming.md) — skill · mui · Claude Code, Codex, Cursor +3 · 607 installs — Skill for building and managing Material UI themes: palettes, color schemes, CSS variables, light/dark switching, and TypeScript augmentation. - [vue-testing-best-practices](https://affpapa.org/en/nevibecode/skills/vue-testing-best-practices.md) — skill · github.com/vuejs-ai · Claude Code, Codex, Cursor +3 · 13700 installs — Skill offering Vue 3 testing patterns and best practices. - [zoom-cobrowse-sdk](https://affpapa.org/en/nevibecode/skills/anthropics-zoom-cobrowse-sdk.md) — skill (official Anthropic) · anthropics · Claude Code, Codex, Cursor +3 · 2000 installs — A reference skill for building Zoom Cobrowse SDK integrations with browser co-browsing, annotations, privacy masking, and agent-assisted sessions. - [zoom-apps-sdk](https://affpapa.org/en/nevibecode/skills/anthropics-zoom-apps-sdk.md) — skill (official Anthropic) · anthropics · Claude Code, Codex, Cursor +3 · 2000 installs — Reference skill for the Zoom Apps SDK. - [antislop-ui](https://affpapa.org/en/nevibecode/skills/antislop-ui.md) — skill · miqdadbadjuber · Claude Code, Codex, Cursor +3 · 6400 installs — A UI and visual skill for reviewing color, layout, components, and motion. - [weread-year-in-review-video-template](https://affpapa.org/en/nevibecode/skills/weread-year-in-review-video-template.md) — skill · nexu-io · Claude Code, Codex, Cursor +3 · 2400 installs — Creates a vertical 9:16 HTML video for WeRead-style annual reading reports: stats, notes, keywords, and a reading persona card. - [improve-react](https://affpapa.org/en/nevibecode/skills/improve-react.md) — skill · millionco · Claude Code, Codex, Cursor +3 · 2500 installs — Audits an entire React codebase with React Doctor and drafts self-contained implementation plans for other agents. - [chrome-extensions](https://affpapa.org/en/nevibecode/skills/chrome-extensions.md) — skill · GoogleChrome · Claude Code, Codex, Cursor +3 · 11000 installs — Guides building and publishing Chrome Extensions using Manifest V3 standards. - [react-native-testing](https://affpapa.org/en/nevibecode/skills/react-native-testing.md) — skill · callstack · Claude Code, Codex, Cursor +3 · 5300 installs — Skill for writing and reviewing React Native component tests with Testing Library. - [threejs-geometry](https://affpapa.org/en/nevibecode/skills/threejs-geometry.md) — skill · CloudAI-X · Claude Code, Codex, Cursor +3 · 14600 installs — Teaches your coding agent how to build standard geometries, generate 3D text, and construct custom vertex buffers in three.js. Next: https://affpapa.org/en/nevibecode/skills/topic/frontend.md?page=10 ## 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