菜单
Guide React component design for Fogo using the Fogo design system (Industrial Warmth, dark-first, Fogo amber brand color, Tailwind CSS). Use when designing UI, creating components, styling, or writing frontend code.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | frontend-ui-ux-design |
| description | Guide React component design for Fogo using the Fogo design system (Industrial Warmth, dark-first, Fogo amber brand color, Tailwind CSS). Use when designing UI, creating components, styling, or writing frontend code. |
| allowed-tools | ["Read","Grep","Glob"] |
ALWAYS read DESIGN.md before any visual work. It is the single source of truth.
Full token definitions: frontend/tailwind.config.js
Component patterns and Tailwind recipes: docs/v2/fogo-mockups/shared-patterns.md
Mockup index: docs/v2/fogo-mockups/README.md
Before building any page: DESIGN.md → shared-patterns.md → {page}-spec.md → {page}.html
#100F12#D4952A) = brand color, AI presence, active states. Used ONLY for: active nav, Fogo card borders, action buttons in Fogo flows, logo, Fogo character glow.#7EC8D4) = data precision, chart lines, current-week highlight, data callouts. NOT for buttons. NOT the brand color.font-display): display headings, page titlesfont-body): body text, UI labels, buttonsfont-mono): financial amounts, percentages, dates, statsNumbers always in font-mono. Never body font for amounts.
| Purpose | Token | Value |
|---|---|---|
| Brand / AI presence | fogo-amber | #D4952A |
| Data precision | teal | #7EC8D4 |
| Budget warning | semantic-caution | #D4A06A |
| Over budget | semantic-danger | #E8605A |
| Under budget | semantic-positive | #3DCF85 |
| Income | semantic-income | #60C8B0 |
| Expense (default) | semantic-expense | #9E83BC |
| FIRE progress (month-end only) | fire-gold | #C8922A |
rounded-lg (10px) — not bubbly 16px, not stiff 4pxbg-surface-raised border border-border-subtle rounded-lg shadow-card p-6bg-surface-raised border border-border-subtle border-l-2 border-l-fogo-amber rounded-r-lg p-5 px-6 shadow-[0_0_50px_rgba(212,149,42,0.05)]ease-out, Exit: ease-inanimate-fogo-pulse| Location | Size | Present? |
|---|---|---|
| Dashboard narrative | 140px | YES — amber glow |
| Review (Reflect + Plan) | 160px+ | YES — full emotional range |
| Ask Fogo (chat) | 48px avatar | YES |
| Transactions, Analytics, Budget, Settings | — | NO — absence is intentional |
semantic-expense muted purple)bg-surface-base #100F12 — app shell
bg-surface-raised #18171B — default cards
bg-surface-overlay #201F24 — hover, expanded rows
bg-surface-float #28272D — dialogs, popovers, inputs
See docs/v2/fogo-mockups/shared-patterns.md for full recipes with Tailwind classes.
See docs/v2/fogo-mockups/shared-progress-bars.md for progress bar variants.
See docs/v2/fogo-mockups/sidebar-spec.md for sidebar layout and pulse component.
UI chrome labels (e.g., GROCERIES, THIS WEEK) use:
font-mono text-data-sm text-text-tertiary uppercase tracking-label
where tracking-label = 0.08em.
2026-04-02 — Updated for Fogo rebrand and new design system
Fast headless browser for QA testing and site dogfooding. Navigate pages, interact with elements, verify state, diff before/after, take annotated screenshots, test responsive layouts, forms, uploads, dialogs, and capture bug evidence. Use when asked to open or test a site, verify a deployment, dogfood a user flow, or file a bug with screenshots. (gstack)
Review session data model for the v2 two-phase monthly review (Reflect + Plan). Use when building review session CRUD, phase orchestration, conversation entry storage, or the review frontend. Status: BUILT (Phase 3, 2026-04-02).
Model evaluation framework for comparing LLM outputs (Haiku vs Sonnet vs fine-tuned). Use when building eval infrastructure, running model comparisons, or setting up the RLHF training pipeline. Status: PLANNED — build in Phase 2.2.
LLM Gateway interface for all Anthropic API calls in v2. Use when writing any code that calls an LLM, adding new model providers, or understanding how LLM costs are tracked. Status: PLANNED — not yet built.
Configure Buddy AI with Anthropic Claude API and set up automated insight generation via cron jobs (daily, weekly, monthly). Use when setting up Buddy AI, configuring cron jobs, or troubleshooting AI insights.
Explain code with visual diagrams and analogies. Use when explaining how code works, teaching about codebase, answering "how does this work", walking through logic, or understanding Budget Buddy architecture.