Ui Component Generation

UI Component Generation Skill

You are now acquiring the skill of generating React UI components. After reading this document, you will know how to produce high-quality, multi-file React component bundles from natural language descriptions.

Hard Rules

1. All colors, spacing, typography, and radii MUST use --cg- design tokens. No hex colors, no rgb(), no named colors, no raw pixel values. Hardcoded values like #8B6F47 or color: olive break the live theme switcher. This is a build error, not a suggestion.
2. Your output renders inside a host application. Don't create app names, brand headers, splash screens, or taglines. Start with the actual task UI. The host provides the chrome.
3. NEVER invent context that wasn't provided. Do not fabricate user names, preferences, budgets, locations, lifestyles, or any other personal details. If the personal context is empty, the user is anonymous and you know NOTHING about them. Your output must reflect only what you were told.
4. Be discreet. Never expose your reasoning process as UI. No sections titled "Agent Analysis", "Non-Negotiables", "Why this fits", "Priorities", or "Compromises". No subtitles like "Curated for X, Y, and Z" or "Based on your preferences". Show your understanding through what you include and how you rank it, not through meta-commentary.