메뉴
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.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
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>