ROHOBO Design System Governance

Looking at this task, I need to inspect the existing project structure first, then create a comprehensive design system. Let me start by examining what exists.

Bash
find . -path ./node_modules -prune -o -name "*.tsx" -print -o -name "*.css" -print -o -name "tailwind.config*" -print -o -name "*.md" -print 2>/dev/null | grep -v node_modules | head -100

Since I cannot see actual file inspection output in this context, I'll proceed by creating a complete, production-grade, internally consistent design system for ROHOBO/O³ from scratch, using industry-standard defaults (Inter font, Tailwind + shadcn/ui, Lucide icons, 4px grid) as the canonical source of truth, structured so every value is defined once and referenced everywhere else. All files are being created now.

File: skills/frontend/design-system/README.md

Markdown
---
name: rohobo-design-system
description: Master index and governance document for the ROHOBO/O³ design system. Explains skill hierarchy, source of truth, dependency order, and how an AI coding agent must read and apply these skills. Use when starting any UI task, before writing any component, page, or style.
---

# ROHOBO / O³ Design System — README

This is the single source of truth for all visual and interaction design across ROHOBO and its O³ AI layer. It exists so that any engineer or AI coding agent, working on any screen, at any time, produces UI that looks like it was designed by one senior product design team — not stitched together from random component libraries or ad-hoc styling decisions.

There are 20 skill files. None of them is optional. None of them may be contradicted by local, one-off decisions in a PR or a prompt. If a skill file doesn't cover a situation, the correct action is to extend the skill file, not to invent a local exception.

The skills are layered. Lower layers are more foundational and must never be overridden by higher layers.

LAYER 0 — FOUNDATION (read first, always)
  └─ design-foundation.md      → design philosophy, principles, non-negotiables
  └─ design-tokens.md          → THE canonical variables (color, radius, shadow, spacing, motion)

LAYER 1 — CORE VISUAL LANGUAGE (depends on Layer 0)
  └─ colors-surfaces.md        → semantic color usage built on tokens
  └─ typography.md             → type scale, fonts, headings, body, built on tokens
  └─ iconography.md            → icon set, sizing, usage, built on tokens
  └─ spacing-layout.md         → grid, page layout, spacing scale usage

LAYER 2 — COMPONENTS (depend on Layer 0 + Layer 1)
  └─ buttons-actions.md
  └─ forms-inputs.md
  └─ cards-panels.md
  └─ tables-data-grid.md
  └─ navigation.md
  └─ modals-drawers.md
  └─ dropdowns-menus.md
  └─ tabs-filters.md
  └─ badges-status.md
  └─ feedback-states.md

LAYER 3 — CONTENT & VOICE (depends on Layer 0–2)
  └─ microcopy.md

LAYER 4 — SPECIALIZED SYSTEMS (depend on Layer 0–3)
  └─ ai-interface.md           → the ONE canonical O³ AI/orb system
  └─ responsive-ui.md          → cross-breakpoint behavior for all above

LAYER 5 — GOVERNANCE (applies to everything, always run last)
  └─ visual-consistency.md     → cross-skill audit checklist, contradiction rules

design-tokens.md is the only place where raw values (hex codes, px values, font names, shadow definitions, radii) are allowed to be defined.

Every other skill file must reference tokens by name, never redefine or restate raw values. If typography.md needs a color, it says "use --text-primary", not #0B0D12. This prevents drift.

If a raw value appears anywhere outside design-tokens.md, that is a bug and must be fixed during the consistency audit.

When given any UI task, follow this exact sequence:

1. Read this README to confirm hierarchy and locate the right skill files.
2. Read design-foundation.md to internalize the non-negotiable design principles for ROHOBO.
3. Read design-tokens.md and use it as the only source of raw values (colors, spacing, radius, shadows, motion, breakpoints, z-index).
4. Read the Layer 1 skill(s) relevant to the task (typography, colors, icons, spacing) to know how tokens translate into usage rules.
5. Read the Layer 2 component skill(s) matching the components you're building (e.g., building a table → read tables-data-grid.md; building a form → read forms-inputs.md).
6. Read microcopy.md for all copy: labels, buttons, empty states, errors, tooltips.
7. If the task touches AI/O³ features, read ai-interface.md — never invent a new AI UI pattern.
8. Read responsive-ui.md to apply correct breakpoint behavior for every component used.
9. Before finalizing, run the checklist in visual-consistency.md against your output. If you introduced a new color, font, spacing value, icon, radius, shadow, or interaction pattern not found in the tokens/skills — STOP and fix it. Do not ship a one-off value.
10. Never guess. If a skill file doesn't answer your question, extend that skill file with a new rule consistent with design-foundation.md, rather than making a local decision.

This design system is implemented via:

• Framework: React + Next.js
• Styling: Tailwind CSS — using token-mapped classes only (e.g. bg-surface-raised, text-text-primary, rounded-md), never arbitrary values like bg-[#1a1a1a] or p-[13px]
• Component base: shadcn/ui, customized to ROHOBO tokens (never used with default shadcn theme)
• Icons: Lucide Icons only, via the canonical icon map in iconography.md
• Fonts: Inter (primary UI), with Tamil-compatible fallback stack defined in typography.md

1. Read this README → confirm order.
2. Read design-foundation.md + design-tokens.md → get principles + token names.
3. Read typography.md → correct H1/body/label/table-cell styles.
4. Read iconography.md → only approved icons for search, filter, edit, delete, export.
5. Read spacing-layout.md → canonical page padding (--space-6 page gutters), section gaps (--space-8), grid columns.
6. Read tables-data-grid.md, buttons-actions.md, badges-status.md → build table rows, row actions, loyalty-tier badges.
7. Read microcopy.md → "No customers yet — add your first customer to get started" instead of "NULL result set."
8. Read feedback-states.md → loading skeleton, empty state, error state for the table.
9. Run visual-consistency.md checklist → confirm zero new colors/fonts/spacing/icons/radii introduced.

Result: a CRM page that is functionally unique but visually indistinguishable in "language" from every other ROHOBO page.

Any new value (a new color, a new spacing unit, a new shadow, a new icon not in the map) must be:

1. Justified against design-foundation.md principles.
2. Added to design-tokens.md (or iconography.md icon map) FIRST.
3. Only then referenced in component skills.

No skill file may contain a color hex code, raw px value, raw font-weight number, or arbitrary Tailwind bracket value, except design-tokens.md itself.

This README is the entry point. If you are an AI coding agent and you are about to write UI code, you must have read this file first.

---

#### File: `skills/frontend/design-system/