ai-delivery-workflow 0.2.2 → 0.4.0

package/skills/ai-delivery-design-experience/assets/experience-template/product-prototype-reconciliation.yaml

@@ -5,7 +5,8 @@ iteration_id: ITER-0001
 status: pending
 producer_skill: ai-delivery-define-product
 input_product_baseline: PRODUCT-BASELINE-0001@1
-input_prototype_set: PROTOTYPE-SET-0001@1
+input_prototype_revision: PROTOTYPE-REVISION-0001@1
+input_prototype_revision_checksum: REPLACE_WITH_SHA256
 formal_ui_confirmation_ref: FORMAL-UI-CONFIRMATION-0001@1
 requirement_change_set_ref: requirement-change-set.csv
 requirement_change_set_checksum: REPLACE_WITH_SHA256

package/skills/ai-delivery-design-experience/assets/experience-template/prototype-adjustment-log.csv

@@ -1 +1 @@
-adjustment_id,review_comment_id,prototype_artifact_id,page_id,prototype_element_id,classification,from_source_revision,to_source_revision,change_summary,reason,requirement_change_ref,experience_change_ref,product_impact,architecture_impact,test_impact,evidence_ref,status
+adjustment_id,review_comment_id,prototype_id,page_id,review_scene_id,prototype_element_id,classification,from_source_revision,to_source_revision,change_summary,reason,requirement_change_ref,experience_change_ref,product_impact,architecture_impact,test_impact,evidence_ref,status

package/skills/ai-delivery-design-experience/assets/experience-template/prototype-component-bindings.csv

@@ -0,0 +1 @@
+page_id,scene_ids,terminal_id,component_id,variant,data_contract_id,context,status

package/skills/ai-delivery-design-experience/assets/experience-template/prototype-component-candidates.csv

@@ -0,0 +1 @@
+component_id,name,layer,base_component,variants,states,owner,lifecycle,source_page_id,source_scene_ids,proposed_implementation_entry,data_contract_id,compatibility,migration_note,review_comment

package/skills/ai-delivery-design-experience/assets/experience-template/prototype-components.csv

@@ -0,0 +1 @@
+component_id,name,layer,base_component,variants,states,owner,lifecycle_status

package/skills/ai-delivery-design-experience/assets/experience-template/prototype-confirmation.yaml

@@ -5,27 +5,28 @@ iteration_id: ITER-0001
 status: draft
 producer_skill: ai-delivery-design-experience
 input_artifacts:
-  prototype_set: PROTOTYPE-SET-0001@1
-  prototype_manifest: PROTOTYPE-0001@1
+  prototype_revision: PROTOTYPE-REVISION-0001@1
   prototype_tool_selection: PROTOTYPE-TOOL-SELECTION-0001@1
   prototype_review_decision: PROTOTYPE-REVIEW-DECISION-0001@1
   prototype_impact_assessment: PROTOTYPE-IMPACT-ASSESSMENT-0001@1
 standards: []
-prototype_set_ref: PROTOTYPE-SET-0001@1
-prototype_set_checksum: REPLACE_WITH_SHA256
-prototype_artifact_id: PROTOTYPE-0001
-prototype_version: 1
-prototype_manifest_ref: prototype-manifest-PROTOTYPE-0001.yaml
-prototype_manifest_checksum: REPLACE_WITH_SHA256
-source_revision: REVISION-0001
-review_bundle_algorithm: sha256
+prototype_id: PROTOTYPE
+prototype_revision_ref: PROTOTYPE-REVISION-0001@1
+prototype_revision_version: 1
+prototype_revision_checksum: REPLACE_WITH_SHA256
+source_revision: REPLACE_WITH_IMMUTABLE_SOURCE_REVISION
+source_checksum: REPLACE_WITH_SHA256
+review_bundle_algorithm: sha256-tree-v1
 review_bundle_checksum: REPLACE_WITH_SHA256
 tool_selection_checksum: REPLACE_WITH_SHA256
+terminal_catalog_checksum: REPLACE_WITH_SHA256
 page_catalog_checksum: REPLACE_WITH_SHA256
