howone 0.1.28 → 0.1.30

package/templates/vite/.howone/skills/hallmark/site/_tests/04-meridian-manifesto/style.css

@@ -1,262 +0,0 @@
-/* Hallmark · macrostructure: Quote-Led · H3 hero knobs: weight=display-condensed-bold, attribution=under-quote, length=20-words
- * theme: Brutal · accent: strike-yellow ~3% (used as bleed-rule + one struck word)
- * enrichment: none (typography only — voice is the design)
- * studied: no · context: partial, inferred (audience + use) · v0.6.0
- */
-
-:root {
-  --color-paper: oklch(11% 0.005 60);
-  --color-paper-2: oklch(15% 0.006 60);
-  --color-rule: oklch(28% 0.006 60);
-  --color-ink: oklch(96% 0.005 90);
-  --color-ink-soft: oklch(72% 0.006 90);
-  --color-accent: oklch(86% 0.18 95);
-
-  --font-display: "Bebas Neue", "Oswald", "Barlow Condensed", "Helvetica Neue", "Arial Narrow", sans-serif;
-  --font-body: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
-
-  --space-3xs: 0.25rem;
-  --space-2xs: 0.5rem;
-  --space-xs: 0.75rem;
-  --space-sm: 1rem;
-  --space-md: 1.5rem;
-  --space-lg: 2rem;
-  --space-xl: 3rem;
-  --space-2xl: 4.5rem;
-  --space-3xl: 6.5rem;
-  --space-4xl: 9rem;
-
-  --measure-prose: 56ch;
-}
-
-* { box-sizing: border-box; }
-html, body { overflow-x: clip; }
-
-body {
-  margin: 0;
-  background: var(--color-paper);
-  color: var(--color-ink);
-  font-family: var(--font-body);
-  font-size: 1.0625rem;
-  line-height: 1.5;
-  font-weight: 400;
-  -webkit-font-smoothing: antialiased;
-}
-
-.page {
-  max-width: 80rem;
-  margin: 0 auto;
-  padding: 0;
-}
-
-/* Masthead */
-.masthead {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: var(--space-md) var(--space-lg);
-  border-block-end: 1px solid var(--color-rule);
-  font-family: var(--font-mono);
-  font-size: 0.75rem;
-  text-transform: uppercase;
-  letter-spacing: 0.12em;
-  color: var(--color-ink-soft);
-}
-
-.masthead__brand { color: var(--color-ink); font-weight: 500; }
-.masthead__brand strong {
-  color: var(--color-accent);
-  font-weight: 500;
-}
-.masthead__meta { font-variant-numeric: tabular-nums; }
-
-/* Hero — pull-quote */
-.hero {
-  padding: var(--space-4xl) var(--space-lg) var(--space-2xl);
-  border-block-end: 4px solid var(--color-accent);
-}
-
-.quote {
-  margin: 0;
-  font-family: var(--font-display);
-  font-size: clamp(3rem, 9vw, 7.5rem);
-  font-weight: 700;
-  line-height: 0.95;
-  letter-spacing: -0.01em;
-  text-transform: uppercase;
-  color: var(--color-ink);
-  max-width: 24ch;
-}
-
-.quote__strike {
-  position: relative;
-  display: inline-block;
-  color: var(--color-ink);
-}
-
-.quote__strike::after {
-  content: "";
-  position: absolute;
-  inset-inline: -0.05em;
-  inset-block-start: 50%;
-  height: 0.18em;
-  background: var(--color-accent);
-  transform: translateY(-30%) rotate(-2deg);
-}
-
-.quote__attr {
-  display: block;
-  font-family: var(--font-mono);
-  font-size: 0.875rem;
-  font-weight: 400;
-  line-height: 1.4;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  color: var(--color-ink-soft);
-  margin-block-start: var(--space-xl);
-}
-
-.quote__attr strong {
-  color: var(--color-ink);
-  font-weight: 500;
-}
-
-/* Principles section */
-.principles {
-  padding: var(--space-3xl) var(--space-lg);
-  border-block-end: 1px solid var(--color-rule);
-}
-
-.principles__head {
-  font-family: var(--font-mono);
-  font-size: 0.75rem;
-  letter-spacing: 0.16em;
-  text-transform: uppercase;
-  color: var(--color-ink-soft);
-  margin: 0 0 var(--space-2xl);
-}
-
-.principles__list {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: var(--space-2xl) var(--space-xl);
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.principle {
-  border-block-start: 1px solid var(--color-rule);
-  padding-block-start: var(--space-md);
-}
-
-.principle__num {
-  font-family: var(--font-mono);
-  font-size: 0.75rem;
-  letter-spacing: 0.16em;
-  color: var(--color-accent);
-  display: block;
-  margin-block-end: var(--space-sm);
-}
-
-.principle__head {
-  font-family: var(--font-display);
-  font-size: clamp(1.75rem, 3vw, 2.5rem);
-  font-weight: 700;
-  letter-spacing: -0.005em;
-  text-transform: uppercase;
-  line-height: 0.95;
-  margin: 0 0 var(--space-md);
-  color: var(--color-ink);
-}
-
-.principle__body {
-  font-family: var(--font-body);
-  font-size: 1rem;
-  line-height: 1.6;
-  color: var(--color-ink-soft);
-  max-width: var(--measure-prose);
-  margin: 0;
-}
-
-.principle__body strong { color: var(--color-ink); font-weight: 500; }
-
-/* Working rules — terse list */
-.rules {
-  padding: var(--space-2xl) var(--space-lg);
-  background: var(--color-paper-2);
-  border-block-end: 1px solid var(--color-rule);
-}
-
-.rules__head {
-  font-family: var(--font-mono);
-  font-size: 0.75rem;
-  letter-spacing: 0.16em;
-  text-transform: uppercase;
-  color: var(--color-ink-soft);
-  margin: 0 0 var(--space-lg);
-}
-
-.rules__list {
-  display: grid;
-  gap: 0;
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.rules__item {
-  display: grid;
-  grid-template-columns: 4ch 1fr;
-  gap: var(--space-md);
-  padding: var(--space-md) 0;
-  border-block-end: 1px solid var(--color-rule);
-  font-family: var(--font-body);
-  font-size: 1.0625rem;
-  line-height: 1.4;
-  color: var(--color-ink);
-}
-
-.rules__item:last-child { border-block-end: none; }
-
-.rules__num {
-  font-family: var(--font-mono);
-  font-size: 0.875rem;
-  letter-spacing: 0.06em;
-  color: var(--color-accent);
-}
-
-/* Colophon */
-.colophon {
-  padding: var(--space-md) var(--space-lg);
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  gap: var(--space-sm);
-  font-family: var(--font-mono);
-  font-size: 0.75rem;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-  color: var(--color-ink-soft);
-}
-
-.colophon a {
-  color: var(--color-ink-soft);
-  text-decoration: none;
-  transition: color 100ms ease;
-}
-
-.colophon a:hover, .colophon a:focus-visible {
-  color: var(--color-accent);
-}
-
-.colophon a:focus-visible {
-  outline: 2px solid var(--color-accent);
-  outline-offset: 3px;
-}
-
-@media (max-width: 48rem) {
-  .principles__list { grid-template-columns: 1fr; }
-  .hero { padding: var(--space-2xl) var(--space-lg); }
-}

package/templates/vite/.howone/skills/hallmark/site/_tests/05-tracejam-saas/brief.md

@@ -1,63 +0,0 @@
-# Test 05 v2 — Tracejam (SaaS observability)
-
-## The prompt (verbatim, same as v1)
-
-> "Build a landing page for Tracejam — a tracing/observability tool for distributed systems. Audience: SREs and platform engineers. Use case: try it / contact sales. Tone: technical."
-
-## Step 0 · Pre-flight
-
-> *"No pre-flight signals — proceeding with full Hallmark stack."*
-
-## Step 1 · Design-context gate — fully answered
-
-Audience, use, tone all explicit.
-
-## Step 2.5 · Project memory rotation
-
-> *"Previous run on this brief picked Bento Grid + Pastel + Tier-A flame chart. Picking from {Workbench, Stat-Led, Long Document} for the macro this time — Workbench wins because the brief says 'try it' and Workbench is structured to walk an SRE through a single workflow rather than show six surfaces in a tile grid."*
->
-> *"Theme rotation: Pastel (light · geometric-sans · cool-indigo) → Midnight (dark · geometric-sans · phosphor-cyan). Differs on paper band (light → dark) and accent hue (indigo → phosphor-cyan). Two of three axes differ. Passes."*
-
-## Step 3 · Visual ruleset loaded
-
-`macrostructures.md` (Workbench), `component-cookbook.md` (F2 sticky-scroll, H1 left-bias hero, code-card archetype), `typography.md` (Midnight pairing — Geist Mono display + Geist body), `color.md` (Midnight palette — dark cool greys), `microinteractions.md` (active-step highlight via `IntersectionObserver`, copy-to-clipboard on code lines, focus-visible rings), `anti-patterns.md`.
-
-## Step 4 · Hero enrichment
-
-> *"Enrichment: Tier-A pure-CSS pinned dashboard panel — a hand-built waterfall trace rendered as flex bars. Different from v1's clipped-edge browser frame: this one sits in the right column, pinned during scroll, swapping its content as the user scrolls past each step. Same Tier-A custom-craft, different layout role."*
-
-## Step 5 · Preview
-
-```markdown
-**Hallmark · v0.6.0**
-
-- **Macrostructure** · Workbench
-- **Theme** · Midnight (dark cool paper · Geist Mono display · phosphor-cyan accent ~3%)
-- **Enrichment** · Tier-A pure-CSS sticky dashboard panel (3-state, swaps on scroll)
-- **Sections** · Masthead · Hero · Sticky-walkthrough (3 steps × pinned panel) · Integrations · Pricing · Colophon
-- **Motion** · sticky-step active highlight · copy-to-clipboard on code (2 primitives)
-- **Slop test** · 38 / 38 ✓
-- **Diversification** · differs from v1 (Bento Grid/Pastel) on macrostructure + paper band + accent hue
-```
-
-## Step 6 · Macrostructure stamp
-
-```
-/* Hallmark · macrostructure: Workbench · F2 sticky-scroll knobs: pinned=right, content=trace-panel, steps=3
- * theme: Midnight · accent: phosphor-cyan ~3% · enrichment: tier-A CSS-art trace panel (sticky-pinned, 3-state)
- * studied: no · context: explicit · v0.6.0
- */
-```
-
-## What changed vs v1
-
-- **Macro:** Bento Grid → Workbench. v1 split Tracejam into six asymmetric tiles (stat / sparkline / quote / code / integrations / spotlight); v2 walks the user through three SRE-shaped steps, each pinned alongside a swapping dashboard panel.
-- **Theme:** Pastel → Midnight. v1's light-cool paper with indigo accent becomes dark cool paper with phosphor-cyan. The dashboard mockup reads more credible on dark surface for a tracing tool.
-- **Enrichment:** v1's right-clipped browser frame becomes a sticky 3-state panel that updates as the user scrolls past each step. Same hand-built CSS-art content; different layout role.
-- **Pricing:** v1 had no pricing on the page; v2 adds a 3-tier table (Free / Team / Scale) — Workbench can carry it without becoming a Bento.
-
-## What stayed the same
-
-- Brand: Tracejam, distributed tracing, SRE audience.
-- Tier-A custom-craft (no Lottie, no real video).
-- Slop test: 38 / 38 ✓.

package/templates/vite/.howone/skills/hallmark/site/_tests/05-tracejam-saas/index.html

@@ -1,167 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>Tracejam — distributed tracing that explains itself</title>
-  <meta name="description" content="Open the trace, find the span that regressed, and read why — in plain text — without a glossary, a YAML diff, or a status-page hunt." />
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500&family=Geist:wght@400;500;600&display=swap" />
-  <link rel="stylesheet" href="style.css" />
-</head>
-<body>
-  <main class="page">
-    <header class="masthead">
-      <span class="masthead__brand"><span class="dot"></span>tracejam · v0.4</span>
-      <nav class="masthead__nav">
-        <a href="#walkthrough">Walkthrough</a>
-        <a href="#integrations">Integrations</a>
-        <a href="#pricing">Pricing</a>
-        <a href="#">Docs</a>
-      </nav>
-    </header>
-
-    <section class="hero">
-      <div class="hero__copy">
-        <p class="hero__eyebrow">For SREs &amp; platform engineers</p>
-        <h1 class="hero__head">Distributed tracing that <em>explains itself.</em></h1>
-        <p class="hero__sub">
-          Open the trace. Find the span that regressed. Read why — in plain text — without a glossary,
-          a YAML diff, or a status-page hunt. The post-mortem starts in the trace, not in a doc.
-        </p>
-        <div class="hero__cta">
-          <a class="btn btn--primary" href="#">Try it free <span aria-hidden="true">→</span></a>
-          <a class="btn" href="#">Talk to sales</a>
-        </div>
-      </div>
-      <aside class="hero__panel" aria-label="Sample trace preview">
-        <div class="hero__panel-head"><span>trace · 9c3a72ef</span><span>4.21 s</span></div>
-        <div class="trace">
-          <div class="span"><span class="span__label">api.checkout</span><span class="span__bar" style="--w:100%"><style>.span__bar::after { width: var(--w); }</style></span><span class="span__time">4.21s</span></div>
-          <div class="span"><span class="span__label">↳ auth.verify</span><span class="span__bar"><span style="position:absolute;inset:0;width:18%;background:var(--color-accent)"></span></span><span class="span__time">762ms</span></div>
-          <div class="span span--err"><span class="span__label">↳ pricing.quote</span><span class="span__bar"><span style="position:absolute;inset:0;width:78%;background:var(--color-error)"></span></span><span class="span__time">3.28s</span></div>
-          <div class="span span--warn"><span class="span__label">&nbsp;&nbsp;↳ rates.fx</span><span class="span__bar"><span style="position:absolute;inset:0;width:62%;background:var(--color-warn)"></span></span><span class="span__time">2.71s</span></div>
-          <div class="span"><span class="span__label">↳ ledger.write</span><span class="span__bar"><span style="position:absolute;inset:0;width:6%;background:var(--color-accent)"></span></span><span class="span__time">240ms</span></div>
-        </div>
-      </aside>
-    </section>
-
-    <section class="workbench" id="walkthrough">
-      <div class="steps">
-        <article class="step">
-          <p class="step__num">step 01 · open</p>
-          <h2 class="step__head">Open the trace, not a dashboard.</h2>
-          <p class="step__body">
-            Drop a trace ID, a request URL, or a five-second time window. Tracejam pulls the spans
-            from your collector and renders them inline — no dashboard hop, no link to Grafana,
-            no separate logs window. The trace is the unit of work.
-          </p>
-          <div class="step__code"><span class="c"># by trace id</span><br/><span class="k">$</span> tracejam open 9c3a72ef</div>
-        </article>
-
-        <article class="step">
-          <p class="step__num">step 02 · find</p>
-          <h2 class="step__head">Find the regressed span.</h2>
-          <p class="step__body">
-            Tracejam ranks spans by <strong>p99 deviation against your service's seven-day baseline</strong>.
-            The first one in the list is almost always the problem. No filters to set; the baseline
-            is precomputed every five minutes per service.
-          </p>
-          <div class="step__code"><span class="c"># top 3 regressed spans this hour</span><br/><span class="k">$</span> tracejam top --window 1h</div>
-        </article>
-
-        <article class="step">
-          <p class="step__num">step 03 · read</p>
-          <h2 class="step__head">Read why, in plain text.</h2>
-          <p class="step__body">
-            Each span carries an <strong>auto-generated explainer</strong>: which dependency
-            regressed, which version of which service, which deploy correlates, the last clean run,
-            and the diff between then and now. Plain text, copy-paste ready into a post-mortem.
-          </p>
-          <div class="step__code"><span class="c"># dump the explainer</span><br/><span class="k">$</span> tracejam why <span class="s">"pricing.quote"</span></div>
-        </article>
-      </div>
-
-      <aside class="pinned" aria-label="Pinned trace panel">
-        <header class="pinned__head">
-          <span>trace · 9c3a72ef</span>
-          <span class="pinned__chip">REGRESSED</span>
-        </header>
-        <div class="pinned__body">
-          <div class="span"><span class="span__label">api.checkout</span><span class="span__bar"><span style="position:absolute;inset:0;width:100%;background:var(--color-accent)"></span></span><span class="span__time">4.21s</span></div>
-          <div class="span"><span class="span__label">↳ auth.verify</span><span class="span__bar"><span style="position:absolute;inset:0;width:18%;background:var(--color-accent)"></span></span><span class="span__time">762ms</span></div>
-          <div class="span span--err"><span class="span__label">↳ pricing.quote</span><span class="span__bar"><span style="position:absolute;inset:0;width:78%;background:var(--color-error)"></span></span><span class="span__time">3.28s</span></div>
-          <div class="span span--warn"><span class="span__label">&nbsp;&nbsp;↳ rates.fx</span><span class="span__bar"><span style="position:absolute;inset:0;width:62%;background:var(--color-warn)"></span></span><span class="span__time">2.71s</span></div>
-          <div class="span"><span class="span__label">↳ ledger.write</span><span class="span__bar"><span style="position:absolute;inset:0;width:6%;background:var(--color-accent)"></span></span><span class="span__time">240ms</span></div>
-        </div>
-        <p class="pinned__why">
-          <strong>WHY:</strong> rates.fx p99 doubled at 14:02 UTC. Correlates with deploy
-          rates-svc@v1.34.2 — which lowered the FX cache TTL from 5 m to 30 s. Roll back, or raise
-          TTL. Last clean run: 13:57 UTC (2.41 s end-to-end).
-        </p>
-      </aside>
-    </section>
-
-    <section class="integrations" id="integrations">
-      <h2 class="integrations__head">Reads from</h2>
-      <ul class="integrations__grid">
-        <li>OpenTelemetry</li>
-        <li>Jaeger</li>
-        <li>Zipkin</li>
-        <li>AWS X-Ray</li>
-        <li>Tempo</li>
-        <li>Datadog APM</li>
-        <li>Honeycomb</li>
-        <li>New Relic</li>
-      </ul>
-    </section>
-
-    <section class="pricing" id="pricing">
-      <h2 class="pricing__head">Pricing</h2>
-      <div class="tiers">
-        <article class="tier">
-          <h3 class="tier__name">Free</h3>
-          <p class="tier__price">$0 <span class="per">forever</span></p>
-          <ul class="tier__list">
-            <li>50 GB trace ingest / month</li>
-            <li>7-day retention</li>
-            <li>Single project</li>
-            <li>Community Slack</li>
-          </ul>
-          <a class="btn" href="#">Start free</a>
-        </article>
-        <article class="tier tier--feature">
-          <h3 class="tier__name">Team</h3>
-          <p class="tier__price">$799 <span class="per">/ month</span></p>
-          <ul class="tier__list">
-            <li>500 GB ingest / month</li>
-            <li>30-day retention</li>
-            <li>Unlimited projects</li>
-            <li>Auto-explainers</li>
-            <li>SLO alerting</li>
-          </ul>
-          <a class="btn btn--primary" href="#">14-day trial</a>
-        </article>
-        <article class="tier">
-          <h3 class="tier__name">Scale</h3>
-          <p class="tier__price">Custom</p>
-          <ul class="tier__list">
-            <li>Custom ingest</li>
-            <li>365-day retention</li>
-            <li>SOC2 / ISO27001</li>
-            <li>Dedicated infra</li>
-            <li>24/7 oncall</li>
-          </ul>
-          <a class="btn" href="#">Talk to sales</a>
-        </article>
-      </div>
-    </section>
-
-    <footer class="colophon">
-      <span>Tracejam · v0.4 · made in Lisbon &amp; Berlin</span>
-      <span><a href="#">docs</a> · <a href="#">changelog</a> · <a href="#">status</a> · <a href="#">github</a></span>
-    </footer>
-  </main>
-</body>
-</html>