thomas-agentkit 0.8.0 → 0.9.0-alpha.1

package/templates/skills/agentkit/references/design-baselines/apple.md

@@ -0,0 +1,101 @@
+# [Project Name] Design — Apple
+
+Design spec for [Project Name]. Map semantic tokens to `[theme stylesheet path, e.g. src/styles.css]` or your Tailwind theme. Do not hardcode literal colors in components.
+
+## Overview
+
+Photography-first marketing: full-bleed product tiles alternating light and dark canvases, confident display type, and a single Action Blue accent for interactive elements. UI recedes so product imagery leads. One soft product shadow is allowed on photographic renders — never on cards or buttons.
+
+**Key characteristics:**
+- Tile alternation (white/parchment ↔ near-black) as section divider
+- Single structural accent (`{colors.primary}`) for CTAs and links
+- Pill CTAs (`{rounded.pill}`) vs compact utility rects (`{rounded.sm}`)
+- Display tracking pulls negative at large sizes; body at 17px
+- No decorative gradients; atmosphere from photography only
+
+## Colors
+
+### Brand & Accent
+- `{colors.primary}` — Action Blue (CTAs, links, focus)
+- `{colors.primary-hover}`, `{colors.primary-focus}` — hover and focus variants
+- `{colors.on-primary}` — text on primary fills
+
+### Surface
+- `{colors.canvas}` — pure white tile
+- `{colors.canvas-parchment}` — off-white alternating tile
+- `{colors.surface-tile-1}` through `{colors.surface-tile-3}` — dark tile steps
+- `{colors.surface-black}` — nav bar, video void
+- `{colors.hairline}` — card and divider borders
+
+### Text
+- `{colors.ink}` — near-black on light; `{colors.body-on-dark}` on dark tiles
+- `{colors.body-muted}`, `{colors.ink-muted-48}` — secondary and disabled
+
+## Typography
+
+- Display: system sans (SF Pro Display stack); body: SF Pro Text stack; mono for code snippets
+- Substitute: Inter at 500/600/700 with tightened tracking; JetBrains Mono for mono
+
+| Token | Use |
+|---|---|
+| `{typography.display-xl}` | Hero headline |
+| `{typography.display-lg}` | Section openers |
+| `{typography.lead}` | Tile taglines |
+| `{typography.body}` | Default body (17px) |
+| `{typography.button}` | Button labels |
+| `{typography.nav-link}` | Global nav |
+
+### Principles
+- Headlines weight 600 with negative tracking; body 400
+- Weight 300 rare and deliberate for large airy reads
+- No weight 500 in the ladder
+
+## Layout
+
+- Base unit: 8px; section padding `{spacing.section}` ~80px
+- Max width ~1280px; tile stacks edge-to-edge vertically
+- Whitespace = canvas color change between tiles
+
+## Elevation
+
+Flat tiles default. One product shadow on renders resting on surface. Backdrop blur on frosted sub-nav and sticky bars.
+
+## Shapes
+
+| Token | Use |
+|---|---|
+| `{rounded.sm}` 8px | Utility buttons, inputs |
+| `{rounded.lg}` 18px | Cards |
+| `{rounded.pill}` | Primary/secondary pill CTAs |
+| `{rounded.none}` | Full-bleed tiles |
+
+## Components
+
+- `{components.button-primary}` — Action Blue pill
+- `{components.button-secondary}` — charcoal pill with hairline
+- `{components.product-tile-light}`, `{components.product-tile-dark}` — full-bleed tiles
+- `{components.store-utility-card}` — bordered white card
+- `{components.global-nav}`, `{components.sub-nav-frosted}` — two-row nav
+- `{components.text-input}` — surface fill, pill or md radius
+
+## Do's and Don'ts
+
+### Do
+- Use `{colors.primary}` only for interactive signals
+- Alternate light and dark tiles for rhythm
+- Apply `scale(0.95)` as button press state
+- Keep global nav on `{colors.surface-black}`
+
+### Don't
+- Don't add decorative gradients or second accents
+- Don't pill-round utility buttons
+- Don't use true `#000000` as canvas
+- Don't shadow cards or buttons
+
+## Responsive Behavior
+
+Nav hamburger below 768px. Card grids 3→2→1. Display scales from 80px toward 36px on small phones. Touch targets ≥44px.
+
+## Token Mapping
+
+Bind roles in `[theme stylesheet path, e.g. src/styles.css]`.