-canvas_catalog_checksum: REPLACE_WITH_SHA256
-canvas_pages_checksum: REPLACE_WITH_SHA256
-prototype_files_checksum: REPLACE_WITH_SHA256
-prototype_file_terminals_checksum: REPLACE_WITH_SHA256
+review_scene_catalog_checksum: REPLACE_WITH_SHA256
+trigger_condition_catalog_checksum: REPLACE_WITH_SHA256
+route_catalog_checksum: REPLACE_WITH_SHA256
+ui_mapping_checksum: REPLACE_WITH_SHA256
+review_unit_catalog_checksum: REPLACE_WITH_SHA256
+review_unit_page_catalog_checksum: REPLACE_WITH_SHA256
 prototype_review_decision_checksum: REPLACE_WITH_SHA256
 prototype_review_sessions_checksum: REPLACE_WITH_SHA256
 prototype_review_comments_checksum: REPLACE_WITH_SHA256
@@ -36,13 +37,12 @@ state_catalog_checksum: REPLACE_WITH_SHA256
 feature_screen_coverage_checksum: REPLACE_WITH_SHA256
 confirmation_mode: contract-validation
 human_approval:
-  required: false
+  required: true
   approver: null
   decided_at: null
-  decision: not-required
+  decision: pending
   approved_source_revision: null
-  prototype_set_checksum: null
-  prototype_manifest_checksum: null
+  prototype_revision_checksum: null
 checks:
   tool_selection:
     status: pending

package/skills/ai-delivery-design-experience/assets/experience-template/prototype-data-contracts.csv

@@ -0,0 +1 @@
+data_contract_id,entity,source,stable_id,fields,context,permission,sort,default_value,url_param,states,version,supersedes,compatibility,lifecycle_status

package/skills/ai-delivery-design-experience/assets/experience-template/prototype-impact-assessment.yaml

@@ -7,11 +7,11 @@ producer_skill: ai-delivery-design-experience
 input_artifacts:
   prototype_review_decision: PROTOTYPE-REVIEW-DECISION-0001@1
 standards: []
-prototype_artifact_id: PROTOTYPE-0001
-prototype_version: 1
-review_sessions_ref: prototype-review-sessions-PROTOTYPE-0001.csv
-review_comments_ref: prototype-review-comments-PROTOTYPE-0001.csv
-adjustment_log_ref: prototype-adjustment-log-PROTOTYPE-0001.csv
+prototype_id: PROTOTYPE
+candidate_source_revision: REPLACE_WITH_IMMUTABLE_SOURCE_REVISION
+review_sessions_ref: prototype-review-sessions.csv
+review_comments_ref: prototype-review-comments.csv
+adjustment_log_ref: prototype-adjustment-log.csv
 review_decision_checksum: REPLACE_WITH_SHA256
 review_sessions_checksum: REPLACE_WITH_SHA256
 review_comments_checksum: REPLACE_WITH_SHA256

package/skills/ai-delivery-design-experience/assets/experience-template/prototype-implementation-bindings.csv

@@ -0,0 +1 @@
+component_id,implementation_entry,data_contract_id

package/skills/ai-delivery-design-experience/assets/experience-template/prototype-manifest.yaml

@@ -4,6 +4,8 @@ version: 1
 iteration_id: ITER-0001
 status: draft
 producer_skill: ai-delivery-design-experience
+compatibility_mode: read-only-legacy
+current_flow_output: false
 inputs:
   product_baseline: PRODUCT-BASELINE-0001@1
   architecture_initial: ARCH-INITIAL-0001@1

package/skills/ai-delivery-design-experience/assets/experience-template/prototype-pages.csv

@@ -0,0 +1 @@
+page_id,terminal_id,page_name,display_label,parent_page_id,lifecycle_status

package/skills/ai-delivery-design-experience/assets/experience-template/prototype-product-coverage.csv

@@ -1 +1 @@
-feature_id,story_id,acceptance_id,terminal_id,prototype_artifact_id,page_id,prototype_element_id,coverage_status,rationale
+feature_id,story_id,acceptance_id,terminal_id,prototype_revision_id,page_id,review_scene_id,prototype_element_id,coverage_status,rationale

package/skills/ai-delivery-design-experience/assets/experience-template/prototype-review-comments.csv

