feat(ai): initialize 4-folder AI architecture and enforce biophilic design system (!1) · Merge Requests · ThinhNC / upgrade-data-crawler-fe

feat(ai): initialize 4-folder AI architecture and enforce biophilic design system

Summary of Changes

This PR introduces a standardized 4-Folder AI Architecture and enforces the Organic Biophilic & Sustainability Platform design system guidelines across the repository for all AI Coding Agents (Antigravity, Claude Code, Cursor, Copilot).

Key Additions & Updates

1. Standardized 4-Folder AI Architecture (`ai/`)

Grouped all AI-related assets under a single root directory ai/ to maintain a clean workspace and clear separation of concerns:

ai/prompts/: System prompts (frontend-expert, crawler-analyst, quy-tac-bao-mat), task templates (tao-component, tich-hop-api, trich-xuat-du-lieu), and tool guides.
ai/data/: Separation between immutable raw crawler outputs (data/raw/) and clean, normalized datasets (data/processed/).
ai/agents/: Reusable skills (crawler-extractor, ui-component-builder) and MCP tool integration guides.
ai/evals/: Evaluation suite containing test cases, execution traces, and 100-point quality scorecards for UI/UX and data extraction.
ai/README.md: Comprehensive architectural documentation for AI workflows.

2. Antigravity IDE Integration (`.agents/`)

skills.json: Configured to dynamically load skills from ai/agents/skills/.
rules/crawler-fe-rules.md: Defined always_on project-wide constraints ensuring all agent turns respect stack conventions and design standards.

3. Core Project Rules & Design System Standard (`AGENTS.md`)

Preserved Next.js 16 agent warning blocks.
Documented mandatory stack conventions: pnpm, Next.js 16 App Router, strict TypeScript, Tailwind CSS v4, shadcn/ui, TanStack Query v5, and React Hook Form + Zod.
Enforced Default Design Standard:
- Style: Organic Biophilic & Nature Distilled (Sustainability Platform aesthetic).
- Palette: Earth tones & greens (#10b981, #A8D5BA, #C67B5C, #F5F5DC, dark moss #090d16).
- Component Requirements: Impact Metrics KPI cards, Interactive Calculator/Filter preview cards, and pill-shaped certification badges with organic rounded corners (rounded-2xl / rounded-3xl).
- Anti-patterns: Explicit prohibition of harsh neons, generic AI purple/pink gradients, and sharp rectangular boxes.

4. Documentation Synchronization

Updated main README.md to reflect the new ai/ structure.

## Summary of Changes

This PR introduces a standardized **4-Folder AI Architecture** and enforces the **Organic Biophilic & Sustainability Platform** design system guidelines across the repository for all AI Coding Agents (Antigravity, Claude Code, Cursor, Copilot).

---

### Key Additions & Updates

#### 1. Standardized 4-Folder AI Architecture (`ai/`)
Grouped all AI-related assets under a single root directory `ai/` to maintain a clean workspace and clear separation of concerns:
- **`ai/prompts/`**: System prompts (`frontend-expert`, `crawler-analyst`, `quy-tac-bao-mat`), task templates (`tao-component`, `tich-hop-api`, `trich-xuat-du-lieu`), and tool guides.
- **`ai/data/`**: Separation between immutable raw crawler outputs (`data/raw/`) and clean, normalized datasets (`data/processed/`).
- **`ai/agents/`**: Reusable skills (`crawler-extractor`, `ui-component-builder`) and MCP tool integration guides.
- **`ai/evals/`**: Evaluation suite containing test cases, execution traces, and 100-point quality scorecards for UI/UX and data extraction.
- **`ai/README.md`**: Comprehensive architectural documentation for AI workflows.

#### 2. Antigravity IDE Integration (`.agents/`)
- **`skills.json`**: Configured to dynamically load skills from `ai/agents/skills/`.
- **`rules/crawler-fe-rules.md`**: Defined `always_on` project-wide constraints ensuring all agent turns respect stack conventions and design standards.

#### 3. Core Project Rules & Design System Standard (`AGENTS.md`)
- Preserved Next.js 16 agent warning blocks.
- Documented mandatory stack conventions: `pnpm`, Next.js 16 App Router, strict TypeScript, Tailwind CSS v4, shadcn/ui, TanStack Query v5, and React Hook Form + Zod.
- **Enforced Default Design Standard**:
  - **Style**: *Organic Biophilic* & *Nature Distilled* (Sustainability Platform aesthetic).
  - **Palette**: Earth tones & greens (`#10b981`, `#A8D5BA`, `#C67B5C`, `#F5F5DC`, dark moss `#090d16`).
  - **Component Requirements**: Impact Metrics KPI cards, Interactive Calculator/Filter preview cards, and pill-shaped certification badges with organic rounded corners (`rounded-2xl` / `rounded-3xl`).
  - **Anti-patterns**: Explicit prohibition of harsh neons, generic AI purple/pink gradients, and sharp rectangular boxes.

#### 4. Documentation Synchronization
- Updated main `README.md` to reflect the new `ai/` structure.