# Skills for Frontend and UI Skills for Frontend and UI: what each one does, an install command and example prompts. 2909 cards · page 27 of 73 - HTML: https://affpapa.org/en/nevibecode/skills/topic/frontend?page=27 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [clerk-tanstack-patterns](https://affpapa.org/en/nevibecode/skills/clerk-tanstack-patterns.md) — skill · clerk · Claude Code, Codex, Cursor +3 · 15500 installs — Walks your agent through Clerk auth in TanStack React Start: route guards, createServerFn, loaders and request middleware. - [compose-focus-navigation](https://affpapa.org/en/nevibecode/skills/compose-focus-navigation.md) — skill · chrisbanes · Claude Code, Codex, Cursor +3 · 1900 installs — This skill guides focus navigation in Jetpack Compose for TV, keyboards, desktop, accessibility, and D-pad input. - [experience-ui-bundle-agentforce-client-generate](https://affpapa.org/en/nevibecode/skills/experience-ui-bundle-agentforce-client-generate.md) — skill · forcedotcom · Claude Code, Codex, Cursor +3 · 5000 installs — Embeds the Agentforce Conversation Client in React and Angular UI Bundle apps: detects the framework, validates agentId, wires the component into a page. - [experience-ui-bundle-site-generate](https://affpapa.org/en/nevibecode/skills/experience-ui-bundle-site-generate.md) — skill · forcedotcom · Claude Code, Codex, Cursor +3 · 5000 installs — Generates Salesforce Digital Experience Site infrastructure for hosting React UI bundles. - [pixijs-scene-gif](https://affpapa.org/en/nevibecode/skills/pixijs-scene-gif.md) — skill · pixijs · Claude Code, Codex, Cursor +3 · 5600 installs — Teaches coding assistants how to load and play animated GIFs in PixiJS v8 with GifSprite. - [tailwind-theme-builder](https://affpapa.org/en/nevibecode/skills/tailwind-theme-builder.md) — skill · jezweb · Claude Code, Codex, Cursor +3 · 3200 installs — This skill sets up a Tailwind v4 + shadcn/ui theme with dark mode: installs deps, maps CSS variables through @theme inline, wires a theme toggle. - [color-palette](https://affpapa.org/en/nevibecode/skills/color-palette.md) — skill · jezweb · Claude Code, Codex, Cursor +3 · 3200 installs — Turns a single brand hex into a full colour system: an 11-shade scale, semantic tokens, dark mode variants and WCAG contrast checks. - [critique-information-density](https://affpapa.org/en/nevibecode/skills/critique-information-density.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 1700 installs — A skill that critiques a rendered screen's density: cognitive load, content priority, scanning patterns and progressive disclosure. - [doherty-threshold](https://affpapa.org/en/nevibecode/skills/doherty-threshold.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 1700 installs — This skill sets response-time targets for interface interactions and suggests feedback patterns when a wait cannot be avoided. - [millers-law](https://affpapa.org/en/nevibecode/skills/millers-law.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 1700 installs — Chunks interface elements into groups of about four to fit working memory limits. - [von-restorff-effect](https://affpapa.org/en/nevibecode/skills/von-restorff-effect.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 1700 installs — This skill guides coding agents to isolate a single primary action on a screen using visual contrast. - [hicks-law](https://affpapa.org/en/nevibecode/skills/hicks-law.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 1700 installs — A skill that applies Hick's Law — decision time grows with the number of simultaneous choices. - [fitts-law](https://affpapa.org/en/nevibecode/skills/fitts-law.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 1700 installs — A skill that makes your coding agent size and position controls by Fitts's Law. - [readable-measure](https://affpapa.org/en/nevibecode/skills/readable-measure.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 1700 installs — Sets optimal typographic measure and line length across screen breakpoints. - [localization-design](https://affpapa.org/en/nevibecode/skills/localization-design.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 1700 installs — Helps design UI for different languages, writing directions, and cultural contexts before translations arrive. - [law-of-common-region](https://affpapa.org/en/nevibecode/skills/law-of-common-region.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 1700 installs — A Gestalt skill that tells your agent when to group elements with a container, background or border instead of spacing alone. - [law-of-proximity](https://affpapa.org/en/nevibecode/skills/law-of-proximity.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 1800 installs — Applies the Law of Proximity to UI layouts, using spacing to show which elements belong together. - [search-ux](https://affpapa.org/en/nevibecode/skills/search-ux.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 1800 installs — Guides the agent through search design: query input, suggestions, filters, results and the empty state. - [onboarding-design](https://affpapa.org/en/nevibecode/skills/onboarding-design.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 1800 installs — Designs the first-run experience and activation path. - [pixijs-accessibility](https://affpapa.org/en/nevibecode/skills/pixijs-accessibility.md) — skill · pixijs · Claude Code, Codex, Cursor +3 · 5500 installs — Configures screen readers and keyboard navigation in PixiJS v8 apps by rendering a shadow DOM overlay. - [claude-design](https://affpapa.org/en/nevibecode/skills/claude-design.md) — skill · jiji262 · Claude Code, Codex, Cursor +3 · 2200 installs — A skill that produces design artifacts in HTML: landing pages, decks, prototypes, posters and wireframes. - [perf-lighthouse](https://affpapa.org/en/nevibecode/skills/perf-lighthouse.md) — skill · tech-leads-club · Claude Code, Codex, Cursor +3 · 321 installs — Runs local Lighthouse audits via CLI or Node API, parses reports, and configures performance budgets. - [i18n-expert](https://affpapa.org/en/nevibecode/skills/i18n-expert.md) — skill · daymade · Claude Code, Codex, Cursor +3 · 2700 installs — Sets up and audits UI localization by replacing visible strings with keys and checking locale parity. - [swiftui-webkit](https://affpapa.org/en/nevibecode/skills/swiftui-webkit.md) — skill · dpearson2699 · Claude Code, Codex, Cursor +3 · 3200 installs — Guides coding agents on native SwiftUI WebKit APIs for iOS 26+. - [jury](https://affpapa.org/en/nevibecode/skills/jury.md) — skill · juliobsz · Claude Code, Codex, Cursor +3 · 911 installs — Screenshots every page type, measures LCP, CLS, FPS and accessibility, then a blind critic scores the site and ranks fixes. - [omnistudio-flexcard-generate](https://affpapa.org/en/nevibecode/skills/omnistudio-flexcard-generate.md) — skill · forcedotcom · Claude Code, Codex, Cursor +3 · 4800 installs — Generates and validates Salesforce OmniStudio FlexCards with a 130-point scoring rubric. - [omnistudio-omniscript-generate](https://affpapa.org/en/nevibecode/skills/omnistudio-omniscript-generate.md) — skill · forcedotcom · Claude Code, Codex, Cursor +3 · 4800 installs — This skill builds and validates OmniScripts for guided, multi-step processes using Integration Procedures and Data Mappers. - [compose-animations](https://affpapa.org/en/nevibecode/skills/compose-animations.md) — skill · chrisbanes · Claude Code, Codex, Cursor +3 · 1800 installs — Helps write and review Jetpack Compose motion across common UI states. - [clerk-swift](https://affpapa.org/en/nevibecode/skills/clerk-swift.md) — skill · clerk · Claude Code, Codex, Cursor +3 · 14500 installs — Builds Clerk sign-in UI in native iOS and macOS apps: prebuilt ClerkKitUI views or custom ClerkKit flows. - [browser-tools](https://affpapa.org/en/nevibecode/skills/browser-tools.md) — skill · badlogic · Claude Code, Codex, Cursor +3 · 465 installs — This skill connects an agent to Chrome through the Chrome DevTools Protocol for page interaction, frontend checks, and JavaScript-driven sites. - [pixijs-migration-v8](https://affpapa.org/en/nevibecode/skills/pixijs-migration-v8.md) — skill · pixijs · Claude Code, Codex, Cursor +3 · 5300 installs — This skill guides a PixiJS v7 to v8 migration and diagnoses common post-upgrade breakage. - [clerk-chrome-extension-patterns](https://affpapa.org/en/nevibecode/skills/clerk-chrome-extension-patterns.md) — skill · clerk · Claude Code, Codex, Cursor +3 · 14400 installs — Guides integration of @clerk/chrome-extension into Chrome extensions. - [mobile-platform-offline-validate](https://affpapa.org/en/nevibecode/skills/mobile-platform-offline-validate.md) — skill · forcedotcom · Claude Code, Codex, Cursor +3 · 4700 installs — Audits Lightning Web Components for Komaci offline priming compatibility in Salesforce mobile apps and generates code-level fixes. - [mobile-platform-native-capabilities-integrate](https://affpapa.org/en/nevibecode/skills/mobile-platform-native-capabilities-integrate.md) — skill · forcedotcom · Claude Code, Codex, Cursor +3 · 4700 installs — Guides an agent through building Salesforce LWCs that use native mobile features such as scanning, location, NFC, and payments. - [pencilkit](https://affpapa.org/en/nevibecode/skills/pencilkit.md) — skill · dpearson2699 · Claude Code, Codex, Cursor +3 · 3100 installs — Guides Apple Pencil drawing setup via PencilKit in Swift, configuring tool pickers and serializing strokes. - [clerk-astro-patterns](https://affpapa.org/en/nevibecode/skills/clerk-astro-patterns.md) — skill · clerk · Claude Code, Codex, Cursor +3 · 14300 installs — Walks your agent through Clerk inside Astro: middleware, protected SSR pages, API route auth and island components. - [prototype-prompt-generator](https://affpapa.org/en/nevibecode/skills/prototype-prompt-generator.md) — skill · stellarlinkco · Claude Code, Codex, Cursor +3 · 393 installs — Turns UI requirements into detailed, structured prompts for building HTML, CSS, or React prototypes. - [critique-color](https://affpapa.org/en/nevibecode/skills/critique-color.md) — skill · Owl-Listener · Claude Code, Codex, Cursor +3 · 1600 installs — The skill reviews colour choices on a single rendered screen, auditing contrast ratios, token consistency, and semantic colour meaning for accessible UI. - [add-read-aloud](https://affpapa.org/en/nevibecode/skills/add-read-aloud.md) — skill · cursor · Claude Code, Codex, Cursor +3 · 320 installs — Builds Grok text-to-speech into an existing app, for read-aloud controls, automatic playback, or spoken page content. - [add-voice](https://affpapa.org/en/nevibecode/skills/add-voice.md) — skill · cursor · Claude Code, Codex, Cursor +3 · 319 installs — Adds two-way Grok voice conversations to an app. Next: https://affpapa.org/en/nevibecode/skills/topic/frontend.md?page=28 ## 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