@@ -1 +1 @@
-review_comment_id,review_session_id,page_id,canvas_id,prototype_file_id,prototype_element_id,classification,severity,comment,evidence_ref,responsible_node,status,rationale
+review_comment_id,review_session_id,page_id,review_scene_id,prototype_element_id,classification,severity,comment,evidence_ref,responsible_node,status,rationale

package/skills/ai-delivery-design-experience/assets/experience-template/prototype-review-decision.yaml

@@ -7,20 +7,21 @@ producer_skill: ai-delivery-design-experience
 input_artifacts:
   prototype_tool_selection: PROTOTYPE-TOOL-SELECTION-0001@1
 standards: []
-prototype_artifact_id: PROTOTYPE-0001
-prototype_version: 1
-candidate_source_revision: REVISION-0001
-page_catalog_ref: page-catalog-PROTOTYPE-0001.csv
-canvas_catalog_ref: canvas-catalog-PROTOTYPE-0001.csv
-canvas_pages_ref: canvas-pages-PROTOTYPE-0001.csv
-prototype_files_ref: prototype-files-PROTOTYPE-0001.csv
-prototype_file_terminals_ref: prototype-file-terminals-PROTOTYPE-0001.csv
+prototype_id: PROTOTYPE
+candidate_source_revision: REPLACE_WITH_IMMUTABLE_SOURCE_REVISION
+terminal_catalog_ref: prototype-terminals.csv
+page_catalog_ref: prototype-pages.csv
+review_scene_catalog_ref: prototype-review-scenes.csv
+trigger_condition_catalog_ref: prototype-trigger-conditions.csv
+route_catalog_ref: prototype-routes.csv
+ui_mapping_ref: ui-mapping.csv
 tool_selection_checksum: REPLACE_WITH_SHA256
+terminal_catalog_checksum: REPLACE_WITH_SHA256
 page_catalog_checksum: REPLACE_WITH_SHA256
-canvas_catalog_checksum: REPLACE_WITH_SHA256
-canvas_pages_checksum: REPLACE_WITH_SHA256
-prototype_files_checksum: REPLACE_WITH_SHA256
-prototype_file_terminals_checksum: REPLACE_WITH_SHA256
+review_scene_catalog_checksum: REPLACE_WITH_SHA256
+trigger_condition_catalog_checksum: REPLACE_WITH_SHA256
+route_catalog_checksum: REPLACE_WITH_SHA256
+ui_mapping_checksum: REPLACE_WITH_SHA256
 asked_at: null
 decision: pending
 human_review_required: true

package/skills/ai-delivery-design-experience/assets/experience-template/prototype-review-scenes.csv

@@ -0,0 +1 @@
+review_scene_id,page_id,terminal_id,scene_name,scene_type,trigger_condition_id,lifecycle_status

package/skills/ai-delivery-design-experience/assets/experience-template/prototype-review-sessions.csv

@@ -1 +1 @@
-review_session_id,prototype_artifact_id,prototype_version,source_revision,review_round,reviewer,status,started_at,completed_at,decision,evidence_ref
+review_session_id,prototype_id,candidate_source_revision,gate_id,page_id,review_scene_id,review_round,reviewer,status,started_at,completed_at,decision,evidence_ref

package/skills/ai-delivery-design-experience/assets/experience-template/prototype-review-unit-pages.csv

@@ -0,0 +1 @@
+review_unit_id,page_id

package/skills/ai-delivery-design-experience/assets/experience-template/prototype-review-units.csv

@@ -0,0 +1 @@
+review_unit_id,unit_kind,target_id,source_ref,checksum,lifecycle_status

package/skills/ai-delivery-design-experience/assets/experience-template/prototype-revision.yaml

