aiblueprint-cli 1.4.73 → 1.4.75

package/agents-config/skills/use-style/styles/dusk.md

@@ -0,0 +1,269 @@
+# Dusk Style
+
+Refined dark data app floating on a dreamy dusk backdrop. Premium CRM dashboard: a rounded near-black window over a twilight sky, vivid blue data viz, colorful category pills, clean Inter. Calm, expensive, data-rich.
+
+**Reference vibe:** Attio (CRM dashboards, reports, company database, inbox).
+
+---
+
+## Core vibe
+
+- **A window, not a page.** The app is a large rounded-corner dark container that *floats* on a photographic dusk/aurora backdrop (twilight gradient + faint stars). Margin of backdrop shows around it.
+- **Near-black, layered.** Inside the window: very dark panels with quiet borders. Depth from subtle elevation and the backdrop, not heavy shadows.
+- **Vivid blue data.** Bar charts and key accents in a bright sky-blue `#38bdf8`; the primary action button is a saturated blue `#3b6eff`.
+- **Colorful data pills.** Category tags carry their own hue (orange, green, blue, purple, pink, teal) as tinted text + border - the one place color runs free.
+- **Clean Inter, mono for numbers.** Sans for everything; mono for deltas, `last 30 days`, IDs, tabular figures.
+- **Dense but airy.** Sidebar + main app shell, KPI strip, 2-col panel grid. Comfortable spacing, large radius, refined.
+
+---
+
+## Color
+
+Portable palette. Map to project tokens when available.
+
+| Role | Hex | CSS var (suggested) | Usage |
+|------|-----|---------------------|-------|
+| Window canvas | `#0c0c0e` | `--dk-bg` | App container background |
+| Panel | `#151517` | `--dk-panel` | Cards, report panels |
+| Panel raised | `#1c1c1f` | `--dk-raised` | Hover, inputs, KPI strip |
+| Sidebar | `#0e0e10` | `--dk-rail` | Left navigation |
+| Ink | `#f4f4f5` | `--dk-fg` | Headings, primary values |
+| Muted ink | `#8a8a90` | `--dk-muted-fg` | Labels, inactive nav, captions |
+| Subtle ink | `#5c5c62` | `--dk-subtle-fg` | Meta, placeholders |
+| Border | `#232325` | `--dk-border` | Panel borders, dividers |
+| Border soft | `rgba(255,255,255,0.06)` | `--dk-border-soft` | Inner hairlines |
+| Primary | `#3b6eff` | `--dk-primary` | Primary button, active state, links |
+| Data blue | `#38bdf8` | `--dk-data` | Bar charts, the signature data color |
+| Positive | `#36c98d` | `--dk-pos` | Up deltas, owned tags |
+| Negative | `#f76d6d` | `--dk-neg` | Down deltas |
+
+### Category pill palette (tinted text + border, transparent fill)
+
+| Hue | Hex |
+|-----|-----|
+| Orange | `#f5933b` |
+| Green | `#36c98d` |
+| Blue | `#5b9dff` |
+| Purple | `#a78bfa` |
+| Pink | `#f472b6` |
+| Teal | `#2dd4bf` |
+| Yellow | `#facc15` |
+
+### The dusk backdrop
+
+Behind the floating window: a twilight gradient (deep navy at top → warm horizon at bottom), optionally a faint starfield. Keep it soft and blurred so the UI stays readable.
+
+```css
+background:
+  radial-gradient(120% 80% at 50% 0%, #16223f 0%, #20284a 35%, #4a3a5e 70%, #8a5a4e 100%);
+/* faint stars: tiny white radial-gradients at low opacity, top third only */
+```
+
+### Tailwind mapping (when no project tokens)
+
+```css
+:root {
+  --dk-bg:#0c0c0e; --dk-panel:#151517; --dk-rail:#0e0e10;
+  --dk-fg:#f4f4f5; --dk-muted-fg:#8a8a90; --dk-border:#232325;
+  --dk-primary:#3b6eff; --dk-data:#38bdf8;
+}
+```
+
+**Rule:** The UI stays near-monochrome dark; vivid blue is the data + action color, and category pills are the only multi-hue element. The dusk backdrop supplies the warmth.
+
+---
+
+## Typography
+
+### Font stacks
+
+| Role | Stack |
+|------|-------|
+| Sans (everything) | `Inter, "SF Pro Text", ui-sans-serif, system-ui, sans-serif` |
+| Mono (numbers, deltas, IDs) | `"Geist Mono", "Berkeley Mono", ui-monospace, SFMono-Regular, monospace` |
+
+### Scale
+
+| Level | Pattern |
+|-------|---------|
+| Page / report title | `text-2xl md:text-3xl font-semibold tracking-tight text-[#f4f4f5]` |
+| KPI / metric value | `text-3xl md:text-4xl font-semibold tabular-nums text-[#f4f4f5]` |
+| Panel title | `text-sm font-medium text-[#8a8a90]` |
+| Body | `text-sm md:text-[15px] text-[#c8c8cc]` |
+| Section label (sidebar) | `text-xs font-medium text-[#5c5c62]` (General, Favorites, Searches) |
+| Nav item | `text-sm text-[#c8c8cc]` |
+| Delta / meta | `font-mono text-xs` (`last 30 days`, `+25%`, `12.5%`) |
+
+Deltas and `last 30 days` are mono; the percentage is colored (`#36c98d` up / `#f76d6d` down). Big numbers use `tabular-nums`.
+
+---
+
+## Layout tokens
+
+| Token | Value |
+|-------|-------|
+| `DK_BACKDROP` | the dusk gradient on `body`, with `padding` so the window floats |
+| `DK_WINDOW` | `rounded-2xl border border-[#232325] bg-[#0c0c0e] overflow-hidden` |
+| `DK_SHELL` | sidebar `w-64` + `main flex-1` |
+| `DK_SECTION` | `p-6 md:p-8` |
+| `DK_PANEL` | `rounded-xl border border-[#232325] bg-[#151517] p-5` |
+| `DK_GAP` | `gap-5` |
+
+### Floating window shell
+
+```tsx
+<div className="min-h-screen p-4 md:p-8" style={{background:"radial-gradient(120% 80% at 50% 0%,#16223f,#20284a 35%,#4a3a5e 70%,#8a5a4e)"}}>
+  <div className="mx-auto flex max-w-[1400px] overflow-hidden rounded-2xl border border-[#232325] bg-[#0c0c0e]">
+    <aside className="w-64 shrink-0 border-r border-[#232325] bg-[#0e0e10] p-3">{nav}</aside>
+    <main className="flex-1 min-w-0">
+      <header className="flex items-center justify-between border-b border-[#232325] px-6 py-3">{breadcrumb + actions}</header>
+      <div className="p-6 md:p-8">{content}</div>
+    </main>
+  </div>
+</div>
+```
+
+---
+
+## Component patterns
+
+### Sidebar nav
+
+Sections (`General`, `Favorites`, `Searches`) as tiny muted labels, items as icon + label, optional count badge, tiny colored favicon for entities.
+
+```tsx
+<a className={cn(
+  "flex items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm",
+  active ? "bg-[#1c1c1f] text-[#f4f4f5]" : "text-[#c8c8cc] hover:bg-[#1c1c1f]"
+)}>
+  <Icon className="size-4 text-[#8a8a90]" />
+  <span className="flex-1 truncate">Report</span>
+  <span className="font-mono text-xs text-[#5c5c62]">99+</span>
+</a>
+```
+
+### KPI strip
+
+A bordered row split into equal cells (provider icon + name, big number, `last 30 days` + colored delta).
+
+```tsx
+<div className="grid grid-cols-2 divide-x divide-[#232325] rounded-xl border border-[#232325] bg-[#151517] md:grid-cols-4">
+  <div className="p-5">
+    <p className="flex items-center gap-2 text-sm text-[#8a8a90]"><Icon/> ChatGPT</p>
+    <p className="mt-3 text-4xl font-semibold tabular-nums">213</p>
+    <p class="mt-4 flex items-center justify-between font-mono text-xs">
+      <span className="text-[#5c5c62]">last 30 days</span>
+      <span className="text-[#f76d6d]">12.5%</span>
+    </p>
+  </div>
+</div>
+```
+
+### Report panel
+
+```tsx
+<div className="rounded-xl border border-[#232325] bg-[#151517] p-5">
+  <p className="text-sm text-[#8a8a90]">Unique Visitors</p>
+  <p className="mt-1 text-3xl font-semibold tabular-nums">8,451</p>
+  <p className="mt-1 font-mono text-xs"><span className="text-[#36c98d]">12.5%</span> <span className="text-[#5c5c62]">last 30 days</span></p>
+  <div className="mt-4 h-64"><canvas/></div>
+</div>
+```
+
+### Segmented rank bar
+
+A single rounded track split into vivid colored segments, with a dotted legend below.
+
+```tsx
+<div className="flex gap-1.5">
+  <span className="h-2 rounded-full bg-[#38bdf8]" style={{flex:9.4}} />
+  <span className="h-2 rounded-full bg-[#f5933b]" style={{flex:7.8}} />
+  <span className="h-2 rounded-full bg-[#facc15]" style={{flex:6.4}} />
+  <span className="h-2 rounded-full bg-[#2dd4bf]" style={{flex:3.2}} />
+  <span className="h-2 rounded-full bg-[#36c98d]" style={{flex:1.7}} />
+</div>
+```
+
+### Category pill
+
+Each category owns a hue: colored text + matching border + transparent fill.
+
+```tsx
+<span className="inline-flex rounded-md border border-[#f5933b]/40 px-2 py-0.5 text-xs font-medium text-[#f5933b]">
+  Project Management
+</span>
+```
+
+### Owned / status tag
+
+```tsx
+<span className="rounded-md border border-[#36c98d]/40 px-1.5 py-0.5 text-[11px] font-medium text-[#36c98d]">Owned</span>
+```
+
+### Buttons
+
+| Variant | Classes |
+|---------|---------|
+| Primary | `rounded-lg bg-[#3b6eff] px-3.5 py-2 text-sm font-medium text-white hover:bg-[#3361f0]` |
+| Secondary | `rounded-lg border border-[#232325] bg-[#151517] px-3.5 py-2 text-sm text-[#f4f4f5] hover:bg-[#1c1c1f]` |
+| Ask (AI) | secondary + a leading spark `✳` in `#8a8a90`, e.g. `Ask about this "Report"` |
+
+### Data table
+
+```tsx
+<div className="grid grid-cols-[1fr_auto_auto] gap-y-3 text-sm">
+  <span className="flex items-center gap-2"><Icon/> Ace <OwnedTag/></span>
+  <span className="text-right font-mono tabular-nums text-[#c8c8cc]">9.4%</span>
+  <span className="text-right font-mono tabular-nums text-[#f4f4f5]">212</span>
+</div>
+```
+
+---
+
+## Charts (vivid data viz)
+
+- **Bars in sky-blue `#38bdf8`** - the signature. Rounded tops (`borderRadius:6`), flat fill. Many thin bars for time series (30-day) is on-brand.
+- Line charts: thin teal/green `#36c98d` or `#38bdf8`, no fill, smooth.
+- Multi-series / rank: the category palette (blue, orange, yellow, teal, green).
+- Background = panel `#151517`; gridlines off or very faint `#232325`; axis text mono, muted `#5c5c62`.
+- Tooltip: `#1c1c1f` bg, `#232325` border, white text, `10px` corners.
+
+```js
+const DATA="#38bdf8", POS="#36c98d", GRID="#232325";
+const CATS=["#5b9dff","#f5933b","#facc15","#2dd4bf","#36c98d","#a78bfa"];
+Chart.defaults.font.family = "Inter, system-ui, sans-serif";
+Chart.defaults.color = "#5c5c62";
+// bars: backgroundColor:DATA, borderRadius:6
+// grid: { color: GRID } or display:false
+// tooltip: { backgroundColor:"#1c1c1f", borderColor:"#232325", borderWidth:1, cornerRadius:10 }
+```
+
+---
+
+## Motion & effects
+
+- Calm. Hover = panel/row bg lift to `#1c1c1f`, border to softer white. No bounce.
+- The floating window may cast one soft ambient shadow onto the backdrop (`0 30px 80px -30px rgba(0,0,0,.6)`).
+- `transition-colors duration-150`. Charts animate in gently.
+- No neon glow (that's raycast), no hard offset shadow (that's gumroad), no gradient on the UI chrome - the gradient lives in the backdrop only.
+
+---
+
+## Anti-patterns
+
+| Avoid | Why |
+|-------|-----|
+| Flat dark filling the whole viewport edge-to-edge | The app is a rounded window floating on the dusk backdrop |
+| Monochrome category tags | Category pills are intentionally multi-hue |
+| Red glow / neon | That's raycast; dusk is calm with vivid-blue data |
+| Hard offset shadows | That's gumroad; use soft ambient depth |
+| Gradient on buttons/panels | Gradient belongs to the backdrop only; chrome stays flat dark |
+| Serif type | Inter sans throughout; mono for numbers |
+| Pure white `#fff` text | Use `#f4f4f5` warm-white on the dark panels |
+| Bars in muted gray | The signature is bright sky-blue `#38bdf8` |
+
+---
+
+## Project overrides
+
+If the repo defines `.agents/styles/dusk.md` or `.agents/styles/dusk-theme.md`, prefer those tokens and components over this portable spec.

