apollo-prototype

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.