package/templates/skills/agentkit/references/design-baselines/cursor.md

@@ -0,0 +1,95 @@
+# [Project Name] Design — Cursor
+
+Design spec for [Project Name]. Map semantic tokens to `[theme stylesheet path, e.g. src/styles.css]` or your Tailwind theme.
+
+## Overview
+
+Editorial developer brand on warm cream canvas: quiet display weight 400, single Cursor Orange accent used scarcely, and IDE mockup cards as the primary decorative system. AI timeline pastels are scoped to in-product agent visualizations only.
+
+**Key characteristics:**
+- Warm cream `{colors.canvas}` — never pure white page floor
+- Single CTA color `{colors.primary}` (orange)
+- Display weight 400; negative tracking on display only
+- JetBrains Mono on every code surface
+- Hairline-only depth; no drop shadows
+- Timeline pastels: thinking, grep, read, edit, done — agent UI only
+
+## Colors
+
+### Brand & Accent
+- `{colors.primary}`, `{colors.primary-active}`, `{colors.on-primary}`
+
+### Surface
+- `{colors.canvas}` — warm cream page floor
+- `{colors.canvas-soft}` — IDE pane background in mockups
+- `{colors.surface-card}` — white cards on cream
+- `{colors.surface-strong}` — badges
+- `{colors.hairline}`, `{colors.hairline-soft}`, `{colors.hairline-strong}`
+
+### Text
+- `{colors.ink}`, `{colors.body}`, `{colors.body-strong}`, `{colors.muted}`, `{colors.muted-soft}`
+
+### Timeline (in-product only)
+- `{colors.timeline-thinking}`, `{colors.timeline-grep}`, `{colors.timeline-read}`, `{colors.timeline-edit}`, `{colors.timeline-done}`
+
+### Semantic
+- `{colors.semantic-success}`, `{colors.semantic-error}`
+
+## Typography
+
+- CursorGothic substitute: Inter weight 400/500/600; JetBrains Mono for code
+- Display 400 with negative tracking; body 400 at 16px
+
+| Token | Use |
+|---|---|
+| `{typography.display-mega}` | Homepage hero |
+| `{typography.display-lg}` | Section heads |
+| `{typography.body-md}` | Default body |
+| `{typography.code}` | Code blocks |
+| `{typography.button}` | CTA labels |
+
+## Layout
+
+- Base 4px; `{spacing.section}` 80px; max width ~1200px
+- Feature grids 3-up → 2-up → 1-up; footer 5-column desktop
+
+## Elevation
+
+Hairlines + white-on-cream contrast only. IDE mockup cards are the elevated element.
+
+## Shapes
+
+| Token | Use |
+|---|---|
+| `{rounded.md}` 8px | CTAs, inputs |
+| `{rounded.lg}` 12px | Cards, IDE panes |
+| `{rounded.pill}` | Timeline pills, badges |
+
+## Components
+
+- `{components.button-primary}` — orange CTA `{rounded.md}`
+- `{components.button-download}` — ink fill inverted CTA
+- `{components.hero-band}`, `{components.ide-mockup-card}`, `{components.ide-pane}`
+- `{components.timeline-pill-*}` — five stage variants
+- `{components.feature-card}`, `{components.pricing-tier-card}`
+- `{components.top-nav}`, `{components.footer}`
+
+## Do's and Don'ts
+
+### Do
+- Keep display at weight 400
+- Use timeline pastels only in agent timeline UI
+- Render code in JetBrains Mono
+
+### Don't
+- Don't add drop shadows
+- Don't use timeline pastels as system action colors
+- Don't bold display headlines
+
+## Responsive Behavior
+
+Nav hamburger below 768px. Hero display 72→32px mobile. IDE mockup collapses to single pane.
+
+## Token Mapping
+
+Bind roles in `[theme stylesheet path, e.g. src/styles.css]`.

package/templates/skills/agentkit/references/design-baselines/framer.md

