# Skills for Frontend and UI Skills for Frontend and UI: what each one does, an install command and example prompts. 2909 cards · page 64 of 73 - HTML: https://affpapa.org/en/nevibecode/skills/topic/frontend?page=64 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [build-integration](https://affpapa.org/en/nevibecode/skills/build-integration.md) — skill · GitbookIO · Claude Code, Codex, Cursor +3 · 565 installs — Guides the development and publishing of GitBook integrations. - [reactlynx-best-practices](https://affpapa.org/en/nevibecode/skills/reactlynx-best-practices.md) — skill · lynx-community · Claude Code, Codex, Cursor +3 · 450 installs — Reviews, writes and refactors ReactLynx code for Lynx's dual-thread runtime: thread boundaries, lifecycle, event handlers, code splitting. - [motion-sickness](https://affpapa.org/en/nevibecode/skills/motion-sickness.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 486 installs — Finds the animations that make users dizzy or queasy — parallax, zoom, rotation — and swaps them for safer motion. - [pretext-text-measurement](https://affpapa.org/en/nevibecode/skills/pretext-text-measurement.md) — skill · reason-machines · Claude Code, Codex, Cursor +3 · 694 installs — Calculates multiline text dimensions and line breaking in JavaScript without touching DOM layout properties or triggering reflow. - [universal-elements](https://affpapa.org/en/nevibecode/skills/universal-elements.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 485 installs — Applies 12 classic animation principles to any interface component. - [small-200-300ms](https://affpapa.org/en/nevibecode/skills/small-200-300ms.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 485 installs — A skill that tells the agent how to build 200–300ms transitions: modal appearances, card expansions, navigation slides. - [trust-reliability](https://affpapa.org/en/nevibecode/skills/trust-reliability.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 485 installs — A skill for animations that make interfaces feel dependable: predictable motion, steady timing, no surprises. - [deliberate-1200-2000ms](https://affpapa.org/en/nevibecode/skills/deliberate-1200-2000ms.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 485 installs — Guidelines for intentional animations lasting between 1200-2000ms. - [universal-tool](https://affpapa.org/en/nevibecode/skills/universal-tool.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 484 installs — A skill that feeds your agent Disney's 12 animation principles for any animation tool or framework. - [universal-practitioner](https://affpapa.org/en/nevibecode/skills/universal-practitioner.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 482 installs — A skill that maps Disney's 12 animation principles onto interfaces, writing and product work, not just cartoons. - [universal-solutions](https://affpapa.org/en/nevibecode/skills/universal-solutions.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 482 installs — Diagnoses interface animation flaws using the twelve Disney principles and suggests precise fixes for easing, timing, and rendering. - [universal-fallback](https://affpapa.org/en/nevibecode/skills/universal-fallback.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 481 installs — Universal animation guidance based on Disney's 12 principles for any medium. - [accessibility-issues](https://affpapa.org/en/nevibecode/skills/accessibility-issues.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 481 installs — Audits motion that hurts users with vestibular disorders, cognitive overload or screen reader needs, then names the fix for each case. - [ux-friction](https://affpapa.org/en/nevibecode/skills/ux-friction.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 481 installs — A skill that diagnoses animations which make users wait, get confused or abandon a task. - [instant-0-100ms](https://affpapa.org/en/nevibecode/skills/instant-0-100ms.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 480 installs — This skill provides rules for UI animations under 100ms. - [magento-frontend-developer](https://affpapa.org/en/nevibecode/skills/magento-frontend-developer.md) — skill · maxnorm · Claude Code, Codex, Cursor +3 · 399 installs — Guides Magento 2 frontend development across layout XML, PHTML templates, RequireJS, KnockoutJS, and Core Web Vitals optimization. - [ag-dev](https://affpapa.org/en/nevibecode/skills/ag-dev.md) — skill · ag-grid · Claude Code, Codex, Cursor +3 · 1000 installs — Prevents coding assistants from hallucinating outdated AG Grid, AG Charts, and AG Studio APIs by grounding solutions in installed package versions and documentation. - [cloudinary-react](https://affpapa.org/en/nevibecode/skills/cloudinary-react.md) — skill · cloudinary · Claude Code, Codex, Cursor +3 · 657 installs — Feeds your agent exact Cloudinary React SDK imports and patterns, so it stops guessing subpaths and breaking the upload widget. - [adapt](https://affpapa.org/en/nevibecode/skills/adapt.md) — skill · aladicf · Claude Code, Codex, Cursor +3 · 557 installs — Adapts web layouts for mobile viewports, tablets, wide screens, print, and HTML emails while preserving hierarchy and touch targets. - [typeset](https://affpapa.org/en/nevibecode/skills/typeset.md) — skill · aladicf · Claude Code, Codex, Cursor +3 · 557 installs — Audits fonts, type scale and text hierarchy in a UI, then rebuilds them as a system. - [data-viz](https://affpapa.org/en/nevibecode/skills/data-viz.md) — skill · aladicf · Claude Code, Codex, Cursor +3 · 568 installs — A skill for designing charts, dashboards and data tables. - [gsap-react](https://affpapa.org/en/nevibecode/skills/bbeierle12-gsap-react.md) — skill · Bbeierle12 · Claude Code, Codex, Cursor +3 · 724 installs — A skill with GSAP patterns for React: the useGSAP hook, ref handling, cleanup on unmount and timeline control. - [vercel-react-best-practices](https://affpapa.org/en/nevibecode/skills/vercel-react-best-practices.md) — skill · vercel · Claude Code, Codex, Cursor +3 · 448 installs — A skill with 70 React and Next.js performance rules from Vercel. - [media-publishing](https://affpapa.org/en/nevibecode/skills/media-publishing.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 477 installs — Guides UI motion design for news websites, digital magazines, and reader apps based on Disney's 12 animation principles. - [slow-800-1200ms](https://affpapa.org/en/nevibecode/skills/slow-800-1200ms.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 477 installs — A coding-agent skill for building deliberately slow animation in the 800–1200ms range: dramatic reveals, loading sequences, moments where the user should stop and watch. - [forms](https://affpapa.org/en/nevibecode/skills/forms.md) — skill · aladicf · Claude Code, Codex, Cursor +3 · 555 installs — Guides form interface design and multi-step input flows. - [universal-timing](https://affpapa.org/en/nevibecode/skills/universal-timing.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 476 installs — A skill about animation timing: rules that hold at 50ms and at 5000ms. - [appkit](https://affpapa.org/en/nevibecode/skills/appkit.md) — skill · reown-com · Claude Code, Codex, Cursor +3 · 1100 installs — A skill that walks your agent through Reown AppKit: wallet modal, network switching, EVM, Solana and Bitcoin. - [empty-state](https://affpapa.org/en/nevibecode/skills/empty-state.md) — skill · aladicf · Claude Code, Codex, Cursor +3 · 552 installs — A skill for designing empty states: zero data, no search results, permission walls and load errors. - [a11y](https://affpapa.org/en/nevibecode/skills/a11y.md) — skill · aladicf · Claude Code, Codex, Cursor +3 · 561 installs — Walks the interface through keyboard, screen reader, contrast and semantics checks, then fixes what it finds. - [web-performance-optimization](https://affpapa.org/en/nevibecode/skills/web-performance-optimization.md) — skill · davila7 · Claude Code · 3490 installs — A Claude skill that walks through why a site loads slowly and fixes the bottlenecks step by step. - [colorize](https://affpapa.org/en/nevibecode/skills/aladicf-colorize.md) — skill · aladicf · Claude Code, Codex, Cursor +3 · 551 installs — A coding-agent skill that brings color into interfaces that read as flat gray: semantic states, accents, and color-based hierarchy. - [capacitor-platforms](https://affpapa.org/en/nevibecode/skills/capacitor-platforms.md) — skill · capawesome-team · Claude Code, Codex, Cursor +3 · 590 installs — Walks the agent through adding and configuring the Capawesome desktop platforms for Capacitor — Electron and Tauri. - [normalize](https://affpapa.org/en/nevibecode/skills/normalize.md) — skill · aladicf · Claude Code, Codex, Cursor +3 · 546 installs — Audits UI components and realigns them with project design tokens, spacing rules, and system patterns. - [awesome-design-md-jp](https://affpapa.org/en/nevibecode/skills/awesome-design-md-jp.md) — skill · reason-machines · Claude Code, Codex, Cursor +3 · 668 installs — Provides Japanese UI specifications in DESIGN.md format for AI agents. - [wireframing](https://affpapa.org/en/nevibecode/skills/wireframing.md) — skill · manutej · Claude Code, Codex, Cursor +3 · 566 installs — A skill for interface design work: it walks from rough sketches and screen structure to a layout close to the final design. - [accessibility-inclusive-design](https://affpapa.org/en/nevibecode/skills/accessibility-inclusive-design.md) — skill · hueyexe · Claude Code, Codex, Cursor +3 · 574 installs — A skill that pushes your coding agent to design and critique interfaces for keyboard use, screen readers, contrast and semantics. - [harden](https://affpapa.org/en/nevibecode/skills/aladicf-harden.md) — skill · aladicf · Claude Code, Codex, Cursor +3 · 539 installs — Runs your interface through edge cases: long text, network errors, RTL, empty states. - [distill](https://affpapa.org/en/nevibecode/skills/aladicf-distill.md) — skill · aladicf · Claude Code, Codex, Cursor +3 · 548 installs — A skill that removes extra controls, options and features from a screen so the main task stands out. - [ux-writing-content-design](https://affpapa.org/en/nevibecode/skills/ux-writing-content-design.md) — skill · hueyexe · Claude Code, Codex, Cursor +3 · 562 installs — Writes and critiques interface text: button labels, hints, empty states, errors, onboarding. Next: https://affpapa.org/en/nevibecode/skills/topic/frontend.md?page=65 ## 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