# Skills for Frontend and UI Skills for Frontend and UI: what each one does, an install command and example prompts. 2909 cards · page 52 of 73 - HTML: https://affpapa.org/en/nevibecode/skills/topic/frontend?page=52 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [ai-sdk](https://affpapa.org/en/nevibecode/skills/ai-sdk.md) — skill (official OpenAI) · Vercel Labs · Codex, ChatGPT · 22 installs — Provides Vercel AI SDK guidance for your coding agent. - [tanstack-query](https://affpapa.org/en/nevibecode/skills/tanstack-query-2.md) — skill · community · Claude Code, Codex, Cursor +3 · 457 installs — Delivers 41 performance rules for TanStack Query v5. - [tanstack-ranger](https://affpapa.org/en/nevibecode/skills/tanstack-ranger.md) — skill · tanstack-skills · Claude Code, Codex, Cursor +3 · 1300 installs — Headless utilities for accessible single and multi-range sliders. - [react-flow-advanced](https://affpapa.org/en/nevibecode/skills/react-flow-advanced.md) — skill · existential-birds · Claude Code, Codex, Cursor +3 · 631 installs — Guides your coding agent through complex React Flow implementations, including nested sub-flows, dagre layouts, drag-and-drop, and undo/redo history. - [vue-typescript](https://affpapa.org/en/nevibecode/skills/vue-typescript.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 782 installs — Strict standards for Vue 3 and TypeScript development with Vite, Pinia, and Tailwind CSS. - [roblox-gui](https://affpapa.org/en/nevibecode/skills/sentinelcore-roblox-gui.md) — skill · sentinelcore · Claude Code, Codex, Cursor +3 · 1200 installs — Provides reference patterns to build and animate Roblox interfaces, from screen HUDs to in-world 3D panels. - [expo-react-native-javascript-best-practices](https://affpapa.org/en/nevibecode/skills/expo-react-native-javascript-best-practices.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 777 installs — Guidelines for building Expo React Native apps using JavaScript. - [progressive-web-app](https://affpapa.org/en/nevibecode/skills/aj-geddes-progressive-web-app.md) — skill · aj-geddes · Claude Code, Codex, Cursor +3 · 522 installs — Guides your agent through building a progressive web app: manifest, service worker, offline mode and installability. - [capacitor-performance](https://affpapa.org/en/nevibecode/skills/capacitor-performance.md) — skill · Cap-go · Claude Code, Codex, Cursor +3 · 1200 installs — Diagnoses and resolves Capacitor performance bottlenecks, from slow cold starts and bridge serialization stalls to background white screens. - [apple-ui-skills](https://affpapa.org/en/nevibecode/skills/apple-ui-skills.md) — skill · design-skills · Claude Code, Codex, Cursor +3 · 509 installs — Hands the agent a fixed set of Apple-style UI rules: light surfaces, Inter, a 4px grid. - [frontend-tailwind-best-practices](https://affpapa.org/en/nevibecode/skills/frontend-tailwind-best-practices.md) — skill · sergiodxa · Claude Code, Codex, Cursor +3 · 464 installs — Ten Tailwind CSS rules for frontend work: stack utilities, gap-based spacing, dark color schemes and className merging. - [gsap](https://affpapa.org/en/nevibecode/skills/mindrally-gsap.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 769 installs — Tells your agent how to write GSAP animations: transforms over left/top, stagger, timelines, ScrollTrigger. - [pwa-development](https://affpapa.org/en/nevibecode/skills/mindrally-pwa-development.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 768 installs — Guidelines for Progressive Web App development covering service workers, web manifests, caching strategies, and offline readiness. - [creating-reanimated-animations](https://affpapa.org/en/nevibecode/skills/creating-reanimated-animations.md) — skill · estevg · Claude Code, Codex, Cursor +3 · 857 installs — Generates React Native Reanimated v3 and v4 animation code. - [styled-components-best-practices](https://affpapa.org/en/nevibecode/skills/styled-components-best-practices.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 762 installs — Guides AI coding assistants on CSS-in-JS architecture in React: style isolation, file structure, TypeScript theme typing, and ThemeProvider setup. - [sveltekit-remote-functions](https://affpapa.org/en/nevibecode/skills/sveltekit-remote-functions.md) — skill · spences10 · Claude Code, Codex, Cursor +3 · 423 installs — Teaches your agent the query(), form(), command() and prerender() patterns for *.remote.ts files. - [figma-designer](https://affpapa.org/en/nevibecode/skills/figma-designer.md) — skill · zhaono1 · Claude Code, Codex, Cursor +3 · 807 installs — Turns a Figma file into design tokens, component specs and interaction states you can hand to planning or development. - [frontend-testing](https://affpapa.org/en/nevibecode/skills/frontend-testing.md) — skill · aj-geddes · Claude Code, Codex, Cursor +3 · 508 installs — Guides frontend testing setups with Jest, Vitest, React Testing Library, and Cypress. - [admin-dashboard](https://affpapa.org/en/nevibecode/skills/admin-dashboard.md) — skill · curiositech · Claude Code, Codex, Cursor +3 · 323 installs — Extends an admin dashboard, developer portal and operations console with new tabs, metrics, monitoring and user management. - [msw-ui-kit](https://affpapa.org/en/nevibecode/skills/msw-ui-kit.md) — skill · MSW-Git · Claude Code, Codex, Cursor +3 · 1200 installs — This skill picks ready RUID palettes and interaction widgets from official MSWPackages so a game interface stays visually consistent. - [svelte](https://affpapa.org/en/nevibecode/skills/mindrally-svelte.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 753 installs — Guides AI assistants through modern Svelte 5 and SvelteKit development, covering runes, snippets, SSR, and Svelte 4 migration. - [mapbox-flutter-patterns](https://affpapa.org/en/nevibecode/skills/mapbox-flutter-patterns.md) — skill · mapbox · Claude Code, Codex, Cursor +3 · 787 installs — Skill with official integration patterns for the Mapbox Maps Flutter SDK. - [search](https://affpapa.org/en/nevibecode/skills/mobbin-search.md) — skill · mobbin · Claude Code, Codex, Cursor +3 · 342 installs — Tunes queries for Mobbin UI tools. - [interaction-design](https://affpapa.org/en/nevibecode/skills/aj-geddes-interaction-design.md) — skill · aj-geddes · Claude Code, Codex, Cursor +3 · 505 installs — A skill for designing interactions: animations, loading and error states, feedback on touch. - [expo](https://affpapa.org/en/nevibecode/skills/expo.md) — skill · pproenca · Claude Code, Codex, Cursor +3 · 553 installs — Expo and React Native performance guide that directs coding agents to optimize app launch, bundle size, list virtualization, and memory usage. - [responsive-web-design](https://affpapa.org/en/nevibecode/skills/secondsky-responsive-web-design.md) — skill · secondsky · Claude Code, Codex, Cursor +3 · 684 installs — Guides coding agents to write adaptive CSS with a mobile-first mindset. - [react-native-app](https://affpapa.org/en/nevibecode/skills/react-native-app.md) — skill · aj-geddes · Claude Code, Codex, Cursor +3 · 503 installs — A skill that walks your agent through building cross-platform React Native apps: navigation, state, API calls. - [electron-best-practices](https://affpapa.org/en/nevibecode/skills/electron-best-practices.md) — skill · agent-skills · Claude Code, Codex, Cursor +3 · 820 installs — A skill that steers an AI agent through Electron apps with React: security defaults, typed IPC, packaging and signing. - [nodejs-development](https://affpapa.org/en/nevibecode/skills/nodejs-development.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 742 installs — Guidelines for Node.js and TypeScript development. - [upgrade-browser-sdk-v7](https://affpapa.org/en/nevibecode/skills/upgrade-browser-sdk-v7.md) — skill · datadog-labs · Claude Code, Codex, Cursor +3 · 459 installs — Walks a project through the Datadog Browser SDK jump from v6 to v7: stale options, CDN paths, changed APIs. - [form-validation](https://affpapa.org/en/nevibecode/skills/form-validation.md) — skill · aj-geddes · Claude Code, Codex, Cursor +3 · 497 installs — Guides client-side form validation and server synchronization with TypeScript typing. - [anime-js](https://affpapa.org/en/nevibecode/skills/anime-js.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 736 installs — A skill that gives your agent rules for writing Anime.js animations: timelines, stagger, SVG morphing and performance. - [reactive-programming](https://affpapa.org/en/nevibecode/skills/reactive-programming.md) — skill · aj-geddes · Claude Code, Codex, Cursor +3 · 491 installs — A skill for reactive streams in RxJS: observables, operators, backpressure. - [agent-browser](https://affpapa.org/en/nevibecode/skills/agent-browser.md) — skill (official OpenAI) · Vercel Labs · Codex, ChatGPT · 20 installs — Automates browser actions via CLI, takes DOM snapshots, clicks elements, and verifies dev servers. - [pnpm](https://affpapa.org/en/nevibecode/skills/mindrally-pnpm.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 721 installs — Guides your agent on pnpm workspace structures, strict package isolation, and monorepo scripts. - [tanstack-query](https://affpapa.org/en/nevibecode/skills/mindrally-tanstack-query.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 724 installs — A skill that tells your agent how to handle server state in React with TanStack Query v5: query keys, queryOptions, mutations, v4 migration. - [sveltekit](https://affpapa.org/en/nevibecode/skills/mindrally-sveltekit.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 720 installs — Teaches your coding agent SvelteKit conventions with TypeScript and Tailwind CSS. - [solidity](https://affpapa.org/en/nevibecode/skills/solidity.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 721 installs — A skill for writing and reviewing Solidity contracts: reentrancy defenses, gas optimization, testing, and React frontend wiring. - [rspress-best-practices](https://affpapa.org/en/nevibecode/skills/rspress-best-practices.md) — skill · rstackjs · Claude Code, Codex, Cursor +3 · 538 installs — A skill that gives the agent rules for Rspress v2 sites: config, navigation, MDX, assets, search and deployment. - [figma-integration](https://affpapa.org/en/nevibecode/skills/figma-integration.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 718 installs — Guides AI agents through translating Figma designs into code. Next: https://affpapa.org/en/nevibecode/skills/topic/frontend.md?page=53 ## 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