@@ -0,0 +1,95 @@
+# [Project Name] Design — Framer
+
+Design spec for [Project Name]. Map semantic tokens to `[theme stylesheet path, e.g. src/styles.css]` or your Tailwind theme.
+
+## Overview
+
+Dark poster marketing: near-black canvas, oversized white display type with extreme negative tracking, white pill primary CTAs, and gradient spotlight cards as individual showcase tiles — never section backgrounds. Single sky-blue accent for links and focus only.
+
+**Key characteristics:**
+- Dark-only marketing; no light mode
+- `{colors.primary}` = white (CTA fill and ink on dark)
+- `{colors.accent-blue}` — hyperlinks, focus, selection only
+- Gradient spotlight cards (violet, magenta, orange, coral) as scarce atmosphere
+- Inter Variable body with OpenType variants when available
+- Pill CTAs (`{rounded.pill}`); charcoal secondary pills
+
+## Colors
+
+### Brand & Accent
+- `{colors.primary}` — white (CTA, headlines, body on canvas)
+- `{colors.accent-blue}` — signal blue (links, focus ring)
+- `{colors.on-primary}` — text on white pills (dark)
+
+### Surface
+- `{colors.canvas}` — near-black page
+- `{colors.surface-1}`, `{colors.surface-2}` — card and button lifts
+- `{colors.hairline}`, `{colors.hairline-soft}`
+- `{colors.ink}`, `{colors.ink-muted}`
+
+### Gradients (card fills only)
+- `{colors.gradient-violet}`, `{colors.gradient-magenta}`, `{colors.gradient-orange}`, `{colors.gradient-coral}`
+
+## Typography
+
+- Display: GT Walsheim substitute (Mona Sans, Geist, or Inter 600–700 with tight tracking)
+- Body: Inter Variable with `cv01`, `cv05`, `cv09`, `cv11`, `ss03`, `ss07` when supported
+
+| Token | Use |
+|---|---|
+| `{typography.display-xxl}` | 110px hero |
+| `{typography.display-xl}` | 85px section |
+| `{typography.body}` | 15px default |
+| `{typography.button}` | Pill labels |
+
+### Principles
+- Tracking scales hard with size (-5.5px at largest display)
+- Weight band: 400 body, 500 display/buttons
+- Tight line-heights (~1.30 body)
+
+## Layout
+
+- Base 5px increments; `{spacing.section}` 96px
+- Max ~1199px; card grids 2-up → 1-up below 810px
+
+## Elevation
+
+Surface lift (canvas → surface-1 → surface-2). Light-edge shadow on floating mockup cards. Blue ring for focus.
+
+## Shapes
+
+| Token | Use |
+|---|---|
+| `{rounded.pill}` 100px | All text CTAs |
+| `{rounded.xl}` 20px | Pricing, mockup tiles |
+| `{rounded.xxl}` 30px | Gradient spotlight cards |
+
+## Components
+
+- `{components.button-primary}` — white pill
+- `{components.button-secondary}` — charcoal pill
+- `{components.gradient-spotlight-card}` — atmospheric variant tiles
+- `{components.pricing-card}`, `{components.template-card}`, `{components.product-mockup-tile}`
+- `{components.top-nav}`, `{components.footer}`
+
+## Do's and Don'ts
+
+### Do
+- Push negative display tracking aggressively
+- Use accent blue only for links and focus
+- Limit gradient spotlight cards to 1–2 per long page
+- Keep CTAs pill-shaped
+
+### Don't
+- Don't use accent blue as CTA fill
+- Don't apply gradients to whole sections
+- Don't ship light mode
+- Don't square off CTAs
+
+## Responsive Behavior
+
+Nav hamburger below 810px. Display scales 110→62→32px. Pricing table becomes accordion on mobile.
+
+## Token Mapping
+
+Bind roles in `[theme stylesheet path, e.g. src/styles.css]`.

package/templates/skills/agentkit/references/design-baselines/linear.md