@@ -0,0 +1,88 @@
+artifact_id: PROTOTYPE-REVISION-0001
+artifact_type: prototype-revision
+catalog_schema_version: prototype-revision-catalog.v2
+version: 1
+iteration_id: ITER-0001
+status: draft
+prototype_id: PROTOTYPE
+source:
+  ref: prototype/source
+  revision: REPLACE_WITH_IMMUTABLE_SOURCE_REVISION
+  algorithm: sha256-tree-v1
+  checksum: REPLACE_WITH_SHA256
+review_bundle:
+  ref: bundle
+  algorithm: sha256-tree-v1
+  checksum: REPLACE_WITH_SHA256
+review_shell:
+  entrypoint_in_bundle: review-shell/index.html
+  checksum: REPLACE_WITH_SHA256
+visual_standard:
+  ref: visual-system-confirmation.yaml
+  checksum: REPLACE_WITH_SHA256
+review_evidence:
+  ref: formal-ui-confirmation.yaml
+  checksum: REPLACE_WITH_SHA256
+frontend_scope:
+  ref: frontend-change-scope.yaml
+  algorithm: sha256
+  checksum: REPLACE_WITH_SHA256
+catalogs:
+  terminals:
+    ref: catalogs/prototype-terminals.csv
+    algorithm: sha256
+    checksum: REPLACE_WITH_SHA256
+  pages:
+    ref: catalogs/prototype-pages.csv
+    algorithm: sha256
+    checksum: REPLACE_WITH_SHA256
+  review_scenes:
+    ref: catalogs/prototype-review-scenes.csv
+    algorithm: sha256
+    checksum: REPLACE_WITH_SHA256
+  trigger_conditions:
+    ref: catalogs/prototype-trigger-conditions.csv
+    algorithm: sha256
+    checksum: REPLACE_WITH_SHA256
+  routes:
+    ref: catalogs/prototype-routes.csv
+    algorithm: sha256
+    checksum: REPLACE_WITH_SHA256
+  ui_mapping:
+    ref: catalogs/ui-mapping.csv
+    algorithm: sha256
+    checksum: REPLACE_WITH_SHA256
+  review_units:
+    ref: catalogs/prototype-review-units.csv
+    algorithm: sha256
+    checksum: REPLACE_WITH_SHA256
+  review_unit_pages:
+    ref: catalogs/prototype-review-unit-pages.csv
+    algorithm: sha256
+    checksum: REPLACE_WITH_SHA256
+  components:
+    ref: catalogs/prototype-components.csv
+    algorithm: sha256
+    checksum: REPLACE_WITH_SHA256
+  data_contracts:
+    ref: catalogs/prototype-data-contracts.csv
+    algorithm: sha256
+    checksum: REPLACE_WITH_SHA256
+  component_candidates:
+    ref: catalogs/prototype-component-candidates.csv
+    algorithm: sha256
+    checksum: REPLACE_WITH_SHA256
+  component_bindings:
+    ref: catalogs/prototype-component-bindings.csv
+    algorithm: sha256
+    checksum: REPLACE_WITH_SHA256
+  implementation_bindings:
+    ref: catalogs/prototype-implementation-bindings.csv
+    algorithm: sha256
+    checksum: REPLACE_WITH_SHA256
+  source_inspection_snapshots:
+    ref: catalogs/prototype-source-inspection-snapshots.csv
+    algorithm: sha256
+    checksum: REPLACE_WITH_SHA256
+previous_revision: null
+frozen_at: null

package/skills/ai-delivery-design-experience/assets/experience-template/prototype-routes.csv

@@ -0,0 +1 @@
+route_id,terminal_id,route_kind,path,page_id,review_scene_id,lifecycle_status

package/skills/ai-delivery-design-experience/assets/experience-template/prototype-set.yaml

@@ -4,6 +4,8 @@ version: 1
 iteration_id: ITER-0001
 status: draft
 producer_skill: ai-delivery-design-experience
+compatibility_mode: read-only-legacy
+current_flow_output: false
 input_artifacts:
   product_baseline: PRODUCT-BASELINE-0001@1
   architecture_initial: ARCH-INITIAL-0001@1

package/skills/ai-delivery-design-experience/assets/experience-template/prototype-source-inspection-snapshots.csv

@@ -0,0 +1 @@
+source_snapshot_id,asset_kind,page_id,review_scene_id,terminal_id,source_ref,checksum,language,scene_branch,lifecycle_status

package/skills/ai-delivery-design-experience/assets/experience-template/prototype-terminals.csv

@@ -0,0 +1 @@
+terminal_id,terminal_name,source_entrypoint,build_command,review_base_path,production_base_path,compatibility_group,lifecycle_status

package/skills/ai-delivery-design-experience/assets/experience-template/prototype-tool-candidates.csv

