ssutantoatcaptech · ssutantoatcaptech · Mar 22, 2026 · Mar 23, 2026 · Mar 23, 2026 · Mar 23, 2026
diff --git a/CHEATSHEET.md b/CHEATSHEET.md
@@ -0,0 +1,48 @@
+# Claude Code Cheat Sheet
+
+## Starting Up
+
+### Step 1 — Open Terminal
+- **Mac:** `Cmd + Space` → type "Terminal" → Enter
+
+### Step 2 — Start the dev server (Tab 1)
+```bash
+cd /Users/ssutanto/AI-prototype
+npm run dev
+```
+Starts React frontend at **http://localhost:5173** and Express API at **http://localhost:3001**.
+
+### Step 3 — Open a second tab (`Cmd + T`)
+
+### Step 4 — Launch Claude Code (Tab 2)
+```bash
+cd /Users/ssutanto/AI-prototype
+claude
+```
+
+### Step 5 — Open the app
+```
+http://localhost:5173
+```
+
+---
+
+## Quick Reference
+
+| What | Command |
+|---|---|
+| Start everything | `npm run dev` |
+| Launch Claude Code | `claude` |
+| Check git status | `git status` |
+| Push current branch | `git push` |
+| List open PRs | `gh pr list` |
+| Merge PR (squash) | `gh pr merge --squash --delete-branch` |
+
+---
+
+## Tips
+
+- **Figma MCP** — open the Figma desktop app *before* starting Claude Code so the MCP server at `http://127.0.0.1:3845/mcp` is available
+- **Two terminals** — keep Tab 1 running `npm run dev` at all times; use Tab 2 for Claude Code
+- **gh CLI not found in Claude's shell** — if Claude can't run `gh`, run the command yourself in your terminal with `! gh ...`
+- **Git push** — Claude can commit but may not have GitHub credentials; run `git push` yourself if it fails
diff --git a/CLAUDE.md b/CLAUDE.md
@@ -0,0 +1,22 @@
+# Project Guidelines
+
+## Design System
+
+This project uses **Microsoft Fluent 2 Web** as the single source of truth for all UI design.
+
+- **Figma file**: https://www.figma.com/design/mSjELbJg0DugPqSB0JwocX/Microsoft-Fluent-2-Web--MCP-
+- **File key**: `mSjELbJg0DugPqSB0JwocX`
+
+### Rules for building UI
+
+- Always reference the Figma design system above when building or modifying any interface component
+- Use the Figma MCP tools to inspect components, tokens, and styles from this file before writing code
+- Match spacing, typography, colors, and component patterns from Fluent 2 — do not invent custom styles
+- When in doubt about a component's appearance or behaviour, look it up in the Figma file first
+
+### How to use Figma MCP
+
+The Figma MCP server is configured at `http://127.0.0.1:3845/mcp`. Use it to:
+- Inspect components by name (e.g. Button, Input, Card)
+- Extract design tokens (colors, spacing, typography)
+- Get accurate implementation details before writing code
diff --git a/index.html b/index.html
@@ -4,7 +4,10 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Database Dashboard</title>
+    <title>MoO Portal</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
   </head>
   <body>
     <div id="root"></div>