@@ -0,0 +1,117 @@
+# [Project Name] Design — Linear
+
+Design spec for [Project Name]. Map every `{colors.*}`, `{typography.*}`, `{spacing.*}`, and `{rounded.*}` token to semantic roles in `[theme stylesheet path, e.g. src/styles.css]` or your Tailwind theme. Do not hardcode literal hex values in components.
+
+## Overview
+
+Dark-canvas marketing system: near-black canvas with a faint cool tint, light gray ink, and a single lavender-blue accent used scarcely on brand mark, focus rings, and primary CTAs. Hierarchy comes from a four-step surface ladder and hairline borders — not shadows. Product UI screenshots dominate section composition.
+
+**Key characteristics:**
+- Dark canvas anchor; no light-mode marketing variant
+- Single chromatic accent (`{colors.primary}`) — no second brand color
+- Surface ladder: canvas → surface-1 → surface-2 → surface-3 → surface-4
+- Aggressive negative letter-spacing on display sizes
+- Cards: `{rounded.lg}` with 1px hairlines; product panels `{rounded.xl}`
+- No atmospheric gradients or spotlight cards
+
+## Colors
+
+### Brand & Accent
+- `{colors.primary}` — signature accent (CTA, brand mark, link emphasis, focus tint)
+- `{colors.primary-hover}` — lighter hover state for primary CTA
+- `{colors.primary-focus}` — focus-ring tint
+- `{colors.on-primary}` — text on primary fills
+
+### Surface
+- `{colors.canvas}` — default page background (deepest dark)
+- `{colors.surface-1}` through `{colors.surface-4}` — stepped lifts for cards, panels, sub-nav
+- `{colors.hairline}`, `{colors.hairline-strong}`, `{colors.hairline-tertiary}` — 1px borders
+- `{colors.inverse-canvas}`, `{colors.inverse-surface-1}`, `{colors.inverse-surface-2}` — inverse pill surfaces
+
+### Text
+- `{colors.ink}` — headlines and emphasized body
+- `{colors.ink-muted}`, `{colors.ink-subtle}`, `{colors.ink-tertiary}` — secondary through quaternary
+
+### Semantic
+- `{colors.semantic-success}` — status pills only
+- `{colors.semantic-overlay}` — modal scrim
+
+## Typography
+
+### Font Family
+- Display/body sans with tight tracking at large sizes; mono for code in product screenshots only
+- Substitute: Inter or system UI stack; JetBrains Mono or Geist Mono for mono
+
+### Hierarchy (map sizes to your scale)
+
+| Token | Use |
+|---|---|
+| `{typography.display-xl}` | Largest hero headline |
+| `{typography.display-lg}` | Section openers |
+| `{typography.display-md}` | Sub-section headlines |
+| `{typography.headline}` | Pricing tier titles, CTA banners |
+| `{typography.card-title}` | Feature card titles |
+| `{typography.subhead}` | Lead body |
+| `{typography.body-lg}` | Hero subhead |
+| `{typography.body}` | Default body |
+| `{typography.body-sm}` | Card body, footer |
+| `{typography.caption}` | Meta, status |
+| `{typography.button}` | Button labels |
+| `{typography.eyebrow}` | Section eyebrow (slight positive tracking) |
+| `{typography.mono}` | Code in screenshots |
+
+### Principles
+- Negative tracking scales with display size; body near zero
+- Display weight 600; body 400
+- Mono only in code contexts inside mockups
+
+## Layout
+
+- Base unit: 4px (`{spacing.xxs}` 4 · `{spacing.xs}` 8 · `{spacing.sm}` 12 · `{spacing.md}` 16 · `{spacing.lg}` 24 · `{spacing.xl}` 32 · `{spacing.xxl}` 48 · `{spacing.section}` 96)
+- Max content ~1280px; card grids 3-up → 2-up → 1-up
+- Product screenshot panels span full content width
+
+## Elevation & Depth
+
+Surface ladder + hairlines only. No drop shadows on dark marketing surfaces. Focus: 2px `{colors.primary-focus}` outline at reduced opacity.
+
+## Shapes
+
+| Token | Typical use |
+|---|---|
+| `{rounded.xs}` 4px | Chips, badges |
+| `{rounded.md}` 8px | Buttons, inputs |
+| `{rounded.lg}` 12px | Cards |
+| `{rounded.xl}` 16px | Screenshot panels |
+| `{rounded.pill}` | Pricing tabs, status pills |
+
+## Components
+
+- `{components.button-primary}` — primary CTA on `{colors.primary}`
+- `{components.button-secondary}` — charcoal surface-1 + hairline
+- `{components.button-tertiary}` — plain text on canvas
+- `{components.pricing-card}`, `{components.feature-card}`, `{components.product-screenshot-card}` — surface-1 + hairline + `{rounded.lg}` or `{rounded.xl}`
+- `{components.top-nav}` — sticky dark bar, 56px
+- `{components.text-input}` — surface-1, focus ring on `{colors.primary-focus}`
+
+## Do's and Don'ts
+
+### Do
+- Reserve `{colors.primary}` for brand mark, primary CTA, focus, links
+- Use the surface ladder sequentially
+- Lead sections with product UI screenshots
+- Use `{rounded.md}` for CTAs
+
+### Don't
+- Don't ship light-mode marketing
+- Don't use lavender as section background
+- Don't add atmospheric gradients or second chromatic accents
+- Don't pill-round primary CTAs (use `{rounded.md}`)
+
+## Responsive Behavior
+
+Breakpoints: desktop 1280px · tablet 1024px · mobile-lg 768px · mobile 480px. Nav hamburger below 768px. Display type scales down on mobile while preserving negative tracking ratio.
+
+## Token Mapping
+
+Bind each `{colors.*}` role to your theme (e.g. Tailwind `@theme` or CSS custom properties). Repo theme file: `[theme stylesheet path, e.g. src/styles.css]`.

