skills.rest
UiPath
UiPathOFFICIAL
Explore all skills by this author →
WebsiteGitHub

apollo-prototype

Build React 19 TypeScript Tailwind CSS 4 UI mockups with Apollo Wind semantic tokens and shadcn components.

18|7|Updated Nov 3, 2025
Search Tags:#react#prototyping#tailwind#design-system#shadcn#apollo#apollo-wind
One-click install
npx skills add https://github.com/UiPath/apollo-ui --skill apollo-prototype
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: apollo-prototype
Source: https://github.com/UiPath/apollo-ui/tree/main/packages/apollo-wind/skills/apollo-prototype
Command: npx skills add https://github.com/UiPath/apollo-ui --skill apollo-prototype

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Speeds up building consistent, theme-aware UI prototypes by providing rules and patterns for using Apollo Wind semantic tokens and shadcn components so teams avoid inconsistent styling, incorrect Tailwind color usage, and mismatched theming.

Core Features & Use Cases

  • Enforces semantic tokens and surface, text, and border conventions such as bg-surface, bg-surface-raised, text-foreground, and border-border to maintain cross-theme consistency.
  • Prescribes import patterns from component libraries and utilities including imports from @/components/ui, @/components/custom, lucide-react for icons, and cn() for conditional classes.
  • Guides theme application by requiring a root class of future-dark or future-light and forbidding raw Tailwind color names and other UI libraries; ideal for prototyping chat interfaces, dashboards, and component demos within React + TypeScript + Tailwind projects.

Quick Start

Use the apollo-prototype skill to generate a React TypeScript component that uses Apollo Wind semantic tokens, shadcn/ui components, lucide-react icons, cn() for conditional classes, and applies the future-dark or future-light class at the root.

Frequently Asked Questions about apollo-prototype

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build theme-aware React prototypes with shadcn and Tailwind CSS 4?▼

Theme-aware React prototypes use semantic tokens like bg-surface and text-foreground, import shadcn components from @/components/ui, and apply a future-dark or future-light root class to ensure cross-theme consistency.

What are semantic tokens in Tailwind CSS for UI prototyping?▼

Semantic tokens in Tailwind CSS are naming conventions like bg-surface-raised, text-foreground, and border-border that map to theme variables. They maintain cross-theme consistency by preventing raw color values and ensuring components switch correctly between future-dark and future-light modes.

Can I use raw Tailwind color names in shadcn component assembly?▼

Raw Tailwind color names are forbidden during shadcn component assembly. You must use Apollo Wind semantic tokens and the cn() utility for conditional classes to maintain strict theme awareness and avoid mismatched styling across future-dark and future-light modes.

How do I add icons to React TypeScript components using lucide-react?▼

Add icons to React TypeScript components by importing them directly from lucide-react. This prescribed import pattern ensures icons integrate seamlessly with shadcn/ui components and Apollo Wind semantic tokens without introducing conflicting UI libraries.

Does apollo-prototype work with other React UI libraries?▼

Apollo-prototype does not work with other UI libraries. It explicitly forbids mixing external UI libraries with the Apollo Wind system, requiring imports strictly from @/components/ui, @/components/custom, and lucide-react to guarantee theme-consistent mockups.

Related Skills

Explore More Design & Creative Skills→
netprtonynetprtony

shadcn-ui

Automate shadcn/ui component setup and usage in React and Next.js projects.

Community
Advanced
zaid-khan-codezaid-khan-code
3

shadcn-ui-setup

Set up Shadcn UI components with dark mode in Next.js.

Community
Intermediate
JordiNodeJSJordiNodeJS

component-development

Create accessible React 19 UI components with Shadcn UI and Tailwind CSS 4.

Community
Intermediate
djankiesdjankies

creating-custom-utilities

Create custom Tailwind v4 utilities using the @utility directive.

Community
Advanced