// Builds Apollo Wind prototypes using semantic tokens, shadcn components, and Future theme classes. Use when building Apollo prototypes, UI with apollo-wind, or when the user mentions Apollo design system, Apollo Wind, or UiPath prototyping.
Use when fixing npm/pnpm security vulnerabilities, Dependabot alerts, or audit failures
Use when creating or reviewing GitHub Actions workflows in this repo. Applies all security patterns established during the apollo-ui hardening session — permissions, action pinning, checkout safety, install patterns, secrets handling, fork protection, Turbo caching, artifacts, and minimumReleaseAge.
Applies UiPath UX writing guidelines to UI copy — labels, buttons, errors, modals, empty states, and all microcopy. Use when writing or reviewing UI text, copy, or content for UiPath products.
Migrate an apollo-react canvas component from Emotion styled-components to apollo-wind Tailwind classes following the BaseNode reference migration patterns
Use when cutting a maintenance/support branch for an older major version of an apollo-ui package (e.g. apollo-react v3, v4, v5). Orchestrates branch creation, pushes it bare, then opens a PR with workspace dep locking, release config, and lockfile regeneration. Confirms commit messages and git actions with the user before executing them.
Sets up and launches the Apollo Wind Storybook from scratch. Use when the user wants to run Apollo Wind, start Storybook, set up the apollo-ui repo, or says something like "get apollo running", "set up apollo", or "start apollo storybook".
| name | apollo-prototype |
| description | Builds Apollo Wind prototypes using semantic tokens, shadcn components, and Future theme classes. Use when building Apollo prototypes, UI with apollo-wind, or when the user mentions Apollo design system, Apollo Wind, or UiPath prototyping. |
Guides AI-assisted prototyping with the Apollo Wind design system. For full reference (tokens, components, templates), see packages/apollo-wind/apollo-ai-context.md.
future-dark | future-light (apply to root element)bg-surface, bg-surface-raised, text-foreground, text-foreground-muted, border-border@/components/ui/ and @/components/custom/lucide-reactcn() from @/lib for conditional classesfuture-dark or future-lightbg-zinc-900, text-gray-400)bg-black, bg-white — use semantic tokensSurfaces: bg-surface, bg-surface-raised, bg-surface-overlay, bg-surface-hover, bg-surface-muted
Text: text-foreground, text-foreground-secondary, text-foreground-muted, text-foreground-subtle
Borders: border-border, border-border-subtle, border-border-muted
Bridge tokens (cross-theme): bg-background, bg-card, text-foreground, text-muted-foreground, bg-primary, text-primary
Radius: Use rounded-lg, rounded-md, rounded-sm — never arbitrary rounded-[12px]
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Search, Plus } from 'lucide-react';
import { cn } from '@/lib';
<div className="future-dark">
{/* or future-light */}
<YourComponent />
</div>