npm - owflow - Versions diffs - 0.6.0 → 0.7.0 - Mend

owflow 0.6.0 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (195) hide show

package/LICENSE +21 -21
package/README.md +448 -283
package/dist/agents/bottleneck-analyzer.md +332 -333
package/dist/agents/code-quality-pragmatist.md +353 -354
package/dist/agents/code-reviewer.md +238 -239
package/dist/agents/codebase-analysis-reporter.md +245 -246
package/dist/agents/docs-operator.md +22 -23
package/dist/agents/e2e-test-verifier.md +447 -448
package/dist/agents/gap-analyzer.md +501 -502
package/dist/agents/implementation-completeness-checker.md +219 -220
package/dist/agents/implementation-planner.md +308 -309
package/dist/agents/information-gatherer.md +690 -691
package/dist/agents/production-readiness-checker.md +278 -279
package/dist/agents/project-analyzer.md +403 -403
package/dist/agents/reality-assessor.md +365 -366
package/dist/agents/research-planner.md +449 -450
package/dist/agents/research-synthesizer.md +402 -403
package/dist/agents/solution-brainstormer.md +256 -257
package/dist/agents/solution-designer.md +371 -372
package/dist/agents/spec-auditor.md +297 -298
package/dist/agents/specification-creator.md +333 -334
package/dist/agents/task-classifier.md +449 -450
package/dist/agents/task-group-implementer.md +283 -284
package/dist/agents/test-suite-runner.md +194 -195
package/dist/agents/user-docs-generator.md +508 -509
package/dist/commands/reviews-code.md +90 -90
package/dist/commands/reviews-pragmatic.md +99 -99
package/dist/commands/reviews-production-readiness.md +113 -113
package/dist/commands/reviews-reality-check.md +110 -110
package/dist/commands/reviews-spec-audit.md +114 -114
package/dist/commands/work.md +280 -280
package/dist/configuration/agents-config.d.ts +2 -0
package/dist/configuration/agents-config.js +8 -44
package/dist/configuration/commands-config.d.ts +23 -0
package/dist/configuration/commands-config.js +17 -17
package/dist/configuration/skills-config.d.ts +2 -0
package/dist/configuration/skills-config.js +3 -3
package/dist/hooks/hooks-diagnostics.d.ts +3 -0
package/dist/hooks/hooks-diagnostics.js +21 -0
package/dist/hooks/hooks-persistence.d.ts +17 -0
package/dist/hooks/hooks-persistence.js +207 -0
package/dist/hooks/hooks-registry.d.ts +6 -0
package/dist/hooks/hooks-registry.js +104 -0
package/dist/hooks/hooks-wrapper.d.ts +25 -0
package/dist/hooks/hooks-wrapper.js +318 -0
package/dist/hooks/internal/before-tool.d.ts +6 -0
package/dist/hooks/internal/before-tool.js +13 -0
package/dist/hooks/internal/session-compaction.d.ts +9 -0
package/dist/hooks/{session-compaction.js → internal/session-compaction.js} +9 -7
package/dist/hooks/runtime/circuit-breaker.d.ts +23 -0
package/dist/hooks/runtime/circuit-breaker.js +39 -0
package/dist/hooks/runtime/failure-policy.d.ts +15 -0
package/dist/hooks/runtime/failure-policy.js +49 -0
package/dist/hooks/runtime/process-executor.d.ts +33 -0
package/dist/hooks/runtime/process-executor.js +147 -0
package/dist/hooks/runtime/status-recorder.d.ts +27 -0
package/dist/hooks/runtime/status-recorder.js +111 -0
package/dist/index.d.ts +7 -0
package/dist/index.js +111 -40
package/dist/skills/agents-md-generator/SKILL.md +223 -223
package/dist/skills/codebase-analyzer/SKILL.md +162 -162
package/dist/skills/codebase-analyzer/references/code-analysis.md +63 -63
package/dist/skills/codebase-analyzer/references/combined.md +31 -31
package/dist/skills/codebase-analyzer/references/context-discovery.md +63 -63
package/dist/skills/codebase-analyzer/references/file-discovery.md +51 -51
package/dist/skills/codebase-analyzer/references/migration-target.md +23 -23
package/dist/skills/codebase-analyzer/references/pattern-mining.md +22 -22
package/dist/skills/dev-analyze/SKILL.md +115 -115
package/dist/skills/dev-bugfix/SKILL.md +452 -452
package/dist/skills/dev-finalize/SKILL.md +118 -118
package/dist/skills/dev-implement/SKILL.md +167 -167
package/dist/skills/dev-plan/SKILL.md +147 -147
package/dist/skills/dev-spec/SKILL.md +182 -182
package/dist/skills/dev-tdd-red/SKILL.md +94 -94
package/dist/skills/dev-verify/SKILL.md +153 -153
package/dist/skills/development/SKILL.md +260 -260
package/dist/skills/diagrams-mermaid/SKILL.md +183 -159
package/dist/skills/diagrams-mermaid/references/reference.md +220 -148
package/dist/skills/docs-manager/SKILL.md +379 -379
package/dist/skills/docs-manager/docs/INDEX.md +199 -199
package/dist/skills/docs-manager/docs/standards/backend/api.md +25 -25
package/dist/skills/docs-manager/docs/standards/backend/migrations.md +22 -22
package/dist/skills/docs-manager/docs/standards/backend/models.md +25 -25
package/dist/skills/docs-manager/docs/standards/backend/queries.md +22 -22
package/dist/skills/docs-manager/docs/standards/frontend/accessibility.md +25 -25
package/dist/skills/docs-manager/docs/standards/frontend/components.md +28 -28
package/dist/skills/docs-manager/docs/standards/frontend/css.md +16 -16
package/dist/skills/docs-manager/docs/standards/frontend/responsive.md +28 -28
package/dist/skills/docs-manager/docs/standards/global/coding-style.md +25 -25
package/dist/skills/docs-manager/docs/standards/global/commenting.md +10 -10
package/dist/skills/docs-manager/docs/standards/global/conventions.md +31 -31
package/dist/skills/docs-manager/docs/standards/global/error-handling.md +22 -22
package/dist/skills/docs-manager/docs/standards/global/minimal-implementation.md +22 -22
package/dist/skills/docs-manager/docs/standards/global/validation.md +28 -28
package/dist/skills/docs-manager/docs/standards/testing/test-writing.md +25 -25
package/dist/skills/docs-manager/references/agents-md-template.md +29 -29
package/dist/skills/docs-manager/references/index-md-template.md +73 -73
package/dist/skills/flow-init/SKILL.md +234 -234
package/dist/skills/flow-init/references/architecture-template.md +45 -45
package/dist/skills/flow-init/references/roadmap-templates.md +93 -93
package/dist/skills/flow-init/references/tech-stack-template.md +70 -70
package/dist/skills/flow-init/references/vision-templates.md +75 -75
package/dist/skills/goal-development/SKILL.md +96 -96
package/dist/skills/goal-migration/SKILL.md +114 -114
package/dist/skills/goal-performance/SKILL.md +126 -126
package/dist/skills/goal-research/SKILL.md +118 -118
package/dist/skills/html-renderer/SKILL.md +173 -173
package/dist/skills/html-renderer/references/index.html +318 -318
package/dist/skills/html-renderer/references/styles.css +388 -388
package/dist/skills/html-renderer/references/tokens.json +104 -104
package/dist/skills/implementation-plan-executor/SKILL.md +378 -378
package/dist/skills/implementation-verifier/SKILL.md +307 -307
package/dist/skills/migration/SKILL.md +268 -268
package/dist/skills/migration-analyze/SKILL.md +126 -126
package/dist/skills/migration-finalize/SKILL.md +161 -161
package/dist/skills/migration-fix/SKILL.md +155 -155
package/dist/skills/migration-implement/SKILL.md +131 -131
package/dist/skills/migration-plan/SKILL.md +131 -131
package/dist/skills/migration-spec/SKILL.md +135 -135
package/dist/skills/migration-spec/references/migration-strategies.md +430 -430
package/dist/skills/migration-target/SKILL.md +134 -134
package/dist/skills/migration-target/references/migration-types.md +489 -489
package/dist/skills/migration-verify/SKILL.md +184 -184
package/dist/skills/orchestrator-framework/SKILL.md +65 -65
package/dist/skills/orchestrator-framework/references/command-namespacing.md +7 -7
package/dist/skills/orchestrator-framework/references/confirm-or-revise-exception.md +20 -20
package/dist/skills/orchestrator-framework/references/delegation-rules.md +54 -54
package/dist/skills/orchestrator-framework/references/dispatcher-handoff.md +27 -27
package/dist/skills/orchestrator-framework/references/fix-loop-contract.md +65 -65
package/dist/skills/orchestrator-framework/references/gate-contract.md +122 -122
package/dist/skills/orchestrator-framework/references/orchestrator-creation-checklist.md +51 -51
package/dist/skills/orchestrator-framework/references/orchestrator-patterns.md +235 -235
package/dist/skills/performance/SKILL.md +267 -267
package/dist/skills/performance-analyze/SKILL.md +129 -129
package/dist/skills/performance-analyze/references/performance-optimization-guide.md +271 -271
package/dist/skills/performance-finalize/SKILL.md +117 -117
package/dist/skills/performance-implement/SKILL.md +114 -114
package/dist/skills/performance-plan/SKILL.md +112 -112
package/dist/skills/performance-spec/SKILL.md +145 -145
package/dist/skills/performance-verify/SKILL.md +164 -164
package/dist/skills/research/SKILL.md +249 -249
package/dist/skills/research-brainstorm/SKILL.md +120 -120
package/dist/skills/research-brainstorm/references/brainstorming-techniques.md +84 -84
package/dist/skills/research-converge/SKILL.md +130 -130
package/dist/skills/research-design/SKILL.md +146 -146
package/dist/skills/research-design/references/design-techniques.md +40 -40
package/dist/skills/research-finalize/SKILL.md +125 -125
package/dist/skills/research-fork/SKILL.md +190 -190
package/dist/skills/research-gather/SKILL.md +133 -133
package/dist/skills/research-plan/SKILL.md +141 -141
package/dist/skills/research-plan/references/research-methodologies.md +710 -710
package/dist/skills/research-quick/SKILL.md +139 -139
package/dist/skills/research-synthesize/SKILL.md +127 -127
package/dist/skills/rule-reviewer/SKILL.md +334 -334
package/dist/skills/standards-discover/SKILL.md +260 -260
package/dist/skills/standards-discover/references/aggregation-strategy.md +76 -76
package/dist/skills/standards-discover/references/code-pattern-prompt.md +68 -68
package/dist/skills/standards-discover/references/config-analyzer-prompt.md +67 -67
package/dist/skills/standards-discover/references/docs-extractor-prompt.md +65 -65
package/dist/skills/standards-discover/references/external-analyzer-prompt.md +75 -75
package/dist/skills/standards-update/SKILL.md +207 -207
package/dist/templates/orchestrator-state-base.yml +17 -17
package/dist/templates/orchestrator-state-development.yml +95 -95
package/dist/templates/orchestrator-state-migration.yml +95 -95
package/dist/templates/orchestrator-state-performance.yml +64 -64
package/dist/templates/orchestrator-state-research.yml +67 -67
package/dist/tools/fork_task.d.ts +17 -0
package/dist/tools/fork_task.js +21 -11
package/dist/tools/verify_template.d.ts +11 -0
package/dist/tools/verify_template.js +32 -17
package/dist/tui/hooks-dialogs.d.ts +20 -0
package/dist/tui/hooks-dialogs.js +181 -0
package/dist/tui/hooks-presenter.d.ts +15 -0
package/dist/tui/hooks-presenter.js +70 -0
package/dist/tui/hooks-sidebar.d.ts +10 -0
package/dist/tui/hooks-sidebar.js +104 -0
package/dist/tui/primitives.d.ts +21 -0
package/dist/tui/primitives.js +47 -0
package/dist/tui.d.ts +12 -0
package/dist/tui.js +129 -0
package/dist/types/hook-types.d.ts +125 -0
package/dist/types/hook-types.js +76 -0
package/dist/types/opencode-types.d.ts +13 -0
package/dist/utils/file-util.d.ts +2 -0
package/dist/utils/file-util.js +6 -6
package/dist/utils/fork-task.d.ts +27 -0
package/dist/utils/fork-task.js +18 -23
package/dist/utils/plugin-info.d.ts +3 -0
package/dist/utils/plugin-info.js +8 -10
package/dist/utils/workflow-paths.d.ts +17 -0
package/dist/utils/workflow-paths.js +18 -0
package/dist/utils/yaml-structure.d.ts +7 -0
package/dist/utils/yaml-structure.js +7 -11
package/package.json +68 -48
package/dist/hooks/before-tool.js +0 -19

