# Skills for Frontend and UI Skills for Frontend and UI: what each one does, an install command and example prompts. 2909 cards · page 46 of 73 - HTML: https://affpapa.org/en/nevibecode/skills/topic/frontend?page=46 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [webflow-code-component:deploy-guide](https://affpapa.org/en/nevibecode/skills/webflow-code-componentdeploy-guide.md) — skill · webflow · Claude Code, Codex, Cursor +3 · 987 installs — A skill that walks you through publishing a code component library to a Webflow workspace, from pre-flight checks to verifying components in Designer. - [vercel-deployments](https://affpapa.org/en/nevibecode/skills/vercel-deployments.md) — skill · devops-skills · Claude Code, Codex, Cursor +3 · 316 installs — A skill for deploying frontend and full-stack apps on Vercel: previews, edge functions, environment variables and production guardrails. - [scaffold-nextjs](https://affpapa.org/en/nevibecode/skills/scaffold-nextjs.md) — skill · mblode · Claude Code, Codex, Cursor +3 · 726 installs — Scaffolds a complete Next.js Turborepo monorepo with Blode UI, Ultracite, workspace hooks, and Vercel deployment. - [vuetify-skilld](https://affpapa.org/en/nevibecode/skills/vuetify-skilld.md) — skill · skilld-dev · Claude Code, Codex, Cursor +3 · 378 installs — Directs AI assistants on configuring and debugging Vuetify 4.x with Vue 3. - [webflow-code-component:troubleshoot-deploy](https://affpapa.org/en/nevibecode/skills/webflow-code-componenttroubleshoot-deploy.md) — skill · webflow · Claude Code, Codex, Cursor +3 · 977 installs — Walks through failed Webflow Code Components deploys: reads the error, finds the root cause, hands you a specific fix. - [hig-components-layout](https://affpapa.org/en/nevibecode/skills/hig-components-layout.md) — skill · raintree-technology · Claude Code, Codex, Cursor +3 · 684 installs — Guides app navigation and layout architecture across Apple platforms based on the Human Interface Guidelines. - [hig-patterns](https://affpapa.org/en/nevibecode/skills/hig-patterns.md) — skill · raintree-technology · Claude Code, Codex, Cursor +3 · 685 installs — A skill with interaction patterns from Apple's Human Interface Guidelines: onboarding, loading, modality, notifications, search. - [js-performance-patterns](https://affpapa.org/en/nevibecode/skills/js-performance-patterns.md) — skill · patterns.dev · Claude Code, Codex, Cursor +3 · 687 installs — Runtime performance patterns for JavaScript hot paths. - [meticulous-zero-diff-task](https://affpapa.org/en/nevibecode/skills/meticulous-zero-diff-task.md) — skill · alwaysmeticulous · Claude Code, Codex, Cursor +3 · 4500 installs — Drives dependency upgrades and code refactors against Meticulous visual regression tests, iterating until zero unexpected UI diffs remain before opening a PR. - [appbuilder-ui-scaffolder](https://affpapa.org/en/nevibecode/skills/appbuilder-ui-scaffolder.md) — skill · adobe · Claude Code, Codex, Cursor +3 · 716 installs — Generates React Spectrum UI components for Adobe Experience Cloud Shell SPAs and AEM extensions. - [motion](https://affpapa.org/en/nevibecode/skills/motion.md) — skill · secondsky · Claude Code, Codex, Cursor +3 · 1100 installs — A skill that feeds your agent the Motion (Framer Motion) docs for React: drag-and-drop, scroll effects, layout transitions. - [handover-developer](https://affpapa.org/en/nevibecode/skills/handover-developer.md) — skill · adobe · Claude Code, Codex, Cursor +3 · 714 installs — Generates technical handover guides for AEM Edge Delivery Services codebases. - [zod-schema-validation](https://affpapa.org/en/nevibecode/skills/zod-schema-validation.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 1200 installs — Guides agents on writing Zod schemas, inferring TypeScript types, and validating boundaries in APIs and UI forms. - [bootstrap](https://affpapa.org/en/nevibecode/skills/mindrally-bootstrap.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 1200 installs — Tells the agent how to build interfaces with Bootstrap: grid, components, utilities, form validation. - [css](https://affpapa.org/en/nevibecode/skills/css.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 1200 installs — This skill hands the agent a set of CSS rules: Flexbox, Grid, custom properties, BEM and specificity control. - [modern-web-development](https://affpapa.org/en/nevibecode/skills/modern-web-development.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 1200 installs — A rule set for the modern web stack: TypeScript, Next.js 14, React Server Components, Supabase, GraphQL and Tailwind CSS. - [appbuilder-testing](https://affpapa.org/en/nevibecode/skills/appbuilder-testing.md) — skill · adobe · Claude Code, Codex, Cursor +3 · 714 installs — This skill writes and runs Jest tests for Adobe App Builder actions and React components, with mocks for the Adobe SDKs. - [mastering-typescript](https://affpapa.org/en/nevibecode/skills/mastering-typescript.md) — skill · Richard Hightower · Claude Code, Codex, Cursor +3 · 790 installs — Guides enterprise TypeScript 5.9+ development with strict typing, modern toolchains, and framework setups. - [block-kit](https://affpapa.org/en/nevibecode/skills/block-kit.md) — skill · slackapi · Claude Code, Codex, Cursor +3 · 500 installs — Builds and validates Block Kit JSON for Slack messages, modals and Home tabs. - [view-transitions](https://affpapa.org/en/nevibecode/skills/view-transitions.md) — skill · patterns.dev · Claude Code, Codex, Cursor +3 · 678 installs — Teaches your agent the View Transitions API, so page and UI state changes animate without hand-written animation code. - [dt-setup-react-native](https://affpapa.org/en/nevibecode/skills/dt-setup-react-native.md) — skill · Dynatrace · Claude Code, Codex, Cursor +3 · 868 installs — Configures the Dynatrace plugin in React Native or Expo projects, handling Babel transformations, config files, and privacy options. - [guide-swiftui-charts](https://affpapa.org/en/nevibecode/skills/guide-swiftui-charts.md) — skill · Prisma-Labs-Dev · Claude Code, Codex, Cursor +3 · 429 installs — A guide skill covering Swift Charts patterns: marks, axes, selection, styling, composition, Chart3D and accessibility. - [color-mode-and-theme](https://affpapa.org/en/nevibecode/skills/color-mode-and-theme.md) — skill · dembrandt · Claude Code, Codex, Cursor +3 · 926 installs — Guides decisions on light versus dark modes, UI theme toggles, and design tokens without contrast pitfalls. - [iphone-duo-react-native](https://affpapa.org/en/nevibecode/skills/iphone-duo-react-native.md) — skill · mirzaaghazadeh · Claude Code, Codex, Cursor +3 · 432 installs — Adapts React Native and Expo apps for the foldable iPhone Duo, handling asymmetric safe area insets, live window resizing, and iOS 27.1 native modules. - [dt-setup-flutter](https://affpapa.org/en/nevibecode/skills/dt-setup-flutter.md) — skill · Dynatrace · Claude Code, Codex, Cursor +3 · 860 installs — Integrates the Dynatrace plugin into Flutter projects: automates dependency configuration and sets up app startup instrumentation. - [ui-density](https://affpapa.org/en/nevibecode/skills/ui-density.md) — skill · dembrandt · Claude Code, Codex, Cursor +3 · 915 installs — Matches information density to screen size and user expertise. - [hig-components-controls](https://affpapa.org/en/nevibecode/skills/hig-components-controls.md) — skill · raintree-technology · Claude Code, Codex, Cursor +3 · 655 installs — Applies Apple HIG principles to pickers, toggles, text fields, and inputs. - [vite-bundle-optimization](https://affpapa.org/en/nevibecode/skills/vite-bundle-optimization.md) — skill · patterns.dev · Claude Code, Codex, Cursor +3 · 667 installs — A skill with bundle and build optimization patterns for Vite + React. - [reanimated-skia-performance](https://affpapa.org/en/nevibecode/skills/reanimated-skia-performance.md) — skill · andreev-danila · Claude Code, Codex, Cursor +3 · 955 installs — A skill that writes and reviews fast React Native animations and 2D graphics on Reanimated v4 and Skia. - [form-design](https://affpapa.org/en/nevibecode/skills/dembrandt-form-design.md) — skill · dembrandt · Claude Code, Codex, Cursor +3 · 916 installs — A skill for designing forms: helper text, placeholders, validation timing and submit button state. - [mobile-ux-optimizer](https://affpapa.org/en/nevibecode/skills/mobile-ux-optimizer.md) — skill · curiositech · Claude Code, Codex, Cursor +3 · 498 installs — Optimizes web interfaces for touchscreens, fixes dynamic viewport issues with dvh, and aligns touch targets with mobile platform guidelines. - [brand-visual-language](https://affpapa.org/en/nevibecode/skills/brand-visual-language.md) — skill · dembrandt · Claude Code, Codex, Cursor +3 · 907 installs — A skill that ties border radius, type and icon style to your brand's personality. - [hig-components-dialogs](https://affpapa.org/en/nevibecode/skills/hig-components-dialogs.md) — skill · raintree-technology · Claude Code, Codex, Cursor +3 · 647 installs — Provides Apple Human Interface Guidelines for alerts, sheets, popovers, and digit entry views. - [odoo-17](https://affpapa.org/en/nevibecode/skills/odoo-17.md) — skill · unclecatvn · Claude Code, Codex, Cursor +3 · 373 installs — A reference skill for Odoo 17 work: ORM and models, XML views, OWL, QWeb reports, access rules, migrations. - [hig-components-menus](https://affpapa.org/en/nevibecode/skills/hig-components-menus.md) — skill · raintree-technology · Claude Code, Codex, Cursor +3 · 643 installs — Guides button and menu architecture across Apple platforms based on official Human Interface Guidelines. - [semantic-html-and-seo](https://affpapa.org/en/nevibecode/skills/semantic-html-and-seo.md) — skill · dembrandt · Claude Code, Codex, Cursor +3 · 901 installs — A skill that steers your coding agent toward semantic HTML5, proper meta tags, alt text and progressive enhancement. - [hig-components-content](https://affpapa.org/en/nevibecode/skills/hig-components-content.md) — skill · raintree-technology · Claude Code, Codex, Cursor +3 · 641 installs — Provides Apple Human Interface Guidelines for content components like charts and collections. - [motion-and-storytelling](https://affpapa.org/en/nevibecode/skills/motion-and-storytelling.md) — skill · dembrandt · Claude Code, Codex, Cursor +3 · 894 installs — A skill for designing transitions, scroll animations and onboarding motion. - [typescript-react-patterns](https://affpapa.org/en/nevibecode/skills/typescript-react-patterns.md) — skill · agent-skills · Claude Code, Codex, Cursor +3 · 1100 installs — A skill with 33 TypeScript rules for React: props, hooks, events, refs, generics and context. - [apple-ui-designer](https://affpapa.org/en/nevibecode/skills/apple-ui-designer.md) — skill · heyman333 · Claude Code, Codex, Cursor +3 · 865 installs — This skill directs AI agents to redesign mobile app screens according to Apple Human Interface Guidelines. Next: https://affpapa.org/en/nevibecode/skills/topic/frontend.md?page=47 ## 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