# Skills for Frontend and UI Skills for Frontend and UI: what each one does, an install command and example prompts. 2909 cards · page 59 of 73 - HTML: https://affpapa.org/en/nevibecode/skills/topic/frontend?page=59 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [page-transitions](https://affpapa.org/en/nevibecode/skills/page-transitions.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 669 installs — A skill for animating route changes, view transitions and modal opens. - [rspress-docs-generator](https://affpapa.org/en/nevibecode/skills/rspress-docs-generator.md) — skill · rstackjs · Claude Code, Codex, Cursor +3 · 306 installs — Builds a new Rspress v2 docs site or updates existing documentation pages according to changes in source code and tests. - [echarts](https://affpapa.org/en/nevibecode/skills/echarts.md) — skill · sentimony · Claude Code, Codex, Cursor +3 · 2700 installs — A skill for building, styling and debugging Apache ECharts charts in JavaScript, React and Vue. - [accessibility-and-inclusive-visualization](https://affpapa.org/en/nevibecode/skills/accessibility-and-inclusive-visualization.md) — skill (official OpenAI) · OpenAI · Codex, ChatGPT · 11 installs — A Claude and Claude skill that reviews charts, diagrams and dashboards for accessibility: contrast, labels, keyboard paths, text alternatives. - [react-hook-form-zod](https://affpapa.org/en/nevibecode/skills/secondsky-react-hook-form-zod.md) — skill · secondsky · Claude Code, Codex, Cursor +3 · 376 installs — Sets up type-safe React forms using React Hook Form and Zod validation. - [react-native-animations](https://affpapa.org/en/nevibecode/skills/react-native-animations.md) — skill · pluginagentmarketplace · Claude Code, Codex, Cursor +3 · 663 installs — Teaches coding assistants to build smooth 60fps animations with Reanimated 3 and Gesture Handler in React Native apps. - [fitness-wellness](https://affpapa.org/en/nevibecode/skills/fitness-wellness.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 663 installs — A skill that sets timing and easing for animations in fitness apps, workout trackers and meditation screens. - [jest-generator](https://affpapa.org/en/nevibecode/skills/jest-generator.md) — skill · secondsky · Claude Code, Codex, Cursor +3 · 374 installs — Generates Jest unit tests for JavaScript, TypeScript, and React components. - [inngest-realtime](https://affpapa.org/en/nevibecode/skills/inngest-realtime.md) — skill · inngest · Claude Code, Codex, Cursor +3 · 797 installs — A skill that shows the agent how to push updates from durable Inngest functions into a live UI: order status, token streaming, logs and user approvals. - [thesys-generative-ui](https://affpapa.org/en/nevibecode/skills/thesys-generative-ui.md) — skill · secondsky · Claude Code, Codex, Cursor +3 · 371 installs — A skill that teaches your agent to build React components from plain-language prompts with the Thesys SDK. - [nuxt-studio](https://affpapa.org/en/nevibecode/skills/secondsky-nuxt-studio.md) — skill · secondsky · Claude Code, Codex, Cursor +3 · 368 installs — Sets up the Nuxt Studio visual editor for Nuxt Content sites. - [maz-ui](https://affpapa.org/en/nevibecode/skills/maz-ui.md) — skill · secondsky · Claude Code, Codex, Cursor +3 · 369 installs — This skill teaches your agent Maz-UI v4: 50+ components, composables and directives for Vue 3 and Nuxt 3. - [sales-app-extensibility](https://affpapa.org/en/nevibecode/skills/sales-app-extensibility.md) — skill · vtex · Claude Code, Codex, Cursor +3 · 856 installs — Guides the creation, styling, and deployment of VTEX Sales App extensions. - [e-commerce-retail](https://affpapa.org/en/nevibecode/skills/e-commerce-retail.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 647 installs — A skill that maps Disney's 12 animation principles onto shopping interfaces: product cards, cart, checkout. - [mastering-animate-presence](https://affpapa.org/en/nevibecode/skills/mastering-animate-presence.md) — skill · raphael-salaja · Claude Code, Codex, Cursor +3 · 323 installs — Checks Motion and Framer Motion code for AnimatePresence mistakes and exit animation problems. - [tigris-static-assets](https://affpapa.org/en/nevibecode/skills/tigris-static-assets.md) — skill · tigrisdata · Claude Code, Codex, Cursor +3 · 3100 installs — Deploys static assets to Tigris object storage for global CDN delivery, configuring Cache-Control headers and build pipelines across web frameworks. - [tigris-image-optimization](https://affpapa.org/en/nevibecode/skills/tigris-image-optimization.md) — skill · tigrisdata · Claude Code, Codex, Cursor +3 · 3100 installs — A skill for images stored in Tigris: it builds variants at upload time, serves them from a public bucket and points you to the right framework guide. - [accessible-motion](https://affpapa.org/en/nevibecode/skills/accessible-motion.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 642 installs — This skill swaps harmful animations for safe alternatives and covers the WCAG motion criteria. - [gh-pages-deploy](https://affpapa.org/en/nevibecode/skills/gh-pages-deploy.md) — skill · aviz85 · Claude Code, Codex, Cursor +3 · 312 installs — This skill publishes HTML/CSS/JS projects to GitHub Pages with gh. - [pwa-development](https://affpapa.org/en/nevibecode/skills/jwynia-pwa-development.md) — skill · jwynia · Claude Code, Codex, Cursor +3 · 437 installs — A skill for React and Svelte projects that walks the agent through service workers, offline support and installable apps. - [react-flow-code-review](https://affpapa.org/en/nevibecode/skills/react-flow-code-review.md) — skill · existential-birds · Claude Code, Codex, Cursor +3 · 319 installs — Walks @xyflow/react code through a review checklist: anti-patterns, wasted re-renders, typing. - [anime-js](https://affpapa.org/en/nevibecode/skills/dylantarre-anime-js.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 639 installs — A skill that gives your coding agent ready Anime.js recipes for all 12 Disney animation principles. - [woocommerce-copy-guidelines](https://affpapa.org/en/nevibecode/skills/woocommerce-copy-guidelines.md) — skill · secondsky · Claude Code, Codex, Cursor +3 · 363 installs — A skill that sets the rules for user-facing text in WooCommerce: button labels, field names, messages and docs. - [render-static-sites](https://affpapa.org/en/nevibecode/skills/render-static-sites.md) — skill · Render · Claude Code, Codex, Cursor +3 · 367 installs — Walks your agent through shipping a static site or SPA to Render's CDN: build commands, publish paths, SPA routing, headers and PR previews. - [sentry-react-sdk](https://affpapa.org/en/nevibecode/skills/getsentry-sentry-react-sdk.md) — skill · getsentry · Claude Code, Codex, Cursor +3 · 579 installs — The skill scans your React app and walks you through a full Sentry setup: errors, tracing, session replay, logging and profiling. - [capacitor-vue](https://affpapa.org/en/nevibecode/skills/capacitor-vue.md) — skill · capawesome-team · Claude Code, Codex, Cursor +3 · 757 installs — Guides agents through Vue 3 Composition API patterns, custom composables, and router deep linking for Capacitor mobile apps. - [remotion-animation](https://affpapa.org/en/nevibecode/skills/remotion-animation.md) — skill · ncklrs · Claude Code, Codex, Cursor +3 · 441 installs — Builds timing constants, spring physics, and interpolation ranges for Remotion without creating UI components. - [brand-color-psychology](https://affpapa.org/en/nevibecode/skills/brand-color-psychology.md) — skill · mike-coulbourn · Claude Code, Codex, Cursor +3 · 300 installs — A reference framework for choosing brand palettes using behavioral context, archetype theory, and contrast requirements. - [webgl](https://affpapa.org/en/nevibecode/skills/webgl.md) — skill · martinholovsky · Claude Code, Codex, Cursor +3 · 555 installs — A WebGL skill for custom shaders and visual effects: holograms, post-processing, particle systems. - [cloudinary-transformations](https://affpapa.org/en/nevibecode/skills/cloudinary-transformations.md) — skill · cloudinary · Claude Code, Codex, Cursor +3 · 852 installs — Turns a plain-language request into a working Cloudinary transformation URL, and helps debug ones that misbehave. - [mapbox-navigation-patterns](https://affpapa.org/en/nevibecode/skills/mapbox-navigation-patterns.md) — skill · mapbox · Claude Code, Codex, Cursor +3 · 401 installs — Tells your agent how to wire up turn-by-turn navigation, multi-stop routes and voice guidance on Mapbox. - [tauri](https://affpapa.org/en/nevibecode/skills/tauri.md) — skill · martinholovsky · Claude Code, Codex, Cursor +3 · 550 installs — Guides Tauri 2.0 desktop application development with strict IPC security, path validation, and capability-based permission controls. - [gsap-awwwards-website](https://affpapa.org/en/nevibecode/skills/gsap-awwwards-website.md) — skill · rebyteai-template · Claude Code, Codex, Cursor +3 · 810 installs — This skill scaffolds a product landing template built on React 19, GSAP scroll animations and Tailwind CSS 4. - [suggest-lucide-icons](https://affpapa.org/en/nevibecode/skills/suggest-lucide-icons.md) — skill · nweii · Claude Code, Codex, Cursor +3 · 616 installs — Turns a concept, a UI spot or a screenshot into three verified Lucide icon names, then names the best one. - [jkvideo-bilibili-react-native](https://affpapa.org/en/nevibecode/skills/jkvideo-bilibili-react-native.md) — skill · reason-machines · Claude Code, Codex, Cursor +3 · 879 installs — Assists in building and modifying a React Native 0.83 client for Bilibili on Expo SDK 55. - [svg-art](https://affpapa.org/en/nevibecode/skills/svg-art.md) — skill · kv0906 · Claude Code, Codex, Cursor +3 · 510 installs — A skill that generates SVG graphics through code: icons, patterns, fractals, charts and data visualizations via executable Python scripts. - [audit](https://affpapa.org/en/nevibecode/skills/audit.md) — skill (official OpenAI) · OpenAI · Codex, ChatGPT · 10 installs — Walks through product flows step by step, captures verified screenshots, and flags UX and accessibility issues in chat. - [stream-react-native](https://affpapa.org/en/nevibecode/skills/stream-react-native.md) — skill · GetStream · Claude Code, Codex, Cursor +3 · 706 installs — A skill for building, integrating, migrating and auditing Stream Chat, Video and Feeds in React Native CLI and Expo apps. - [healthcare-medical](https://affpapa.org/en/nevibecode/skills/healthcare-medical.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 606 installs — Sets animation rules for medical apps, patient portals and telehealth: calm transitions instead of abrupt ones. - [critique](https://affpapa.org/en/nevibecode/skills/aladicf-critique.md) — skill · aladicf · Claude Code, Codex, Cursor +3 · 705 installs — Evaluates interface designs from a UX angle, scoring hierarchy and cognitive load. Next: https://affpapa.org/en/nevibecode/skills/topic/frontend.md?page=60 ## 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