@@ -1 +1 @@
-candidate_id,prototype_artifact_id,tool_name,tool_kind,availability,availability_evidence,fit_level,fit_rationale,recommendation_rank
+candidate_id,prototype_id,tool_name,tool_kind,availability,availability_evidence,fit_level,fit_rationale,recommendation_rank

package/skills/ai-delivery-design-experience/assets/experience-template/prototype-tool-selection.yaml

@@ -8,9 +8,8 @@ input_artifacts:
   product_baseline: PRODUCT-BASELINE-0001@1
   architecture_initial: ARCH-INITIAL-0001@1
 standards: []
-prototype_artifact_id: PROTOTYPE-0001
-prototype_version: 1
-candidate_catalog_ref: prototype-tool-candidates-PROTOTYPE-0001.csv
+prototype_id: PROTOTYPE
+candidate_catalog_ref: prototype-tool-candidates.csv
 candidate_catalog_algorithm: sha256
 candidate_catalog_checksum: REPLACE_WITH_SHA256
 decision: pending

package/skills/ai-delivery-design-experience/assets/experience-template/prototype-traceability.csv

@@ -1 +1 @@
-prototype_element_id,prototype_artifact_id,prototype_version,source_revision,prototype_file_id,canvas_id,page_id,feature_id,acceptance_id,terminal_id,flow_id,screen_id,state_id,interaction,coverage_status
+prototype_element_id,prototype_revision_id,source_revision,terminal_id,page_id,review_scene_id,feature_id,acceptance_id,flow_id,state_id,interaction,coverage_status

package/skills/ai-delivery-design-experience/assets/experience-template/prototype-trigger-conditions.csv

@@ -0,0 +1 @@
+trigger_condition_id,trigger_kind,condition,fixture_ref,notes

package/skills/ai-delivery-design-experience/assets/experience-template/prototype.yaml

@@ -0,0 +1,6 @@
+artifact_type: prototype-current
+prototype_id: PROTOTYPE
+status: authoring
+current_source_ref: prototype/source
+current_review_shell_ref: prototype/review-shell
+current_revision_ref: null

package/skills/ai-delivery-design-experience/assets/experience-template/ui-framework-selection.yaml

@@ -5,12 +5,28 @@ iteration_id: ITER-0001
 status: draft
 producer_skill: ai-delivery-design-experience
 architecture_stack_ref: ARCH-INITIAL-0001@1
-low_fidelity_confirmation_ref: LOW-FIDELITY-CONFIRMATION-0001@1
 candidate_catalog_ref: ui-framework-candidates.csv
 candidate_catalog_checksum: REPLACE_WITH_SHA256
+selection_source: null
+architecture_compatibility:
+  react_web: null
+react_web_defaults:
+  component_system: shadcn
+  icon_library: lucide
+  applies_when: architecture supports React Web and the user did not specify alternatives
 selected_candidate_id: null
 selected_framework: null
 selected_version: null
+selected_component_system: null
+selected_component_system_version: null
+selected_icon_library: null
+selected_icon_library_version: null
+component_registry: null
+component_registry_version: null
+component_configuration_ref: null
+component_configuration_checksum: null
+selected_components: []
+local_adaptations: []
 selected_by: null
 selected_at: null
 decision: pending

package/skills/ai-delivery-design-experience/assets/experience-template/ui-handoff.yaml

@@ -6,24 +6,25 @@ status: draft
 producer_skill: ai-delivery-design-experience
 experience_baseline_ref: EXPERIENCE-BASELINE-0001@1.0.0
 experience_baseline_checksum: REPLACE_WITH_SHA256
-prototype_set_ref: PROTOTYPE-SET-0001@1
-prototype_set_checksum: REPLACE_WITH_SHA256
+prototype_revision_ref: PROTOTYPE-REVISION-0001@1
+prototype_revision_checksum: REPLACE_WITH_SHA256
+prototype_confirmation_ref: PROTOTYPE-CONFIRMATION-0001@1
+prototype_confirmation_checksum: REPLACE_WITH_SHA256
 required_gates:
-  low_fidelity_ref: LOW-FIDELITY-CONFIRMATION-0001@1
   visual_system_ref: VISUAL-SYSTEM-CONFIRMATION-0001@1
   formal_ui_ref: FORMAL-UI-CONFIRMATION-0001@1
   product_reconciliation_ref: PRODUCT-PROTOTYPE-RECONCILIATION-0001@1
 required_gate_checksums:
