How this site was built
This site is built spec-first. Each intent (why) is served by journeys (who and how), and each step of a journey uses behaviors (what).
Every behavior is a test that runs against the built site, and agents work through the gates: a change is trusted when the gates pass.
10 intents, 14 journeys and 135 behaviors.
Opens the home page from a link
SITE SITE-001 The first screen says who and what SITE SITE-013 The home page reads like an agent session SITE SITE-012 Responsive from phone to wide desktop KIT KIT-010 kan-site-header KIT KIT-007 kan-prompt KIT KIT-013 kan-tool-call KIT KIT-012 kan-icon
Scans the tech stack
SITE SITE-003 The tech stack, grouped KIT KIT-003 kan-tag KIT KIT-006 kan-section-heading
Skims the featured projects
SITE SITE-002 Featured projects KIT KIT-005 kan-project-card KIT KIT-004 kan-card
Reads a little about Ian
SITE SITE-004 About KIT KIT-008 kan-terminal KIT KIT-014 kan-plan
Gets in touch
SITE SITE-005 Contact without a backend SITE SITE-015 Resume download KIT KIT-011 kan-site-footer KIT KIT-002 kan-link
Sees a rich preview where the link was shared
SITE SITE-010 Shares well
The page loads fast and nothing tracks them
QUAL QUAL-001 Lighthouse QUAL QUAL-002 JavaScript budget QUAL QUAL-003 Fonts QUAL QUAL-004 No third-party requests CMP CMP-005 Pages download only what they use
Uses whatever browser they have
QUAL QUAL-006 Works across browser engines
Follows an old or mistyped link
SITE SITE-009 A 404 in the terminal voice
Adds or edits a content entry
SITE SITE-006 Content is data SITE SITE-002 Featured projects SITE SITE-003 The tech stack, grouped
Previews it locally
SHIP SHIP-002 Local development
Merges, and the site deploys
GATE GATE-002 Every pull request runs the gate SHIP SHIP-005 Deploy on merge
Reads a slim profile README that points to the site
SHIP SHIP-007 The profile README points to the site
Is allowed in, and finds /llms.txt
AGENT AGENT-005 AI crawlers are welcome AGENT AGENT-001 llms.txt
Reads the pages as Markdown
AGENT AGENT-002 A Markdown version of every page AGENT AGENT-004 Agents read what people see
Pulls out facts about Ian and the projects
AGENT AGENT-003 Structured data
Opens a project's source or live demo
SITE SITE-002 Featured projects KIT KIT-002 kan-link
Follows the footer link to the Storybook
KIT KIT-011 kan-site-footer SHIP SHIP-005 Deploy on merge DOCS DOCS-006 An introduction to the system
Browses components in light and dark
DOCS DOCS-001 Every variant and state has a story DOCS DOCS-002 Theme switch in the toolbar DOCS DOCS-003 Component docs come from the source KIT KIT-001 kan-button
Inspects the tokens and their contrast
DOCS DOCS-004 Foundations pages show the tokens DOCS DOCS-005 Contrast is visible PRIM PRIM-003 The electric cyan brand ramp SEM SEM-007 Text meets WCAG AA contrast in both modes
Tries the library on a plain HTML page
CMP CMP-004 Works in plain HTML CMP CMP-001 One prefix CMP CMP-003 Shadow DOM with styling hooks CMP CMP-007 A typed, documented API CMP CMP-008 Events are namespaced and cross the shadow boundary
Arrives with a system light or dark setting
THEME THEME-001 Follows the system by default THEME THEME-004 No flash of the wrong theme TOK TOK-003 Modes in CSS
Switches the theme, and the choice is remembered
THEME THEME-002 The toggle switches and remembers THEME THEME-003 Going back to the system setting KIT KIT-009 kan-theme-toggle THEME THEME-008 Components follow the theme
Their system switches theme while they read
THEME THEME-005 System changes apply live
Edits the primitive tokens
PRIM PRIM-001 Tokens are written in DTCG format PRIM PRIM-002 Colors are authored in OKLCH PRIM PRIM-003 The electric cyan brand ramp PRIM PRIM-004 A neutral ramp tinted toward the brand PRIM PRIM-005 Status ramps that can't be mistaken for the accent PRIM PRIM-006 A 4px spacing scale PRIM PRIM-007 Two font families PRIM PRIM-008 A modular type scale PRIM PRIM-009 Shape: small radii and thin borders PRIM PRIM-010 Motion PRIM PRIM-011 Breakpoints
The semantic roles pick up the change
SEM SEM-001 Semantic tokens only reference primitives SEM SEM-002 Light and dark define the same tokens SEM SEM-003 Background roles SEM SEM-004 Text roles SEM SEM-005 Border roles SEM SEM-006 Accent and status roles SEM SEM-009 Typography roles SEM SEM-010 Spacing and layout roles
One build regenerates every output
TOK TOK-001 One build makes every output TOK TOK-002 Every custom property is prefixed TOK TOK-004 Semantic properties point at primitives TOK TOK-005 Typed token names TOK TOK-008 The build is repeatable
Mistakes are caught before they ship
TOK TOK-006 Broken references fail the build TOK TOK-007 Contrast is checked on every build CMP CMP-002 Styled only with semantic tokens SITE SITE-007 Built only from the design system
Reviews the result in Storybook
DOCS DOCS-004 Foundations pages show the tokens DOCS DOCS-005 Contrast is visible DOCS DOCS-002 Theme switch in the toolbar
Reads a slim profile README that points to the site
SHIP SHIP-007 The profile README points to the site
Opens a project's source or live demo
SITE SITE-002 Featured projects KIT KIT-002 kan-link
Follows the footer link to the Storybook
KIT KIT-011 kan-site-footer SHIP SHIP-005 Deploy on merge DOCS DOCS-006 An introduction to the system
Browses components in light and dark
DOCS DOCS-001 Every variant and state has a story DOCS DOCS-002 Theme switch in the toolbar DOCS DOCS-003 Component docs come from the source KIT KIT-001 kan-button
Inspects the tokens and their contrast
DOCS DOCS-004 Foundations pages show the tokens DOCS DOCS-005 Contrast is visible PRIM PRIM-003 The electric cyan brand ramp SEM SEM-007 Text meets WCAG AA contrast in both modes
Tries the library on a plain HTML page
CMP CMP-004 Works in plain HTML CMP CMP-001 One prefix CMP CMP-003 Shadow DOM with styling hooks CMP CMP-007 A typed, documented API CMP CMP-008 Events are namespaced and cross the shadow boundary
Creates it following the library's conventions
CMP CMP-001 One prefix CMP CMP-002 Styled only with semantic tokens CMP CMP-003 Shadow DOM with styling hooks CMP CMP-006 Content lives in the page CMP CMP-007 A typed, documented API CMP CMP-008 Events are namespaced and cross the shadow boundary TOK TOK-005 Typed token names
Documents and tests it in Storybook
DOCS DOCS-001 Every variant and state has a story DOCS DOCS-003 Component docs come from the source DOCS DOCS-007 Stories are tested CMP CMP-010 No accessibility violations
Uses it on a page
SITE SITE-007 Built only from the design system CMP CMP-005 Pages download only what they use
Opens "How this site was built" from the footer
KIT KIT-011 kan-site-footer SITE SITE-014 How this site was built
Follows an intent down to its journeys and behaviors
SITE SITE-014 How this site was built GRAPH GRAPH-007 The graph is generated
Opens a behavior's Gherkin in the source repo
GRAPH GRAPH-001 Three layers in three places
Opens the home page from a link
SITE SITE-001 The first screen says who and what SITE SITE-013 The home page reads like an agent session SITE SITE-012 Responsive from phone to wide desktop KIT KIT-010 kan-site-header KIT KIT-007 kan-prompt KIT KIT-013 kan-tool-call KIT KIT-012 kan-icon
Scans the tech stack
SITE SITE-003 The tech stack, grouped KIT KIT-003 kan-tag KIT KIT-006 kan-section-heading
Skims the featured projects
SITE SITE-002 Featured projects KIT KIT-005 kan-project-card KIT KIT-004 kan-card
Reads a little about Ian
SITE SITE-004 About KIT KIT-008 kan-terminal KIT KIT-014 kan-plan
Gets in touch
SITE SITE-005 Contact without a backend SITE SITE-015 Resume download KIT KIT-011 kan-site-footer KIT KIT-002 kan-link
Arrives with a system light or dark setting
THEME THEME-001 Follows the system by default THEME THEME-004 No flash of the wrong theme TOK TOK-003 Modes in CSS
Switches the theme, and the choice is remembered
THEME THEME-002 The toggle switches and remembers THEME THEME-003 Going back to the system setting KIT KIT-009 kan-theme-toggle THEME THEME-008 Components follow the theme
Their system switches theme while they read
THEME THEME-005 System changes apply live
Skips to the content and moves around by keyboard
SITE SITE-011 Landmarks, headings and a skip link CMP CMP-009 Keyboard and focus SEM SEM-011 One focus ring for everything KIT KIT-010 kan-site-header
Listens with a screen reader
KIT KIT-006 kan-section-heading KIT KIT-012 kan-icon KIT KIT-001 kan-button KIT KIT-013 kan-tool-call KIT KIT-014 kan-plan THEME THEME-006 The toggle is accessible CMP CMP-006 Content lives in the page
Prefers reduced motion
SEM SEM-012 Motion turns off for reduced motion CMP CMP-011 Reduced motion KIT KIT-007 kan-prompt
Reads with low vision
SEM SEM-007 Text meets WCAG AA contrast in both modes SEM SEM-008 UI elements meet non-text contrast in both modes QUAL QUAL-005 Every page passes axe CMP CMP-010 No accessibility violations
Browses with JavaScript turned off
SITE SITE-008 Readable without JavaScript THEME THEME-007 Without JavaScript
Sees a rich preview where the link was shared
SITE SITE-010 Shares well
The page loads fast and nothing tracks them
QUAL QUAL-001 Lighthouse QUAL QUAL-002 JavaScript budget QUAL QUAL-003 Fonts QUAL QUAL-004 No third-party requests CMP CMP-005 Pages download only what they use
Uses whatever browser they have
QUAL QUAL-006 Works across browser engines
Follows an old or mistyped link
SITE SITE-009 A 404 in the terminal voice
Builds everything from a clean checkout
SHIP SHIP-001 One install, one build SHIP SHIP-003 Bun version is pinned
Opens a pull request and the gate runs
GATE GATE-001 One gate command GATE GATE-002 Every pull request runs the gate QUAL QUAL-001 Lighthouse QUAL QUAL-002 JavaScript budget QUAL QUAL-006 Works across browser engines DOCS DOCS-007 Stories are tested GRAPH GRAPH-006 Gherkin must parse
Merges, and the site and Storybook deploy
SHIP SHIP-005 Deploy on merge SHIP SHIP-006 Served at www.iankaneshiro.dev SHIP SHIP-008 Cutover from the old site
Edits the primitive tokens
PRIM PRIM-001 Tokens are written in DTCG format PRIM PRIM-002 Colors are authored in OKLCH PRIM PRIM-003 The electric cyan brand ramp PRIM PRIM-004 A neutral ramp tinted toward the brand PRIM PRIM-005 Status ramps that can't be mistaken for the accent PRIM PRIM-006 A 4px spacing scale PRIM PRIM-007 Two font families PRIM PRIM-008 A modular type scale PRIM PRIM-009 Shape: small radii and thin borders PRIM PRIM-010 Motion PRIM PRIM-011 Breakpoints
The semantic roles pick up the change
SEM SEM-001 Semantic tokens only reference primitives SEM SEM-002 Light and dark define the same tokens SEM SEM-003 Background roles SEM SEM-004 Text roles SEM SEM-005 Border roles SEM SEM-006 Accent and status roles SEM SEM-009 Typography roles SEM SEM-010 Spacing and layout roles
One build regenerates every output
TOK TOK-001 One build makes every output TOK TOK-002 Every custom property is prefixed TOK TOK-004 Semantic properties point at primitives TOK TOK-005 Typed token names TOK TOK-008 The build is repeatable
Mistakes are caught before they ship
TOK TOK-006 Broken references fail the build TOK TOK-007 Contrast is checked on every build CMP CMP-002 Styled only with semantic tokens SITE SITE-007 Built only from the design system
Reviews the result in Storybook
DOCS DOCS-004 Foundations pages show the tokens DOCS DOCS-005 Contrast is visible DOCS DOCS-002 Theme switch in the toolbar
Creates it following the library's conventions
CMP CMP-001 One prefix CMP CMP-002 Styled only with semantic tokens CMP CMP-003 Shadow DOM with styling hooks CMP CMP-006 Content lives in the page CMP CMP-007 A typed, documented API CMP CMP-008 Events are namespaced and cross the shadow boundary TOK TOK-005 Typed token names
Documents and tests it in Storybook
DOCS DOCS-001 Every variant and state has a story DOCS DOCS-003 Component docs come from the source DOCS DOCS-007 Stories are tested CMP CMP-010 No accessibility violations
Uses it on a page
SITE SITE-007 Built only from the design system CMP CMP-005 Pages download only what they use
Adds or edits a content entry
SITE SITE-006 Content is data SITE SITE-002 Featured projects SITE SITE-003 The tech stack, grouped
Previews it locally
SHIP SHIP-002 Local development
Merges, and the site deploys
GATE GATE-002 Every pull request runs the gate SHIP SHIP-005 Deploy on merge
Builds everything from a clean checkout
SHIP SHIP-001 One install, one build SHIP SHIP-003 Bun version is pinned
Opens a pull request and the gate runs
GATE GATE-001 One gate command GATE GATE-002 Every pull request runs the gate QUAL QUAL-001 Lighthouse QUAL QUAL-002 JavaScript budget QUAL QUAL-006 Works across browser engines DOCS DOCS-007 Stories are tested GRAPH GRAPH-006 Gherkin must parse
Merges, and the site and Storybook deploy
SHIP SHIP-005 Deploy on merge SHIP SHIP-006 Served at www.iankaneshiro.dev SHIP SHIP-008 Cutover from the old site
Ian describes the feature in plain words
GRAPH GRAPH-009 Find where a request belongs
The agent reads the current behavior and the intent behind it
GRAPH GRAPH-001 Three layers in three places GRAPH GRAPH-003 Edges live in journeys GRAPH GRAPH-008 Trace any node
The agent proposes changes to intents, journeys and behaviors, and Ian approves them
GRAPH GRAPH-002 Permanent IDs GRAPH GRAPH-010 Retiring instead of deleting
The spec check catches any gaps in the graph
GRAPH GRAPH-004 Nothing is orphaned GRAPH GRAPH-005 References must resolve GRAPH GRAPH-006 Gherkin must parse GRAPH GRAPH-007 The graph is generated
The agent delivers it through the gates (JRN-014)
GATE GATE-011 Pull requests trace to behaviors GATE GATE-014 Done means green
Opens "How this site was built" from the footer
KIT KIT-011 kan-site-footer SITE SITE-014 How this site was built
Follows an intent down to its journeys and behaviors
SITE SITE-014 How this site was built GRAPH GRAPH-007 The graph is generated
Opens a behavior's Gherkin in the source repo
GRAPH GRAPH-001 Three layers in three places
Plans the feature with Ian, and Ian approves the spec change
GRAPH GRAPH-009 Find where a request belongs GRAPH GRAPH-008 Trace any node GATE GATE-010 Changes to the specs are flagged for Ian's review
Builds it on a branch, running the gate locally
GATE GATE-001 One gate command GATE GATE-013 An agent can't stop on red
Opens a pull request as ians-agent[bot] that names the behaviors it implements and explains the work
GATE GATE-018 Agents work as their own GitHub identity GATE GATE-011 Pull requests trace to behaviors GATE GATE-017 New dependencies are explained GATE GATE-019 Pull requests explain the work GATE GATE-020 The facts in a pull request are generated
CI runs every gate
GATE GATE-002 Every pull request runs the gate GATE GATE-004 Typecheck GATE GATE-005 Lint and format GATE GATE-006 The design rules are lint rules GATE GATE-007 Behaviors are tests, and coverage never drops GATE GATE-016 No secrets GATE GATE-015 The gate is fast
Reads the failures and fixes them until everything is green
GATE GATE-012 Failures say what to fix GATE GATE-013 An agent can't stop on red
Can't loosen a gate to get there
GATE GATE-008 Tests can't be quietly weakened GATE GATE-009 Changes to the gates are flagged for Ian's review GATE GATE-003 main only changes through a green, approved pull request
Is done when the PR is green, and Ian approves and merges
GATE GATE-014 Done means green GATE GATE-003 main only changes through a green, approved pull request
Is allowed in, and finds /llms.txt
AGENT AGENT-005 AI crawlers are welcome AGENT AGENT-001 llms.txt
Reads the pages as Markdown
AGENT AGENT-002 A Markdown version of every page AGENT AGENT-004 Agents read what people see
Pulls out facts about Ian and the projects
AGENT AGENT-003 Structured data
Plans the feature with Ian, and Ian approves the spec change
GRAPH GRAPH-009 Find where a request belongs GRAPH GRAPH-008 Trace any node GATE GATE-010 Changes to the specs are flagged for Ian's review
Builds it on a branch, running the gate locally
GATE GATE-001 One gate command GATE GATE-013 An agent can't stop on red
Opens a pull request as ians-agent[bot] that names the behaviors it implements and explains the work
GATE GATE-018 Agents work as their own GitHub identity GATE GATE-011 Pull requests trace to behaviors GATE GATE-017 New dependencies are explained GATE GATE-019 Pull requests explain the work GATE GATE-020 The facts in a pull request are generated
CI runs every gate
GATE GATE-002 Every pull request runs the gate GATE GATE-004 Typecheck GATE GATE-005 Lint and format GATE GATE-006 The design rules are lint rules GATE GATE-007 Behaviors are tests, and coverage never drops GATE GATE-016 No secrets GATE GATE-015 The gate is fast
Reads the failures and fixes them until everything is green
GATE GATE-012 Failures say what to fix GATE GATE-013 An agent can't stop on red
Can't loosen a gate to get there
GATE GATE-008 Tests can't be quietly weakened GATE GATE-009 Changes to the gates are flagged for Ian's review GATE GATE-003 main only changes through a green, approved pull request
Is done when the PR is green, and Ian approves and merges
GATE GATE-014 Done means green GATE GATE-003 main only changes through a green, approved pull request