# Skills for Frontend and UI Skills for Frontend and UI: what each one does, an install command and example prompts. 2909 cards · page 28 of 73 - HTML: https://affpapa.org/en/nevibecode/skills/topic/frontend?page=28 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [clerk-expo](https://affpapa.org/en/nevibecode/skills/clerk-expo.md) — skill · clerk · Claude Code, Codex, Cursor +3 · 14100 installs — A skill that wires Clerk sign-in and sign-up into Expo and React Native apps. - [commerce-b2b-open-code-components-replace](https://affpapa.org/en/nevibecode/skills/commerce-b2b-open-code-components-replace.md) — skill · forcedotcom · Claude Code, Codex, Cursor +3 · 4600 installs — Replaces out-of-the-box B2B Commerce components with open source equivalents in site metadata content.json. - [clerk-vue-patterns](https://affpapa.org/en/nevibecode/skills/clerk-vue-patterns.md) — skill · clerk · Claude Code, Codex, Cursor +3 · 14000 installs — A skill that tells your agent how to wire Vue 3 to Clerk: composables, Vue Router guards and a Pinia auth store. - [clerk-nuxt-patterns](https://affpapa.org/en/nevibecode/skills/clerk-nuxt-patterns.md) — skill · clerk · Claude Code, Codex, Cursor +3 · 13900 installs — Provides @clerk/nuxt authentication patterns for Nuxt 3 projects. - [styleseed](https://affpapa.org/en/nevibecode/skills/styleseed.md) — skill · bitjaru · Claude Code, Codex, Cursor +3 · 570 installs — A skill for building, fixing and inspecting UI while keeping the design decisions your project already made. - [paperkit](https://affpapa.org/en/nevibecode/skills/paperkit.md) — skill · dpearson2699 · Claude Code, Codex, Cursor +3 · 3000 installs — This skill guides PaperKit markup integration in iOS apps, from an editable canvas to saved annotations. - [animate-text](https://affpapa.org/en/nevibecode/skills/animate-text.md) — skill · pixel-point · Claude Code, Codex, Cursor +3 · 2700 installs — A catalog of 24 text animation specs. - [build-review-interface](https://affpapa.org/en/nevibecode/skills/build-review-interface.md) — skill · ai-evals-course · Claude Code, Codex, Cursor +3 · 970 installs — Builds a custom browser-based annotation interface to review LLM traces and record human feedback. - [vuetify0](https://affpapa.org/en/nevibecode/skills/vuetify0.md) — skill · vuetifyjs · Claude Code, Codex, Cursor +3 · 721 installs — Tells the agent which @vuetify/v0 component or composable to reach for instead of hand-rolling it — buttons, dialogs, selection, virtual lists. - [winforms-expert](https://affpapa.org/en/nevibecode/skills/winforms-expert.md) — skill · dotnet · Claude Code, Codex, Cursor +3 · 955 installs — A skill for Windows Forms work: it edits code so the project builds, behaves at runtime and stays editable in the Visual Studio Designer. - [content-management-systems](https://affpapa.org/en/nevibecode/skills/content-management-systems.md) — skill (official GitHub) · github · GitHub Copilot · 128 installs — Guides GitHub Copilot through CMS architecture, template hierarchies, custom extensions, and media routing. - [wordpress-elementor](https://affpapa.org/en/nevibecode/skills/wordpress-elementor.md) — skill · jezweb · Claude Code, Codex, Cursor +3 · 2900 installs — Edits Elementor pages and manages templates on WordPress sites via WP-CLI or browser automation. - [paper-poster-html](https://affpapa.org/en/nevibecode/skills/paper-poster-html.md) — skill · wanshuiyin · Claude Code, Codex, Cursor +3 · 311 installs — Builds academic conference posters as a single HTML file and renders print-ready PDFs using headless Chromium. - [procedural-fish-render](https://affpapa.org/en/nevibecode/skills/procedural-fish-render.md) — skill · vibe-motion · Claude Code, Codex, Cursor +3 · 1000 installs — Clones or updates the procedural-fish repository and exports procedural fish animation to a video file via Remotion. - [Agentic UX Design - Relationship-Centric Interfaces](https://affpapa.org/en/nevibecode/skills/agentic-ux-design-relationship-centric-interfaces.md) — skill · bencium · Claude Code, Codex, Cursor +3 · 3300 installs — Guides AI interface design toward continuous memory, trust evolution, and co-planning instead of isolated screens. - [bencium-code-conventions](https://affpapa.org/en/nevibecode/skills/bencium-code-conventions.md) — skill · bencium · Claude Code, Codex, Cursor +3 · 3300 installs — Sets Bence's conventions for React and Next.js projects, covering the stack, code style, tests and workflow. - [renaissance-architecture](https://affpapa.org/en/nevibecode/skills/renaissance-architecture.md) — skill · bencium · Claude Code, Codex, Cursor +3 · 3300 installs — A skill that pushes the agent toward first-principles design instead of "X but for Y". - [image-to-code](https://affpapa.org/en/nevibecode/skills/plugin87-image-to-code.md) — skill · plugin87 · Claude Code, Codex, Cursor +3 · 719 installs — Reconstructs UI mockups and screenshots into token-driven accessible code with automated WCAG AA contrast validation. - [interfaces-that-feel](https://affpapa.org/en/nevibecode/skills/interfaces-that-feel.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 1500 installs — A skill for reviewing a UI that works correctly but lands cold. - [critique-affordance](https://affpapa.org/en/nevibecode/skills/critique-affordance.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 1600 installs — Audits rendered screens for interaction signals, state visibility, action discoverability, and primary CTA clarity. - [ux-audit](https://affpapa.org/en/nevibecode/skills/ux-audit.md) — skill · jezweb · Claude Code, Codex, Cursor +3 · 2800 installs — This skill tests a live web app through browser interactions to catch usability, behavior, accessibility, and layout issues. - [web-asset-generator](https://affpapa.org/en/nevibecode/skills/web-asset-generator.md) — skill · alonw0 · Claude Code, Codex, Cursor +3 · 933 installs — Generates favicons, PWA app icons, and Open Graph social cards from logos, emojis, or text. - [ui-ux-pro-max](https://affpapa.org/en/nevibecode/skills/galaxy-dawn-ui-ux-pro-max.md) — skill · Galaxy-Dawn · Claude Code, Codex, Cursor +3 · 506 installs — Turns a vague "make it look good" into a concrete design system: palette, typography, component rules and stack-aware notes. - [ruler-progress-render](https://affpapa.org/en/nevibecode/skills/ruler-progress-render.md) — skill · vibe-motion · Claude Code, Codex, Cursor +3 · 958 installs — Clones ruler-progress-animator and renders a ruler progress animation video using Remotion presets. - [astro](https://affpapa.org/en/nevibecode/skills/astrolicious-astro.md) — skill · astrolicious · Claude Code, Codex, Cursor +3 · 18200 installs — A skill that teaches your agent the Astro web framework: pages, components, SSR adapters, content collections and deployment. - [nuxt-studio](https://affpapa.org/en/nevibecode/skills/nuxt-studio.md) — skill · onmax · Claude Code, Codex, Cursor +3 · 1600 installs — Walks you through self-hosted Nuxt Studio: auth, media, drafts and Git publishing. - [sanity-live-cache-components](https://affpapa.org/en/nevibecode/skills/sanity-live-cache-components.md) — skill · sanity-io · Claude Code, Codex, Cursor +3 · 527 installs — Connects next-sanity to Next.js Cache Components: sanityFetch behind one shared 'use cache' boundary, with keeping cached pages fresh. - [landing](https://affpapa.org/en/nevibecode/skills/landing.md) — skill · Alireza Rezvani · Claude Code · 404 installs — This skill creates a single-page HTML landing page with 3D CSS animation, GSAP scroll effects, and mouse parallax. - [pixijs-html-source](https://affpapa.org/en/nevibecode/skills/pixijs-html-source.md) — skill · pixijs · Claude Code, Codex, Cursor +3 · 4500 installs — Teaches your agent to turn a live DOM element or a frozen snapshot of one into a PixiJS v8 texture via the experimental HTML-in-Canvas API. - [setup-react-native-storybook](https://affpapa.org/en/nevibecode/skills/setup-react-native-storybook.md) — skill · storybookjs · Claude Code, Codex, Cursor +3 · 528 installs — Automates Storybook 10 installation in React Native projects. - [tastemaker](https://affpapa.org/en/nevibecode/skills/tastemaker.md) — skill · codeswithroh · Claude Code, Codex, Cursor +3 · 892 installs — A skill that pulls style from real references, locks it per project, and reuses it across every screen. - [focus-engine](https://affpapa.org/en/nevibecode/skills/focus-engine.md) — skill · dpearson2699 · Claude Code, Codex, Cursor +3 · 2600 installs — An AI-coding skill for focus handling in SwiftUI and UIKit: keyboard and directional movement, scene values, restoration after presentation changes. - [android-design-guidelines](https://affpapa.org/en/nevibecode/skills/android-design-guidelines.md) — skill · platform-design-skills · Claude Code, Codex, Cursor +3 · 1700 installs — A skill that keeps an AI agent inside Material Design 3 while building Android UI: dynamic color, color roles, navigation patterns. - [tanstack-start](https://affpapa.org/en/nevibecode/skills/jezweb-tanstack-start.md) — skill · jezweb · Claude Code, Codex, Cursor +3 · 2500 installs — Scaffolds a full-stack TanStack Start app on Cloudflare Workers from scratch: SSR, file-based routing, D1, auth. - [tanstack-integration-best-practices](https://affpapa.org/en/nevibecode/skills/tanstack-integration-best-practices.md) — skill · DeckardGer · Claude Code, Codex, Cursor +3 · 2900 installs — A skill that hands the agent rules for wiring TanStack Query, Router and Start together: loaders, SSR hydration, cache ownership. - [remotion-3d-ticker](https://affpapa.org/en/nevibecode/skills/remotion-3d-ticker.md) — skill · vibe-motion · Claude Code, Codex, Cursor +3 · 852 installs — Builds looping 3D column scroll effects for Remotion videos. - [landing-page-design](https://affpapa.org/en/nevibecode/skills/landing-page-design.md) — skill · 101-skills · Claude Code, Codex, Cursor +3 · 56100 installs — Guides landing page work around the hero, CTA and social proof. - [light-spotlight-render](https://affpapa.org/en/nevibecode/skills/light-spotlight-render.md) — skill · vibe-motion · Claude Code, Codex, Cursor +3 · 840 installs — Create a standalone HTML animation that reveals text with a swinging spotlight. - [image-processing](https://affpapa.org/en/nevibecode/skills/image-processing.md) — skill · jezweb · Claude Code, Codex, Cursor +3 · 2400 installs — Resize, trim whitespace, convert PNG/WebP/JPG, optimise size, build thumbnails and OG cards. - [convex-realtime](https://affpapa.org/en/nevibecode/skills/convex-realtime.md) — skill · waynesutton · Claude Code, Codex, Cursor +3 · 2900 installs — A skill for wiring React to Convex subscriptions: useQuery patterns, optimistic updates, pagination that stays live, and cutting subscription churn. Next: https://affpapa.org/en/nevibecode/skills/topic/frontend.md?page=29 ## 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