-  low_fidelity: REPLACE_WITH_SHA256
   visual_system: REPLACE_WITH_SHA256
   formal_ui: REPLACE_WITH_SHA256
   product_reconciliation: REPLACE_WITH_SHA256
 required_gate_statuses:
-  low_fidelity: pending
   visual_system: pending
   formal_ui: pending
   product_reconciliation: pending
 artifacts:
+  ui_mapping_ref: ui-mapping.csv
+  ui_mapping_checksum: REPLACE_WITH_SHA256
   interaction_contract_ref: interaction-contract.csv
   interaction_contract_checksum: REPLACE_WITH_SHA256
   design_tokens_ref: design-tokens.json

package/skills/ai-delivery-design-experience/assets/experience-template/ui-mapping.csv

@@ -0,0 +1 @@
+ui_mapping_id,target_kind,target_id,terminal_id,page_id,review_scene_id,prototype_route_id,production_route_id,frontend_source_ref,acceptance_id,lifecycle_status

package/skills/ai-delivery-design-experience/assets/experience-template/visual-direction.yaml

@@ -14,3 +14,7 @@ preferred_directions: []
 excluded_directions: []
 references: []
 rationale: null
+# Optional approved overrides. Omit to use 390x844, 768x1024, 1440x900 and 0.001.
+responsive_breakpoints: []
+ui_acceptance:
+  max_diff_pixel_ratio: 0.001

package/skills/ai-delivery-design-experience/assets/experience-template/visual-reference-manifest.yaml

@@ -0,0 +1,23 @@
+artifact_id: VISUAL-REFERENCE-0001
+artifact_type: visual-reference
+version: 1
+iteration_id: ITER-0001
+status: draft
+producer_skill: ai-delivery-design-experience
+entrypoint: visual-reference.html
+entrypoint_checksum: REPLACE_WITH_SHA256
+design_reference_selection_ref: design-reference-selection.yaml
+design_reference_selection_checksum: REPLACE_WITH_SHA256
+design_tokens_ref: design-tokens.json
+design_tokens_checksum: REPLACE_WITH_SHA256
+component_state_matrix_ref: component-state-matrix.csv
+component_state_matrix_checksum: REPLACE_WITH_SHA256
+required_sections:
+  - tokens
+  - component-states
+  - responsive
+  - accessibility
+interactive: true
+supported_viewports: []
+generated_at: null
+blocking_issues: []

package/skills/ai-delivery-design-experience/assets/experience-template/visual-reference.html

