Daniel Bedeleanu
f0a9d28abb
Phase 9: Design Color System Enforcement This commit creates mandatory design rules to prevent future hardcoded colors: 1. DESIGN_COLOR_RULES.md - MANDATORY REFERENCE FOR ALL FUTURE UI/UX WORK - Establishes that NO arbitrary Tailwind colors are allowed - Defines semantic color mapping (success, error, warning, info) - Provides quick reference guide for color selection - Includes enforcement rules for AI agents and developers - Maps 20+ hardcoded colors to DESIGN.md equivalents 2. dev_docs/DESIGN_COMPLIANCE_FIX_PLAN.md - DETAILED IMPLEMENTATION GUIDE - Comprehensive fix plan with line-by-line changes for 20 files - 44+ color corrections identified and documented - Step-by-step instructions for each file modification - Includes before/after code snippets - Implementation checklist for tracking progress 3. CLAUDE.md - UPDATED WITH MANDATORY COLOR RULES - Added reference to DESIGN_COLOR_RULES.md as required reading - Added critical color rule section at top - Semantic color mapping quick reference for AI agents - Linked related documentation COLOR MAPPING ENFORCED: - Success/Healthy: tertiary (#00e639) - Error/Destructive: error (#ffb4ab) - Warning/Caution: primary (#ffb781) - Info/Secondary: secondary (#c8c6c5) - Muted/Disabled: muted (#474746) HARDCODED COLORS IDENTIFIED (44+ instances): - Indigo (3 instances) → primary/secondary - Green (12 instances) → tertiary - Red/Rose (20 instances) → error - Amber/Sky (9 instances) → primary/secondary All future UI/UX work MUST follow DESIGN_COLOR_RULES.md. Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
39 lines
1.8 KiB
Markdown
39 lines
1.8 KiB
Markdown
# CLAUDE ENTRY POINT
|
||
|
||
You are Claude, operating on the TFM aInventory project.
|
||
|
||
**IMMEDIATE MANDATORY ACTION:**
|
||
Before taking any action or writing code, you MUST read the following Single Source of Truth files:
|
||
1. `AI_RULES.md` (Contains your operational constraints, Git rules, and UI fidelity laws).
|
||
2. `PROJECT_ARCHITECTURE.md` (Contains the tech stack, data models, and system logic).
|
||
3. `dev_docs/SESSION_STATE.md` (Contains the current handover status from the previous AI).
|
||
4. `DESIGN_COLOR_RULES.md` (MANDATORY for ALL UI/UX work - No hardcoded Tailwind colors allowed).
|
||
|
||
**STRICT COMMUNICATION RULE:**
|
||
Be concise! Do not explain a thousand details unless they are absolutely necessary.
|
||
|
||
Do not proceed with any task until you have analyzed these three files.
|
||
|
||
DO NOT, EVER, USE "uppercase" or "toUpper" in any UI/UX context, nowhere. This SHOULD NOT be used in UI/UX anywhere, no text should be displayed in CAPITAL LETTERS! But do not replace "toUpper" with "toLower" or "uppercase" with "lowercase" either, leave text in UI/UX as is.
|
||
|
||
## 🎨 CRITICAL COLOR RULE FOR ALL UI/UX WORK
|
||
|
||
**NO HARDCODED TAILWIND COLORS ALLOWED** ❌
|
||
- ❌ Never use `bg-green-500`, `text-red-600`, `border-blue-400`, etc.
|
||
- ✅ Always use semantic colors from DESIGN.md: `bg-primary`, `text-tertiary`, `bg-error`
|
||
- 📖 **MANDATORY READ:** `DESIGN_COLOR_RULES.md` before ANY frontend code
|
||
|
||
**Semantic Color Mapping:**
|
||
- ✅ Success/Healthy: `tertiary` (#00e639)
|
||
- ❌ Error/Destructive: `error` (#ffb4ab)
|
||
- ⚠️ Warning/Caution: `primary` (#ffb781)
|
||
- ℹ️ Info/Secondary: `secondary` (#c8c6c5)
|
||
|
||
See `DESIGN_COLOR_RULES.md` for complete color mapping and examples.
|
||
|
||
## Project-Specific Guidelines
|
||
|
||
- Use TypeScript strict mode
|
||
- All API endpoints must have tests
|
||
- All UI colors MUST follow DESIGN.md (see DESIGN_COLOR_RULES.md)
|