package/dist/skills/html-renderer/references/index.html CHANGED Viewed

@@ -1,318 +1,318 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>HTML Renderer Reference</title>
-    <link rel="stylesheet" href="./styles.css" />
-  </head>
-  <body>
-    <main class="hr-page">
-      <section class="hr-section hr-stack">
-        <span class="hr-heading-eyebrow">Reference Base</span>
-        <h1 class="hr-heading-h1">Warm editorial HTML component reference</h1>
-        <p class="hr-text-muted">
-          This page demonstrates all required building blocks for markdown to
-          HTML output.
-        </p>
-      </section>
-      <section class="hr-section hr-stack">
-        <h2 class="hr-heading-h2">Heading scale</h2>
-        <h1 class="hr-heading-h1">H1 Display Headline</h1>
-        <h2 class="hr-heading-h2">H2 Section Headline</h2>
-        <h3 class="hr-heading-h3">H3 Subsection Headline</h3>
-        <h4 class="hr-heading-h4">H4 Utility Headline</h4>
-      </section>
-      <section class="hr-section hr-stack">
-        <h2 class="hr-heading-h2">Text block</h2>
-        <div class="hr-text-block hr-stack">
-          <p>
-            Text blocks should carry the main narrative, with generous line
-            height and warm contrast against the canvas.
-          </p>
-          <p>
-            Lists remain simple and semantic, while styles stay tied to global
-            tokens.
-          </p>
-          <ul>
-            <li>Use one visual rhythm across all paragraphs.</li>
-            <li>Keep spacing and emphasis token-based.</li>
-            <li>Avoid local one-off colors in content blocks.</li>
-          </ul>
-        </div>
-      </section>
-      <section class="hr-section hr-stack">
-        <h2 class="hr-heading-h2">Cards</h2>
-        <div class="hr-grid">
-          <article class="hr-card">
-            <h3 class="hr-card-title">Default content card</h3>
-            <p class="hr-card-text">
-              Standard container for summaries, supporting notes, and grouped
-              metadata.
-            </p>
-            <span class="hr-badge">Default</span>
-          </article>
-          <article class="hr-card hr-card-featured">
-            <h3 class="hr-card-title">Featured surface card</h3>
-            <p class="hr-card-text">
-              High-emphasis card for key outcomes, strategic calls to action,
-              or highlighted analysis.
-            </p>
-            <span class="hr-badge">Priority</span>
-          </article>
-        </div>
-      </section>
-      <section class="hr-section hr-stack">
-        <h2 class="hr-heading-h2">Table</h2>
-        <div class="hr-table-wrap">
-          <table class="hr-table">
-            <thead>
-              <tr>
-                <th>Element</th>
-                <th>Purpose</th>
-                <th>Main token group</th>
-                <th>Priority</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>Card</td>
-                <td>Grouped content blocks</td>
-                <td>surface + radius + spacing</td>
-                <td>High</td>
-              </tr>
-              <tr>
-                <td>Quote</td>
-                <td>Context and citations</td>
-                <td>primary + display typography</td>
-                <td>Medium</td>
-              </tr>
-              <tr>
-                <td>Highlight</td>
-                <td>Important callouts</td>
-                <td>semantic + border accent</td>
-                <td>High</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </section>
-      <section class="hr-section hr-stack">
-        <h2 class="hr-heading-h2">Diagram container</h2>
-        <h3 class="hr-heading-h3">Flowchart</h3>
-        <div class="hr-diagram">
-          <div class="mermaid">
-flowchart TD
-  markdownInput[MarkdownInput] --> semanticParse[SemanticParse]
-  semanticParse --> componentSelect[ComponentSelect]
-  componentSelect --> tokenBind[TokenBinding]
-  tokenBind --> htmlOutput[HtmlOutput]
-          </div>
-        </div>
-        <h3 class="hr-heading-h3">Sequence diagram</h3>
-        <div class="hr-diagram">
-          <div class="mermaid">
-sequenceDiagram
-  participant U as User
-  participant CLI as Copilot CLI
-  participant S as html-renderer skill
-  participant FS as Filesystem
-  U->>CLI: render notes.md
-  CLI->>S: invoke skill
-  S->>FS: read notes.md + references/
-  S->>FS: write notes.html
-  S-->>CLI: done
-  CLI-->>U: open notes.html
-          </div>
-        </div>
-        <h3 class="hr-heading-h3">State diagram</h3>
-        <div class="hr-diagram">
-          <div class="mermaid">
-stateDiagram-v2
-  [*] --> Draft
-  Draft --> Review: submit
-  Review --> Draft: request changes
-  Review --> Approved: accept
-  Approved --> Published: publish
-  Published --> [*]
-          </div>
-        </div>
-        <h3 class="hr-heading-h3">Entity relationship</h3>
-        <div class="hr-diagram">
-          <div class="mermaid">
-erDiagram
-  AUTHOR ||--o{ DOCUMENT : writes
-  DOCUMENT ||--|{ SECTION : contains
-  SECTION ||--o{ BLOCK : contains
-  AUTHOR {
-    string id PK
-    string name
-  }
-  DOCUMENT {
-    string id PK
-    string title
-    string authorId FK
-  }
-          </div>
-        </div>
-      </section>
-      <section class="hr-section hr-stack">
-        <h2 class="hr-heading-h2">Grid templates</h2>
-        <h3 class="hr-heading-h3">Two columns</h3>
-        <div class="hr-grid hr-grid-2">
-          <article class="hr-card">
-            <h3 class="hr-card-title">Left column</h3>
-            <p class="hr-card-text">Equal-width cells. Good for compare/contrast pairs.</p>
-          </article>
-          <article class="hr-card">
-            <h3 class="hr-card-title">Right column</h3>
-            <p class="hr-card-text">Stacks to a single column under 720px.</p>
-          </article>
-        </div>
-        <h3 class="hr-heading-h3">Three columns</h3>
-        <div class="hr-grid hr-grid-3">
-          <article class="hr-card">
-            <h3 class="hr-card-title">Discover</h3>
-            <p class="hr-card-text">Frame the problem and surface signals.</p>
-          </article>
-          <article class="hr-card">
-            <h3 class="hr-card-title">Decide</h3>
-            <p class="hr-card-text">Pick an approach with a clear rationale.</p>
-          </article>
-          <article class="hr-card">
-            <h3 class="hr-card-title">Deliver</h3>
-            <p class="hr-card-text">Ship in small, verifiable steps.</p>
-          </article>
-        </div>
-        <h3 class="hr-heading-h3">Four columns</h3>
-        <div class="hr-grid hr-grid-4">
-          <article class="hr-card">
-            <h3 class="hr-card-title">Spec</h3>
-            <p class="hr-card-text">Define what success looks like.</p>
-          </article>
-          <article class="hr-card">
-            <h3 class="hr-card-title">Plan</h3>
-            <p class="hr-card-text">Sequence the work into task groups.</p>
-          </article>
-          <article class="hr-card">
-            <h3 class="hr-card-title">Build</h3>
-            <p class="hr-card-text">Implement against the plan.</p>
-          </article>
-          <article class="hr-card">
-            <h3 class="hr-card-title">Verify</h3>
-            <p class="hr-card-text">Prove the outcome with tests.</p>
-          </article>
-        </div>
-        <h3 class="hr-heading-h3">Featured + supporting (2 / 1)</h3>
-        <div class="hr-grid hr-grid-feature">
-          <article class="hr-card hr-card-featured">
-            <h3 class="hr-card-title">Primary outcome</h3>
-            <p class="hr-card-text">
-              A wide, high-emphasis card that anchors the section while the
-              two narrow cards carry supporting detail.
-            </p>
-            <span class="hr-badge">Priority</span>
-          </article>
-          <article class="hr-card">
-            <h3 class="hr-card-title">Supporting note</h3>
-            <p class="hr-card-text">Context that complements the primary outcome.</p>
-          </article>
-          <article class="hr-card">
-            <h3 class="hr-card-title">Supporting note</h3>
-            <p class="hr-card-text">Additional context, kept secondary.</p>
-          </article>
-        </div>
-        <h3 class="hr-heading-h3">Content + sidebar</h3>
-        <div class="hr-grid hr-grid-sidebar">
-          <article class="hr-card">
-            <h3 class="hr-card-title">Main content</h3>
-            <p class="hr-card-text">
-              A wider primary cell paired with a narrower companion. Use for
-              feature descriptions with quick-reference metadata to the side.
-            </p>
-          </article>
-          <aside class="hr-card">
-            <h3 class="hr-card-title">At a glance</h3>
-            <p class="hr-card-text">Status, owner, last update, links.</p>
-            <span class="hr-badge">Meta</span>
-          </aside>
-        </div>
-        <h3 class="hr-heading-h3">Auto-fit (default)</h3>
-        <div class="hr-grid">
-          <article class="hr-card">
-            <h3 class="hr-card-title">Auto-fit cell</h3>
-            <p class="hr-card-text">Reflows from 1 to N columns based on viewport width.</p>
-          </article>
-          <article class="hr-card">
-            <h3 class="hr-card-title">Auto-fit cell</h3>
-            <p class="hr-card-text">Each cell respects a 260px minimum.</p>
-          </article>
-          <article class="hr-card">
-            <h3 class="hr-card-title">Auto-fit cell</h3>
-            <p class="hr-card-text">Best default when card count is unknown.</p>
-          </article>
-        </div>
-      </section>
-      <section class="hr-section hr-stack">
-        <h2 class="hr-heading-h2">Quote</h2>
-        <blockquote class="hr-quote">
-          <p>
-            Great readability comes from predictable rhythm, not from visual
-            noise.
-          </p>
-          <footer>Design rule for long-form interface blocks</footer>
-        </blockquote>
-      </section>
-      <section class="hr-section hr-stack">
-        <h2 class="hr-heading-h2">Important highlights</h2>
-        <aside class="hr-highlight hr-highlight-note">
-          <p class="hr-highlight-title">Note</p>
-          <p>
-            Use this variant for neutral guidance and implementation tips.
-          </p>
-        </aside>
-        <aside class="hr-highlight hr-highlight-warning">
-          <p class="hr-highlight-title">Warning</p>
-          <p>
-            Use this variant for constraints that may break consistency or
-            accessibility.
-          </p>
-        </aside>
-        <aside class="hr-highlight hr-highlight-important">
-          <p class="hr-highlight-title">Important</p>
-          <p>
-            Use this variant for decisions that affect rendering output and
-            shared conventions.
-          </p>
-        </aside>
-      </section>
-    </main>
-    <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
-    <script>
-      window.mermaid &&
-        mermaid.initialize({ startOnLoad: true, theme: "neutral", securityLevel: "loose" });
-    </script>
-  </body>
-</html>
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>HTML Renderer Reference</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main class="hr-page">
+      <section class="hr-section hr-stack">
+        <span class="hr-heading-eyebrow">Reference Base</span>
+        <h1 class="hr-heading-h1">Warm editorial HTML component reference</h1>
+        <p class="hr-text-muted">
+          This page demonstrates all required building blocks for markdown to
+          HTML output.
+        </p>
+      </section>
+      <section class="hr-section hr-stack">
+        <h2 class="hr-heading-h2">Heading scale</h2>
+        <h1 class="hr-heading-h1">H1 Display Headline</h1>
+        <h2 class="hr-heading-h2">H2 Section Headline</h2>
+        <h3 class="hr-heading-h3">H3 Subsection Headline</h3>
+        <h4 class="hr-heading-h4">H4 Utility Headline</h4>
+      </section>
+      <section class="hr-section hr-stack">
+        <h2 class="hr-heading-h2">Text block</h2>
+        <div class="hr-text-block hr-stack">
+          <p>
+            Text blocks should carry the main narrative, with generous line
+            height and warm contrast against the canvas.
+          </p>
+          <p>
+            Lists remain simple and semantic, while styles stay tied to global
+            tokens.
+          </p>
+          <ul>
+            <li>Use one visual rhythm across all paragraphs.</li>
+            <li>Keep spacing and emphasis token-based.</li>
+            <li>Avoid local one-off colors in content blocks.</li>
+          </ul>
+        </div>
+      </section>
+      <section class="hr-section hr-stack">
+        <h2 class="hr-heading-h2">Cards</h2>
+        <div class="hr-grid">
+          <article class="hr-card">
+            <h3 class="hr-card-title">Default content card</h3>
+            <p class="hr-card-text">
+              Standard container for summaries, supporting notes, and grouped
+              metadata.
+            </p>
+            <span class="hr-badge">Default</span>
+          </article>
+          <article class="hr-card hr-card-featured">
+            <h3 class="hr-card-title">Featured surface card</h3>
+            <p class="hr-card-text">
+              High-emphasis card for key outcomes, strategic calls to action,
+              or highlighted analysis.
+            </p>
+            <span class="hr-badge">Priority</span>
+          </article>
+        </div>
+      </section>
+      <section class="hr-section hr-stack">
+        <h2 class="hr-heading-h2">Table</h2>
+        <div class="hr-table-wrap">
+          <table class="hr-table">
+            <thead>
+              <tr>
+                <th>Element</th>
+                <th>Purpose</th>
+                <th>Main token group</th>
+                <th>Priority</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>Card</td>
+                <td>Grouped content blocks</td>
+                <td>surface + radius + spacing</td>
+                <td>High</td>
+              </tr>
+              <tr>
+                <td>Quote</td>
+                <td>Context and citations</td>
+                <td>primary + display typography</td>
+                <td>Medium</td>
+              </tr>
+              <tr>
+                <td>Highlight</td>
+                <td>Important callouts</td>
+                <td>semantic + border accent</td>
+                <td>High</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+      <section class="hr-section hr-stack">
+        <h2 class="hr-heading-h2">Diagram container</h2>
+        <h3 class="hr-heading-h3">Flowchart</h3>
+        <div class="hr-diagram">
+          <div class="mermaid">
+flowchart TD
+  markdownInput[MarkdownInput] --> semanticParse[SemanticParse]
+  semanticParse --> componentSelect[ComponentSelect]
+  componentSelect --> tokenBind[TokenBinding]
+  tokenBind --> htmlOutput[HtmlOutput]
+          </div>
+        </div>
+        <h3 class="hr-heading-h3">Sequence diagram</h3>
+        <div class="hr-diagram">
+          <div class="mermaid">
+sequenceDiagram
+  participant U as User
+  participant CLI as Copilot CLI
+  participant S as html-renderer skill
+  participant FS as Filesystem
+  U->>CLI: render notes.md
+  CLI->>S: invoke skill
+  S->>FS: read notes.md + references/
+  S->>FS: write notes.html
+  S-->>CLI: done
+  CLI-->>U: open notes.html
+          </div>
+        </div>
+        <h3 class="hr-heading-h3">State diagram</h3>
+        <div class="hr-diagram">
+          <div class="mermaid">
+stateDiagram-v2
+  [*] --> Draft
+  Draft --> Review: submit
+  Review --> Draft: request changes
+  Review --> Approved: accept
+  Approved --> Published: publish
+  Published --> [*]
+          </div>
+        </div>
+        <h3 class="hr-heading-h3">Entity relationship</h3>
+        <div class="hr-diagram">
+          <div class="mermaid">
+erDiagram
+  AUTHOR ||--o{ DOCUMENT : writes
+  DOCUMENT ||--|{ SECTION : contains
+  SECTION ||--o{ BLOCK : contains
+  AUTHOR {
+    string id PK
+    string name
+  }
+  DOCUMENT {
+    string id PK
+    string title
+    string authorId FK
+  }
+          </div>
+        </div>
+      </section>
+      <section class="hr-section hr-stack">
+        <h2 class="hr-heading-h2">Grid templates</h2>
+        <h3 class="hr-heading-h3">Two columns</h3>
+        <div class="hr-grid hr-grid-2">
+          <article class="hr-card">
+            <h3 class="hr-card-title">Left column</h3>
+            <p class="hr-card-text">Equal-width cells. Good for compare/contrast pairs.</p>
+          </article>
+          <article class="hr-card">
+            <h3 class="hr-card-title">Right column</h3>
+            <p class="hr-card-text">Stacks to a single column under 720px.</p>
+          </article>
+        </div>
+        <h3 class="hr-heading-h3">Three columns</h3>
+        <div class="hr-grid hr-grid-3">
+          <article class="hr-card">
+            <h3 class="hr-card-title">Discover</h3>
+            <p class="hr-card-text">Frame the problem and surface signals.</p>
+          </article>
+          <article class="hr-card">
+            <h3 class="hr-card-title">Decide</h3>
+            <p class="hr-card-text">Pick an approach with a clear rationale.</p>
+          </article>
+          <article class="hr-card">
+            <h3 class="hr-card-title">Deliver</h3>
+            <p class="hr-card-text">Ship in small, verifiable steps.</p>
+          </article>
+        </div>
+        <h3 class="hr-heading-h3">Four columns</h3>
+        <div class="hr-grid hr-grid-4">
+          <article class="hr-card">
+            <h3 class="hr-card-title">Spec</h3>
+            <p class="hr-card-text">Define what success looks like.</p>
+          </article>
+          <article class="hr-card">
+            <h3 class="hr-card-title">Plan</h3>
+            <p class="hr-card-text">Sequence the work into task groups.</p>
+          </article>
+          <article class="hr-card">
+            <h3 class="hr-card-title">Build</h3>
+            <p class="hr-card-text">Implement against the plan.</p>
+          </article>
+          <article class="hr-card">
+            <h3 class="hr-card-title">Verify</h3>
+            <p class="hr-card-text">Prove the outcome with tests.</p>
+          </article>
+        </div>
+        <h3 class="hr-heading-h3">Featured + supporting (2 / 1)</h3>
+        <div class="hr-grid hr-grid-feature">
+          <article class="hr-card hr-card-featured">
+            <h3 class="hr-card-title">Primary outcome</h3>
+            <p class="hr-card-text">
+              A wide, high-emphasis card that anchors the section while the
+              two narrow cards carry supporting detail.
+            </p>
+            <span class="hr-badge">Priority</span>
+          </article>
+          <article class="hr-card">
+            <h3 class="hr-card-title">Supporting note</h3>
+            <p class="hr-card-text">Context that complements the primary outcome.</p>
+          </article>
+          <article class="hr-card">
+            <h3 class="hr-card-title">Supporting note</h3>
+            <p class="hr-card-text">Additional context, kept secondary.</p>
+          </article>
+        </div>
+        <h3 class="hr-heading-h3">Content + sidebar</h3>
+        <div class="hr-grid hr-grid-sidebar">
+          <article class="hr-card">
+            <h3 class="hr-card-title">Main content</h3>
+            <p class="hr-card-text">
+              A wider primary cell paired with a narrower companion. Use for
+              feature descriptions with quick-reference metadata to the side.
+            </p>
+          </article>
+          <aside class="hr-card">
+            <h3 class="hr-card-title">At a glance</h3>
+            <p class="hr-card-text">Status, owner, last update, links.</p>
+            <span class="hr-badge">Meta</span>
+          </aside>
+        </div>
+        <h3 class="hr-heading-h3">Auto-fit (default)</h3>
+        <div class="hr-grid">
+          <article class="hr-card">
+            <h3 class="hr-card-title">Auto-fit cell</h3>
+            <p class="hr-card-text">Reflows from 1 to N columns based on viewport width.</p>
+          </article>
+          <article class="hr-card">
+            <h3 class="hr-card-title">Auto-fit cell</h3>
+            <p class="hr-card-text">Each cell respects a 260px minimum.</p>
+          </article>
+          <article class="hr-card">
+            <h3 class="hr-card-title">Auto-fit cell</h3>
+            <p class="hr-card-text">Best default when card count is unknown.</p>
+          </article>
+        </div>
+      </section>
+      <section class="hr-section hr-stack">
+        <h2 class="hr-heading-h2">Quote</h2>
+        <blockquote class="hr-quote">
+          <p>
+            Great readability comes from predictable rhythm, not from visual
+            noise.
+          </p>
+          <footer>Design rule for long-form interface blocks</footer>
+        </blockquote>
+      </section>
+      <section class="hr-section hr-stack">
+        <h2 class="hr-heading-h2">Important highlights</h2>
+        <aside class="hr-highlight hr-highlight-note">
+          <p class="hr-highlight-title">Note</p>
+          <p>
+            Use this variant for neutral guidance and implementation tips.
+          </p>
+        </aside>
+        <aside class="hr-highlight hr-highlight-warning">
+          <p class="hr-highlight-title">Warning</p>
+          <p>
+            Use this variant for constraints that may break consistency or
+            accessibility.
+          </p>
+        </aside>
+        <aside class="hr-highlight hr-highlight-important">
+          <p class="hr-highlight-title">Important</p>
+          <p>
+            Use this variant for decisions that affect rendering output and
+            shared conventions.
+          </p>
+        </aside>
+      </section>
+    </main>
+    <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
+    <script>
+      window.mermaid &&
+        mermaid.initialize({ startOnLoad: true, theme: "neutral", securityLevel: "loose" });
+    </script>
+  </body>
+</html>