# Skills for Frontend and UI Skills for Frontend and UI: what each one does, an install command and example prompts. 2909 cards · page 71 of 73 - HTML: https://affpapa.org/en/nevibecode/skills/topic/frontend?page=71 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [syncfusion-react-inputs](https://affpapa.org/en/nevibecode/skills/syncfusion-react-inputs.md) — skill · Syncfusion Inc · Claude Code, Codex, Cursor +3 · 672 installs — A skill covering Syncfusion input components for React: file uploads, numeric fields, OTP, signatures and sliders. - [syncfusion-react-dropdowns](https://affpapa.org/en/nevibecode/skills/syncfusion-react-dropdowns.md) — skill · Syncfusion Inc · Claude Code, Codex, Cursor +3 · 668 installs — Implementation guide for Syncfusion React dropdown components. - [syncfusion-react-popups](https://affpapa.org/en/nevibecode/skills/syncfusion-react-popups.md) — skill · Syncfusion Inc · Claude Code, Codex, Cursor +3 · 663 installs — A skill that tells your coding agent how to build modal dialogs, tooltips and popovers with Syncfusion React components. - [syncfusion-react-appbar](https://affpapa.org/en/nevibecode/skills/syncfusion-react-appbar.md) — skill · Syncfusion Inc · Claude Code, Codex, Cursor +3 · 661 installs — This skill helps build React navigation and action bars with AppBar. - [syncfusion-react-3d-chart](https://affpapa.org/en/nevibecode/skills/syncfusion-react-3d-chart.md) — skill · Syncfusion Inc · Claude Code, Codex, Cursor +3 · 661 installs — This skill walks your agent through Syncfusion 3D column and bar charts in a React app. - [figma](https://affpapa.org/en/nevibecode/skills/figma.md) — skill · openai · Claude Code · 858 installs — This skill wires Claude to the Figma MCP server: it pulls node context, a screenshot and assets, then turns the frame into code that matches your project. - [syncfusion-react-notifications](https://affpapa.org/en/nevibecode/skills/syncfusion-react-notifications.md) — skill · Syncfusion Inc · Claude Code, Codex, Cursor +3 · 659 installs — A skill covering Syncfusion's React notification components: Toast, Badge, Message, Skeleton and Spinner. - [syncfusion-react-heatmap](https://affpapa.org/en/nevibecode/skills/syncfusion-react-heatmap.md) — skill · Syncfusion Inc · Claude Code, Codex, Cursor +3 · 658 installs — Walks the agent through building a React heatmap with axes, legend and tooltips. - [syncfusion-react-breadcrumb](https://affpapa.org/en/nevibecode/skills/syncfusion-react-breadcrumb.md) — skill · Syncfusion Inc · Claude Code, Codex, Cursor +3 · 658 installs — A skill that walks your coding agent through building and configuring the Syncfusion Breadcrumb component in React: routes, icons, overflow. - [syncfusion-react-carousel](https://affpapa.org/en/nevibecode/skills/syncfusion-react-carousel.md) — skill · Syncfusion Inc · Claude Code, Codex, Cursor +3 · 657 installs — This skill guides an agent through a Syncfusion React carousel with slides, controls, transitions, and accessibility. - [syncfusion-react-sidebar](https://affpapa.org/en/nevibecode/skills/syncfusion-react-sidebar.md) — skill · Syncfusion Inc · Claude Code, Codex, Cursor +3 · 656 installs — Build responsive Syncfusion React sidebars for navigation layouts. - [syncfusion-react-timeline](https://affpapa.org/en/nevibecode/skills/syncfusion-react-timeline.md) — skill · Syncfusion Inc · Claude Code, Codex, Cursor +3 · 655 installs — Tells your agent how to build event chronologies with the Syncfusion Timeline component for React. - [syncfusion-react-splitter](https://affpapa.org/en/nevibecode/skills/syncfusion-react-splitter.md) — skill · Syncfusion Inc · Claude Code, Codex, Cursor +3 · 653 installs — This skill helps build React layouts with resizable panes, collapse controls, nested splits, and resize event handling. - [syncfusion-react-smithchart](https://affpapa.org/en/nevibecode/skills/syncfusion-react-smithchart.md) — skill · Syncfusion Inc · Claude Code, Codex, Cursor +3 · 652 installs — A skill that walks your agent through building and customizing Syncfusion's React Smith Chart for impedance and RF work. - [accessibility-auditor](https://affpapa.org/en/nevibecode/skills/accessibility-auditor.md) — skill · davila7 · Claude Code · 846 installs — Audits web interfaces for accessibility issues and suggests fixes for WCAG, ARIA, keyboard access, and screen-reader use. - [syncfusion-react-circular-gauge](https://affpapa.org/en/nevibecode/skills/syncfusion-react-circular-gauge.md) — skill · Syncfusion Inc · Claude Code, Codex, Cursor +3 · 651 installs — Build React circular gauges for KPIs, sensor readings, speedometers, and live monitoring dashboards with this skill. - [syncfusion-react-3d-circular-chart](https://affpapa.org/en/nevibecode/skills/syncfusion-react-3d-circular-chart.md) — skill · Syncfusion Inc · Claude Code, Codex, Cursor +3 · 651 installs — A skill that walks your coding agent through building 3D pie and donut charts in React with Syncfusion components. - [syncfusion-react-stepper](https://affpapa.org/en/nevibecode/skills/syncfusion-react-stepper.md) — skill · Syncfusion Inc · Claude Code, Codex, Cursor +3 · 649 installs — This skill helps an agent build React step flows for wizards, multi-step forms, and guided process screens. - [syncfusion-react-sankey](https://affpapa.org/en/nevibecode/skills/syncfusion-react-sankey.md) — skill · Syncfusion Inc · Claude Code, Codex, Cursor +3 · 650 installs — A skill that walks your coding agent through building Sankey diagrams in React with the Syncfusion chart component: nodes, links, legend, tooltips and export. - [syncfusion-react-linear-gauge](https://affpapa.org/en/nevibecode/skills/syncfusion-react-linear-gauge.md) — skill · Syncfusion Inc · Claude Code, Codex, Cursor +3 · 647 installs — Build Syncfusion linear gauges in React for temperature readings, progress values, KPIs, or live sensor data. - [syncfusion-react-stock-chart](https://affpapa.org/en/nevibecode/skills/syncfusion-react-stock-chart.md) — skill · Syncfusion Inc · Claude Code, Codex, Cursor +3 · 648 installs — A skill that walks your agent through building a stock chart with the Syncfusion Stock Chart component in React: candles, OHLC, indicators. - [syncfusion-react-treemaps](https://affpapa.org/en/nevibecode/skills/syncfusion-react-treemaps.md) — skill · Syncfusion Inc · Claude Code, Codex, Cursor +3 · 646 installs — This skill guides agents through building Syncfusion React TreeMap views. - [shopify-storefront-graphql](https://affpapa.org/en/nevibecode/skills/shopify-storefront-graphql.md) — skill (official OpenAI) · Shopify · Codex, ChatGPT · 1 install — Writes GraphQL queries and mutations against the Shopify Storefront API, searching the docs first and validating the code before it reaches you. - [shopify-polaris-customer-account-extensions](https://affpapa.org/en/nevibecode/skills/shopify-polaris-customer-account-extensions.md) — skill (official OpenAI) · Shopify · Codex, ChatGPT · 1 install — This skill helps build Shopify customer account UI extensions for order and profile pages. - [shopify-polaris-app-home](https://affpapa.org/en/nevibecode/skills/shopify-polaris-app-home.md) — skill (official OpenAI) · Shopify · Codex, ChatGPT · 1 install — Builds embedded Shopify admin user interfaces using Polaris web components. - [native-data-fetching](https://affpapa.org/en/nevibecode/skills/native-data-fetching.md) — skill (official OpenAI) · Expo Team · Codex, ChatGPT · 1 install — Sets conventions and patterns for Expo networking. - [expo-ui-swift-ui](https://affpapa.org/en/nevibecode/skills/expo-ui-swift-ui.md) — skill (official OpenAI) · Expo Team · Codex, ChatGPT · 1 install — The skill teaches the agent to work with the @expo/ui/swift-ui package, which brings SwiftUI Views and modifiers into React Native apps on Expo SDK 55. - [expo-ui-jetpack-compose](https://affpapa.org/en/nevibecode/skills/expo-ui-jetpack-compose.md) — skill (official OpenAI) · Expo Team · Codex, ChatGPT · 1 install — A skill that tells the agent how to build native Android UI with @expo/ui/jetpack-compose inside an Expo app. - [expo-tailwind-setup](https://affpapa.org/en/nevibecode/skills/expo-tailwind-setup.md) — skill (official OpenAI) · Expo Team · Codex, ChatGPT · 1 install — Sets up Tailwind CSS v4 in Expo projects using NativeWind v5 and react-native-css. - [expo-module](https://affpapa.org/en/nevibecode/skills/expo-module.md) — skill (official OpenAI) · Expo Team · Codex, ChatGPT · 1 install — This skill covers Expo native modules and views with Swift, Kotlin, and TypeScript. - [syncfusion-react-cards](https://affpapa.org/en/nevibecode/skills/syncfusion-react-cards.md) — skill · Syncfusion · Claude Code, Codex, Cursor +3 · 624 installs — This skill guides React card layouts with headers, images, action buttons, horizontal structure, and embedded Syncfusion components. - [syncfusion-react-accordion](https://affpapa.org/en/nevibecode/skills/syncfusion-react-accordion.md) — skill · Syncfusion Inc · Claude Code, Codex, Cursor +3 · 621 installs — This skill guides coding assistants in configuring Syncfusion collapsible panels for React. - [syncfusion-react-context-menu](https://affpapa.org/en/nevibecode/skills/syncfusion-react-context-menu.md) — skill · Syncfusion Inc · Claude Code, Codex, Cursor +3 · 616 installs — Helps AI agents implement Syncfusion ContextMenu in React, covering target selectors, nested items, click events, and animations. - [syncfusion-react-menu](https://affpapa.org/en/nevibecode/skills/syncfusion-react-menu.md) — skill · Syncfusion Inc · Claude Code, Codex, Cursor +3 · 615 installs — This skill guides an agent through Syncfusion React menus, from nested navigation to dropdown and context actions. - [syncfusion-react-toolbar](https://affpapa.org/en/nevibecode/skills/syncfusion-react-toolbar.md) — skill · Syncfusion Inc · Claude Code, Codex, Cursor +3 · 613 installs — This skill guides setup of Syncfusion’s React Toolbar, from item configuration to overflow behavior. - [syncfusion-react-sparkline](https://affpapa.org/en/nevibecode/skills/syncfusion-react-sparkline.md) — skill · Syncfusion Inc · Claude Code, Codex, Cursor +3 · 608 installs — Guides the agent through building Syncfusion sparklines in React: five chart types, tooltips, markers and range bands where a full chart will not fit. - [transformation-builder](https://affpapa.org/en/nevibecode/skills/transformation-builder.md) — skill · imagekit-developer · Claude Code, Codex, Cursor +3 · 481 installs — Teaches the agent to phrase a precise query for the transformation_builder tool and get a working ImageKit transformation URL. - [syncfusion-react-calendars](https://affpapa.org/en/nevibecode/skills/syncfusion-react-calendars.md) — skill · Syncfusion Inc · Claude Code, Codex, Cursor +3 · 541 installs — A skill for building Syncfusion calendar controls in React, including date, range, and time selection with validation and formatting. - [figma-implement-design](https://affpapa.org/en/nevibecode/skills/figma-implement-design.md) — skill · openai · Claude Code · 689 installs — Turns a Figma node into code that fits your project: pulls the design context, a screenshot and assets over Figma MCP, then maps them onto your components and tokens. - [vanilla-web](https://affpapa.org/en/nevibecode/skills/vanilla-web.md) — skill · janjaszczak · Claude Code, Codex, Cursor +3 · 666 installs — A skill that keeps the agent on plain HTML, CSS and JavaScript for static pages and small widgets. Next: https://affpapa.org/en/nevibecode/skills/topic/frontend.md?page=72 ## 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