# Skills for Frontend and UI Skills for Frontend and UI: what each one does, an install command and example prompts. 2909 cards · page 14 of 73 - HTML: https://affpapa.org/en/nevibecode/skills/topic/frontend?page=14 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [transformers-js](https://affpapa.org/en/nevibecode/skills/transformers-js.md) — skill · huggingface · Claude Code, Codex, Cursor +3 · 2100 installs — This skill helps run machine learning models from JavaScript and TypeScript for text, images, audio, and multimodal tasks in browser or server-side code. - [migrate-xml-views-to-jetpack-compose](https://affpapa.org/en/nevibecode/skills/migrate-xml-views-to-jetpack-compose.md) — skill · Google LLC · Claude Code, Codex, Cursor +3 · 2400 installs — Guides the migration of one Android XML screen to Jetpack Compose, from project review through validation and legacy XML cleanup. - [ink](https://affpapa.org/en/nevibecode/skills/ink.md) — skill · vercel-labs · Claude Code, Codex, Cursor +3 · 1300 installs — Builds interactive terminal user interfaces from JSON specs using @json-render/ink. - [frontend-ui-dark-ts](https://affpapa.org/en/nevibecode/skills/sickn33-frontend-ui-dark-ts.md) — skill · sickn33 · Claude Code, Codex, Cursor +3 · 1100 installs — Build dark-themed React interfaces with Tailwind CSS and Framer Motion. - [sign-in-with-google-web](https://affpapa.org/en/nevibecode/skills/sign-in-with-google-web.md) — skill (official Google) · google · Claude Code, Gemini CLI, Codex · 743 installs — Guides Google Identity Services setup across web projects. - [v3-to-v4-migration](https://affpapa.org/en/nevibecode/skills/v3-to-v4-migration.md) — skill · phaserjs · Claude Code, Codex, Cursor +3 · 715 installs — Guides migration from Phaser 3 to Phaser 4. - [react-joyride](https://affpapa.org/en/nevibecode/skills/react-joyride.md) — skill · gilbarbara · Claude Code, Codex, Cursor +3 · 686 installs — Teaches the agent to create step-by-step tours and onboarding flows in React apps using React Joyride v3. - [scroll-craft](https://affpapa.org/en/nevibecode/skills/scroll-craft.md) — skill · nateherkai · Claude Code, Codex, Cursor +3 · 1200 installs — A skill that plans and builds a scroll-driven landing page: brief interview, section order, one emotional peak, dimensional hero, screenshot checks. - [feature-sliced-design](https://affpapa.org/en/nevibecode/skills/feature-sliced-design.md) — skill · feature-sliced · Claude Code, Codex, Cursor +3 · 23600 installs — This skill helps organize frontend code with Feature-Sliced Design and check import boundaries. - [mermaid-visualizer](https://affpapa.org/en/nevibecode/skills/mermaid-visualizer.md) — skill · axtonliu · Claude Code, Codex, Cursor +3 · 1700 installs — Transforms text into professional Mermaid diagrams. - [ce-polish](https://affpapa.org/en/nevibecode/skills/ce-polish.md) — skill · EveryInc · Claude Code, Codex, Cursor +3 · 1100 installs — Refines a working feature through browser feedback: you point out what needs work, the skill edits the code, hot reload shows the result. - [react-audit-grep-patterns](https://affpapa.org/en/nevibecode/skills/react-audit-grep-patterns.md) — skill (official GitHub) · github · GitHub Copilot · 854 installs — Verified grep pattern library for auditing React projects before upgrading to React 18.3.1 or 19. - [swiftui-ui-patterns](https://affpapa.org/en/nevibecode/skills/swiftui-ui-patterns.md) — skill (official OpenAI) · OpenAI · Codex, ChatGPT · 114 installs — This skill helps build and refactor SwiftUI interfaces, from navigation and state to layouts and controls. - [svelte](https://affpapa.org/en/nevibecode/skills/svelte.md) — skill · vercel-labs · Claude Code, Codex, Cursor +3 · 1200 installs — Guides AI coding agents through building Svelte 5 component trees from json-render specs, including state, events, bindings, and catalogs. - [shopify-apps](https://affpapa.org/en/nevibecode/skills/sickn33-shopify-apps.md) — skill · sickn33 · Claude Code, Codex, Cursor +3 · 1000 installs — Patterns for Shopify app development with Remix and React Router. - [web-typography](https://affpapa.org/en/nevibecode/skills/web-typography.md) — skill · wondelai · Claude Code, Codex, Cursor +3 · 9200 installs — This skill helps you select and configure typefaces for web projects: from choosing a font family to optimizing size, line height, and measure. - [refactoring-ui](https://affpapa.org/en/nevibecode/skills/refactoring-ui.md) — skill · wondelai · Claude Code, Codex, Cursor +3 · 9200 installs — Audits and polishes visual hierarchy, spacing scales, and color palettes in web interfaces. - [libraries-dev](https://affpapa.org/en/nevibecode/skills/libraries-dev.md) — skill · Jakubantalik · Claude Code, Codex, Cursor +3 · 1000 installs — Selects and integrates Libraries.dev React UI effects for AI interfaces, covering loaders, voice glows, animated borders, and bot avatars. - [create-mcp-app](https://affpapa.org/en/nevibecode/skills/create-mcp-app.md) — skill · modelcontextprotocol · Claude Code, Codex, Cursor +3 · 2700 installs — Walks the agent through building an MCP App: an MCP tool paired with an HTML resource whose UI the host renders next to the tool result. - [wp-block-themes](https://affpapa.org/en/nevibecode/skills/wp-block-themes.md) — skill · WordPress · Claude Code, Codex, Cursor +3 · 5800 installs — Guides the agent through building WordPress block themes, editing theme.json, and organizing templates. - [godot-ui-control](https://affpapa.org/en/nevibecode/skills/godot-ui-control.md) — skill · gamedev-skills · Claude Code, Codex, Cursor +3 · 7000 installs — A Claude Code skill that teaches the agent to lay out Godot 4.7 HUDs and menus with Control nodes: anchors, containers, themes and focus. - [solid](https://affpapa.org/en/nevibecode/skills/vercel-labs-solid.md) — skill · vercel-labs · Claude Code, Codex, Cursor +3 · 1100 installs — Skill to render JSON-specs into reactive SolidJS components. - [xstate](https://affpapa.org/en/nevibecode/skills/xstate.md) — skill · vercel-labs · Claude Code, Codex, Cursor +3 · 1100 installs — Teaches AI assistants how to hook @xstate/store into json-render's state interface. - [jotai](https://affpapa.org/en/nevibecode/skills/jotai.md) — skill · vercel-labs · Claude Code, Codex, Cursor +3 · 1100 installs — Turns a Jotai atom into json-render's state backend: install the packages, wrap the atom, share one store with your app. - [redux](https://affpapa.org/en/nevibecode/skills/redux.md) — skill · vercel-labs · Claude Code, Codex, Cursor +3 · 1100 installs — A Redux adapter for json-render: it points the renderer at a store slice instead of its own state. - [shadcn-svelte](https://affpapa.org/en/nevibecode/skills/vercel-labs-shadcn-svelte.md) — skill · vercel-labs · Claude Code, Codex, Cursor +3 · 1100 installs — Pre-built definitions and implementations of 36 shadcn components for json-render apps. - [salesforce-component-standards](https://affpapa.org/en/nevibecode/skills/salesforce-component-standards.md) — skill (official GitHub) · github · GitHub Copilot · 770 installs — Guides Salesforce UI development across LWC, Aura, and Visualforce. - [react18-dep-compatibility](https://affpapa.org/en/nevibecode/skills/react18-dep-compatibility.md) — skill (official GitHub) · github · GitHub Copilot · 764 installs — Checks minimum dependency versions for React 18.3.1 and React 19. - [browser-screenshot-diff](https://affpapa.org/en/nevibecode/skills/browser-screenshot-diff.md) — skill · ruvnet · Claude Code, Codex, Cursor +3 · 696 installs — Compares two recorded browser sessions by matching steps, screenshots, and accessibility snapshots. - [shopify-polaris-admin-extensions](https://affpapa.org/en/nevibecode/skills/shopify-shopify-polaris-admin-extensions.md) — skill · Shopify · Claude Code, Codex, Cursor +3 · 9700 installs — A skill for Shopify admin UI extensions in Claude Code. - [react-19](https://affpapa.org/en/nevibecode/skills/react-19.md) — skill · prowler-cloud · Claude Code, Codex, Cursor +3 · 671 installs — Skill for React 19 with React Compiler: no manual memoization, server components first, ref as a prop. - [react18-batching-patterns](https://affpapa.org/en/nevibecode/skills/react18-batching-patterns.md) — skill (official GitHub) · github · GitHub Copilot · 754 installs — Diagnoses and fixes React 18 automatic batching bugs in class components. - [shopify-polaris-checkout-extensions](https://affpapa.org/en/nevibecode/skills/shopify-shopify-polaris-checkout-extensions.md) — skill · Shopify · Claude Code, Codex, Cursor +3 · 9600 installs — A deprecated skill for Shopify Checkout extensions. - [svelte-code-writer](https://affpapa.org/en/nevibecode/skills/svelte-code-writer.md) — skill · sveltejs · Claude Code, Codex, Cursor +3 · 13000 installs — Fetches Svelte 5 documentation and analyzes components using autofixer. - [react-best-practices](https://affpapa.org/en/nevibecode/skills/react-best-practices-2.md) — skill · vercel · Claude Code, Codex, Cursor +3 · 399 installs — A skill that audits React and Next.js performance: it traces request waterfalls, extra bundle JS, server-client boundary mistakes and wasted rerenders. - [react18-legacy-context](https://affpapa.org/en/nevibecode/skills/react18-legacy-context.md) — skill (official GitHub) · github · GitHub Copilot · 745 installs — This skill migrates React legacy context to createContext and coordinates the provider with every consumer. - [react18-lifecycle-patterns](https://affpapa.org/en/nevibecode/skills/react18-lifecycle-patterns.md) — skill (official GitHub) · github · GitHub Copilot · 743 installs — Migrates unsafe class component lifecycle methods to React 18.3.1 patterns. - [wp-block-development](https://affpapa.org/en/nevibecode/skills/wp-block-development.md) — skill · WordPress · Claude Code, Codex, Cursor +3 · 5500 installs — A WordPress skill for Claude Code, Codex and Cursor that walks an agent through Gutenberg block work, from block.json metadata down to deprecations. - [react18-string-refs](https://affpapa.org/en/nevibecode/skills/react18-string-refs.md) — skill (official GitHub) · github · GitHub Copilot · 741 installs — Guides the move from string refs to React.createRef() in class components. - [react18-enzyme-to-rtl](https://affpapa.org/en/nevibecode/skills/react18-enzyme-to-rtl.md) — skill (official GitHub) · github · GitHub Copilot · 739 installs — Provides Enzyme to React Testing Library migration patterns for React 18 upgrades. Next: https://affpapa.org/en/nevibecode/skills/topic/frontend.md?page=15 ## 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