package/templates/skills/agentkit/references/design-baselines/notion.md

@@ -0,0 +1,94 @@
+# [Project Name] Design — Notion
+
+Design spec for [Project Name]. Map semantic tokens to `[theme stylesheet path, e.g. src/styles.css]` or your Tailwind theme.
+
+## Overview
+
+Document-like daylight system: warm paper-soft canvas, near-black ink, single Notion Blue for structure, and a decorative sticker palette for illustrations only. One optional dark indigo hero band inverts the otherwise light rhythm.
+
+**Key characteristics:**
+- `{colors.canvas-soft}` warm page floor; `{colors.surface}` white for cards
+- Single structural accent `{colors.primary}` (blue) for CTAs and links
+- Sticker colors (`accent-purple`, `accent-pink`, etc.) — decoration only
+- Pill marketing CTAs vs 8px utility buttons
+- Barely-there layered micro-shadows
+- Optional `{colors.secondary}` night hero band
+
+## Colors
+
+### Brand & Accent
+- `{colors.primary}`, `{colors.primary-active}`, `{colors.on-primary}`
+- `{colors.secondary}` — dark hero band only
+
+### Sticker palette (decorative only)
+- `{colors.accent-sky}`, `{colors.accent-purple}`, `{colors.accent-pink}`, `{colors.accent-orange}`, `{colors.accent-teal}`, `{colors.accent-green}`
+
+### Surface
+- `{colors.canvas}` / `{colors.surface}` — white cards
+- `{colors.canvas-soft}` — warm page and footer
+- `{colors.hairline}` — borders
+
+### Text
+- `{colors.ink}`, `{colors.ink-secondary}`, `{colors.ink-muted}`, `{colors.ink-faint}`
+
+## Typography
+
+- NotionInter substitute: Inter with explicit negative tracking on display
+- Weight 700 headlines; 400 body; 600 titles
+
+| Token | Use |
+|---|---|
+| `{typography.display-1}` | Hero (64px) |
+| `{typography.heading-1}` | Section headlines |
+| `{typography.body-md}` | Default body (16px) |
+| `{typography.button}` | Button labels |
+| `{typography.eyebrow}` | Pill badges |
+
+## Layout
+
+- Base 8px; max width ~1080–1300px
+- Section gaps over rules; card padding `{spacing.lg}` 24px
+
+## Elevation
+
+Level 0: hairline only. Level 1: multi-layer micro-shadow. Level 2: modals and elevated pills on dark hero.
+
+## Shapes
+
+| Token | Use |
+|---|---|
+| `{rounded.xs}` 4px | Inputs |
+| `{rounded.md}` 8px | Utility buttons |
+| `{rounded.lg}` 12px | Feature cards |
+| `{rounded.full}` | Marketing pill CTAs |
+
+## Components
+
+- `{components.button-primary}` — blue pill CTA
+- `{components.button-secondary}` — white pill with soft shadow
+- `{components.button-utility}` — nav/plan select, `{rounded.md}`
+- `{components.feature-card}`, `{components.pricing-plan-card}`
+- `{components.hero-band}` — optional dark inverted hero
+- `{components.nav-bar}`, `{components.footer}`
+
+## Do's and Don'ts
+
+### Do
+- Reserve blue for actions and links only
+- Use sticker palette in illustrations and dots only
+- Apply negative tracking on display explicitly
+- Use warm canvas for full pages
+
+### Don't
+- Don't paint CTAs in sticker colors
+- Don't use pill radius on form fields
+- Don't add heavy drop shadows
+- Don't repeat dark hero bands
+
+## Responsive Behavior
+
+Nav hamburger below tablet. Grids collapse to single column. Touch targets ≥44px.
+
+## Token Mapping
+
+Bind roles in `[theme stylesheet path, e.g. src/styles.css]`.

