designkit-ai 1.0.0

package/skills/design.md

@@ -0,0 +1,470 @@
+# Skill: Design (HTML — single file output)
+
+> **For:** Claude, GPT-4o, Gemini, Cursor, Copilot, or any AI agent.
+> **Goal:** Read this kit → design a single-file HTML page or mobile screen.
+> **Output:** One self-contained `.html` file. No external dependencies.
+
+---
+
+## Your role
+
+You are a **UI/UX designer and front-end developer**.
+When given a design request (e.g. "design a finance app home screen"), you will:
+
+1. Read the token system below
+2. Pick the correct platform (mobile or web)
+3. Compose components from the component library
+4. Output a **single, complete, self-contained HTML file**
+
+The output must open in any browser and look like a finished, pixel-perfect design.
+
+---
+
+## Step 1 — Choose platform & canvas size
+
+| Platform | Viewport width | Typical height | Use for |
+|----------|---------------|----------------|---------|
+| **Mobile** | `390px` | `844px` (scroll ok) | App screens, iOS/Android |
+| **Tablet** | `768px` | `1024px` | iPad, large mobile |
+| **Web / Desktop** | `1440px` | `900px` (scroll ok) | Landing pages, dashboards, web apps |
+
+Set `<meta name="viewport" content="width=390">` for mobile.
+Set `<meta name="viewport" content="width=1440">` for desktop.
+
+---
+
+## Step 2 — Load the token kit
+
+Always start your `<style>` block with these CSS variables. Adjust values to match the design mood.
+
+```css
+:root {
+  /* ── Brand colors ── */
+  --kit-primary:        #6366F1;   /* main brand — change this first */
+  --kit-primary-text:   #FFFFFF;   /* text on primary bg */
+  --kit-secondary:      #64748B;
+  --kit-accent:         #F59E0B;
+
+  /* ── Surface hierarchy ── */
+  --kit-bg:             #FFFFFF;   /* page background */
+  --kit-surface:        #F8FAFC;   /* card, panel */
+  --kit-surface-2:      #F1F5F9;   /* nested card, input bg */
+  --kit-surface-3:      #E2E8F0;   /* deeply nested, divider bg */
+
+  /* ── Text hierarchy ── */
+  --kit-text:           #0F172A;   /* primary text */
+  --kit-text-2:         #475569;   /* secondary, label */
+  --kit-text-3:         #94A3B8;   /* caption, placeholder */
+  --kit-text-inverse:   #FFFFFF;   /* text on dark bg */
+
+  /* ── Borders ── */
+  --kit-border:         #E2E8F0;
+  --kit-border-strong:  #CBD5E1;
+
+  /* ── Status colors ── */
+  --kit-success:        #22C55E;
+  --kit-success-bg:     #F0FDF4;
+  --kit-error:          #EF4444;
+  --kit-error-bg:       #FEF2F2;
+  --kit-warning:        #F59E0B;
+  --kit-warning-bg:     #FFFBEB;
+  --kit-info:           #3B82F6;
+  --kit-info-bg:        #EFF6FF;
+
+  /* ── Typography ── */
+  --kit-font:    'Inter', system-ui, -apple-system, sans-serif;
+  --kit-text-xs:  11px;
+  --kit-text-sm:  13px;
+  --kit-text-md:  15px;    /* default body */
+  --kit-text-lg:  17px;
+  --kit-text-xl:  20px;
+  --kit-text-2xl: 24px;
+  --kit-text-3xl: 32px;
+  --kit-text-4xl: 48px;
+
+  /* ── Spacing ── */
+  --kit-space-1:   4px;
+  --kit-space-2:   8px;
+  --kit-space-3:  12px;
+  --kit-space-4:  16px;   /* default padding */
+  --kit-space-5:  20px;
+  --kit-space-6:  24px;
+  --kit-space-8:  32px;
+  --kit-space-10: 40px;
+  --kit-space-12: 48px;
+  --kit-space-16: 80px;
+
+  /* ── Radii ── */
+  --kit-radius-sm:   6px;
+  --kit-radius:      10px;  /* default */
+  --kit-radius-lg:   14px;
+  --kit-radius-xl:   20px;
+  --kit-radius-full: 9999px;
+
+  /* ── Shadows ── */
+  --kit-shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
+  --kit-shadow:    0 4px 12px rgba(0,0,0,0.10);
+  --kit-shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
+  --kit-shadow-xl: 0 20px 60px rgba(0,0,0,0.15);
+}
+```
+
+### Dark mode token override
+
+```css
+/* Add inside <style> after :root */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --kit-bg:            #0F172A;
+    --kit-surface:       #1E293B;
+    --kit-surface-2:     #334155;
+    --kit-surface-3:     #475569;
+    --kit-text:          #F1F5F9;
+    --kit-text-2:        #94A3B8;
+    --kit-text-3:        #64748B;
+    --kit-text-inverse:  #0F172A;
+    --kit-border:        #334155;
+    --kit-border-strong: #475569;
+  }
+}
+```
+
+---
+
+## Step 3 — Compose your design
+
+Use HTML components from this kit. All components use inline styles with `var(--kit-*)`.
+
+### Available components (read from `components/` folder)
+
+#### Mobile (`components/app-mobile/`)
+
+```
+navbars/       top-app-bar-small, top-app-bar-center, top-app-bar-large
+               bottom-nav-3, bottom-nav-4, bottom-nav-5, bottom-app-bar
+buttons/       button-filled, button-tonal, button-outlined, button-text
+               button-icon, button-fab, button-fab-small, button-fab-extended
+               button-segmented
+cards/         card-elevated, card-filled, card-outlined
+inputs/        text-field-filled, text-field-outlined, search-bar
+               date-picker, time-picker, otp-input, password-field
+               file-upload, textarea, select
+lists/         list-item-1line, list-item-2line, list-item-3line
+chips/         chip-assist, chip-filter, chip-input, chip-suggestion
+feedback/      snackbar, progress-linear, progress-circular, skeleton, banner, tooltip
+tabs/          tabs-primary, tabs-secondary
+toggles/       switch, checkbox, radio
+surfaces/      bottom-sheet, drawer, navigation-rail
+badges/        badge-dot, badge-count
+native/        ios-status-bar, ios-nav-bar, ios-tab-bar, ios-home-indicator
+               android-status-bar, android-gesture-nav
+patterns/      product-card, order-tracker, story-row, chat-bubble, contact-card
+               map-preview, transaction-item, health-metric, workout-card, …
+charts/        bar-chart, line-chart, donut-chart, progress-ring, sparkline, stat-card
+```
+
+#### Web (`components/web/`)
+
+```
+navbars/       topnav, topnav-search, sidebar, sidebar-dark, breadcrumb, footer
+heroes/        hero-gradient, hero-image-bg, hero-video
+buttons/       button-primary, button-secondary, button-danger, button-ghost, button-icon
+cards/         card-basic, card-image, card-stat, card-pricing, card-testimonial
+inputs/        text-input, textarea, select, search-command, date-input
+               file-upload, tag-input, checkbox, radio-group, toggle
+features/      features-icon-list, features-alternating, features-bento
+cta/           cta-centered, cta-split-image, cta-newsletter
+pricing/       pricing-comparison, pricing-toggle
+social-proof/  logo-cloud, testimonials
+layout/        hero-centered, hero-split, pricing-section, stats-row
+tables/        table-simple, data-table
+modals/        modal-basic, modal-form
+feedback/      alert-banner, empty-state, loading-spinner, skeleton, toast, tooltip
+tabs/          tabs-pills, tabs-underline
+charts/        area-chart, bar-chart, donut-chart
+widgets/       kpi-row, api-keys, billing, changelog, onboarding-checklist
+patterns/      auth-login, kanban-board, chat-interface, calendar, settings-page
+               comparison-table, code-editor, activity-feed, filter-toolbar, …
+products/      product-card, product-detail, product-grid, review-section
+cart/          cart-page, checkout, order-confirmation
+```
+
+---
+
+## Step 4 — Output format (single-file HTML)
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=390, initial-scale=1.0"><!-- 390 mobile, 1440 web -->
+  <title>Screen / Page Name</title>
+  <style>
+    /* ── 1. Kit tokens ───────────────────────────────────── */
+    :root {
+      --kit-primary: #6366F1;
+      --kit-primary-text: #FFFFFF;
+      /* ... all tokens ... */
+    }
+
+    /* ── 2. Reset ────────────────────────────────────────── */
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      font-family: var(--kit-font, Inter, system-ui, sans-serif);
+      background: var(--kit-bg, #FFFFFF);
+      color: var(--kit-text, #0F172A);
+      -webkit-font-smoothing: antialiased;
+    }
+
+    /* ── 3. Screen wrapper ───────────────────────────────── */
+    /* MOBILE: */
+    .screen {
+      width: 390px;
+      min-height: 844px;
+      margin: 0 auto;
+      overflow-x: hidden;
+      position: relative;
+      background: var(--kit-bg, #FFFFFF);
+    }
+
+    /* DESKTOP: */
+    /* .screen { width: 100%; max-width: 1440px; margin: 0 auto; min-height: 100vh; } */
+  </style>
+</head>
+<body>
+  <div class="screen">
+
+    <!-- ALL COMPONENT HTML HERE — inline styles only -->
+
+  </div>
+</body>
+</html>
+```
+
+---
+
+## Rules for AI-generated HTML
+
+### MUST follow
+
+1. **Inline styles only** — no Tailwind, no Bootstrap, no class-based CSS frameworks
+2. **All colors via `var(--kit-*)`** — never hardcode `#hex` or `rgb()` inside component HTML
+3. **Semantic HTML** — use `<button>`, `<nav>`, `<header>`, `<a>`, `<ul>/<li>`, `<input>` correctly
+4. **No JavaScript** — output is a static design preview, not an interactive app
+5. **Placeholder images** — use `https://placehold.jp/{W}x{H}.png` for any images needed
+6. **Single file** — everything in one `.html` file, zero external dependencies
+7. **data-component** attribute on each component root element (for Pixeliro editor)
+
+### Semantic HTML examples
+
+```html
+<!-- ❌ WRONG — div-soup -->
+<div style="cursor:pointer; background:#6366F1; color:white;">Click me</div>
+
+<!-- ✅ CORRECT — semantic -->
+<button type="button" style="background:var(--kit-primary,#6366F1); color:var(--kit-primary-text,#FFF); ...">Click me</button>
+```
+
+```html
+<!-- ❌ WRONG -->
+<div style="font-size:24px; font-weight:700;">Dashboard</div>
+
+<!-- ✅ CORRECT -->
+<h1 style="font-size:var(--kit-text-2xl,24px); font-weight:700; color:var(--kit-text,#0F172A);">Dashboard</h1>
+```
+
+### Layout patterns
+
+#### Mobile screen layout
+```html
+<!-- Fixed top bar -->
+<header data-component="Top App Bar" style="
+  position: sticky; top: 0; z-index: 100;
+  height: 56px; padding: 0 16px;
+  display: flex; align-items: center;
+  background: var(--kit-surface,#F8FAFC);
+  border-bottom: 1px solid var(--kit-border,#E2E8F0);
+">
+
+<!-- Scrollable content -->
+<main style="
+  flex: 1; overflow-y: auto;
+  padding: 16px;
+  padding-bottom: 83px; /* tab bar height */
+">
+
+<!-- Fixed bottom tab bar -->
+<nav data-component="Bottom Navigation" style="
+  position: fixed; bottom: 0; left: 0; right: 0;
+  height: 83px; /* 49px tabs + 34px safe area */
+  background: var(--kit-surface,#F8FAFC);
+  border-top: 1px solid var(--kit-border,#E2E8F0);
+  display: flex; align-items: center; justify-content: space-around;
+  padding-bottom: 34px; /* iOS home indicator safe area */
+">
+```
+
+#### Web dashboard layout
+```html
+<div style="display:flex; height:100vh; background:var(--kit-bg,#FFF);">
+  <!-- Sidebar -->
+  <aside style="width:240px; flex-shrink:0; background:var(--kit-surface,#F8FAFC); border-right:1px solid var(--kit-border,#E2E8F0);">
+    ...
+  </aside>
+  <!-- Main -->
+  <main style="flex:1; overflow-y:auto; padding:32px;">
+    ...
+  </main>
+</div>
+```
+
+---
+
+## Token presets for different design moods
+
+### Finance / Banking (dark, professional)
+```css
+--kit-primary: #6366F1;   --kit-bg: #0A0E1A;   --kit-surface: #141926;
+--kit-surface-2: #1E2538; --kit-text: #F1F5F9;  --kit-text-2: #94A3B8;
+--kit-border: #1E2538;    --kit-font: 'Inter', sans-serif;
+```
+
+### Health / Wellness (soft, calming)
+```css
+--kit-primary: #10B981;   --kit-bg: #F0FDF4;   --kit-surface: #FFFFFF;
+--kit-text: #064E3B;      --kit-text-2: #6EE7B7; --kit-accent: #34D399;
+--kit-radius: 16px;       --kit-font: 'Inter', sans-serif;
+```
+
+### E-commerce (energetic, orange)
+```css
+--kit-primary: #F97316;   --kit-bg: #FFFFFF;   --kit-surface: #FFF7ED;
+--kit-text: #1C1917;      --kit-accent: #EAB308; --kit-radius: 8px;
+```
+
+### SaaS / Productivity (clean, indigo)
+```css
+--kit-primary: #6366F1;   --kit-bg: #FFFFFF;   --kit-surface: #F8FAFC;
+--kit-text: #0F172A;      --kit-radius: 8px;   --kit-font: 'Inter', sans-serif;
+```
+
+### Social / Dating (vibrant, pink)
+```css
+--kit-primary: #EC4899;   --kit-secondary: #8B5CF6; --kit-accent: #F59E0B;
+--kit-bg: #FFFFFF;        --kit-surface: #FDF2F8;   --kit-text: #1F2937;
+--kit-radius: 20px;       --kit-radius-full: 9999px;
+```
+
+### Travel (bold, blue-teal)
+```css
+--kit-primary: #0EA5E9;   --kit-secondary: #14B8A6; --kit-accent: #F59E0B;
+--kit-bg: #F0F9FF;        --kit-surface: #FFFFFF;   --kit-text: #0C4A6E;
+--kit-radius: 12px;
+```
+
+### News / Editorial (neutral, classic)
+```css
+--kit-primary: #1D4ED8;   --kit-bg: #FFFFFF;   --kit-surface: #F9FAFB;
+--kit-text: #111827;      --kit-text-2: #6B7280; --kit-font: 'Georgia', serif;
+--kit-radius: 4px;        --kit-radius-lg: 8px;
+```
+
+---
+
+## Component reference — copy-paste patterns
+
+### Mobile status bar (iOS)
+```html
+<div data-component="iOS Status Bar" style="
+  height: 44px; padding: 14px 16px 0;
+  display: flex; justify-content: space-between; align-items: center;
+  background: var(--kit-surface, #F8FAFC);
+">
+  <span style="font-size:15px; font-weight:600; color:var(--kit-text,#0F172A);">9:41</span>
+  <div style="display:flex; gap:6px; align-items:center;">
+    <svg width="17" height="12" viewBox="0 0 17 12" fill="none">
+      <rect x="0" y="3" width="3" height="9" rx="1" fill="var(--kit-text,#0F172A)"/>
+      <rect x="4.5" y="2" width="3" height="10" rx="1" fill="var(--kit-text,#0F172A)"/>
+      <rect x="9" y="0" width="3" height="12" rx="1" fill="var(--kit-text,#0F172A)"/>
+      <rect x="13.5" y="0" width="3" height="12" rx="1" fill="var(--kit-text,#0F172A)" opacity="0.3"/>
+    </svg>
+    <svg width="16" height="12" viewBox="0 0 16 12" fill="none">
+      <path d="M8 9.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z" fill="var(--kit-text,#0F172A)"/>
+      <path d="M3.5 6.5A6.5 6.5 0 0 1 8 5a6.5 6.5 0 0 1 4.5 1.5" stroke="var(--kit-text,#0F172A)" stroke-width="1.5" stroke-linecap="round" fill="none"/>
+      <path d="M1 3.5A10 10 0 0 1 8 1a10 10 0 0 1 7 2.5" stroke="var(--kit-text,#0F172A)" stroke-width="1.5" stroke-linecap="round" fill="none" opacity="0.5"/>
+    </svg>
+    <svg width="25" height="12" viewBox="0 0 25 12" fill="none">
+      <rect x="0.5" y="0.5" width="21" height="11" rx="3.5" stroke="var(--kit-text,#0F172A)" stroke-opacity="0.35"/>
+      <rect x="2" y="2" width="16" height="8" rx="2" fill="var(--kit-text,#0F172A)"/>
+      <path d="M23 4v4a2 2 0 0 0 0-4z" fill="var(--kit-text,#0F172A)" opacity="0.4"/>
+    </svg>
+  </div>
+</div>
+```
+
+### Gradient hero card
+```html
+<div data-component="Balance Card" style="
+  background: linear-gradient(135deg, var(--kit-primary,#6366F1), var(--kit-secondary,#8B5CF6));
+  border-radius: var(--kit-radius-xl, 20px);
+  padding: 24px;
+  color: var(--kit-primary-text, #FFFFFF);
+  box-shadow: 0 8px 32px rgba(99,102,241,0.3);
+">
+  <div style="font-size:var(--kit-text-sm,13px); opacity:0.8; margin-bottom:8px;">Total Balance</div>
+  <div style="font-size:var(--kit-text-4xl,48px); font-weight:700; letter-spacing:-1px;">$12,450</div>
+  <div style="font-size:var(--kit-text-sm,13px); opacity:0.7; margin-top:4px;">↑ 12.5% from last month</div>
+</div>
+```
+
+### Card
+```html
+<div data-component="Card" style="
+  background: var(--kit-surface, #FFFFFF);
+  border-radius: var(--kit-radius-lg, 14px);
+  padding: var(--kit-space-4, 16px);
+  box-shadow: var(--kit-shadow-sm, 0 1px 3px rgba(0,0,0,0.08));
+  border: 1px solid var(--kit-border, #E2E8F0);
+">
+</div>
+```
+
+### Web nav bar
+```html
+<nav data-component="Top Navigation" style="
+  height: 64px; padding: 0 32px;
+  display: flex; align-items: center; justify-content: space-between;
+  background: var(--kit-surface, #FFFFFF);
+  border-bottom: 1px solid var(--kit-border, #E2E8F0);
+  position: sticky; top: 0; z-index: 100;
+">
+  <a href="#" style="font-size:18px;font-weight:700;color:var(--kit-primary,#6366F1);text-decoration:none;">Logo</a>
+  <ul style="display:flex;gap:32px;list-style:none;margin:0;padding:0;">
+    <li><a href="#" style="font-size:14px;font-weight:500;color:var(--kit-text,#0F172A);text-decoration:none;">Features</a></li>
+    <li><a href="#" style="font-size:14px;font-weight:500;color:var(--kit-text-2,#475569);text-decoration:none;">Pricing</a></li>
+  </ul>
+  <button type="button" style="height:38px;padding:0 20px;background:var(--kit-primary,#6366F1);color:var(--kit-primary-text,#FFF);border:none;border-radius:var(--kit-radius,10px);font-size:14px;font-weight:500;cursor:pointer;">Get Started</button>
+</nav>
+```
+
+---
+
+## Output checklist
+
+Before responding, verify:
+
+- [ ] Single `.html` file, opens in browser without internet
+- [ ] `<!DOCTYPE html>` + proper `<head>` + viewport meta
+- [ ] `:root` with ALL `--kit-*` tokens defined
+- [ ] `box-sizing: border-box` reset
+- [ ] All colors via `var(--kit-*)` — no hardcoded hex in component HTML
+- [ ] Semantic HTML (`<nav>`, `<button>`, `<header>`, `<h1>`-`<h6>`, `<ul>/<li>`, `<a>`)
+- [ ] No JavaScript
+- [ ] Placeholder images via `https://placehold.jp/{W}x{H}.png`
+- [ ] `data-component="..."` on each component root
+- [ ] Looks complete and polished — not just skeleton markup
+
+---
+
+*Part of [DesignKit](../README.md) · See [skills/](../skills/) for framework conversion skills.*

package/skills/flutter.md

@@ -0,0 +1,156 @@
+# Skill: Flutter (Dart)
+
+Build, design, and convert DesignKit UI using Flutter.
+
+## Your role
+
+You are a Flutter developer with strong UI skills.
+You can:
+- **Design** a screen from scratch using the token system
+- **Convert** a DesignKit HTML file to Flutter Widget tree
+- **Build** a full feature (onboarding flow, tab navigation, list + detail, etc.)
+
+Read the request and determine which mode applies.
+
+## Token class (`lib/tokens.dart`)
+
+```dart
+import 'package:flutter/material.dart';
+
+class T {
+  // Colors
+  static const primary      = Color(0xFF6366F1);
+  static const primaryText  = Color(0xFFFFFFFF);
+  static const secondary    = Color(0xFF64748B);
+  static const accent       = Color(0xFFF59E0B);
+  static const bg           = Color(0xFFFFFFFF);
+  static const surface      = Color(0xFFF8FAFC);
+  static const surface2     = Color(0xFFF1F5F9);
+  static const textPrimary  = Color(0xFF0F172A);
+  static const text2        = Color(0xFF475569);
+  static const text3        = Color(0xFF94A3B8);
+  static const border       = Color(0xFFE2E8F0);
+  static const success      = Color(0xFF22C55E);
+  static const error        = Color(0xFFEF4444);
+  static const warning      = Color(0xFFF59E0B);
+
+  // Border radius
+  static const radiusSm     = BorderRadius.all(Radius.circular(6));
+  static const radius       = BorderRadius.all(Radius.circular(10));
+  static const radiusLg     = BorderRadius.all(Radius.circular(14));
+  static const radiusXl     = BorderRadius.all(Radius.circular(20));
+  static const radiusFull   = BorderRadius.all(Radius.circular(9999));
+
+  // Spacing
+  static const space1 = 4.0;
+  static const space2 = 8.0;
+  static const space3 = 12.0;
+  static const space4 = 16.0;
+  static const space5 = 20.0;
+  static const space6 = 24.0;
+  static const space8 = 32.0;
+
+  // Shadows
+  static const shadowSm = [
+    BoxShadow(color: Color(0x14000000), blurRadius: 3, offset: Offset(0, 1))
+  ];
+  static const shadow = [
+    BoxShadow(color: Color(0x1A000000), blurRadius: 12, offset: Offset(0, 4))
+  ];
+  static const shadowLg = [
+    BoxShadow(color: Color(0x1F000000), blurRadius: 32, offset: Offset(0, 8))
+  ];
+
+  // Typography
+  static const fontFamily = 'Inter';
+  static TextStyle textXs({Color? color, FontWeight? weight}) =>
+      TextStyle(fontSize: 11, fontFamily: fontFamily, color: color ?? textPrimary, fontWeight: weight);
+  static TextStyle textSm({Color? color, FontWeight? weight}) =>
+      TextStyle(fontSize: 13, fontFamily: fontFamily, color: color ?? textPrimary, fontWeight: weight);
+  static TextStyle textMd({Color? color, FontWeight? weight}) =>
+      TextStyle(fontSize: 15, fontFamily: fontFamily, color: color ?? textPrimary, fontWeight: weight);
+  static TextStyle textLg({Color? color, FontWeight? weight}) =>
+      TextStyle(fontSize: 17, fontFamily: fontFamily, color: color ?? textPrimary, fontWeight: weight);
+  static TextStyle textXl({Color? color, FontWeight? weight}) =>
+      TextStyle(fontSize: 20, fontFamily: fontFamily, color: color ?? textPrimary, fontWeight: weight);
+  static TextStyle text2xl({Color? color, FontWeight? weight}) =>
+      TextStyle(fontSize: 24, fontFamily: fontFamily, color: color ?? textPrimary, fontWeight: weight);
+  static TextStyle text3xl({Color? color, FontWeight? weight}) =>
+      TextStyle(fontSize: 32, fontFamily: fontFamily, color: color ?? textPrimary, fontWeight: weight);
+}
+```
+
+## HTML → Flutter mapping
+
+| HTML | Flutter |
+|------|---------|
+| `<div style="display:flex">` | `Row()` |
+| `<div style="display:flex; flex-direction:column">` | `Column()` |
+| `<div style="position:relative">` | `Stack()` |
+| `<div style="overflow-y:auto">` | `SingleChildScrollView()` or `ListView()` |
+| `<div style="background:X; border-radius:Y; padding:Z">` | `Container(decoration: BoxDecoration(...), padding: ...)` |
+| `<button>` | `ElevatedButton()` or `GestureDetector()` |
+| `<input>` | `TextField()` |
+| `<img>` | `Image.network()` or `Container(color: Colors.grey[200])` |
+| `<span>` / `<p>` / `<h1>` | `Text()` |
+| `gap: 8px` in flex | `SizedBox(width/height: 8)` or `mainAxisAlignment` |
+
+## Output format
+
+```dart
+import 'package:flutter/material.dart';
+import '../tokens.dart';
+
+class ScreenName extends StatefulWidget {
+  const ScreenName({super.key});
+
+  @override
+  State<ScreenName> createState() => _ScreenNameState();
+}
+
+class _ScreenNameState extends State<ScreenName> {
+  // state here
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: T.bg,
+      body: SafeArea(
+        child: Column(
+          children: [
+            // widgets here
+          ],
+        ),
+      ),
+    );
+  }
+}
+```
+
+## Rules
+
+- **`T.*` tokens** — never hardcode Color(0xFF...)
+- **`const`** constructors everywhere possible
+- **`SafeArea`** wrapping body for iOS notch/bottom bar
+- **`SizedBox`** for spacing — not `Padding` with one side
+- **`StatefulWidget`** only when state is needed, otherwise `StatelessWidget`
+- **Screen width** — use `MediaQuery.of(context).size.width`, not hardcoded 390
+
+## Example prompt
+
+```
+Read AI-AGENT.md and skills/flutter.md, then:
+
+Design and build a finance app home screen in Flutter:
+- iOS status bar area (SafeArea)
+- Top bar: greeting "Good morning, John" + notification bell
+- Balance card: gradient indigo, large balance number, +12.5% label
+- Quick actions: Send, Receive, Pay, More (2x2 or row)
+- "Recent Transactions" header
+- 4 transaction list items (icon, title, date, amount)
+- Bottom navigation: 5 tabs
+
+Output:
+- lib/screens/home_screen.dart
+- lib/tokens.dart
+```