@@ -0,0 +1,163 @@
+<!doctype html>
+<html lang="en" data-theme="light">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Visual Reference</title>
+  <style>
+    :root {
+      color-scheme: light;
+      --canvas: #f7f8fa;
+      --surface: #ffffff;
+      --text: #191c20;
+      --muted: #66707a;
+      --line: #d9dee4;
+      --accent: #13795b;
+      --accent-contrast: #ffffff;
+      --danger: #c9362b;
+      --focus: #1769aa;
+      --radius: 6px;
+    }
+    html[data-theme="dark"] {
+      color-scheme: dark;
+      --canvas: #151719;
+      --surface: #202327;
+      --text: #f3f5f7;
+      --muted: #aab2ba;
+      --line: #3b4148;
+      --accent: #66d4ad;
+      --accent-contrast: #10271f;
+      --danger: #ff8b83;
+      --focus: #78b9ef;
+    }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      background: var(--canvas);
+      color: var(--text);
+      font-family: Inter, ui-sans-serif, system-ui, sans-serif;
+      font-size: 15px;
+      letter-spacing: 0;
+      line-height: 1.5;
+    }
+    button, input { font: inherit; letter-spacing: 0; }
+    button:focus-visible, input:focus-visible {
+      outline: 3px solid var(--focus);
+      outline-offset: 2px;
+    }
+    header { border-bottom: 1px solid var(--line); background: var(--surface); }
+    .bar, main { width: min(1120px, calc(100% - 32px)); margin: 0 auto; }
+    .bar { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
+    h1, h2 { margin: 0; font-weight: 650; }
+    h1 { font-size: 20px; }
+    h2 { font-size: 17px; }
+    main { display: grid; gap: 32px; padding: 32px 0 48px; }
+    section { display: grid; gap: 16px; }
+    .segmented { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); padding: 2px; }
+    .segmented button { border: 0; background: transparent; color: var(--muted); min-height: 36px; padding: 0 12px; border-radius: 4px; }
+    .segmented button[aria-pressed="true"] { background: var(--text); color: var(--surface); }
+    .token-grid, .state-grid, .rule-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
+    .sample { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 16px; min-width: 0; }
+    .swatch { aspect-ratio: 3 / 1; border: 1px solid var(--line); border-radius: 4px; margin-bottom: 10px; background: var(--token-color); }
+    .label { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
+    .control-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
+    .primary, .secondary { min-height: 44px; border-radius: var(--radius); padding: 0 16px; }
+    .primary { border: 1px solid var(--accent); background: var(--accent); color: var(--accent-contrast); }
+    .secondary { border: 1px solid var(--line); background: var(--surface); color: var(--text); }
+    button:disabled { cursor: not-allowed; opacity: .45; }
+    .field { display: grid; gap: 6px; }
+    input { width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text); padding: 0 12px; }
+    .error { color: var(--danger); font-size: 13px; }
+    .viewport-demo { container-type: inline-size; resize: horizontal; overflow: auto; width: 100%; min-width: 280px; max-width: 100%; border: 1px solid var(--line); background: var(--surface); padding: 16px; }
+    .responsive-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
+    @container (max-width: 620px) { .responsive-grid { grid-template-columns: 1fr; } }
+    ul { margin: 0; padding-left: 20px; }
+    [data-density="compact"] main { gap: 20px; padding-top: 20px; }
+    [data-density="compact"] .sample { padding: 12px; }
+    @media (max-width: 720px) {
+      .bar { align-items: flex-start; flex-direction: column; padding: 14px 0; }
+      .token-grid, .state-grid, .rule-grid { grid-template-columns: 1fr 1fr; }
+    }
+    @media (max-width: 420px) { .token-grid, .state-grid, .rule-grid { grid-template-columns: 1fr; } }
+    @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }
+  </style>
+</head>
+<body data-density="comfortable">
+  <header>
+    <div class="bar">
+      <div><h1>Visual Reference</h1><div class="label">VISUAL-REFERENCE-0001</div></div>
+      <div class="control-row">
+        <div class="segmented" aria-label="Theme">
+          <button type="button" data-theme-choice="light" aria-pressed="true">Light</button>
+          <button type="button" data-theme-choice="dark" aria-pressed="false">Dark</button>
+        </div>
+        <div class="segmented" aria-label="Density">
+          <button type="button" data-density-choice="comfortable" aria-pressed="true">Comfortable</button>
+          <button type="button" data-density-choice="compact" aria-pressed="false">Compact</button>
+        </div>
+      </div>
+    </div>
+  </header>
+  <main>
+    <section aria-labelledby="tokens-title">
+      <h2 id="tokens-title">Tokens</h2>
+      <div class="token-grid">
+        <div class="sample" data-token="canvas"><div class="swatch" style="--token-color:var(--canvas)"></div><strong>Canvas</strong><div class="label">--canvas</div></div>
+        <div class="sample" data-token="surface"><div class="swatch" style="--token-color:var(--surface)"></div><strong>Surface</strong><div class="label">--surface</div></div>
+        <div class="sample" data-token="accent"><div class="swatch" style="--token-color:var(--accent)"></div><strong>Accent</strong><div class="label">--accent</div></div>
+        <div class="sample" data-token="danger"><div class="swatch" style="--token-color:var(--danger)"></div><strong>Danger</strong><div class="label">--danger</div></div>
+      </div>
+    </section>
+    <section aria-labelledby="states-title">
+      <h2 id="states-title">Component States</h2>
+      <div class="state-grid">
+        <div class="sample" data-component-state="default"><div class="control-row"><button class="primary" type="button" id="action">Continue</button><button class="secondary" type="button">Cancel</button></div></div>
+        <div class="sample" data-component-state="disabled"><button class="primary" type="button" disabled>Continue</button><div class="label">Disabled</div></div>
+        <div class="sample" data-component-state="input"><label class="field">Workspace name<input value="Design review" aria-describedby="field-help"><span class="label" id="field-help">Visible focus and 44px target</span></label></div>
+        <div class="sample" data-component-state="error"><label class="field">Repository<input value="" aria-invalid="true" aria-describedby="field-error"><span class="error" id="field-error">Repository is required</span></label></div>
+      </div>
+      <div class="label" id="interaction-status" aria-live="polite">Ready</div>
+    </section>
+    <section aria-labelledby="responsive-title">
+      <h2 id="responsive-title">Responsive</h2>
+      <div class="viewport-demo">
+        <div class="responsive-grid">
+          <div class="sample"><strong>Primary</strong><div class="label">Stable priority</div></div>
+          <div class="sample"><strong>Secondary</strong><div class="label">Collapses below 620px</div></div>
+          <div class="sample"><strong>Recovery</strong><div class="label">Remains reachable</div></div>
+        </div>
+      </div>
+    </section>
+    <section aria-labelledby="accessibility-title">
+      <h2 id="accessibility-title">Accessibility</h2>
+      <div class="rule-grid">
+        <div class="sample"><strong>Keyboard</strong><ul><li>Logical order</li><li>Visible focus</li></ul></div>
+        <div class="sample"><strong>Targets</strong><ul><li>44px minimum</li><li>No gesture-only action</li></ul></div>
+        <div class="sample"><strong>Content</strong><ul><li>Text can wrap</li><li>Status is announced</li></ul></div>
+        <div class="sample"><strong>Motion</strong><ul><li>Reduced motion honored</li><li>No required animation</li></ul></div>
+      </div>
+    </section>
+  </main>
+  <script>
+    const setPressed = (selector, value, attribute, target) => {
+      document.querySelectorAll(selector).forEach((button) => {
+        button.setAttribute("aria-pressed", String(button.getAttribute(attribute) === value));
+      });
+      target(value);
+    };
+    document.querySelectorAll("[data-theme-choice]").forEach((button) => button.addEventListener("click", () => {
+      setPressed("[data-theme-choice]", button.dataset.themeChoice, "data-theme-choice", (value) => {
+        document.documentElement.dataset.theme = value;
+      });
+    }));
+    document.querySelectorAll("[data-density-choice]").forEach((button) => button.addEventListener("click", () => {
+      setPressed("[data-density-choice]", button.dataset.densityChoice, "data-density-choice", (value) => {
+        document.body.dataset.density = value;
+      });
+    }));
+    document.querySelector("#action").addEventListener("click", () => {
+      document.querySelector("#interaction-status").textContent = "Primary action completed";
+    });
+  </script>
+</body>
+</html>