diff --git a/public/moo-styles.json b/public/moo-styles.json
@@ -0,0 +1,33 @@
+{
+  "colorStyles": [
+    { "name": "Primary/Main",       "color": "#0055A4", "description": "Primary brand blue" },
+    { "name": "Background/Navy",    "color": "#0A1128", "description": "Main app shell" },
+    { "name": "Background/Slate",   "color": "#101820", "description": "Main content area" },
+    { "name": "Text/Primary",       "color": "#F8FAFC", "description": "Headings and body" },
+    { "name": "Text/Secondary",     "color": "#64748B", "description": "Labels, captions" },
+    { "name": "Status/Success",     "color": "#108981", "description": "Active, approved" },
+    { "name": "Status/Warning",     "color": "#F59E0B", "description": "Pending, required" },
+    { "name": "Status/Error",       "color": "#EF4444", "description": "Denied, errors" },
+    { "name": "Status/Inactive",    "color": "#64748B", "description": "Inactive items" },
+    { "name": "Border/Default",     "color": "#FFFFFF14", "description": "Card border 8% white" },
+    { "name": "Border/Focus",       "color": "#0055A480", "description": "Focus border 50% primary" },
+    { "name": "Surface/Card",       "color": "#FFFFFF0D", "description": "Card surface 5% white" },
+    { "name": "Surface/Hover",      "color": "#FFFFFF1A", "description": "Hover surface 10% white" },
+    { "name": "Surface/Nav",        "color": "#0A1128CC", "description": "Nav sidebar 80% navy" }
+  ],
+  "textStyles": [
+    { "name": "Heading/H1",  "fontFamily": "Inter", "fontSize": 36, "fontWeight": 700, "lineHeight": 40, "description": "Page title" },
+    { "name": "Heading/H2",  "fontFamily": "Inter", "fontSize": 24, "fontWeight": 600, "lineHeight": 32, "description": "Section heading" },
+    { "name": "Heading/H3",  "fontFamily": "Inter", "fontSize": 18, "fontWeight": 500, "lineHeight": 28, "description": "Card title" },
+    { "name": "Body/Base",   "fontFamily": "Inter", "fontSize": 16, "fontWeight": 400, "lineHeight": 24, "description": "Body text" },
+    { "name": "Body/Small",  "fontFamily": "Inter", "fontSize": 14, "fontWeight": 500, "lineHeight": 20, "description": "Labels, secondary" },
+    { "name": "Body/XSmall", "fontFamily": "Inter", "fontSize": 12, "fontWeight": 400, "lineHeight": 16, "description": "Captions, metadata" },
+    { "name": "Label/Badge", "fontFamily": "Inter", "fontSize": 11, "fontWeight": 600, "lineHeight": 16, "description": "Badges, tags" }
+  ],
+  "effectStyles": [
+    { "name": "Elevation/Card",   "type": "LAYER_BLUR", "radius": 16, "description": "Base card blur" },
+    { "name": "Elevation/Hover",  "type": "LAYER_BLUR", "radius": 20, "description": "Hover/active blur" },
+    { "name": "Elevation/Modal",  "type": "LAYER_BLUR", "radius": 24, "description": "Modal/dropdown blur" },
+    { "name": "Elevation/Nav",    "type": "LAYER_BLUR", "radius": 30, "description": "Nav sidebar blur" }
+  ]
+}
diff --git a/public/moo-tokens-colors.json b/public/moo-tokens-colors.json
@@ -0,0 +1,30 @@
+{
+  "color": {
+    "primary": {
+      "main":     { "$value": "#0055A4", "$type": "color", "$description": "Primary brand blue" }
+    },
+    "background": {
+      "navy":     { "$value": "#0A1128", "$type": "color", "$description": "Main app shell" },
+      "slate":    { "$value": "#101820", "$type": "color", "$description": "Main content area" }
+    },
+    "text": {
+      "primary":  { "$value": "#F8FAFC", "$type": "color", "$description": "Headings and body" },
+      "secondary":{ "$value": "#64748B", "$type": "color", "$description": "Labels, captions" }
+    },
+    "status": {
+      "success":  { "$value": "#108981", "$type": "color", "$description": "Active, approved" },
+      "warning":  { "$value": "#F59E0B", "$type": "color", "$description": "Pending, required" },
+      "error":    { "$value": "#EF4444", "$type": "color", "$description": "Denied, errors" },
+      "inactive": { "$value": "#64748B", "$type": "color", "$description": "Inactive items" }
+    },
+    "border": {
+      "default":  { "$value": "#FFFFFF", "$type": "color", "$description": "Card border — set opacity to 8% in Figma" },
+      "focus":    { "$value": "#0055A4", "$type": "color", "$description": "Focus border — set opacity to 50% in Figma" }
+    },
+    "surface": {
+      "card":     { "$value": "#FFFFFF", "$type": "color", "$description": "Card surface — set opacity to 5% in Figma" },
+      "hover":    { "$value": "#FFFFFF", "$type": "color", "$description": "Hover surface — set opacity to 10% in Figma" },
+      "nav":      { "$value": "#0A1128", "$type": "color", "$description": "Nav sidebar — set opacity to 80% in Figma" }
+    }
+  }
+}
diff --git a/public/moo-tokens-test.json b/public/moo-tokens-test.json
@@ -0,0 +1,26 @@
+{
+  "collections": [
+    {
+      "name": "Colors",
+      "modes": [{ "modeId": "1:0", "name": "Default" }],
+      "variables": [
+        {
+          "id": "1:1",
+          "name": "primary/main",
+          "resolvedType": "COLOR",
+          "valuesByMode": {
+            "1:0": { "r": 0, "g": 0.333, "b": 0.643, "a": 1 }
+          }
+        },
+        {
+          "id": "1:2",
+          "name": "status/success",
+          "resolvedType": "COLOR",
+          "valuesByMode": {
+            "1:0": { "r": 0.063, "g": 0.537, "b": 0.506, "a": 1 }
+          }
+        }
+      ]
+    }
+  ]
+}
diff --git a/public/moo-tokens.json b/public/moo-tokens.json
@@ -0,0 +1,93 @@
+{
+  "color": {
+    "primary": {
+      "main":     { "$value": "#0055A4", "$type": "color", "$description": "Primary brand blue" }
+    },
+    "background": {
+      "navy":     { "$value": "#0A1128", "$type": "color", "$description": "Main app shell" },
+      "slate":    { "$value": "#101820", "$type": "color", "$description": "Main content area" }
+    },
+    "text": {
+      "primary":  { "$value": "#F8FAFC", "$type": "color", "$description": "Headings and body" },
+      "secondary":{ "$value": "#64748B", "$type": "color", "$description": "Labels, captions, hints" }
+    },
+    "status": {
+      "success":  { "$value": "#108981", "$type": "color", "$description": "Active, approved" },
+      "warning":  { "$value": "#F59E0B", "$type": "color", "$description": "Pending, required" },
+      "error":    { "$value": "#EF4444", "$type": "color", "$description": "Denied, errors" },
+      "inactive": { "$value": "#64748B", "$type": "color", "$description": "Inactive items" }
+    },
+    "border": {
+      "default":  { "$value": "#FFFFFF", "$type": "color", "$description": "Card border — set opacity to 8% in Figma" },
+      "focus":    { "$value": "#0055A4", "$type": "color", "$description": "Focus border — set opacity to 50% in Figma" }
+    },
+    "surface": {
+      "card":     { "$value": "#FFFFFF", "$type": "color", "$description": "Card surface — set opacity to 5% in Figma" },
+      "hover":    { "$value": "#FFFFFF", "$type": "color", "$description": "Hover surface — set opacity to 10% in Figma" },
+      "nav":      { "$value": "#0A1128", "$type": "color", "$description": "Nav sidebar — set opacity to 80% in Figma" }
+    }
+  },
+  "typography": {
+    "fontFamily": {
+      "primary":  { "$value": "Inter", "$type": "string", "$description": "Primary sans-serif" }
+    },
+    "fontWeight": {
+      "regular":  { "$value": 400, "$type": "number", "$description": "Body text" },
+      "medium":   { "$value": 500, "$type": "number", "$description": "Labels, buttons" },
+      "semibold": { "$value": 600, "$type": "number", "$description": "Headings, card titles" },
+      "bold":     { "$value": 700, "$type": "number", "$description": "Page titles, key values" }
+    },
+    "fontSize": {
+      "4xl":  { "$value": 36, "$type": "number", "$description": "H1 / Page title" },
+      "2xl":  { "$value": 24, "$type": "number", "$description": "H2 / Section heading" },
+      "lg":   { "$value": 18, "$type": "number", "$description": "H3 / Card title" },
+      "base": { "$value": 16, "$type": "number", "$description": "Body text" },
+      "sm":   { "$value": 14, "$type": "number", "$description": "Labels" },
+      "xs":   { "$value": 12, "$type": "number", "$description": "Captions" },
+      "2xs":  { "$value": 11, "$type": "number", "$description": "Badges, tags" }
+    },
+    "lineHeight": {
+      "tight":   { "$value": 40, "$type": "number", "$description": "H1" },
+      "snug":    { "$value": 32, "$type": "number", "$description": "H2" },
+      "normal":  { "$value": 28, "$type": "number", "$description": "H3" },
+      "relaxed": { "$value": 24, "$type": "number", "$description": "Body" },
+      "loose":   { "$value": 20, "$type": "number", "$description": "Small" }
+    }
+  },
+  "spacing": {
+    "1":  { "$value": 4,  "$type": "number", "$description": "4px — extra tight" },
+    "2":  { "$value": 8,  "$type": "number", "$description": "8px — tight" },
+    "3":  { "$value": 12, "$type": "number", "$description": "12px — compact" },
+    "4":  { "$value": 16, "$type": "number", "$description": "16px — base" },
+    "6":  { "$value": 24, "$type": "number", "$description": "24px — comfortable" },
+    "8":  { "$value": 32, "$type": "number", "$description": "32px — spacious" },
+    "12": { "$value": 48, "$type": "number", "$description": "48px — section gap" }
+  },
+  "borderRadius": {
+    "sm":   { "$value": 4,    "$type": "number", "$description": "Badges, tags" },
+    "md":   { "$value": 8,    "$type": "number", "$description": "Buttons, inputs" },
+    "lg":   { "$value": 12,   "$type": "number", "$description": "Cards" },
+    "xl":   { "$value": 16,   "$type": "number", "$description": "Modals, drawers" },
+    "full": { "$value": 9999, "$type": "number", "$description": "Pills, avatars" }
+  },
+  "component": {
+    "button": {
+      "height-sm": { "$value": 32, "$type": "number" },
+      "height-md": { "$value": 40, "$type": "number" },
+      "height-lg": { "$value": 48, "$type": "number" },
+      "padding-sm":{ "$value": 12, "$type": "number" },
+      "padding-md":{ "$value": 16, "$type": "number" },
+      "padding-lg":{ "$value": 24, "$type": "number" },
+      "radius":    { "$value": 8,  "$type": "number" }
+    },
+    "input": {
+      "height":    { "$value": 40, "$type": "number" },
+      "padding":   { "$value": 12, "$type": "number" },
+      "radius":    { "$value": 8,  "$type": "number" }
+    },
+    "card": {
+      "padding":   { "$value": 24, "$type": "number" },
+      "radius":    { "$value": 12, "$type": "number" }
+    }
+  }
+}