# Skills for Frontend and UI Skills for Frontend and UI: what each one does, an install command and example prompts. 2909 cards · page 70 of 73 - HTML: https://affpapa.org/en/nevibecode/skills/topic/frontend?page=70 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [building-native-ui](https://affpapa.org/en/nevibecode/skills/building-native-ui.md) — skill (official OpenAI) · Expo Team · Codex, ChatGPT · 2 installs — A Codex skill for building Expo Router interfaces with guidance on routes, styling, components, animation, and native tabs. - [nodeops-auth](https://affpapa.org/en/nevibecode/skills/nodeops-auth.md) — skill · NodeOps-app · Claude Code, Codex, Cursor +3 · 564 installs — This skill wires NodeOps PKCE sign-in into a Next.js project. - [premium-web-design](https://affpapa.org/en/nevibecode/skills/premium-web-design.md) — skill · davila7 · Claude Code · 1090 installs — This skill guides Claude Code toward polished React components with distinctive type, composition, color, and motion. - [syncfusion-react-grid](https://affpapa.org/en/nevibecode/skills/syncfusion-react-grid.md) — skill · Syncfusion Inc · Claude Code, Codex, Cursor +3 · 823 installs — Guides AI coding agents through configuring Syncfusion React Grid tables with sorting, filtering, editing, and virtual scrolling. - [syncfusion-react-scheduler](https://affpapa.org/en/nevibecode/skills/syncfusion-react-scheduler.md) — skill · Syncfusion Inc · Claude Code, Codex, Cursor +3 · 783 installs — Guides coding assistants through configuring Syncfusion React Scheduler components with multiple calendar views and drag-and-drop bookings. - [syncfusion-react-gantt-chart](https://affpapa.org/en/nevibecode/skills/syncfusion-react-gantt-chart.md) — skill · Syncfusion Inc · Claude Code, Codex, Cursor +3 · 773 installs — Configures the Syncfusion React Gantt Chart component. - [syncfusion-react-rich-text-editor](https://affpapa.org/en/nevibecode/skills/syncfusion-react-rich-text-editor.md) — skill · Syncfusion Inc · Claude Code, Codex, Cursor +3 · 757 installs — Configures the Syncfusion React Rich Text Editor for HTML or Markdown editing. - [syncfusion-react-charts](https://affpapa.org/en/nevibecode/skills/syncfusion-react-charts.md) — skill · Syncfusion Inc · Claude Code, Codex, Cursor +3 · 749 installs — This skill helps build Syncfusion charts in React, covering axes, series, data sources, styling, and interactions. - [syncfusion-react-treegrid](https://affpapa.org/en/nevibecode/skills/syncfusion-react-treegrid.md) — skill · Syncfusion Inc · Claude Code, Codex, Cursor +3 · 746 installs — Guides AI agents through configuring Syncfusion React TreeGrid components, handling nested data binding, and column setups. - [enterprise-user-management-ai-analytics](https://affpapa.org/en/nevibecode/skills/enterprise-user-management-ai-analytics.md) — skill · reason-machines · Claude Code, Codex, Cursor +3 · 663 installs — This skill guides a full-stack user management app with task workflows, support tickets, and ML analysis. - [customware-ai](https://affpapa.org/en/nevibecode/skills/customware-ai.md) — skill · customware-ai · Claude Code, Codex, Cursor +3 · 639 installs — This skill guides AI chat, text generation, tools, model selection, and typed JSON in Customware-generated React Router and Hono apps. - [animating-react-native-expo](https://affpapa.org/en/nevibecode/skills/animating-react-native-expo.md) — skill · tristanmanchester · Claude Code, Codex, Cursor +3 · 413 installs — A skill that steers an AI agent through writing and debugging React Native and Expo animations on Reanimated 4 and Gesture Handler 3. - [syncfusion-react-common](https://affpapa.org/en/nevibecode/skills/syncfusion-react-common.md) — skill · Syncfusion Inc · Claude Code, Codex, Cursor +3 · 732 installs — This skill guides Syncfusion React setup for localization, RTL, animation, drag-and-drop, persistence, templates, and security-related component work. - [styling-nativewind-v4-expo](https://affpapa.org/en/nevibecode/skills/styling-nativewind-v4-expo.md) — skill · tristanmanchester · Claude Code, Codex, Cursor +3 · 410 installs — Guides setup and troubleshooting for NativeWind v4 with Tailwind CSS v3 in Expo React Native projects. - [syncfusion-react-file-manager](https://affpapa.org/en/nevibecode/skills/syncfusion-react-file-manager.md) — skill · Syncfusion Inc · Claude Code, Codex, Cursor +3 · 729 installs — Configures the Syncfusion React File Manager component for web apps. - [syncfusion-react-themes](https://affpapa.org/en/nevibecode/skills/syncfusion-react-themes.md) — skill · Syncfusion Inc · Claude Code, Codex, Cursor +3 · 729 installs — This skill helps configure Syncfusion React themes, dark mode, CSS variables, icons, and component sizing. - [syncfusion-react-diagram](https://affpapa.org/en/nevibecode/skills/syncfusion-react-diagram.md) — skill · Syncfusion Inc · Claude Code, Codex, Cursor +3 · 719 installs — This skill helps build interactive React diagrams with Syncfusion Diagrams. - [syncfusion-react-license](https://affpapa.org/en/nevibecode/skills/syncfusion-react-license.md) — skill · Syncfusion Inc · Claude Code, Codex, Cursor +3 · 718 installs — Walks through Syncfusion licensing in React apps: issuing a key, registering it, and clearing validation errors. - [syncfusion-react-image-editor](https://affpapa.org/en/nevibecode/skills/syncfusion-react-image-editor.md) — skill · Syncfusion Inc · Claude Code, Codex, Cursor +3 · 718 installs — A skill for the Syncfusion React Image Editor component: tells the agent how to wire image editing into a React app. - [syncfusion-react-chat-ui](https://affpapa.org/en/nevibecode/skills/syncfusion-react-chat-ui.md) — skill · Syncfusion Inc · Claude Code, Codex, Cursor +3 · 715 installs — This skill helps build React chat interfaces with messages, attachments, typing states, user presence, and configurable layouts. - [syncfusion-react-tabs](https://affpapa.org/en/nevibecode/skills/syncfusion-react-tabs.md) — skill · Syncfusion Inc · Claude Code, Codex, Cursor +3 · 715 installs — Guides the agent through building and customizing Syncfusion Tab components in React: headers, drag-and-drop, content rendering. - [visual-design-system-extractor](https://affpapa.org/en/nevibecode/skills/visual-design-system-extractor.md) — skill · Kiren Srinivasan · Claude Code, Codex, Cursor +3 · 687 installs — Reverse-engineers screenshots, images, and live URLs into a deterministic YAML design system. - [syncfusion-react-kanban](https://affpapa.org/en/nevibecode/skills/syncfusion-react-kanban.md) — skill · Syncfusion Inc · Claude Code, Codex, Cursor +3 · 714 installs — Guides coding agents in implementing Syncfusion React Kanban boards. - [syncfusion-react-ai-assistview](https://affpapa.org/en/nevibecode/skills/syncfusion-react-ai-assistview.md) — skill · Syncfusion Inc · Claude Code, Codex, Cursor +3 · 712 installs — Teaches coding agents how to set up the Syncfusion AI AssistView interface in React. - [syncfusion-react-accumulation-chart](https://affpapa.org/en/nevibecode/skills/syncfusion-react-accumulation-chart.md) — skill · Syncfusion Inc · Claude Code, Codex, Cursor +3 · 711 installs — This skill guides React implementations of Pie, Doughnut, Funnel, and Pyramid charts. - [syncfusion-react-barcode](https://affpapa.org/en/nevibecode/skills/syncfusion-react-barcode.md) — skill · Syncfusion Inc · Claude Code, Codex, Cursor +3 · 711 installs — A skill for generating barcodes, QR codes and Data Matrix codes in React with Syncfusion components. - [syncfusion-react-pivot-table](https://affpapa.org/en/nevibecode/skills/syncfusion-react-pivot-table.md) — skill · Syncfusion Inc · Claude Code, Codex, Cursor +3 · 709 installs — Build and customize Syncfusion PivotView in React with guidance for data binding, grouping, filters, aggregation, exports, and pivot charts. - [syncfusion-react-dashboard-layout](https://affpapa.org/en/nevibecode/skills/syncfusion-react-dashboard-layout.md) — skill · Syncfusion Inc · Claude Code, Codex, Cursor +3 · 709 installs — A skill that tells your coding agent how to build React dashboards with draggable Syncfusion panels. - [syncfusion-react-query-builder](https://affpapa.org/en/nevibecode/skills/syncfusion-react-query-builder.md) — skill · Syncfusion Inc · Claude Code, Codex, Cursor +3 · 708 installs — Guides integration of Syncfusion's visual query builder in React. - [syncfusion-react-maps](https://affpapa.org/en/nevibecode/skills/syncfusion-react-maps.md) — skill · Syncfusion Inc · Claude Code, Codex, Cursor +3 · 707 installs — Walks the agent through building geographic maps in React: GeoJSON, markers, bubbles, legends, choropleth. - [edgespark-frontend-design](https://affpapa.org/en/nevibecode/skills/edgespark-frontend-design.md) — skill · EdgeSpark · Claude Code, Codex, Cursor +3 · 588 installs — This skill gives frontend work a clear visual direction across layout, type, color, motion, and accessibility. - [syncfusion-react-blockeditor](https://affpapa.org/en/nevibecode/skills/syncfusion-react-blockeditor.md) — skill · Syncfusion Inc · Claude Code, Codex, Cursor +3 · 706 installs — A skill that walks your agent through the Syncfusion React BlockEditor: block-based content editing with menus, drag-and-drop and Yjs collaboration. - [syncfusion-react-speech-to-text](https://affpapa.org/en/nevibecode/skills/syncfusion-react-speech-to-text.md) — skill · Syncfusion Inc · Claude Code, Codex, Cursor +3 · 705 installs — This skill guides React implementations of Syncfusion SpeechToText, including microphone input, transcript events, listening control, and accessible voice forms. - [syncfusion-react-treeview](https://affpapa.org/en/nevibecode/skills/syncfusion-react-treeview.md) — skill · Syncfusion Inc · Claude Code, Codex, Cursor +3 · 705 installs — An agent skill for building hierarchical trees with @syncfusion/ej2-react-navigations: node selection, checkboxes, drag-drop, inline editing and templates. - [syncfusion-react-dropdown-tree](https://affpapa.org/en/nevibecode/skills/syncfusion-react-dropdown-tree.md) — skill · Syncfusion Inc · Claude Code, Codex, Cursor +3 · 703 installs — Helps an agent build a Syncfusion React Dropdown Tree for hierarchical selection, checkboxes, and filtering. - [syncfusion-react-inline-ai-assist](https://affpapa.org/en/nevibecode/skills/syncfusion-react-inline-ai-assist.md) — skill · Syncfusion Inc · Claude Code, Codex, Cursor +3 · 700 installs — This skill guides React implementations of Syncfusion Inline AI Assist with AI suggestions, commands, response handling, and service integrations. - [syncfusion-react-ribbon](https://affpapa.org/en/nevibecode/skills/syncfusion-react-ribbon.md) — skill · Syncfusion Inc · Claude Code, Codex, Cursor +3 · 700 installs — A skill for building Office-style ribbon toolbars in React with Syncfusion: tabs, groups, galleries, backstage view, KeyTips. - [building-edgespark-apps](https://affpapa.org/en/nevibecode/skills/building-edgespark-apps.md) — skill · EdgeSpark · Claude Code, Codex, Cursor +3 · 577 installs — Guides coding agents working on EdgeSpark applications. - [syncfusion-react-data-manager](https://affpapa.org/en/nevibecode/skills/syncfusion-react-data-manager.md) — skill · Syncfusion Inc · Claude Code, Codex, Cursor +3 · 676 installs — Guides coding assistants in setting up Syncfusion DataManager for React apps, managing CRUD tasks, and selecting API adaptors safely. - [syncfusion-react-buttons](https://affpapa.org/en/nevibecode/skills/syncfusion-react-buttons.md) — skill · Syncfusion Inc · Claude Code, Codex, Cursor +3 · 675 installs — Provides implementation guides for Syncfusion React button components. Next: https://affpapa.org/en/nevibecode/skills/topic/frontend.md?page=71 ## 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