package/agents-config/skills/use-style/styles/grid.md

@@ -0,0 +1,284 @@
+# Grid Style
+
+Structured, builder-centric landing aesthetic. A technical spec sheet, not a marketing funnel.
+
+**Reference implementations:** `/aibuilder`, `/aiblueprint`, `/agents`
+
+---
+
+## Core vibe
+
+- **Blueprint / terminal** look. Reads like a spec sheet, not a soft SaaS funnel.
+- **Square geometry.** Zero border-radius on structural UI.
+- **Line-driven hierarchy.** 1px borders and dividers, never shadows or blur.
+- **Condensed display type** for hero and section titles (Science Gothic or an equivalent condensed grotesk).
+- **Mono for data.** Prices, counts, nav, buttons, and status chips.
+- **Generous whitespace.** Section padding scales with the breakpoint.
+
+---
+
+## Color
+
+Use existing design tokens. Do **not** invent a new palette.
+
+| Role | Token | Usage |
+|------|-------|-------|
+| Canvas | `--background` | Page and section fill |
+| Ink | `--foreground` | Headlines, primary buttons |
+| Muted ink | `--muted-foreground` | Body, descriptions, sold-out rows |
+| Structure | `--border` | Dividers, boxes, ghost buttons |
+| Accent | `--primary` | Highlights, active tier, CTA emphasis |
+| Accent surface | `--primary/5` | Active pricing row background |
+| Muted surface | `--muted/20` | Sidebar panels |
+| Card | `--card` | Bordered panels |
+
+Status (sold out, success) may use the existing destructive/emerald tokens at low opacity.
+
+**Codelynx:** wrap pages in `theme-aiblueprint` (or the product theme class). See `.agents/styles/grid-theme.md` for token detail.
+
+---
+
+## Typography
+
+| Level | Font | Pattern |
+|-------|------|---------|
+| Hero H1 | Condensed display | `text-2xl sm:text-4xl md:text-5xl lg:text-6xl`, tight tracking, `leading-none` |
+| Section H2 | Condensed display | `text-2xl sm:text-3xl md:text-4xl` |
+| Small display | Condensed display | `text-xl sm:text-2xl` (guarantee blocks, compact titles) |
+| Body | Sans | `text-base sm:text-lg leading-relaxed text-muted-foreground` |
+| Nav / button / data | Mono | `font-mono uppercase tracking-wider text-xs` |
+| Price / count | Mono tabular | `font-mono tabular-nums` |
+
+### Title accent syntax
+
+`GridThemeSectionTitle` parses `**bold phrase**` inside a string title and wraps it in `<span className="text-primary">`.
+
+### Display font loading
+
+Scope the display font to the routes that need it (layout + co-located CSS), not globally.
+
+**Codelynx:** `GT_DISPLAY_FONT = "font-science-gothic font-normal tracking-tight leading-none"`, loaded via `science-gothic.css`.
+
+---
+
+## Layout tokens
+
+Responsive shell and section rhythm. Names vary by repo; the semantics stay the same.
+
+| Token | Value (Codelynx) | Purpose |
+|-------|------------------|---------|
+| `GT_SHELL` | `mx-auto max-w-5xl px-3 pb-8 pt-2 sm:max-w-6xl sm:px-6 sm:pt-0 md:px-8 md:pb-10 lg:px-10 lg:pb-14 xl:px-12 xl:pb-16` | Outer page wrapper |
+| `GT_FRAME_X` | `px-5 sm:px-8 md:px-10 lg:px-18 xl:px-20` | Horizontal padding for header and sections |
+| `GT_SECTION` | `GT_FRAME_X` + `py-5 sm:py-8 md:py-10 lg:py-18 xl:py-20` | Section wrapper |
+| `GT_STACK_PADDING` | `px-5 py-5 sm:px-6 sm:py-6 md:px-8 md:py-8 lg:px-10 lg:py-10 xl:px-12 xl:py-12` | Inner card/row padding |
+| `GT_SECTION_TITLE_GAP` | `mb-8 md:mb-10 lg:mb-12` | Margin below section titles |
+| `GT_DIVIDER_NARROW` | `mx-auto max-w-md border-t border-border sm:max-w-lg` | Narrow centered hero divider |
+
+### Responsive scale (matches the live tokens above)
+
+| Property | base | sm | md | lg | xl |
+|----------|------|----|----|----|----|
+| Shell max-width | max-w-5xl | max-w-6xl | - | - | - |
+| Shell px | px-3 | px-6 | px-8 | px-10 | px-12 |
+| Shell pt | pt-2 | pt-0 | - | - | - |
+| Section py | py-5 | py-8 | py-10 | py-18 | py-20 |
+| Frame px | px-5 | px-8 | px-10 | px-18 | px-20 |
+| Stack padding | px-5 py-5 | px-6 py-6 | px-8 py-8 | px-10 py-10 | px-12 py-12 |
+
+**Rule:** Only remove top padding on the outer shell (`sm:pt-0`). Never strip section vertical padding globally.
+
+---
+
+## Page shell
+
+```
++----------------------------------------------- viewport --+
+|  GT_SHELL (max-w-5xl/6xl, responsive px)                  |
+|  +-----------------------------------------------------+  |
+|  |  border-x border-b border-border bg-background      |  |
+|  |  - Sticky header (GT_FRAME_X, divider bottom)       |  |
+|  |  - Section (GT_SECTION)                             |  |
+|  |  - Full-bleed section divider                       |  |
+|  |  - Section ...                                      |  |
+|  |  - Footer                                           |  |
+|  +-----------------------------------------------------+  |
++-----------------------------------------------------------+
+```
+
+```tsx
+<div className="theme-aiblueprint bg-background text-foreground relative min-h-full overflow-x-hidden">
+  <div className={GT_SHELL}>
+    <div className="border-x border-b border-border bg-background">
+      <PageHeader />
+      <SectionA />
+      <GridThemeSectionDivider />
+      <SectionB />
+    </div>
+  </div>
+</div>
+```
+
+### Full-bleed divider
+
+Breaks out of the bordered frame to the viewport edges:
+
+```tsx
+className="relative left-1/2 w-screen -translate-x-1/2 border-t border-border"
+```
+
+Place it between sections inside the bordered frame. The header uses its own bottom divider, so the frame has no top border.
+
+---
+
+## Component patterns
+
+Reuse the Codelynx primitives from `grid-theme-primitives.tsx` rather than rebuilding these.
+
+| Component | Notes |
+|-----------|-------|
+| `GridThemeSectionTitle` | Props `title`, `description?`, `label?`, `align?`, `size?`. `align="center"` for hero-adjacent sections, `size="sm"` for compact titles. Omit `label` in the main flow. |
+| `GridThemeButton` | Link-styled CTA. Variants `primary` (filled `bg-foreground`) and `ghost` (border only). Square, mono, `h-12 px-6`. |
+| `GridThemeFeatureRow` | Two-column row: square icon box + title/description. No left label column. |
+| `GridThemeBorderedStack` | Outer `border divide-y` container + padded `GridThemeStackSection` children. FAQ stacks, guarantee blocks, feature lists. |
+| `GridThemeCompareTable` | 3-column comparison. Square borders, muted header, highlight column defaults to center/right. |
+| `GridThemeSplitCard` | Two-column card with a vertical divider on `md+`. |
+| `GridThemeBlockquote` | Left-bordered quote (`border-l-2 border-primary`). |
+| `GridThemeStatusBox` / `GridThemePixelProgress` | Batch counter UI with a pixel progress grid. |
+| `GridThemePricingTiers` | Tier list with a batch counter. Parent owns `divide-y`. |
+
+---
+
+## Grid patterns
+
+### Feature grid (gap-px is fine here)
+
+Dense icon/tile grid where every cell owns a border:
+
+```tsx
+<div className="grid grid-cols-1 gap-px border border-border bg-border sm:grid-cols-2 lg:grid-cols-3">
+  {items.map((item) => (
+    <div key={item.title} className="bg-background px-5 py-6">...</div>
+  ))}
+</div>
+```
+
+`gap-px` + `bg-border` works only when every cell sets `bg-background`.
+
+### Image proof grid (no gap-px)
+
+Photos sit edge-to-edge. Use `divide-*`, not `gap-px`:
+
+```tsx
+// Good: no gray band between images
+<div className="grid grid-cols-1 divide-y divide-border border border-border sm:grid-cols-3 sm:divide-x sm:divide-y-0">
+  {images.map((src) => (
+    <Image key={src} className="block w-full bg-background" />
+  ))}
+</div>
+
+// Bad: visible gray gutters
+<div className="grid gap-px bg-border">
+```
+
+### Bordered stack
+
+```tsx
+<div className="border border-border divide-y divide-border">
+  {rows.map(...)}
+</div>
+```
+
+The parent owns the separators. Child rows must not override with conflicting `py-*` that breaks `first:pt-0`.
+
+---
+
+## Sticky header
+
+```tsx
+<header className="sticky top-0 z-50 bg-background">
+  <div className={cn("flex h-12 items-center", GT_FRAME_X)}>...</div>
+  <GridThemeSectionDivider />
+</header>
+```
+
+- Full-width divider under the nav.
+- No top border on the main frame (`border-x border-b` only).
+- Nav links: `font-mono text-[10px] uppercase tracking-wider text-muted-foreground`.
+
+---
+
+## Legacy component integration
+
+Wrap existing blocks that cannot be rewritten yet:
+
+```tsx
+<div className="overflow-x-hidden [&_*]:!rounded-none [&_*]:!shadow-none">
+  <LegacyPricing showDecorativeGlow={false} gridTheme />
+</div>
+```
+
+| Technique | Effect |
+|-----------|--------|
+| `showDecorativeGlow={false}` | Removes the blur gradient halo |
+| `gridTheme` prop | Switches guarantee/FAQ to grid components |
+| `[&_*]:!rounded-none` | Forces square corners on nested legacy UI |
+| `[&_*]:!shadow-none` | Removes drop shadows from nested legacy UI |
+
+---
+
+## Charts (blueprint data viz)
+
+When charting (e.g. Chart.js), keep it as flat and square as the rest of the UI:
+
+- Series in the token grays: `--foreground`, `--muted-foreground`, `--border`, with **one** `--primary` accent for the highlighted series. No rainbow palettes.
+- **Square bars** (`borderRadius: 0`, or 2px max). Flat fills, no gradients, no glow.
+- Gridlines `--border`; axis labels **mono** (`Geist Mono`), uppercase where it fits, muted color.
+- Tooltip: inverted - `--foreground` background, `--background` text, square corners.
+- Doughnut/pie: thin segments separated by a `--background` stroke; legend in mono.
+- Bar category labels use the mono tabular treatment (prices/counts), matching the rest of the data type.
+
+```js
+const FG=getVar('--foreground'), MUTED=getVar('--muted-foreground'), BORDER=getVar('--border'), PRIMARY=getVar('--primary');
+Chart.defaults.font.family = "Geist Mono, ui-monospace, monospace";
+// bars: backgroundColor:[MUTED, FG], borderRadius:0
+// grid: { color: BORDER }, ticks: { font:{ family:'Geist Mono' } }
+// tooltip: { backgroundColor: FG, cornerRadius: 0 }
+```
+
+---
+
+## Motion & effects
+
+- No blur halos, glass morphism, or large drop shadows.
+- Hover changes color/background only (`hover:bg-muted`, `hover:bg-foreground/90`).
+- `transition-colors` on interactive elements.
+
+---
+
+## Anti-patterns
+
+| Avoid | Why |
+|-------|-----|
+| `rounded-xl`, `rounded-2xl`, `rounded-full` on structural UI | Breaks the grid aesthetic |
+| `shadow-2xl`, `ring-*`, `backdrop-blur-*` | Replaces line hierarchy with depth |
+| Gradient section backgrounds | Keep flat `bg-background` |
+| `gap-px` + `bg-border` on image grids | Creates gray bands between photos |
+| `last:border-b-0` on tier rows inside a `divide-y` parent | Removes the active tier bottom border |
+| `sm:py-8` on the first stack row | Overrides `first:pt-0` |
+| Global removal of section `py-*` | Breaks vertical rhythm; target the shell only |
+| Mono overline labels everywhere | Use sparingly |
+
+---
+
+## Codelynx file map
+
+When working in `codelynx.dev-v2`, prefer these over reimplementing:
+
+| Path | Role |
+|------|------|
+| `.agents/styles/grid-theme.md` | Full project spec (tokens, file paths) |
+| `.agents/styles/grid-theme-migration.md` | Migration playbook |
+| `src/features/product-landings/pages/aibuilder/_landing/grid-theme/` | Primitives + components |
+| `src/features/product-landings/pages/aibuilder/view.tsx` | Reference landing |
+| `src/features/product-landings/pages/aiblueprint/view.tsx` | AI Blueprint landing |
+| `src/features/product-landings/pages/agents/view.tsx` | Agents landing |