From e4ce243e57821ff4ae1437c145687d5daf2aa23d Mon Sep 17 00:00:00 2001 From: Richie Date: Mon, 30 Mar 2026 11:07:42 +1100 Subject: [PATCH] Add GEMINI.md for Antigravity IDE project rules - Mirrors CLAUDE.md conventions for cross-tool consistency - Hard rules: no hardcoded values, token access patterns, atomic tiers - Scoped for visual polish work in Antigravity browser agent Co-Authored-By: Claude Opus 4.6 (1M context) --- GEMINI.md | 58 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 58 insertions(+) create mode 100644 GEMINI.md diff --git a/GEMINI.md b/GEMINI.md new file mode 100644 index 0000000..6910db8 --- /dev/null +++ b/GEMINI.md @@ -0,0 +1,58 @@ +# FA 2.0 Design System — Antigravity Rules + +## Project context + +Funeral Arranger (funeralarranger.com.au) design system rebuild. Parsons is the +client. The design language must be warm, professional, trustworthy, and calm. +Users are often in distress. + +## Tech stack + +- React 18 + TypeScript +- Material UI (MUI) v5 +- Storybook 8+ (running on localhost:6006) +- Style Dictionary for token transformation +- W3C DTCG token format + +## Hard rules + +1. **Never hardcode colours, spacing, typography, or shadows** — always consume the MUI theme (`theme.palette.*`, `theme.spacing()`, `theme.typography.*`) or CSS custom properties (`var(--fa-*)`) +2. **Never use raw hex values in components** — map to semantic tokens +3. **Follow atomic design tiers:** atoms → molecules → organisms → templates → pages +4. **Component folders:** PascalCase, each contains `ComponentName.tsx`, `ComponentName.stories.tsx`, `index.ts` +5. **Token files:** camelCase in `tokens/` directory (primitives → semantic → component tiers) +6. **CSS custom properties prefix:** `--fa-` +7. **Error styling uses copper (#B0610F)** not red — this is intentional for grief-sensitive context +8. **Copy tone:** warm but not gushy. Understated empathy. Let UI structure be the empathy. + +## Token access convention + +- Semantic tokens: `theme.palette.*`, `theme.typography.*`, `theme.spacing()` +- Component tokens: `var(--fa-component-property-state)` +- Never mix — semantic via theme, component via CSS vars + +## Storybook + +Dev server runs on `localhost:6006`. When verifying components visually, navigate +to the specific story URL. Story IDs follow the pattern: +`/story/{tier}-{componentname}--{variantname}` + +## File structure + +``` +src/components/atoms/ — Button, Input, Typography, Card, etc. +src/components/molecules/ — SearchBar, PriceCard, ServiceOption, etc. +src/components/organisms/ — Navigation, Footer, ArrangementDialog, etc. +src/components/templates/ — WizardLayout +src/components/pages/ — IntroStep, ProvidersStep, etc. (wizard steps) +tokens/primitives/ — Raw values (hex, px, font names) +tokens/semantic/ — Design intent (color.text.primary) +tokens/component/ — Per-component tokens +``` + +## When making visual changes + +1. Make the code change +2. Open the Storybook story in the browser to verify +3. Screenshot and check spacing, alignment, visual weight +4. Self-correct if something looks off before presenting