package/templates/skills/agentkit/references/design-baselines/warp.md

@@ -0,0 +1,89 @@
+# [Project Name] Design — Warp
+
+Design spec for [Project Name]. Map semantic tokens to `[theme stylesheet path, e.g. src/styles.css]` or your Tailwind theme.
+
+## Overview
+
+Warm dark terminal brand: brown-beige canvas (not pure black), off-white as the only "primary" — no chromatic accent. Terminal mockups carry decoration. Extremely tight 3–4px button radii. Inter for narrative, DM Mono for code.
+
+**Key characteristics:**
+- `{colors.primary}` = warm off-white (CTA fill AND default text) — not a hue
+- `{colors.canvas}` warm dark (#2b2622 family) — warmth is identity
+- Tight radii: `{rounded.sm}` 3px, `{rounded.md}` 4px for CTAs
+- Hero display weight 400, quietly confident
+- Hairline + surface contrast only; no drop shadows
+- Terminal screenshots as sole decorative system
+
+## Colors
+
+### Brand (no chromatic accent)
+- `{colors.primary}` — off-white (button fill, ink on canvas)
+- `{colors.on-primary}` — warm dark text on off-white buttons
+
+### Surface
+- `{colors.canvas}` — warm dark page
+- `{colors.canvas-soft}` — cards, mockup chrome, partner tiles
+- `{colors.hairline}` — dividers
+
+### Text
+- `{colors.ink}` — same off-white as primary on canvas
+- `{colors.body-strong}`, `{colors.body}`, `{colors.mute}` — stepped emphasis
+
+## Typography
+
+- Inter 400/500 for UI; DM Mono 400 for terminal/code; Instrument Serif optional for rare editorial italics
+- Negative tracking on display (-1.6px at 64px hero)
+
+| Token | Use |
+|---|---|
+| `{typography.display-xl}` | Hero 64px / 400 |
+| `{typography.body-md}` | Default body 16px |
+| `{typography.code}` | Terminal mockup body |
+| `{typography.button-md}` | Button labels |
+
+## Layout
+
+- Base 4px; `{spacing.5xl}` 96px section padding; max ~1200px
+- Hero 2-column terminal split; download tiles 3-up
+
+## Elevation
+
+Flat hero; hairline borders on `{colors.canvas-soft}` cards. No shadows.
+
+## Shapes
+
+| Token | Use |
+|---|---|
+| `{rounded.sm}` 3px | Primary buttons |
+| `{rounded.md}` 4px | Cards |
+| `{rounded.full}` | Icon circles only |
+
+## Components
+
+- `{components.button-primary}` — off-white on dark, `{rounded.sm}`
+- `{components.button-secondary-ghost}` — ghost nav actions
+- `{components.card-mockup}`, `{components.download-tile}`, `{components.partner-logo-tile}`
+- `{components.hero-band}` — display-xl + terminal split
+- `{components.nav-bar}`, `{components.footer}`
+
+## Do's and Don'ts
+
+### Do
+- Keep canvas warm dark — not neutral gray or pure black
+- Use 3–4px button radii
+- Pair Inter with DM Mono for technical surfaces
+- Set hero at weight 400
+
+### Don't
+- Don't introduce a chromatic brand accent
+- Don't use generous pill CTAs
+- Don't use heavy display weights (700+)
+- Don't add card drop shadows
+
+## Responsive Behavior
+
+Nav hamburger below 768px. Hero mockups stack vertically. Touch targets padded to 44px on mobile.
+
+## Token Mapping
+
+Bind roles in `[theme stylesheet path, e.g. src/styles.css]`.

package/templates/skills/agentkit/references/design.md

@@ -0,0 +1,100 @@
+# agentkit design (skill workflow)
+
+Create or refresh `DESIGN.md` from a bundled design baseline. This workflow runs inside the agent; it is not the CLI template installer.
+
+Use this when the user asks `/agentkit design`, wants to choose a design language, or needs `DESIGN.md` for UI work (including skills that read only from `DESIGN.md`).
+
+## Preconditions
+
+- Read `references/file-contract.md` before editing.
+- Read `agentkit.config.json` when present for `designSystem` default.
+- Baseline sources live in `references/design-baselines/` (bundled with this skill).
+
+## Supported baselines
+
+| Key | Best for |
+| --- | --- |
+| `linear` | Dark dev-tool marketing, lavender accent, product UI screenshots |
+| `apple` | Photography-first tiles, Action Blue, pill CTAs |
+| `cursor` | Warm cream editorial, Cursor Orange, IDE mockups, agent timeline |
+| `framer` | Dark poster aesthetic, white pill CTAs, gradient spotlight cards |
+| `notion` | Warm paper canvas, Notion Blue, sticker decorations |
+| `warp` | Warm dark terminal, off-white only, tight radii, monospace-forward |
+
+Default to `designSystem` from config when set. When unsure, recommend `linear` for dark SaaS marketing or `notion` for document/productivity apps; mention the other options briefly.
+
+## Non-negotiables
+
+- Map semantic tokens to the project's real theme — inspect Tailwind config, CSS variables, or `[theme stylesheet path]` before writing.
+- Do not hardcode literal hex in the final `DESIGN.md` unless the user explicitly wants fixed values.
+- Preserve user content outside AgentKit managed blocks when refreshing an existing file.
+- Skip overwriting an existing `DESIGN.md` unless the user explicitly asks to create or refresh it.
+- Do not modify application source, lockfiles, or CI during this workflow unless the user asks to update theme files.
+
+## Procedure
+
+### 1. Check existing state
+
+- If `DESIGN.md` exists with valid managed blocks, ask whether to refresh or only adjust.
+- If `DESIGN.md` exists without managed blocks, ask before converting or overwriting.
+- If missing, proceed to create.
+
+### 2. Choose baseline
+
+Present the six baselines with one-line guidance. Confirm the user's choice (or accept config default).
+
+Brief customization questions (pick 2–3 relevant to the baseline):
+
+- Light vs dark default (or confirm dark-only / light-only baselines)
+- Accent mapping: which theme token maps to `{colors.primary}`
+- Density: compact vs editorial spacing
+- For `notion`: include dark "night" hero band or full daylight
+- For `framer`: which gradient spotlight variants to document
+- For `warp`: confirm no chromatic accent (off-white primary)
+
+### 3. Inspect repository theme
+
+Before writing, find:
+
+- Tailwind `@theme` / `tailwind.config.*` / global CSS variables
+- Existing component primitives and radius/spacing conventions
+- Font stacks in use
+
+Add a **Token Mapping** section that binds each `{colors.*}` / `{typography.*}` role to project tokens. Replace `[theme stylesheet path, e.g. src/styles.css]` with the real path.
+
+### 4. Build DESIGN.md
+
+1. Read the chosen baseline from `references/design-baselines/<name>.md`.
+2. Personalize `[Project Name]` from `package.json` or directory name.
+3. Apply customization answers in Overview, Colors, or Do's/Don'ts as needed.
+4. Wrap AgentKit-owned content in managed block markers:
+
+```html
+<!-- agentkit:start design -->
+...content...
+<!-- agentkit:end design -->
+```
+
+5. Write `DESIGN.md` at the repository root unless `personalization.designSystemPath` or an existing project convention points elsewhere.
+
+### 5. Update AGENTS.md reference
+
+If `AGENTS.md` exists and still references `DESIGN-SYSTEM.md`, update the companion trigger to `DESIGN.md` inside managed blocks only.
+
+### 6. Verify
+
+- Managed block id is `design` (paired markers).
+- No `[Project Name]` placeholders remain.
+- Token mapping points at real project theme paths/tokens.
+- Baseline-specific rules preserved (e.g. Warp: no chromatic accent; Cursor: timeline pastels scoped to agent UI).
+
+### 7. Report
+
+Tell the user:
+
+- Baseline chosen and customizations applied
+- Path written (`DESIGN.md` or configured path)
+- Theme mapping sources used
+- Assumptions or deferred sections
+
+Keep the report concise.