package/skills/ai-delivery-design-experience/assets/experience-template/visual-system-confirmation.yaml

@@ -6,12 +6,22 @@ status: pending
 producer_skill: ai-delivery-design-experience
 visual_direction_ref: visual-direction.yaml
 visual_direction_checksum: REPLACE_WITH_SHA256
+design_reference_selection_ref: design-reference-selection.yaml
+design_reference_selection_checksum: REPLACE_WITH_SHA256
+visual_reference_manifest_ref: visual-reference-manifest.yaml
+visual_reference_manifest_checksum: REPLACE_WITH_SHA256
+visual_reference_ref: visual-reference.html
+visual_reference_checksum: REPLACE_WITH_SHA256
 design_tokens_ref: design-tokens.json
 design_tokens_checksum: REPLACE_WITH_SHA256
 ui_framework_selection_ref: ui-framework-selection.yaml
 ui_framework_selection_checksum: REPLACE_WITH_SHA256
 component_state_matrix_ref: component-state-matrix.csv
 component_state_matrix_checksum: REPLACE_WITH_SHA256
+component_system: null
+icon_library: null
+# Entries use scope: project for ref/ui inputs and scope: experience for generated UX-VS inputs.
+design_input_checksums: []
 checks:
   product_fit: pending
   typography: pending
@@ -26,6 +36,7 @@ human_approval:
   approver: null
   decided_at: null
   decision: pending
+approval_expires_at: null
 decision: pending
 blocking_issues: []
 evidence: []