Context-Aware UI Design Engine (v3.0)

Stop building generic UI. This skill forces AI to explore real-world contexts, map the emotional journey, decide what matters per screen, and strictly code visuals using a predefined token system.

Philosophy

Most AI-generated UI suffers from "happy-path bias" and "arbitrary styling." This skill enforces an enterprise-grade 3-phase workflow:

1. Phase 0: Omni-Context & Journey — Brainstorms 5-20 real-world contexts and a 3-act emotional journey to build empathy.
2. Phase 1: Content Priority Analysis — Forces AI to classify every UI element on a screen into Critical (🔴), Important (🟡), Supportive (🔵), or On-demand (⚪).
3. Phase 2: Visual Execution & Validation — Translates the priorities directly into code using absolute design tokens. Runs a final 8-point Sanity Gate (including a strict emoji ban) before outputting code.

Execution Flow (How It Works)

This skill operates on a strict, predictable pipeline to ensure no UI is generated blindly:

flowchart TD
    classDef phase fill:#1e293b,stroke:#475569,stroke-width:2px,color:#f8fafc,rx:8px,ry:8px
    classDef action fill:#0f172a,stroke:#3b82f6,stroke-width:1px,color:#e2e8f0
    classDef check fill:#334155,stroke:#f59e0b,stroke-width:2px,color:#f8fafc,shape:diamond
    classDef stop fill:#7f1d1d,stroke:#f87171,stroke-width:3px,color:#fee2e2,rx:8px,ry:8px
    classDef doc fill:#064e3b,stroke:#34d399,stroke-width:1px,color:#d1fae5,shape:note

    User([User Request]) --> P0
    
    subgraph P0 [Phase 0: Omni-Context]
        direction TB
        A1[Brainstorm 5-20 Contexts]:::action --> A2[Map Emotional Journey]:::action
    end
    
    P0 --> P1
    
    subgraph P1 [Phase 1: Priority Analysis]
        direction TB
        B1[Detect 8 Context Vectors]:::action --> B2[Classify UI Elements<br/>Critical to On-demand]:::action
        B2 --> B3[Zero-Think Test &<br/>Context Stress Test]:::action
        B3 --> B4{CFS >= 10?}:::check
        B4 -- "No (Redo)" --> B1
    end
    
    B4 -- "Yes" --> Doc1
    Doc1[/docs/design-analysis-screen.md/]:::doc --> MS
    
    MS[[MANDATORY STOP<br/>Wait for approval]]:::stop
    MS -- "Approved" --> P2
    
    subgraph P2 [Phase 2: Visual Execution]
        direction TB
        C1[Apply Tokens & Type Scale]:::action --> C2[Map Priority to Visuals]:::action
        C2 --> C3[Headless & Platform Rules]:::action --> C4[Generate React/Vue Code]:::action
    end
    
    P2 --> QL
    
    subgraph QL [Quality Loop]
        direction TB
        D1{Sanity Gate<br/>8 Hard Rules}:::check -- Pass --> D2{Quick Checklist}:::check
        D1 -- Fail --> C1
        D2 -- Fail --> C4
    end
    
    D2 -- Pass --> Out[(Output Code)]:::action

File-Based Workflow (Prevents Context Overflow)

The skill uses a file-based task queue to process UI flows one screen at a time:

• It creates a task-[flow].md queue.
• It analyzes one screen, saves to docs/analysis-[screen].md.
• It codes the screen, saves to src/features/[flow]/components/.
• It checks it off the queue and moves to the next.

Integrations

This skill seamlessly integrates with the following optional Awesome Skills:

• ui-ux-pro-max: Enhances Phase 2 with 50+ aesthetic styles, 97 color palettes, and Google Font pairings based on product type.
• canvas-design: Generates custom .png hero images, abstract illustrations, and category assets when needed, rather than falling back to placeholders.
• comprehensive-review-full-review: Can be used post-design to audit the entire project for structural integrity.

Dynamic Rule Loading (Continuous Upgrades)

Since the world of design standardizes and updates constantly, you shouldn't rely on hard-coded prompt rules indefinitely. You can manually request the AI to "pull the latest Context-aware design rules" from specific documentation or a repository before starting a complex task. This ensures the engine always works with the most modern principles without constantly rewriting the skill itself.

How to use

Simply invoke the AI and provide a flow to design:

"Hãy dùng context-aware-ui-design để thiết kế luồng Gọi món nhà hàng (đặt qua QR tại bàn) theo chuẩn v3.0."

The AI will automatically guide you through Phase 0, pause for your review, and then handle Phase 1 and Phase 2.

Output Standards

The code generated will be:

• Strictly compliant with Tailwind Design Tokens (colors, spacing, elevation).
• Clean of arbitrary emojis or decorative junk.
• Broken down into modular React/Vue components (max 150 lines per file).
• Bulletproof against aggressive real-world contexts.