Compare commits

..

No commits in common. "main" and "v5.0.0" have entirely different histories.

194 changed files with 2079 additions and 17321 deletions

View file

@ -23,7 +23,7 @@
{ {
"name": "voyage", "name": "voyage",
"source": "./plugins/voyage", "source": "./plugins/voyage",
"description": "Voyage — brief, research, plan, execute, review, continue. Contract-driven Claude Code pipeline with specialized agent swarms, external research triangulation, adversarial review, post-hoc independent review with Handover 6 feedback loop, multi-session resumption, session decomposition, and headless execution. /trekbrief, /trekplan, and /trekreview each end by building a self-contained operator-annotation HTML (scripts/annotate.mjs, modelled on claude-code-100x): pencil-toggle annotation mode, select text or click any element, pick intent (Fiks/Endre/Spørsmål), comment, Copy Prompt, paste back, Claude revises the .md." "description": "Voyage — brief, research, plan, execute, review, continue. Contract-driven Claude Code pipeline with specialized agent swarms, external research triangulation, adversarial review, post-hoc independent review with Handover 6 feedback loop, multi-session resumption, session decomposition, and headless execution. Renders produced artifacts to self-contained HTML + link; annotation via the official /playground plugin."
}, },
{ {
"name": "linkedin-thought-leadership", "name": "linkedin-thought-leadership",
@ -54,11 +54,6 @@
"name": "human-friendly-style", "name": "human-friendly-style",
"source": "./plugins/human-friendly-style", "source": "./plugins/human-friendly-style",
"description": "Shared Claude Code output style for the ktg-plugin-marketplace. Plain-language tone — explains what and why, hides paths/JSON/stack traces by default, matches the user's language." "description": "Shared Claude Code output style for the ktg-plugin-marketplace. Plain-language tone — explains what and why, hides paths/JSON/stack traces by default, matches the user's language."
},
{
"name": "claude-design",
"source": "./plugins/claude-design",
"description": "End-to-end facilitator for prompting Claude Design (claude.ai/design) — idea to copy-paste-ready prompt with iteration coaching, citing Anthropic primary sources."
} }
] ]
} }

View file

@ -10,13 +10,13 @@ plugins/
config-audit/ v3.1.0 — Configuration intelligence (health, opportunities, auto-fix, whats-active) config-audit/ v3.1.0 — Configuration intelligence (health, opportunities, auto-fix, whats-active)
graceful-handoff/ v2.1.0 — Auto-trigger handoff via Stop hook (skill + JSON pipeline + 4-step model-aware context resolution) graceful-handoff/ v2.1.0 — Auto-trigger handoff via Stop hook (skill + JSON pipeline + 4-step model-aware context resolution)
linkedin-thought-leadership/ v1.2.0 — LinkedIn content pipeline + analytics linkedin-thought-leadership/ v1.2.0 — LinkedIn content pipeline + analytics
llm-security/ v7.7.1 — Security scanning, auditing, threat modeling + HTML-rapport for alle 18 skill-kommandoer (render-report CLI + canonical ESM-modul som speiles bit-identisk i playground). v7.7.1 strippet playground til katalog-overflate som eneste rute. llm-security/ v6.0.0 — Security scanning, auditing, threat modeling
ms-ai-architect/ v1.15.0 — Microsoft AI architecture (Cosmo Skyberg persona) + manual KB-refresh slash command + v3 project-view (sidebar med 17 artifacts + main + import-modal overlay, v2-surface fjernet i v1.15.0) ms-ai-architect/ v1.13.1 — Microsoft AI architecture (Cosmo Skyberg persona) + manual KB-refresh slash command
okr/ v1.0.0 — OKR guidance for Norwegian public sector okr/ v1.0.0 — OKR guidance for Norwegian public sector
voyage/ v5.0.3 — Brief, research, plan, execute, review, continue. Contract-driven Claude Code pipeline (six-command universal pipeline + multi-session resumption + --gates autonomy chain). /trekbrief, /trekplan, and /trekreview each end by running scripts/annotate.mjs against the just-written .md and printing the file:// link to a self-contained operator-annotation HTML modelled on claude-code-100x/build-site.js: pencil-toggle annotation mode, select text or click any element, choose intent (Fiks/Endre/Spørsmål), comment, sidebar groups by section with delete + Copy Prompt, localStorage persistence per artifact path. v5.0.0 removed the v4.2/v4.3 bespoke playground + /trekrevise + Handover 8; v5.0.1 pointed at /playground document-critique (wrong direction); v5.0.2 was operator-led but too thin; v5.0.3 matches the reference the operator pointed at from day one. voyage/ v5.0.0 — Brief, research, plan, execute, review, continue. Contract-driven Claude Code pipeline (six-command universal pipeline + multi-session resumption + --gates autonomy chain). Renders produced artifacts to self-contained HTML + link; annotation via the official /playground plugin. v5.0.0 removed the v4.2/v4.3 bespoke playground + /trekrevise + Handover 8 (NIH; duplicated /playground's document-critique).
shared/ shared/
playground-design-system/ v0.6.0 — Aksel/Digdir-aligned CSS design system + JSON schemas + self-hosted Inter/JetBrains Mono/Source Serif 4 fonts. Tier 1 base + Tier 2 + Tier 3 wave 1+2 (20 components) + Tier 4 project-view-arketype (v0.6.0 — sidebar + main + import-modal overlay). Consumed by ms-ai-architect, okr, llm-security, voyage, config-audit. playground-design-system/ v0.1 — Aksel/Digdir-aligned CSS design system + JSON schemas + self-hosted Inter/JetBrains Mono/Source Serif 4 fonts (Tier 1+2+3 wave 1+wave 2 = 20 Tier 3 components total). Consumed by ms-ai-architect, okr, llm-security, voyage, config-audit
playground-examples/ — Reference scenarios (ROS-Lier, OKR-Bærum, security-Direktorat) + showcase landing + 12 isolated Tier 3 wave 2 component demos under components/ playground-examples/ — Reference scenarios (ROS-Lier, OKR-Bærum, security-Direktorat) + showcase landing + 12 isolated Tier 3 wave 2 component demos under components/
``` ```
@ -53,20 +53,3 @@ Disse trackes IKKE i git. Oppdater ved sesjonsslutt.
3. Les REMEMBER.md og TODO.md for sesjonsstatus 3. Les REMEMBER.md og TODO.md for sesjonsstatus
4. Jobb innenfor scope 4. Jobb innenfor scope
5. Oppdater REMEMBER.md ved avslutning 5. Oppdater REMEMBER.md ved avslutning
## Communication patterns
### Linking to local files
When pointing to local files in responses, always use markdown link syntax with a descriptive name:
- Use `[Human-friendly name](file:///absolute/path)` — never bare `file:///...` URLs or autolinks `<file://...>`.
- Always use absolute paths. Never `~/` or relative paths.
- For multiple files, render as a bullet list of named markdown links.
Why: bare `file://` URLs only render the first as clickable across multiple lines. Named markdown links make each entry independently clickable and look cleaner.
Example:
- [Brief](file:///Users/ktg/.../brief.html)
- [Research summary](file:///Users/ktg/.../research/summary.md)

View file

@ -26,7 +26,7 @@ Then open Claude Code and type `/plugin` to browse and install plugins from the
## Plugins ## Plugins
### [LLM Security](plugins/llm-security/) `v7.7.1` ### [LLM Security](plugins/llm-security/) `v7.6.1`
Security scanning, auditing, and threat modeling for agentic AI projects. Security scanning, auditing, and threat modeling for agentic AI projects.
@ -36,8 +36,6 @@ Built on OWASP LLM Top 10 (2025), OWASP Agentic AI Top 10, and the AI Agent Trap
- **Deterministic scanning** — 23 Node.js scanners (10 orchestrated + 13 standalone) for byte-level analysis: Shannon entropy, Unicode codepoints, typosquatting detection, taint flow, DNS resolution, git forensics, AI-BOM, attack simulation, IDE extension prescan (VS Code + JetBrains — URL fetch from Marketplace / OpenVSX / direct VSIX / JetBrains Marketplace, hardened ZIP extractor for zip-slip / symlinks / bombs, plus OS sandbox via `sandbox-exec` / `bwrap` so the kernel enforces FS confinement), MCP cumulative-drift baseline reset (E14 — sticky baseline catches slow-burn rug-pulls). Bash-normalize T1-T6 for obfuscation-resistant denylists - **Deterministic scanning** — 23 Node.js scanners (10 orchestrated + 13 standalone) for byte-level analysis: Shannon entropy, Unicode codepoints, typosquatting detection, taint flow, DNS resolution, git forensics, AI-BOM, attack simulation, IDE extension prescan (VS Code + JetBrains — URL fetch from Marketplace / OpenVSX / direct VSIX / JetBrains Marketplace, hardened ZIP extractor for zip-slip / symlinks / bombs, plus OS sandbox via `sandbox-exec` / `bwrap` so the kernel enforces FS confinement), MCP cumulative-drift baseline reset (E14 — sticky baseline catches slow-burn rug-pulls). Bash-normalize T1-T6 for obfuscation-resistant denylists
- **Advisory analysis** — 20 commands that scan, audit, and model threats with structured reports, letter grades, and actionable remediation - **Advisory analysis** — 20 commands that scan, audit, and model threats with structured reports, letter grades, and actionable remediation
- **Enterprise governance** — Compliance mapping (EU AI Act, NIST AI RMF, ISO 42001), SARIF 2.1.0 output, structured audit trail, policy-as-code, standalone CLI - **Enterprise governance** — Compliance mapping (EU AI Act, NIST AI RMF, ISO 42001), SARIF 2.1.0 output, structured audit trail, policy-as-code, standalone CLI
- **v7.7.1 playground UX-strip (2026-05-18)** — Operatør-feedback umiddelbart etter v7.7.0: katalog-overflaten ble eneste levende rute i playgrounden (onboarding/home/project-render-funksjonene bevart men ikke rutbare). Topbar forenklet til `Katalog`-knapp + state/tema-handlinger. Breadcrumb-orgname erstattet med nøytralt `llm-security`. Onboarding-konseptet (kontekst-injeksjon per kommando) dokumentert som v7.8.0-kandidat i ROADMAP. Ingen scanner- eller hook-atferdsendringer
- **v7.7.0 HTML-rapport for alle 18 skill-kommandoer (2026-05-18)** — Hver `/security <cmd>` som produserer rapport printer nå en klikkbar `file://`-lenke til en self-contained HTML-versjon. Levert over fem sesjoner: (1) playground katalog list-view + builder-pane med copy-knapp; (2) playground prosjekt-surface opprydding (stub-screen + topbar-splitt); (3) 18 inline parserne + rendererne flyttet til canonical ESM-modul `scripts/lib/report-renderers.mjs` (playground beholder bit-identisk inline-kopi siden ESM `import` ikke fungerer fra `file://`); (4) ny zero-dep CLI `scripts/render-report.mjs` — stdin/file/stdout-modus, kebab→camel commandId-routing, inliner 6 DS-stylesheets, ~140 KB self-contained HTML med system-font-fallback, absolutte `file://`-paths for Ghostty cmd-click; (5) alle 18 skills wired (4 i sesjon 4 + 14 i sesjon 5). Ingen scanner- eller hook-atferdsendringer — purely additive
- **v7.6.1 playground visuell-patch (2026-05-06)** — Seks bugs fanget av maintainer ved manuell verifisering i nettleser etter v7.6.0-release. Alle skyldtes mismatch mellom DS-klasser og hvordan playground-rendrere brukte dem (eller manglende DS-implementasjoner av klasser playground-rendrere antok eksisterte): `renderFindingsBlock` brukte `.findings` outer-class (DS' 2-kolonners list+detail-grid) → erstattet med `<section class="report-meta">` + korrekt `findings__list`-mønster; `.report-table` manglet helt i DS men brukes i 7+ rendrere → lokal CSS-implementasjon; `renderPreDeploy` traffic-lights brukte fast 28×28 px `.sm-card__grade` for "PASS"/"PASS-WITH-NOTES"/"FAIL" → bredde-tilpasset status-pill; threat-model matrix-bobler ikke klikkbare → `<button>` med `data-threat-id` + click-handler som scroller til Trusler-tabellen; radar-labels overlappet → SVG 280→380, R 105→125, dynamisk `text-anchor`; `recommendation-card__body` tekstoverflyt → `overflow-wrap: anywhere`. 4/4 fix-spesifikke + 18/18 regresjons-tester passerer. Ingen scanner- eller hook-atferdsendringer - **v7.6.1 playground visuell-patch (2026-05-06)** — Seks bugs fanget av maintainer ved manuell verifisering i nettleser etter v7.6.0-release. Alle skyldtes mismatch mellom DS-klasser og hvordan playground-rendrere brukte dem (eller manglende DS-implementasjoner av klasser playground-rendrere antok eksisterte): `renderFindingsBlock` brukte `.findings` outer-class (DS' 2-kolonners list+detail-grid) → erstattet med `<section class="report-meta">` + korrekt `findings__list`-mønster; `.report-table` manglet helt i DS men brukes i 7+ rendrere → lokal CSS-implementasjon; `renderPreDeploy` traffic-lights brukte fast 28×28 px `.sm-card__grade` for "PASS"/"PASS-WITH-NOTES"/"FAIL" → bredde-tilpasset status-pill; threat-model matrix-bobler ikke klikkbare → `<button>` med `data-threat-id` + click-handler som scroller til Trusler-tabellen; radar-labels overlappet → SVG 280→380, R 105→125, dynamisk `text-anchor`; `recommendation-card__body` tekstoverflyt → `overflow-wrap: anywhere`. 4/4 fix-spesifikke + 18/18 regresjons-tester passerer. Ingen scanner- eller hook-atferdsendringer
- **v7.6.0 playground Tier 3-referanse-case (2026-05-06)** — Playgroundet er hevet til en visuelt og strukturelt fullført referanse for `shared/playground-design-system/` Tier 3-supplementet. 8 nye DS-komponenter integrert i de 18 rapport-rendererne: `tfa-flow` + `tfa-leg` + `tfa-arrow` (lethal trifecta-kjede med `<button>`-elementer + ARIA), `mat-ladder` + `mat-step` (5-trinns modenhets-stige), `suppressed-group` (narrative-audit), `codepoint-reveal` + `cp-tag/cp-zw/cp-bidi` (Unicode-steganografi), `top-risks` + `top-risk[data-severity]` (rangert top-funn-listing), utvidet `recommendation-card[data-severity]``clean`/`harden`/`audit`/`posture`/`pre-deploy`/`plugin-audit`, `risk-meter` (band-visualisering 0-100 på 5 archetypes), `card--severity-{level}` modifier på findings-cards. Wave 1 (Sesjon 2): `badge--scope-security` (identitets-chip), `verdict-pill-lg` (DS Tier 3-pill på alle 18 rapport-typer), `form-progress` + `fp-step` (onboarding-wizard). Slettet ~30 duplikat-CSS-deklarasjoner (DS vinner cascade). 5 nye DS-helpers + `mapSeverityToCardLevel` + `parseNarrativeAudit`. A11Y-rapport oppdatert. Filendring totalt 10209 → 10677 linjer over 5 sesjoner. Ingen scanner- eller hook-behavior-changes — purely additive surface - **v7.6.0 playground Tier 3-referanse-case (2026-05-06)** — Playgroundet er hevet til en visuelt og strukturelt fullført referanse for `shared/playground-design-system/` Tier 3-supplementet. 8 nye DS-komponenter integrert i de 18 rapport-rendererne: `tfa-flow` + `tfa-leg` + `tfa-arrow` (lethal trifecta-kjede med `<button>`-elementer + ARIA), `mat-ladder` + `mat-step` (5-trinns modenhets-stige), `suppressed-group` (narrative-audit), `codepoint-reveal` + `cp-tag/cp-zw/cp-bidi` (Unicode-steganografi), `top-risks` + `top-risk[data-severity]` (rangert top-funn-listing), utvidet `recommendation-card[data-severity]``clean`/`harden`/`audit`/`posture`/`pre-deploy`/`plugin-audit`, `risk-meter` (band-visualisering 0-100 på 5 archetypes), `card--severity-{level}` modifier på findings-cards. Wave 1 (Sesjon 2): `badge--scope-security` (identitets-chip), `verdict-pill-lg` (DS Tier 3-pill på alle 18 rapport-typer), `form-progress` + `fp-step` (onboarding-wizard). Slettet ~30 duplikat-CSS-deklarasjoner (DS vinner cascade). 5 nye DS-helpers + `mapSeverityToCardLevel` + `parseNarrativeAudit`. A11Y-rapport oppdatert. Filendring totalt 10209 → 10677 linjer over 5 sesjoner. Ingen scanner- eller hook-behavior-changes — purely additive surface
- **v7.5.0 playground (2026-05-05)** — Single-file SPA at `plugins/llm-security/playground/llm-security-playground.html` (~10 200 lines) for onboarding, demoer og workshop-bruk uten Claude Code-installasjon. Parsere + renderere for alle 18 produces_report-kommandoer, 18 markdown test-fixtures som kontrakt-anker, komplett demo-prosjekt med alle 18 rapporter ferdig parsed, vendor-synket design-system, 9 Playwright-genererte screenshots. 11 nye `window`-globaler eksponert for testing/automasjon (`__store`, `__navigate`, `__loadDemoState`, `__PARSERS`, `__RENDERERS` …). Bug-fix: `normalizeVerdictText` håndterer GO-WITH-CONDITIONS uten å kollapse til ALLOW. Ingen scanner- eller hook-behavior-changes — purely additive surface - **v7.5.0 playground (2026-05-05)** — Single-file SPA at `plugins/llm-security/playground/llm-security-playground.html` (~10 200 lines) for onboarding, demoer og workshop-bruk uten Claude Code-installasjon. Parsere + renderere for alle 18 produces_report-kommandoer, 18 markdown test-fixtures som kontrakt-anker, komplett demo-prosjekt med alle 18 rapporter ferdig parsed, vendor-synket design-system, 9 Playwright-genererte screenshots. 11 nye `window`-globaler eksponert for testing/automasjon (`__store`, `__navigate`, `__loadDemoState`, `__PARSERS`, `__RENDERERS` …). Bug-fix: `normalizeVerdictText` håndterer GO-WITH-CONDITIONS uten å kollapse til ALLOW. Ingen scanner- eller hook-behavior-changes — purely additive surface
@ -79,15 +77,11 @@ Key commands: `/config-audit posture`, `/config-audit feature-gap`, `/config-aud
--- ---
### [Voyage](plugins/voyage/) `v5.1.1` ### [Voyage](plugins/voyage/) `v5.0.0`
Deep requirements gathering, research, implementation planning, self-verifying execution, independent post-hoc review, and zero-friction multi-session resumption — with specialized agent swarms, adversarial review, and failure recovery. Six-command (brief, research, plan, execute, review, continue) universal pipeline + adaptive-depth per-phase effort dialog. `/trekbrief`, `/trekplan`, and `/trekreview` render their artifact to a self-contained HTML view and print the `file://` link. Deep requirements gathering, research, implementation planning, self-verifying execution, independent post-hoc review, and zero-friction multi-session resumption — with specialized agent swarms, adversarial review, and failure recovery. Six-command (brief, research, plan, execute, review, continue) universal pipeline. `/trekbrief`, `/trekplan`, and `/trekreview` render their artifact to a self-contained HTML view and print the `file://` link; annotation is delegated to the official `/playground` plugin.
v5.1.1 is a 13-step remediation patch closing 11 of 12 findings from the v5.1.0 review (the SC8 dogfood gate is operator-manual, scheduled for after-execute). Load-bearing bug fixes: YAML-number bypass in `brief-validator` so the gate fires for both quoted and unquoted `brief_version` (#8 + #11). Wiring: a new `lib/profiles/phase-signal-resolver.mjs` helper is invoked from `/trekplan`/`/trekresearch`/`/trekreview`/`/trekexecute` Phase 1, the resolved JSON is captured as `phase_signal_result`, and the `brief-validator --soft` gate is required uniformly across all 4 downstream commands (#9 + #12). Test refactor: runtime SC1 walk for trekbrief + per-tier resolver-output + missing-signals falsification per downstream command + dedicated profile-resolver non-interference test (#1 #2 #3 #4 #6 #7 #10). Documentation: Decision B high-effort behavior locked per command (gemini-bridge pass for `/trekplan`, full swarm + always-on `contrarian-researcher` for `/trekresearch`, skip Pass 3 + coordinator normalization for `/trekreview`, `gates_mode: closed` for `/trekexecute`) + brief Non-Goal/SC1 amendments + REMEMBER dogfood scaffolding. v5.1.1 is additive — no breaking changes against v5.1.0. See `plugins/voyage/CHANGELOG.md` § v5.1.1. v5.0.0 (breaking) **removes the bespoke playground.** v4.2/v4.3 shipped a ~388 KB bespoke playground SPA + `/trekrevise` + Handover 8 (annotation → revision); a browser walkthrough found it borderline unusable and it duplicated the official `/playground` plugin's `document-critique` / `diff-review` templates. The SPA, the `/trekrevise` command, Handover 8, the supporting `lib/` modules (`anchor-parser`, `annotation-digest`, `markdown-write`, `revision-guard`), the Playwright e2e suite, and the `@playwright/test` / `@axe-core/playwright` devDeps are all deleted. In their place: a small, zero-dependency `scripts/render-artifact.mjs` that renders any brief/plan/review `.md` to a self-contained, design-system-styled, zero-network `.html` (frontmatter folded into a `<details>` block). The producing commands call it on their last step and print the link; to annotate, run `/playground` (`document-critique`) on the `.md` and paste the generated prompt back — Claude revises the artifact freehand. Forks depending on the removed surfaces migrate to the `/playground` plugin. See `plugins/voyage/CHANGELOG.md` § v5.0.0.
v5.1.0 adds Phase 3.5 to `/trekbrief`: 4 tier-coupled `AskUserQuestion` calls commit an effort level (`low | standard | high`) and an optional `model` (`sonnet | opus`) per downstream phase (`research`, `plan`, `execute`, `review`). The choices land in `brief.md` as `phase_signals:` (or `phase_signals_partial: true` on force-stop). `brief_version: 2.1` activates a validator-side sequencing gate (`BRIEF_V51_MISSING_SIGNALS`) so downstream commands halt with a friendly hint when signals are missing. Composition rule per downstream command: brief signal wins per-phase, profile fills gaps. `effort == low` activates each command's existing `--quick`-equivalent code-path (`/trekexecute` low-effort = `--gates open` + sequential-only). Additive — no breaking changes; pre-2.1 briefs still validate. See `plugins/voyage/CHANGELOG.md` § v5.1.0.
v5.0.3 lands the annotation UX modelled on `~/repos/claude-code-100x/claude-code-100x/build-site.js`: pencil-toggle annotation mode, **select text or click any element to anchor**, choose intent (**Fiks** / **Endre** / **Spørsmål**), write a comment, save. The sidebar groups annotations by section with intent badges; Copy Prompt assembles them into a structured markdown the operator pastes back into Claude. State persists in `localStorage` per artifact path. v5.0.2 was operator-led but too thin (line-click + freeform note, no intent categories). v5.0.1 had pointed at `/playground document-critique` (Claude-leads — wrong direction). v5.0.0 (breaking, kept) removed the v4.2/v4.3 bespoke playground SPA, `/trekrevise`, Handover 8, the supporting `lib/` modules, the Playwright e2e suite, and the `@playwright/test` / `@axe-core/playwright` devDeps. v5.0.3's `scripts/annotate.mjs` is one self-contained zero-dependency Node script. **The operator drives every annotation** — Claude never pre-generates suggestions in this flow. See `plugins/voyage/CHANGELOG.md` § v5.0.0 → § v5.0.3.
v4.0.0 (breaking) renamed the plugin from `ultraplan-local` to **Voyage** and all commands from `/ultra*-local` to `/trek*` to remove name collision with Anthropic's `/ultraplan` and `/ultrareview` features. See `plugins/voyage/TRADEMARKS.md` and `plugins/voyage/CHANGELOG.md`. v4.0.0 (breaking) renamed the plugin from `ultraplan-local` to **Voyage** and all commands from `/ultra*-local` to `/trek*` to remove name collision with Anthropic's `/ultraplan` and `/ultrareview` features. See `plugins/voyage/TRADEMARKS.md` and `plugins/voyage/CHANGELOG.md`.
@ -100,9 +94,9 @@ Six commands, one pipeline with clear division of labor:
- **`/trekreview`** — Close the iteration loop. Independent post-hoc reviewer reads `brief.md` from scratch and evaluates the diff produced by execute. Two parallel reviewers (brief-conformance + code-correctness) plus a Judge Agent (review-coordinator) for dedup and reasonableness filtering. Severity-tagged findings (Critical/High/Medium/Low/Info) with stable 40-char hex IDs feed back into planning via Handover 6 (`/trekplan --brief review.md` → remediation plan with `source_findings:` audit trail). - **`/trekreview`** — Close the iteration loop. Independent post-hoc reviewer reads `brief.md` from scratch and evaluates the diff produced by execute. Two parallel reviewers (brief-conformance + code-correctness) plus a Judge Agent (review-coordinator) for dedup and reasonableness filtering. Severity-tagged findings (Critical/High/Medium/Low/Info) with stable 40-char hex IDs feed back into planning via Handover 6 (`/trekplan --brief review.md` → remediation plan with `source_findings:` audit trail).
- **`/trekcontinue`** — Zero-friction multi-session resumption. In a fresh chat, type `/trekcontinue` — reads `.session-state.local.json` (Handover 7), prints a 3-line summary, and immediately begins executing the next session. Any session-end mechanism may write the state file (`/trekexecute` Phase 8/2.55/4 do so automatically; `/trekendsession` helper writes it for informal flows). Forward-compat schema (unknown top-level keys ignored) so future producers can extend additively. - **`/trekcontinue`** — Zero-friction multi-session resumption. In a fresh chat, type `/trekcontinue` — reads `.session-state.local.json` (Handover 7), prints a 3-line summary, and immediately begins executing the next session. Any session-end mechanism may write the state file (`/trekexecute` Phase 8/2.55/4 do so automatically; `/trekendsession` helper writes it for informal flows). Forward-compat schema (unknown top-level keys ignored) so future producers can extend additively.
`/trekbrief`, `/trekplan`, and `/trekreview` each end by running `scripts/annotate.mjs` against the just-written `.md`, printing the `file://<abs path>` link to the resulting self-contained operator-annotation HTML. The operator opens it, clicks any line to add their own note, watches a sidebar of every note (editable, deletable, persisted in browser `localStorage`), clicks "Copy Prompt" to get one structured prompt with every note, pastes back into Claude — Claude revises the `.md` from the notes. The operator drives every annotation. `/trekbrief`, `/trekplan`, and `/trekreview` each finish by rendering their `.md` artifact to a self-contained `.html` next to it (`scripts/render-artifact.mjs` — zero deps, zero network) and printing the `file://` link. To annotate, run the official `/playground` plugin (`document-critique`) on the `.md` and paste its generated prompt back into the conversation.
All artifacts land in one project directory: `.claude/projects/{YYYY-MM-DD}-{slug}/` contains `brief.md`, `research/NN-*.md`, `plan.md`, `sessions/`, `progress.json`, `review.md`, and `.session-state.local.json` (gitignored). `--project <dir>` works across `/trekresearch`, `/trekplan`, `/trekexecute`, `/trekreview`, and (optionally) `/trekcontinue`. All artifacts land in one project directory: `.claude/projects/{YYYY-MM-DD}-{slug}/` contains `brief.md` (+ `brief.html`), `research/NN-*.md`, `plan.md` (+ `plan.html`), `sessions/`, `progress.json`, `review.md` (+ `review.html`), and `.session-state.local.json` (gitignored). `--project <dir>` works across `/trekresearch`, `/trekplan`, `/trekexecute`, `/trekreview`, and (optionally) `/trekcontinue`.
v3.4.0 (non-breaking) adds the **autonomy chain from brief approval to main-merge** plus parallel-wave hardenings. New `lib/util/autonomy-gate.mjs` state machine (`idle → approved → executing → merge-pending → main-merged`), `lib/review/plan-review-dedup.mjs` for Phase 9 inline dedup, `lib/stats/event-emit.mjs` for autonomy-gate transitions and main-merge gate, and `--gates {open|closed|adaptive}` flag on all four pipeline commands. `commands/trekplan.md` Phase 8 seals Opus-4.7 plan/list-emission schema-drift via `plan-validator --strict`. `commands/trekexecute.md` Phase 2.6 wave-executor adds 11 hardenings for plugin-in-monorepo + gitignored-state topology (GIT_OPTIONAL_LOCKS, --max-turns, --max-budget-usd, scoped --allowedTools, push-before-cleanup ordering). New `hooks/scripts/post-compact-flush.mjs` PostCompact hook re-injects session-state after compaction. SC7 synthetic determinism floor (Jaccard ≥ 0.833) for plan + review fixtures. Hook baseline regression pins. Architecture decision: Path B (sequential `--no-ff` parallel waves with manifest-driven failure recovery) ships; Path C (cache-first hybrid) deferred to v3.5.0 contingent on cache-telemetry harvest. v3.4.0 (non-breaking) adds the **autonomy chain from brief approval to main-merge** plus parallel-wave hardenings. New `lib/util/autonomy-gate.mjs` state machine (`idle → approved → executing → merge-pending → main-merged`), `lib/review/plan-review-dedup.mjs` for Phase 9 inline dedup, `lib/stats/event-emit.mjs` for autonomy-gate transitions and main-merge gate, and `--gates {open|closed|adaptive}` flag on all four pipeline commands. `commands/trekplan.md` Phase 8 seals Opus-4.7 plan/list-emission schema-drift via `plan-validator --strict`. `commands/trekexecute.md` Phase 2.6 wave-executor adds 11 hardenings for plugin-in-monorepo + gitignored-state topology (GIT_OPTIONAL_LOCKS, --max-turns, --max-budget-usd, scoped --allowedTools, push-before-cleanup ordering). New `hooks/scripts/post-compact-flush.mjs` PostCompact hook re-injects session-state after compaction. SC7 synthetic determinism floor (Jaccard ≥ 0.833) for plan + review fixtures. Hook baseline regression pins. Architecture decision: Path B (sequential `--no-ff` parallel waves with manifest-driven failure recovery) ships; Path C (cache-first hybrid) deferred to v3.5.0 contingent on cache-telemetry harvest.
@ -126,7 +120,7 @@ Defense-in-depth security: plugin hooks block destructive commands and sensitive
Modes: default, brief-driven, project-scoped, research-enriched, foreground, quick, decompose, export, resume Modes: default, brief-driven, project-scoped, research-enriched, foreground, quick, decompose, export, resume
23 specialized agents · 6 commands (+ 1 helper) · 5 plugin hooks · 500+ tests · Operator-driven HTML annotation surface · No cloud dependency 23 specialized agents · 6 commands (+ 1 helper) · 5 plugin hooks · 500+ tests · Self-contained HTML artifact rendering · No cloud dependency
→ [Full documentation](plugins/voyage/README.md) · [Migration guide](plugins/voyage/MIGRATION.md) → [Full documentation](plugins/voyage/README.md) · [Migration guide](plugins/voyage/MIGRATION.md)
@ -174,7 +168,7 @@ Key command: `/graceful-handoff [topic-slug] [--no-commit] [--no-push] [--dry-ru
--- ---
### [MS AI Architect — Azure AI and Microsoft Foundry](plugins/ms-ai-architect/) `v1.15.0` `🇳🇴 Norwegian` ### [MS AI Architect — Azure AI and Microsoft Foundry](plugins/ms-ai-architect/) `v1.14.0` `🇳🇴 Norwegian`
Microsoft AI solution architecture guidance for Norwegian public sector and enterprise. Microsoft AI solution architecture guidance for Norwegian public sector and enterprise.
@ -189,11 +183,11 @@ Key commands: `/architect`, `/architect:ros`, `/architect:security`, `/architect
12 specialized agents · 25 commands · 5 skills (387 reference docs) · 2 hooks · manual sitemap-driven KB refresh 12 specialized agents · 25 commands · 5 skills (387 reference docs) · 2 hooks · manual sitemap-driven KB refresh
**One-click demo (v1.15.0, 2026-05-16):** "Last inn demo-data"-knappen på onboarding bootstrapper en ferdig "Acme Kommune" med demo-prosjektet "Acme: Kunde-chatbot" og alle 17 rapport-typer pre-importert. v2→v3 migrasjon auto-parser `raw_markdown` til `project.artifacts[cid]` så project-view viser aggregert verdict (BLOKKERT), key stats (17/17 artifacts), top-risks-liste, og navigerbart artifact-sidebar i én navigasjon. 24 retina-screenshots committed under `playground/screenshots/v1.15.0/` (12 surfaces × 2 tema), så forkere ser pluginen uten å kjøre noe. Standalone Playwright-runner under `tests/screenshot/` (egen `package.json`). **One-click demo (v1.14.0, 2026-05-08):** "Last inn demo-data"-knappen på onboarding bootstrapper en ferdig "Acme Kommune" med demo-prosjektet "Acme: Kunde-chatbot" og alle 17 rapport-typer pre-importert som `raw_markdown` (konsistente navn på tvers av alle fixtures). Visualisering rehydreres automatisk på project-surface mount. 24 retina-screenshots committed under `playground/screenshots/v1.14.0/` (12 surfaces × 2 tema), så forkere ser pluginen uten å kjøre noe. Standalone Playwright-runner under `tests/screenshot/` (egen `package.json`).
**Playground (v3, v1.15.0 — project-view integration, 2026-05-16):** Multi-surface decision-builder + report viewer. The single-file HTML app lives at `playground/ms-ai-architect-playground.html` (~3870+ lines). v1.15.0 erstatter v2 project-surface (screen-tabs + category-tabs + per-command paste-cards) med v3 `renderProjectView` (sidebar med 17 artifacts gruppert i 4 kategorier + main-area med per-artifact view eller overview + import-modal som DS-overlay). V2-surface helt fjernet (`renderProjectSurface`, `renderCommandSubCard`, `rehydratePasteImports`, 5 v2-CSS-klasser). 2 fingerprint-gap lukket (requirements + license headers). `migrateDataVersion` utvidet med `parserFor` slik at demo-state og persisted localStorage auto-parses. Ship-QA: `components-tier4-project-view.css` lagt til i `<link>`-kjeden (var ikke loaded → modal-overlay og two-column layout virket ikke). 386 E2E PASS, 0 FAIL, 2 WARN. **Playground (v3, v1.14.0 — root-cause refaktor, 2026-05-08):** Multi-surface decision-builder + report viewer. The single-file HTML app lives at `playground/ms-ai-architect-playground.html` (~3870+ lines). v1.14.0 leverer DS-konvensjon-adopsjon på 14 renderere over 6 sesjoner: B-DS-1/2/3 fikset i shared/ DS v0.4.0 (kanban-card word-break, expansion title-block, matrix-bubble cursor); 3 risk-renderere til DS-summary-grid + ros-layout; 6 compliance/govern-renderere bytter `.report-meta`-wrapper mot DS-konvensjon; renderMigrate + renderPoc til expansion-list per fase; 5b-fixes i renderCost/renderCompare/renderUtredning. Lokal `<style>`-blokk: 191 → 122 effektive linjer (~36% reduksjon siden v1.13.1).
- **4 surfaces:** Onboarding (4 strukturerte / 14 fritekst, prefill alle command-skjemaer) → Home (project list + 3 entry tracks) → Catalog (24 commands grouped in 5 expansion categories with search) → **Project v3** (sidebar med 17 artifacts + søk + main-area med per-artifact view eller aggregate overview + import-modal overlay) - **4 surfaces:** Onboarding (4 strukturerte / 14 fritekst, prefill alle command-skjemaer) → Home (project list + 3 entry tracks) → Catalog (24 commands grouped in 5 expansion categories with search) → Project (per-project tabs, command-form prefill, paste-back report import + visualization)
- **Persistence:** IndexedDB primary + localStorage fallback, schema-versioned (`STATE_KEY = 'ms-ai-architect-state-v1'`) with eager migrations pipeline. v1.10.0 adds idempotent `dataVersion v1→v2` migration that backfills `verdict` + `keyStats` on existing reports. - **Persistence:** IndexedDB primary + localStorage fallback, schema-versioned (`STATE_KEY = 'ms-ai-architect-state-v1'`) with eager migrations pipeline. v1.10.0 adds idempotent `dataVersion v1→v2` migration that backfills `verdict` + `keyStats` on existing reports.
- **17 inline report renderers (felles grunnskjelett)** — all wrap output through `renderPageShell()` with eyebrow + h1 + optional verdict-pill + optional key-stats-grid + archetype body (pyramid, 5×5/6×5/7×5 matrix, radar, kanban, mat-ladder, scenario-cards, screen-tabs, residual-pair, top-risks, recommendation-card, suppressed-panel, critique-card, read-more, traffic-light). - **17 inline report renderers (felles grunnskjelett)** — all wrap output through `renderPageShell()` with eyebrow + h1 + optional verdict-pill + optional key-stats-grid + archetype body (pyramid, 5×5/6×5/7×5 matrix, radar, kanban, mat-ladder, scenario-cards, screen-tabs, residual-pair, top-risks, recommendation-card, suppressed-panel, critique-card, read-more, traffic-light).
- **Foundation helpers**`renderPageShell`, `renderVerdictPill`, `renderKeyStatsGrid`, `inferVerdict`, `inferKeyStats`, `KEY_STATS_CONFIG`. - **Foundation helpers**`renderPageShell`, `renderVerdictPill`, `renderKeyStatsGrid`, `inferVerdict`, `inferKeyStats`, `KEY_STATS_CONFIG`.
@ -268,24 +262,6 @@ Activate with `/config` → **Output style** → **Human-Friendly**.
--- ---
### [Claude Design](plugins/claude-design/) `v0.1.0`
End-to-end facilitator for prompting Claude Design (`claude.ai/design` — Anthropic's Labs research preview launched 2026-04-17, Opus 4.7 pinned). Walks the operator from raw idea through intent-preset selection, audience and destination clarification, DESIGN.md anchor, five-layer prompt drafting, copy-paste delivery, iteration coaching, and ship-readiness handoff. Output is the prompt; the artifact gets built in Claude Design.
The plugin is the **pre-design and during-design** complement to Anthropic's official `knowledge-work-plugins/design` (`https://claude.com/plugins/design`). This plugin covers idea → prompt → iterate; Anthropic's plugin covers critique → accessibility → handoff. Zero command overlap by design — `tests/validate-plugin.sh` assertion (h) enforces the forbidden-command-name list mechanically.
- **Eight-phase facilitation flow** — disambiguate surface → name intent preset → audience + destination → DESIGN.md anchor → five-layer prompt draft → copy-paste delivery → iteration coaching (Tweak / Comment / Chat cascade) → ship-readiness check
- **Five foundation references + eight per-preset references** with evidence-grade labels (`Anthropic-documented + community-validated`, `Community-only`, `Experimental` for `frontier-design`)
- **Authoritative-claims discipline** — every reference file carries ≥1 Anthropic-domain URL citation (`anthropic.com`, `claude.com`, `support.claude.com`, `platform.claude.com`, `github.com/anthropics`); `.coverage.md` is the canonical registry
- **`.coverage.md`** at plugin root enumerates the 8 intent presets with evidence-grade labels and the 13 authoritative-claims files; SC2 and SC3 read from it directly
- **5 test scripts + `verify.sh` roll-up** — plugin structure validation, SC1 dogfood-log format, SC2 per-preset coverage, SC3 citation discipline, skill description quality
1 skill (`claude-design-facilitator`) · 13 reference files · 5 tests · 0 commands · 0 agents · 0 hooks
→ [Full documentation](plugins/claude-design/README.md)
---
## Shared infrastructure ## Shared infrastructure
### [Playground Design System](shared/playground-design-system/) `v0.1` ### [Playground Design System](shared/playground-design-system/) `v0.1`

View file

@ -31,11 +31,11 @@ Legacy bash scripts were removed in v1.0 (available in git history).
## Data storage ## Data storage
``` ```
$CLAUDE_PLUGIN_DATA/ ${CLAUDE_PLUGIN_DATA}/
├── sessions.jsonl Compact JSONL, one record per session ├── sessions.jsonl Compact JSONL, one record per session
├── events.jsonl {ts, session_id, tool_name} per tool call ├── events.jsonl {ts, session_id, tool_name} per tool call
└── state/ └── state/
└── <session_id>.json Live state during active session └── {session_id}.json Live state during active session
``` ```
State files are created at SessionStart and deleted at SessionEnd. State files are created at SessionStart and deleted at SessionEnd.

View file

@ -1,18 +0,0 @@
{
"name": "claude-design",
"version": "0.1.0",
"description": "End-to-end facilitator for prompting Claude Design (claude.ai/design) — idea to copy-paste-ready prompt with iteration coaching, citing Anthropic primary sources.",
"author": {
"name": "Kjell Tore Guttormsen"
},
"auto_discover": true,
"license": "MIT",
"repository": "https://git.fromaitochitta.com/open/ktg-plugin-marketplace",
"keywords": [
"claude-design",
"claude-ai",
"prompt-engineering",
"artifacts",
"design"
]
}

View file

@ -1,90 +0,0 @@
# claude-design coverage manifest
**Captured-on date:** 2026-05-17 | **Source:** `https://anthropic.com/news/claude-design-anthropic-labs` (intent-preset enumeration)
This file is the canonical input for SC2 verification (`tests/test-sc2-artifact-coverage.sh`) and the SC3 Authoritative-claims registry (`tests/test-sc3-citations.sh`). Both tests read this file directly — keep it in sync with the references tree.
Anthropic's launch enumeration names eight intent presets; this plugin ships one reference file per preset with explicit evidence-grade labelling. The evidence-grade levels are:
- **Anthropic-documented + community-validated** — Anthropic publishes verbatim prompt patterns and community practitioners have independently validated them
- **Community-only** — Anthropic names the preset but publishes no per-preset prompt patterns; the patterns come from community practitioners with attribution
- **Experimental** — neither Anthropic nor community practitioners have published verifiable prompt patterns; the preset is engaged speculatively
The evidence-grade labels are load-bearing for SC2 and SC3. Per-preset reference files restate the grade inline on line 4.
---
## Intent preset coverage
| Preset | Reference file | Evidence grade | Anthropic anchor URL |
| --- | --- | --- | --- |
| designs | skills/claude-design-facilitator/references/presets/designs.md | Evidence grade: Anthropic-documented + community-validated | https://anthropic.com/news/claude-design-anthropic-labs |
| prototypes | skills/claude-design-facilitator/references/presets/prototypes.md | Evidence grade: Anthropic-documented + community-validated | https://claude.com/resources/tutorials/using-claude-design-for-prototypes-and-ux |
| slides | skills/claude-design-facilitator/references/presets/slides.md | Evidence grade: Anthropic-documented + community-validated | https://claude.com/resources/tutorials/using-claude-design-for-presentations-and-slide-decks |
| one-pagers | skills/claude-design-facilitator/references/presets/one-pagers.md | Evidence grade: Community-only | https://anthropic.com/news/claude-design-anthropic-labs |
| wireframes-mockups | skills/claude-design-facilitator/references/presets/wireframes-mockups.md | Evidence grade: Community-only | https://anthropic.com/news/claude-design-anthropic-labs |
| pitch-decks | skills/claude-design-facilitator/references/presets/pitch-decks.md | Evidence grade: Community-only | https://anthropic.com/news/claude-design-anthropic-labs |
| marketing-collateral | skills/claude-design-facilitator/references/presets/marketing-collateral.md | Evidence grade: Community-only | https://anthropic.com/news/claude-design-anthropic-labs |
| frontier-design | skills/claude-design-facilitator/references/presets/frontier-design.md | Evidence grade: Experimental — no validated practitioner pattern | https://anthropic.com/news/claude-design-anthropic-labs |
The preset names in column 1 (`designs`, `prototypes`, `slides`, `one-pagers`, `wireframes-mockups`, `pitch-decks`, `marketing-collateral`, `frontier-design`) are the canonical names used by `tests/test-sc2-artifact-coverage.sh`. The test extracts column 1 via awk and runs grep against the plugin's content tree to verify each preset has at least one supporting file.
---
## Authoritative-claims files
The following files contain authoritative claims (Anthropic-published material, primary sources, or community-converged patterns with attribution). Each must carry at least one Anthropic-domain URL citation. `tests/test-sc3-citations.sh` reads this bullet list, parses paths via awk on `^- `, then runs the citation grep against each file.
- skills/claude-design-facilitator/references/00-what-claude-design-is-and-isnt.md
- skills/claude-design-facilitator/references/01-prompt-fundamentals.md
- skills/claude-design-facilitator/references/02-design-md.md
- skills/claude-design-facilitator/references/03-iteration-and-session.md
- skills/claude-design-facilitator/references/04-handoff-and-scope.md
- skills/claude-design-facilitator/references/presets/designs.md
- skills/claude-design-facilitator/references/presets/prototypes.md
- skills/claude-design-facilitator/references/presets/slides.md
- skills/claude-design-facilitator/references/presets/one-pagers.md
- skills/claude-design-facilitator/references/presets/wireframes-mockups.md
- skills/claude-design-facilitator/references/presets/pitch-decks.md
- skills/claude-design-facilitator/references/presets/marketing-collateral.md
- skills/claude-design-facilitator/references/presets/frontier-design.md
Total: 13 authoritative-claims files (5 foundation references + 8 per-preset references).
The bullet-list format is load-bearing — `tests/test-sc3-citations.sh` parses lines starting with `- ` (dash + space). Do not switch to a table or numbered list without updating the test.
---
## Re-research triggers
This manifest refreshes when any of these events occurs:
- **Anthropic publishes per-preset guidance for a Community-only preset** (one-pagers, wireframes-mockups, pitch-decks, marketing-collateral) — upgrade the affected row's evidence grade and add the new Anthropic anchor URL
- **Anthropic publishes per-preset guidance for the Experimental preset** (frontier-design) — upgrade to Community-only or Anthropic-documented depending on coverage depth
- **A new intent preset is added to Anthropic's launch-post enumeration** (`https://anthropic.com/news/claude-design-anthropic-labs`) — add a new row, write a new preset reference file
- **An existing intent preset is removed from the enumeration** — remove the row, deprecate the reference file in `CHANGELOG.md`
- **A first verified frontier-design practitioner artifact ships publicly** with prompt + output + reproduction steps — upgrade the frontier-design row from Experimental to Community-only, update `presets/frontier-design.md`
- **Anthropic support article URL slugs change while keeping numeric IDs stable** — re-pin URLs in column 4 (Anthropic anchor URL); the numeric IDs in `support.claude.com/en/articles/<numeric-id>-<slug>` are the stable anchor
- **Labs → GA URL rename for `claude.ai/design`** — re-pin the launch-post URL once the `-anthropic-labs` slug is dropped (note: the launch URL `https://anthropic.com/news/claude-design-anthropic-labs` may or may not 301-redirect after the rename)
When any trigger fires, run `bash plugins/claude-design/verify.sh --strict` after the manifest update to confirm SC2 and SC3 still pass.
---
## Related sources (for context, not for SC checks)
Anthropic primary sources that ground this manifest but are not themselves authoritative-claims files (because they are external URLs, not plugin files):
- `https://anthropic.com/news/claude-design-anthropic-labs` — preset enumeration
- `https://support.claude.com/en/articles/14604416-get-started-with-claude-design` — GLCA framework
- `https://support.claude.com/en/articles/14604397-set-up-your-design-system-in-claude-design` — design-system setup
- `https://support.claude.com/en/articles/13521390-use-claude-for-powerpoint` — PowerPoint-mode conventions
- `https://claude.com/resources/tutorials/using-claude-design-for-prototypes-and-ux` — prototypes tutorial
- `https://claude.com/resources/tutorials/using-claude-design-for-presentations-and-slide-decks` — slides tutorial
- `https://anthropic.com/engineering/harness-design-long-running-apps` — design grading framing
- `https://github.com/anthropics/skills/skills/frontend-design/SKILL.md` — Design-Thinking Framework, AI-slop avoid-list
- `https://claude.com/blog/improving-frontend-design-through-skills` — default-avoidance blog post
- `https://claude.com/plugins/design` — Anthropic's official knowledge-work-plugins/design plugin (downstream tool)
- `https://github.com/anthropics/knowledge-work-plugins` — source for Anthropic's downstream plugin
Anthropic URL canonicalisation: every `support.claude.com` reference uses the `https://support.claude.com/en/articles/<numeric-id>-<slug>` form. Numeric IDs are stable across slug rewrites; slug-only URLs are not.

View file

@ -1,37 +0,0 @@
# Changelog
All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
## [0.1.0] — 2026-05-17
### Added
- `claude-design-facilitator` skill with eight-phase facilitation flow (disambiguate → intent preset → audience + destination → DESIGN.md anchor → five-layer prompt draft → copy-paste delivery → iteration coaching → ship-readiness handoff) and 12 natural-language trigger phrases registered in `.triggers.txt`.
- Five foundation references under `skills/claude-design-facilitator/references/`: `00-what-claude-design-is-and-isnt.md` (surface disambiguation), `01-prompt-fundamentals.md` (five-layer prompt stack: GLCA + start-simple + concrete-alternative-spec + propose-options + AI-slop avoid-list + four design dimensions + four grading criteria), `02-design-md.md` (DESIGN.md 9-section canonical structure + brand-to-DESIGN.md extractor), `03-iteration-and-session.md` (Tweak / Comment / Chat cascade, session economics, recovery prompt library), `04-handoff-and-scope.md` (one-way Design → Code handoff + scope fence vs Anthropic's `knowledge-work-plugins/design`).
- Eight per-preset references under `skills/claude-design-facilitator/references/presets/` with evidence-grade labels: `designs.md`, `prototypes.md`, `slides.md` (Anthropic-documented + community-validated); `one-pagers.md`, `wireframes-mockups.md`, `pitch-decks.md`, `marketing-collateral.md` (Community-only); `frontier-design.md` (Experimental — no validated practitioner pattern as of 2026-05-16).
- `.coverage.md` at plugin root — preset enumeration table with evidence-grade labels (8 rows) + `Authoritative-claims files` bullet-list registry (13 paths). Canonical input for SC2 and SC3 verification.
- Five verification scripts under `tests/`: `validate-plugin.sh` (structural integrity + forbidden-command-name scope fence + operator-private-context grep + Norwegian-leakage advisory), `test-skill-triggers.sh` (description quality + trigger phrase coverage), `test-sc2-artifact-coverage.sh` (per-preset coverage from `.coverage.md`), `test-sc3-citations.sh` (Anthropic-domain citation discipline), `test-sc1-dogfood-log.sh` (operator dogfood log format-check in `REMEMBER.md`).
- `verify.sh` top-level roll-up with `--strict` (SC1 missing-block becomes FAIL) and `--quick` (skip skill-triggers test) flags.
- `LICENSE` (MIT) and `GOVERNANCE.md` (marketplace fork-and-own blurb).
- Marketplace registration in root `.claude-plugin/marketplace.json`.
### Documentation
- Plugin `README.md` rewritten from scaffold placeholder to full v0.1 surface description with `Scope and complementarity` section (placed before installation per brief), `What this plugin is NOT` (Non-Goals), eight-phase facilitation flow table, skill surface table, reference content map, per-preset coverage table, verification section, AI-generated disclosure, fork-and-own MIT licensing.
- Plugin `CLAUDE.md` translated to English (operator override of marketplace's Norwegian-dialogue default per v0.1 brief constraint); added `Scope fence` section explicitly forbidding command-name collisions with Anthropic's `knowledge-work-plugins/design` (`/critique`, `/accessibility`, `/ux-copy`, `/research-synthesis`, `/design-system`, `/handoff`); `Authoring rules` section codifies English-everywhere, no operator-private context, evidence-grade label discipline, URL canonicalisation on `support.claude.com/en/articles/<numeric-id>-<slug>`; `Communication patterns` block preserved verbatim.
- Root marketplace `README.md` updated with `### [Claude Design](plugins/claude-design/) \`v0.1.0\`` entry under the `## Plugins` section, positioned after the Human-Friendly Style entry per existing convention. Entry documents the complementary lifecycle coverage vs `knowledge-work-plugins/design`.
### Notes
- **Scope:** claude-design facilitates the pre-design and during-design lifecycle for `claude.ai/design` (Anthropic Labs research preview, Opus 4.7 pinned, eight intent presets). For post-design — critique, accessibility audit, UX copy review, design-system audit, engineering handoff — install Anthropic's official plugin via `claude plugins add knowledge-work-plugins/design`. Zero command overlap, complementary by design.
- **No browser automation.** This plugin produces prompts; the artifact gets built inside `claude.ai/design`. The operator copies and pastes manually.
- **No artifact code generation.** This plugin is a prompt-builder, not an artifact generator. Claude Design is the generator.
- **No artifact storage or versioning.** Claude Design has no version-tree primitive and this plugin does not invent one. The verbal save-pattern documented in `references/03-iteration-and-session.md` is the closest substitute.
- **English everywhere in shipped content.** Operator override of the marketplace's default Norwegian-dialogue convention. `tests/validate-plugin.sh` assertion (j) emits WARN on Norwegian diacritics in shipped content; review case-by-case.
- **Evidence-grade discipline.** Every per-preset reference file carries an inline `Evidence grade:` label on line 4 with one of three values: `Anthropic-documented + community-validated`, `Community-only`, `Experimental`. `.coverage.md` is the canonical registry.
- **Re-research triggers** documented in `.coverage.md` — fire on Anthropic publishing per-preset guidance for Community-only presets, on new intent presets added to the launch enumeration, on the first verified `frontier-design` practitioner artifact shipping publicly, on Labs → GA URL rename for `claude.ai/design`, on Anthropic's `knowledge-work-plugins/design` adding or removing slash-commands.
## [0.1.0-pre] — 2026-05-15
### Added
- Initial scaffold (README, CLAUDE.md, ROADMAP, TODO, plugin.json placeholder).

View file

@ -1,88 +0,0 @@
# claude-design
## Context
This plugin is an expert on **Claude Design** (`claude.ai/design`) — Anthropic's Labs research preview for generating interactive design artifacts from a prompt. It walks the operator through the full lifecycle: idea → intent-preset selection → audience and destination → DESIGN.md anchor → five-layer prompt drafting → copy-paste delivery → iteration coaching → ship-readiness handoff. It does not generate artifact code itself and it does not drive the browser; it produces the prompt that the operator pastes into Claude Design.
## Status
`v0.1.0`. Surface:
- One skill: `claude-design-facilitator` (auto-fire + explicit `/claude-design-facilitator` slash command)
- Five foundation references under `skills/claude-design-facilitator/references/`
- Eight per-preset references under `skills/claude-design-facilitator/references/presets/`
- Five test scripts under `tests/` plus a `verify.sh` roll-up
- A `.coverage.md` preset manifest at the plugin root (canonical input for SC2 and the SC3 Authoritative-claims registry)
- `LICENSE` (MIT), `GOVERNANCE.md` (marketplace fork-and-own blurb), `README.md`, `CHANGELOG.md`
No commands, no agents, no hooks, no MCP servers at v0.1. The single skill is the entire user-facing surface.
## Marketplace context
This plugin lives inside `ktg-plugin-marketplace`. No separate git repository, no separate Forgejo remote. All commits go to the marketplace repository at `https://git.fromaitochitta.com/open/ktg-plugin-marketplace`.
Marketplace conventions inherited from the root `CLAUDE.md`:
- Conventional Commits — `type(scope): description`; scope is `claude-design`
- Hooks in Node.js (`.mjs`), never bash (this plugin ships no hooks at v0.1)
- Zero npm dependencies in hooks and scripts
- Docs-triple updated in the same commit on every feature change: plugin `README.md` + plugin `CLAUDE.md` + root `README.md`
## Architecture (v0.1)
- **`skills/claude-design-facilitator/SKILL.md`** is the auto-fire entry point AND the explicit `/claude-design-facilitator` invocation surface. The skill body documents the eight-phase facilitation flow.
- **`skills/claude-design-facilitator/.triggers.txt`** lists the natural-language phrases the skill auto-fires on. `tests/test-skill-triggers.sh` validates every phrase appears in the SKILL.md description.
- **`skills/claude-design-facilitator/references/`** is the knowledge base. Five foundation references (0004) plus eight per-preset references under `references/presets/`. Every authoritative claim cites an Anthropic primary source inline.
- **`.coverage.md`** at the plugin root is the SC2 manifest (preset enumeration with evidence-grade labels) and the SC3 Authoritative-claims registry (bullet list of files that must carry Anthropic-domain citations).
- **`tests/`** + **`verify.sh`** enforce the brief Success Criteria: SC1 dogfood-log format, SC2 per-preset coverage, SC3 citation discipline, plus skill description quality and plugin structural integrity.
The skill body never offers to generate artifact code, automate the browser, or store artifact history (per [Non-Goals in README](README.md)). It produces prompts.
## Scope fence
This plugin covers **pre-design and during-design** for `claude.ai/design`: idea → prompt → preview → iterate → ship-readiness.
**Post-design** — critique, accessibility audit, UX copy review, research synthesis, design-system audit, engineering handoff — is out of scope and lives in Anthropic's official `knowledge-work-plugins/design` (`https://claude.com/plugins/design`). This plugin must never duplicate the commands `/critique`, `/accessibility`, `/ux-copy`, `/research-synthesis`, `/design-system`, `/handoff` — with or without a `claude-design:` namespace prefix. `tests/validate-plugin.sh` assertion (h) enforces this scope fence mechanically.
The lifecycle-stage coverage map and the operational handoff between the two plugins are documented in `skills/claude-design-facilitator/references/04-handoff-and-scope.md`.
## Authoring rules
Every contribution to this plugin must respect these rules:
- **Language: English everywhere.** Plugin file content — `README.md`, `CLAUDE.md` (this file), `CHANGELOG.md`, `SKILL.md`, all `references/*.md`, all `tests/*.sh` output messages, every code comment — is English. This is the operator override of the marketplace's default Norwegian-dialogue policy; documented in the v0.1 brief. The `tests/validate-plugin.sh` assertion (j) emits a WARN on Norwegian diacritics in shipped content; review case-by-case (citation slugs occasionally legitimately carry diacritics, but the default is zero hits).
- **No operator-private context in shipped content.** No personal-name or organization-affiliation tokens, no copy-paste from local session-state and handoff files. `tests/validate-plugin.sh` assertion (i) enforces this with a recursive grep on the specific patterns it bans; the grep excludes the local files themselves.
- **Evidence-grade label discipline.** Every per-preset reference file carries an inline `Evidence grade:` label on line 4. The three grades are `Anthropic-documented + community-validated`, `Community-only`, and `Experimental`. `.coverage.md` is the canonical registry. SC2 and SC3 read from `.coverage.md` directly — keep it in sync.
- **URL canonicalisation.** All `support.claude.com` references use the form `https://support.claude.com/en/articles/<numeric-id>-<slug>`. Numeric IDs are stable across slug rewrites; slug-only URLs are not. `https://anthropic.com/news/...` and `https://claude.com/blog/...` follow whatever slug Anthropic publishes.
- **No NIH of Anthropic surfaces.** The plugin recommends Anthropic's `knowledge-work-plugins/design` as the downstream tool; it does not duplicate that plugin's functionality.
## Workflow
The Voyage pipeline produces v0.1 and every subsequent feature change:
1. **Brief** closes scope and scope boundaries
2. **Research** gathers external sources — Anthropic primary material (news posts, support articles, blog posts, open-source skills, tutorials, plugins), plus community practitioners with attribution
3. **Plan** specifies file-by-file what gets built
4. **Execute** delivers the code and content
5. **Review** is the release gate (`/trekreview`)
Voyage policy: Opus across all sub-agents and orchestrator phases (per `feedback_voyage_opus_always`).
For incremental content updates that do not warrant a full Voyage iteration (e.g., refreshing a single per-preset reference when Anthropic publishes new guidance), the docs-triple rule still applies: plugin `README.md` + plugin `CLAUDE.md` (this file) + root `README.md` updated in the same commit as the content change.
## Communication patterns
### Linking to local files
When pointing to local files in responses, always use markdown link syntax with a descriptive name:
- Use `[Human-friendly name](file:///absolute/path)` — never bare `file:///...` URLs or autolinks `<file://...>`.
- Always use absolute paths. Never `~/` or relative paths.
- For multiple files, render as a bullet list of named markdown links.
Why: bare `file://` URLs only render the first as clickable across multiple lines. Named markdown links make each entry independently clickable and look cleaner.
Example:
- [Brief](file:///Users/ktg/.../brief.html)
- [Research summary](file:///Users/ktg/.../research/summary.md)

View file

@ -1,118 +0,0 @@
# Governance
How this marketplace is maintained, what you can expect from upstream, and how it's meant to be used.
## TL;DR
- Solo-maintained, AI-assisted development, MIT licensed.
- **Fork-and-own is the default model.** Upstream is a starting point, not a vendor.
- Issues welcome as signals. Pull requests are not accepted — see [Why no PRs](#pull-requests--no).
- No SLA. Best-effort bug fixes and security advisories. Breaking changes happen and are noted in each plugin's CHANGELOG.
---
## Can I trust this?
Be honest with yourself about what you're adopting:
- **One maintainer.** If I get hit by a bus, the bus wins. The repos stay up under MIT, but no one owes you a fix.
- **AI-generated code with human review.** Every plugin is built through dialog-driven development with Claude Code. I read, test, and judge the output before it ships, but I'm not auditing every line the way a security firm would. Treat it accordingly.
- **No commercial interests.** I'm not selling a SaaS, not steering you toward a paid tier, not collecting telemetry. The plugins run locally in your Claude Code installation.
- **MIT licensed.** Fork it, modify it, ship it under your own name.
If you work somewhere that needs vendor accountability, support contracts, or signed assurances — **this isn't that.** Use it as a reference implementation, fork it into your own organization, and own the result.
---
## How this is meant to be used
### Fork-and-own
The intended workflow:
1. **Fork** the marketplace (or a single plugin) into your own organization or namespace.
2. **Tailor** it to your context — terminology, integrations, whatever doesn't fit out of the box.
3. **Maintain it yourself.** Treat your fork as the canonical version for your team.
4. **Watch upstream selectively.** Cherry-pick changes that help, ignore changes that don't. There's no obligation to stay in sync.
For `claude-design` specifically, the most likely fork is a content adaptation — different intent-preset coverage (e.g., dropping `frontier-design` if your team never uses it), an organization-specific DESIGN.md template, a different evidence-grade discipline, or per-preset prompt patterns tuned to your team's design system. The plugin is a content surface plus a single skill. Forking it is straightforward.
### What to change first when you fork
- **Identity** — rename the plugin, replace authorship, update README.
- **Reference content** — the `references/` tree reflects what Anthropic published and the community converged on as of 2026-05-17. Adjust to your team's house style and design system.
- **Frontmatter**`name` and `description` show up in `/config`. Pick names that won't collide with other forks installed on the same machine.
### Staying current with upstream
If you want to pull in upstream changes later:
- **Cherry-pick, don't merge.** Each plugin moves independently.
- **Read the CHANGELOG first.**
- **Keep your customizations distinct.** A renamed skill (`my-org-design-facilitator`) merges more cleanly than edits to `claude-design-facilitator`.
---
## What upstream provides
| | What I do | What I don't |
|---|---|---|
| **Bug fixes** | Best-effort when I notice or get a clear report | No SLA, no triage commitment |
| **Security issues** | Investigate within reasonable time, document in CHANGELOG | No CVE process, no embargo coordination |
| **New features** | When they fit my own usage | Not on request |
| **Breaking changes** | Documented in CHANGELOG | They happen — version pin if you need stability |
| **Compatibility** | Tracked against current Claude Code releases | No long-term support branches |
If any of this is a dealbreaker — fork now, version-pin, and stop reading upstream.
---
## How to contribute
### Issues — yes, please
Issues are the most valuable thing you can send me:
- **Bug reports** with reproduction steps. Even a screenshot helps.
- **Use-case feedback.** "I tried to use this in my organization and X didn't fit" is genuinely useful, even if I can't fix it for you.
- **Content suggestions.** If a reference file in `claude-design` produces guidance that doesn't match what you observe in `claude.ai/design` today, tell me what you saw. Concrete examples beat abstract complaints.
### Pull requests — no
This is deliberate, not laziness:
- **Solo review is a bottleneck.** Honest PR review takes me longer than rewriting from scratch. The math doesn't work.
- **Forks are where the value is.** The fork-and-own model means upstream consolidation isn't the point. Your organization's adaptations belong in your fork, not mine.
- **AI-generated code complicates provenance.** Every line here is produced through dialog with Claude Code, with me as the judge. Mixing in PRs from contributors with different processes and licensing assumptions creates a mess I'd rather not untangle.
If you've built something useful on top of a fork, **publish it under your own name and link back.** I'll happily list notable forks here once they exist.
### Notable forks
*(To be populated as forks emerge. If you've forked this plugin for production use, open an issue and I'll add a link.)*
---
## Relationship between plugins
These plugins are **independent**. Install one without the others, fork one without the others. They share conventions (slash command naming, hook patterns, AI-generated disclosure, and the shared `human-friendly-style` output style) but no runtime dependencies.
`claude-design` is a content surface with a single skill — it works without any other plugin installed. It recommends Anthropic's official `knowledge-work-plugins/design` as the downstream tool for post-design critique, accessibility audit, and engineering handoff, but does not depend on it being present.
The marketplace is a **catalog**, not a suite. Don't fork the whole repo unless you actually want to maintain everything.
---
## Versioning and stability
- **Semantic versioning per plugin.** Each plugin has its own `CHANGELOG.md` and version number.
- **Breaking changes happen.** I bump the major version when they do, but I don't run an LTS branch.
- **Pin your version.** If stability matters more than features, install a specific version and stay there until you choose to upgrade.
For `claude-design` specifically: changes to skill trigger behavior or per-preset reference content schema are minor or major bumps. Pure documentation or per-preset content refresh from Anthropic source updates are patch. The skill surface itself is meant to be stable across patch releases.
---
## License
MIT for all plugins in this marketplace. See [LICENSE](LICENSE) in this plugin and each other plugin's `LICENSE` file.

View file

@ -1,21 +0,0 @@
MIT License
Copyright (c) 2026 Kjell Tore Guttormsen
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

View file

@ -1,298 +0,0 @@
# Claude Design Facilitator
> End-to-end facilitator for prompting Claude Design (`claude.ai/design`). Walks the operator from raw idea through intent-preset selection, audience and destination clarification, DESIGN.md anchor, five-layer prompt drafting, copy-paste delivery, iteration coaching, and ship-readiness handoff. Cites Anthropic primary sources inline. Recommends Anthropic's official `knowledge-work-plugins/design` as the downstream post-design tool.
> **Solo-maintained, fork-and-own.** This plugin is a starting point, not a vendor product. Issues are welcome as signals; pull requests are not accepted. See [GOVERNANCE.md](GOVERNANCE.md) for the full model and what upstream provides.
*AI-generated: all content produced by Claude Code through dialog-driven development. [Full disclosure →](../../README.md#ai-generated-code-disclosure)*
![Version](https://img.shields.io/badge/version-0.1.0-blue)
![Platform](https://img.shields.io/badge/platform-Claude_Code_Plugin-purple)
![Skill](https://img.shields.io/badge/skills-1-green)
![References](https://img.shields.io/badge/references-13-green)
![Hooks](https://img.shields.io/badge/hooks-0-lightgrey)
![Commands](https://img.shields.io/badge/commands-0-lightgrey)
![License](https://img.shields.io/badge/license-MIT-lightgrey)
A Claude Code plugin that ships one skill (`claude-design-facilitator`) plus a reference tree for prompting Anthropic's `claude.ai/design` workspace. The skill auto-fires on natural-language triggers, walks the operator through an eight-phase facilitation flow, and produces a copy-paste-ready prompt grounded in Anthropic's verbatim Goal / Layout / Content / Audience framework and the four published per-preset prompt patterns. Output is the prompt — the artifact gets built in Claude Design.
---
## Why this exists
Claude Design has a strong gravitational pull toward convergent middle-ground output. A one-line prompt like *"make me a slide deck for Q1 results"* reliably produces what Anthropic's own cookbook for [prompting frontend aesthetics](https://platform.claude.com/cookbook/coding-prompting-for-frontend-aesthetics) names as the failure mode: Inter or Roboto typography, white-to-purple gradients, evenly-spaced cards, cramped layouts that read as AI-generated. The convergence is not random — it is what the model defaults to when prompts are underspecified.
The fix is in the prompt itself, not in the artifact. Anthropic publishes a five-layer prompt scaffold across three primary sources — the Goal / Layout / Content / Audience framework in the [Claude Design launch post](https://anthropic.com/news/claude-design-anthropic-labs) and [Get started article](https://support.claude.com/en/articles/14604416-get-started-with-claude-design), the DESIGN.md anchor in the [design system article](https://support.claude.com/en/articles/14604397-set-up-your-design-system-in-claude-design), and the AI-slop avoid-list plus cultural-reference anchoring in the [aesthetics cookbook](https://platform.claude.com/cookbook/coding-prompting-for-frontend-aesthetics). Assembling a prompt that actually uses all five layers, with the right per-preset pattern, in the right order, takes deliberate scaffolding most operators do not do unprompted.
This plugin does the scaffolding interactively. The `claude-design-facilitator` skill walks the operator through eight phases, surfaces the questions that produce a workable Goal / Layout / Content / Audience answer, anchors on DESIGN.md if one exists or extracts one if not, composes the five layers in the right order, and outputs a copy-paste prompt the operator pastes into `claude.ai/design`. The artifact gets built in Claude Design; this plugin produces the prompt.
The output is honest about what it is. Every authoritative claim cites an Anthropic primary source inline. Community patterns are labelled and attributed. The `frontier-design` preset is flagged Experimental rather than dressed up as canonical. The plugin recommends Anthropic's official [`knowledge-work-plugins/design`](https://claude.com/plugins/design) for everything that happens after the artifact is generated — there is zero command overlap by design.
---
## Scope and complementarity
This plugin covers the **pre-design and during-design lifecycle** for `claude.ai/design`: idea → intent-preset selection → prompt engineering → copy-paste delivery → iteration coaching → ship-readiness check.
For **post-design** work — critique, accessibility audit, UX copy review, research synthesis, design-system audit, engineering handoff guidance — install Anthropic's official plugin:
```
claude plugins add knowledge-work-plugins/design
```
Anthropic's plugin operates on existing artifacts (Figma URLs, screenshots, copy snippets) and ships six slash-commands: `/critique`, `/accessibility`, `/ux-copy`, `/research-synthesis`, `/design-system`, `/handoff`. There is zero command overlap with this plugin and complementary lifecycle coverage — the two plugins are designed to be installed together. See [skills/claude-design-facilitator/references/04-handoff-and-scope.md](skills/claude-design-facilitator/references/04-handoff-and-scope.md) for the full coverage map.
---
## What this plugin is NOT
By design, this plugin does not:
- **Drive the browser.** No automation of `claude.ai/design` itself; you copy and paste the prompts the skill produces.
- **Generate the artifact code.** Claude Design is the artifact generator. This plugin produces prompts that go into Claude Design.
- **Store artifact history or version artifacts.** Claude Design has no version-tree primitive and this plugin does not invent one.
- **Cover adjacent Anthropic surfaces.** Classic Artifacts at `claude.ai`, Live Artifacts in Claude Cowork, custom visuals embedded in a chat reply are out of scope — see [skills/claude-design-facilitator/references/00-what-claude-design-is-and-isnt.md](skills/claude-design-facilitator/references/00-what-claude-design-is-and-isnt.md) for the disambiguation reference.
- **Duplicate Anthropic's `knowledge-work-plugins/design` plugin.** No `/critique`, no `/accessibility`, no `/ux-copy`, no `/research-synthesis`, no `/design-system`, no `/handoff`. The post-design lane belongs to Anthropic's plugin.
`tests/validate-plugin.sh` enforces the forbidden-command-name list mechanically.
---
## Installation
Add the marketplace once, then install the plugin:
```bash
claude plugins marketplace add ktg-plugin-marketplace https://git.fromaitochitta.com/open/ktg-plugin-marketplace
```
In Claude Code:
```
/plugin install claude-design@ktg-plugin-marketplace
```
Or enable directly in `~/.claude/settings.json`:
```json
{
"enabledPlugins": {
"claude-design@ktg-plugin-marketplace": true
}
}
```
The skill auto-discovers; no further configuration needed.
---
## What you can do with it
The skill `claude-design-facilitator` walks the operator through eight phases. The phases are scoping + grounding (14), drafting + delivery (56), and iteration + ship-readiness (78).
| Phase | What happens |
|-------|--------------|
| **1. Disambiguate the surface** | Confirm `claude.ai/design` is the intended surface, not classic Artifacts, Live Artifacts, custom chat visuals, or `knowledge-work-plugins/design`. Read [references/00](skills/claude-design-facilitator/references/00-what-claude-design-is-and-isnt.md) when signals are mixed. |
| **2. Name the intent preset** | Pick one of eight Claude Design presets: `designs`, `prototypes`, `slides`, `one-pagers`, `wireframes-mockups`, `pitch-decks`, `marketing-collateral`, `frontier-design`. The per-preset reference file shapes the prompt pattern. Evidence-grade labels are surfaced. |
| **3. Audience and destination** | Capture audience (internal team / external stakeholder / investor / customer) and destination (PDF / PPTX / HTML / Canva / Code-handoff / share-link). Flag PPTX-export traps for `pitch-decks` early. |
| **4. Anchor on DESIGN.md** | Read [references/02](skills/claude-design-facilitator/references/02-design-md.md). If the operator has no DESIGN.md, point at the copy-paste brand-to-DESIGN.md extractor prompt. |
| **5. Draft the prompt** | Compose layers 15 from [references/01](skills/claude-design-facilitator/references/01-prompt-fundamentals.md): Anthropic's verbatim Goal / Layout / Content / Audience framework + start-simple-layer-complexity + concrete-alternative-spec + propose-options-before-building + AI-slop negative constraints + four design dimensions + four grading criteria + the per-preset pattern. |
| **6. Deliver** | Output a single copy-paste-ready fenced markdown code block. Add a one-line caption and three to five expected follow-up turns. |
| **7. Iteration coaching** | Read [references/03](skills/claude-design-facilitator/references/03-iteration-and-session.md). Coach which surface to use next — Tweak panel (zero-token, surgical), inline comments (component-scoped), or chat (full regen). Session-break heuristics + recovery prompt library when iteration gets stuck. |
| **8. Ship-readiness** | Run the export validation checklist. If shipping to engineering, confirm the Design → Code handoff bundle is complete. Recommend installing `knowledge-work-plugins/design` for downstream critique / accessibility / handoff. |
The skill auto-fires on natural-language triggers like *"I want to build a dashboard in Claude Design"*, *"help me prompt claude.ai/design"*, *"iterate on my Claude Design artifact"*. The full trigger list is in [skills/claude-design-facilitator/.triggers.txt](skills/claude-design-facilitator/.triggers.txt) and `tests/test-skill-triggers.sh` validates each phrase appears in the skill description.
Explicit invocation works too: the skill registers as the slash command `/claude-design-facilitator` for when the operator wants to start a clean facilitation session.
---
## Workflow example: from idea to prompt
A realistic session against the `slides` preset — Q1 results deck for an internal engineering all-hands.
**Operator:** *"I want to build a Q1 results slide deck for the engineering team in Claude Design."*
The skill auto-fires (the phrase matches `.triggers.txt`). It walks the eight phases:
**Phase 1 — Disambiguate the surface.** The skill confirms `claude.ai/design` is the intended surface, not classic Artifacts or Live Artifacts. The operator confirms.
**Phase 2 — Name the intent preset.** Slide deck → `slides` preset. The skill notes this is one of three Anthropic-documented presets (evidence-grade label surfaced from `.coverage.md`). It opens [`references/presets/slides.md`](skills/claude-design-facilitator/references/presets/slides.md) and surfaces the five canonical Anthropic patterns (Q1 results, executive roadmap, customer-prep briefing, partner proposal, all-hands announcement). The operator picks pattern 1.
**Phase 3 — Audience and destination.** Internal engineering team; deck stays in HTML preview during the meeting, optional PPTX export to share with adjacent leads afterward. The skill flags the PPTX-export trap from [`references/presets/slides.md`](skills/claude-design-facilitator/references/presets/slides.md) section (e): fonts substitute, master slides drop, charts may flatten to images. If a brand-compliant PPTX template exists, upload it to Claude Design as a project asset before prompting — Claude reads the slide master, layouts, fonts, and colour scheme and respects them ([PowerPoint-mode article](https://support.claude.com/en/articles/13521390-use-claude-for-powerpoint)).
**Phase 4 — Anchor on DESIGN.md.** The operator has no DESIGN.md yet. The skill points at the brand-to-DESIGN.md extractor prompt in [`references/02-design-md.md`](skills/claude-design-facilitator/references/02-design-md.md): paste a brand-guidelines URL or PDF into Claude.ai, get back a DESIGN.md filling the nine canonical sections (typography, colour, spacing, layout primitives, motion, voice, imagery, density, accessibility). The operator runs the extractor against the company's brand site, gets a DESIGN.md, drops it into the Claude Design project assets.
**Phase 5 — Draft the prompt.** The skill composes the five layers from [`references/01-prompt-fundamentals.md`](skills/claude-design-facilitator/references/01-prompt-fundamentals.md): Goal / Layout / Content / Audience (Layer 1) → start-simple-layer-complexity (Layer 2) → concrete-alternative-spec (Layer 3) → AI-slop negative constraints (Layer 4) → per-preset pattern from `presets/slides.md` (Layer 5). The skill produces a single copy-paste fenced block. The operator inspects it, optionally edits the Goal sentence, then proceeds.
**Phase 6 — Deliver.** The skill outputs the prompt block. The structure of a realistic delivery for this scenario looks like:
```
**Goal:** Communicate Q1 engineering results to the all-hands —
where we started, what changed, what we shipped, what we learned,
what's next for Q2. The deck should land as confident but honest:
real numbers, named risks, no victory-lap framing. Audience is
~80 engineers across three teams. Density should be high enough
to skim later, low enough to follow live.
**Layout:** 1012 slides, slide-by-slide:
1. Title + Q1 in one sentence
2. The three things we shipped (one per row, screenshot + metric)
3. The two things that slipped (named honestly, with the why)
4. Hiring update (count + retention)
5. Reliability (incident count, MTTR trend)
6. Customer signal (NPS + 2 verbatim quotes)
7. Engineering health (PR throughput, review latency)
8. The big bet for Q2 (one slide, named)
9. Risks for Q2 (3 bullets, ranked)
10. Asks from the all-hands (13 specific asks)
11. Q&A placeholder
**Content:** Use the metrics in DESIGN.md's `tone` section — direct,
specific, no marketing voice. Numbers are placeholder; I'll edit
before the meeting.
**Audience:** Internal engineering all-hands, 80 people, ICs through
EM/Director level. They want to know: did we ship what we said, what
broke, what's next, can I help.
**Avoid:** Inter or Roboto, white-to-purple gradients, evenly-spaced
generic card layouts, "exciting Q1!" framing, congratulatory tone,
stock-photo gradients, generic icon library defaults.
**Anchor:** Match the DESIGN.md uploaded as a project asset. If our
brand voice reads as understated technical, push the deck that way —
not the convergent SaaS-marketing deck aesthetic.
**Reference:** Treat this as the Q1 results pattern from
https://claude.com/resources/tutorials/using-claude-design-for-presentations-and-slide-decks
(pattern 1), with the Layout above overriding the tutorial's slide count.
```
That block is what gets pasted into `claude.ai/design`. The skill also surfaces three to five expected follow-up turns (e.g., *"the headline slide is too marketing, push it more technical"*, *"slide 5 reliability — show the MTTR trend as a sparkline, not a bar chart"*) so the operator knows what iteration looks like before starting.
**Phase 7 — Iteration coaching.** Once Claude Design produces the first version, the skill points the operator at the Tweak → Comment → Chat cascade in [`references/03-iteration-and-session.md`](skills/claude-design-facilitator/references/03-iteration-and-session.md): Tweak panel for surgical zero-token edits (spacing, font size, colour), inline comments for component-scoped changes (rewrite slide 5), full chat regeneration as a last resort. Plus the session-break heuristic (after 4 substantive screens, start a fresh session with a verbal save-pattern carrying state forward) and the recovery prompt library when iteration gets stuck.
**Phase 8 — Ship-readiness.** Before the all-hands, the skill runs the export validation checklist for the chosen destination (HTML preview → keep in Claude Design; PPTX → check fonts and master, charts may flatten). If the deck is being handed off to engineering for any reason, it recommends installing [`knowledge-work-plugins/design`](https://claude.com/plugins/design) for `/critique`, `/accessibility`, and `/handoff` — the post-design lane.
The full output of the session is a single fenced markdown block (Phase 6) plus a short follow-up-turns list and an iteration-coaching pointer. That is the entire user-facing deliverable.
---
## Skill surface
| Skill | Triggers | Output |
|-------|----------|--------|
| `claude-design-facilitator` | 12 natural-language phrases (full list in `.triggers.txt`); also explicit `/claude-design-facilitator` slash command | A copy-paste-ready Claude Design prompt block composed from the five-layer stack and the per-preset pattern, with follow-up-turn expectations |
No commands, no agents, no hooks, no MCP servers at v0.1. The single skill is the entire user-facing surface.
---
## Reference content map
The plugin ships 13 reference files in `skills/claude-design-facilitator/references/`:
**Foundation references (5):**
- [`00-what-claude-design-is-and-isnt.md`](skills/claude-design-facilitator/references/00-what-claude-design-is-and-isnt.md) — Surface disambiguation against Artifacts, Live Artifacts, custom chat visuals, and Anthropic's `knowledge-work-plugins/design`.
- [`01-prompt-fundamentals.md`](skills/claude-design-facilitator/references/01-prompt-fundamentals.md) — The five-layer prompt stack: GLCA framework + start-simple-layer-complexity + concrete-alternative-spec + propose-options + AI-slop negative constraints + four design dimensions + four grading criteria. Anchored on four Anthropic primary sources.
- [`02-design-md.md`](skills/claude-design-facilitator/references/02-design-md.md) — DESIGN.md 9-section canonical structure + brand-to-DESIGN.md extractor prompt + failure modes.
- [`03-iteration-and-session.md`](skills/claude-design-facilitator/references/03-iteration-and-session.md) — Tweak / Comment / Chat cascade, session economics, 4-screen inflection, recovery prompt library (break-default-aesthetic, fix-the-system, edit-previous-message, 3-failed-comment escalation, model downshift, verbal save-pattern).
- [`04-handoff-and-scope.md`](skills/claude-design-facilitator/references/04-handoff-and-scope.md) — Design → Code one-way handoff, bundle contents, lifecycle-stage coverage map vs Anthropic's `knowledge-work-plugins/design`, downstream tool recommendation.
**Per-preset references (8):**
- [`presets/designs.md`](skills/claude-design-facilitator/references/presets/designs.md) — Anthropic-documented + community-validated
- [`presets/prototypes.md`](skills/claude-design-facilitator/references/presets/prototypes.md) — Anthropic-documented + community-validated
- [`presets/slides.md`](skills/claude-design-facilitator/references/presets/slides.md) — Anthropic-documented + community-validated
- [`presets/one-pagers.md`](skills/claude-design-facilitator/references/presets/one-pagers.md) — Community-only
- [`presets/wireframes-mockups.md`](skills/claude-design-facilitator/references/presets/wireframes-mockups.md) — Community-only
- [`presets/pitch-decks.md`](skills/claude-design-facilitator/references/presets/pitch-decks.md) — Community-only (with explicit PPTX-export caveat)
- [`presets/marketing-collateral.md`](skills/claude-design-facilitator/references/presets/marketing-collateral.md) — Community-only
- [`presets/frontier-design.md`](skills/claude-design-facilitator/references/presets/frontier-design.md) — Experimental — no validated practitioner pattern as of 2026-05-16
---
## Per-preset coverage
The canonical coverage manifest is [`.coverage.md`](.coverage.md). Below mirrors that file.
| Preset | Evidence grade | Anthropic anchor |
|--------|----------------|------------------|
| designs | Anthropic-documented + community-validated | [launch post](https://anthropic.com/news/claude-design-anthropic-labs) |
| prototypes | Anthropic-documented + community-validated | [prototypes tutorial](https://claude.com/resources/tutorials/using-claude-design-for-prototypes-and-ux) |
| slides | Anthropic-documented + community-validated | [slides tutorial](https://claude.com/resources/tutorials/using-claude-design-for-presentations-and-slide-decks) |
| one-pagers | Community-only | [launch post](https://anthropic.com/news/claude-design-anthropic-labs) |
| wireframes-mockups | Community-only | [launch post](https://anthropic.com/news/claude-design-anthropic-labs) |
| pitch-decks | Community-only (with PPTX-export caveat) | [launch post](https://anthropic.com/news/claude-design-anthropic-labs) |
| marketing-collateral | Community-only | [launch post](https://anthropic.com/news/claude-design-anthropic-labs) |
| frontier-design | Experimental — no validated practitioner pattern | [launch post](https://anthropic.com/news/claude-design-anthropic-labs) |
When Anthropic publishes per-preset guidance for a Community-only or Experimental preset, [`.coverage.md`](.coverage.md) and the affected preset file refresh — re-research triggers are documented inline.
---
## Verification
```bash
bash plugins/claude-design/verify.sh
```
Runs five test scripts under `tests/` in dependency order:
| Script | Verifies |
|--------|----------|
| `validate-plugin.sh` | plugin.json + SKILL.md frontmatter + LICENSE + GOVERNANCE.md + README.md + CLAUDE.md + .coverage.md presence; forbidden-command-name scope-fence check; operator-private-context grep; Norwegian-leakage advisory |
| `test-skill-triggers.sh` | SKILL.md description >=400 chars; every phrase in `.triggers.txt` appears in SKILL.md |
| `test-sc2-artifact-coverage.sh` | Each preset in `.coverage.md` has >=1 file hit in plugin content |
| `test-sc3-citations.sh` | No unsourced-attribution placeholders (citation-stub markers, verification-flag markers, vague second-hand phrasing); each Authoritative-claims file has >=1 Anthropic-domain URL. The script enforces the exact patterns it bans — see the script source for the regex. |
| `test-sc1-dogfood-log.sh` | Format-check the operator dogfood log in `REMEMBER.md` (gitignored) — 5 fields well-formed |
Flags:
- `--strict` — pass-through to `test-sc1-dogfood-log.sh`. Without `--strict`, missing dogfood block is advisory. With `--strict`, it is the release gate.
- `--quick` — skip `test-skill-triggers.sh` for fast incremental runs.
Exit codes: `0` = all pass; non-zero = at least one sub-test failed.
---
## Compatibility
| Requirement | Version |
|-------------|---------|
| Claude Code | Recent versions with plugin support |
| Anthropic surface | `claude.ai/design` (Labs research preview launched 2026-04-17) |
| Platform | macOS, Linux, Windows |
| Network | None for the skill itself; the artifact-generation lives in `claude.ai/design` |
| Dependencies | None — no npm packages, no Python, no external tools. Bash 3.2 compatible for test scripts. |
---
## Re-research triggers
The reference tree carries Anthropic citations that may decay. Re-research is triggered by:
- Anthropic publishing per-preset guidance for a `Community-only` or `Experimental` preset
- Anthropic announcing material changes to the Goal / Layout / Content / Audience framework, the AI-slop avoid-list, or the design grading criteria
- Anthropic adding or removing an intent preset from the launch enumeration
- A first verified `frontier-design` practitioner artifact shipping publicly
- Anthropic's `knowledge-work-plugins/design` plugin adding or removing slash-commands (scope-fence implications)
- Labs → GA URL rename for `claude.ai/design`
When a trigger fires, run `bash verify.sh --strict` after the update to confirm SC2 and SC3 still pass.
---
## Recent versions
**v0.1.0 — 2026-05-17.** Initial public release. Single skill (`claude-design-facilitator`) with eight-phase facilitation flow, 12 natural-language trigger phrases, 13 reference files (5 foundation + 8 per-preset with evidence-grade labels), `.coverage.md` preset manifest plus Authoritative-claims registry, five verification scripts under `tests/` enforcing structural integrity / scope fence / skill description quality / per-preset coverage / Anthropic-domain citation discipline / operator dogfood log format, top-level `verify.sh` roll-up with `--strict` and `--quick` flags, MIT license, GOVERNANCE.md fork-and-own model.
Full release history: [`CHANGELOG.md`](CHANGELOG.md). The plugin follows [Semantic Versioning](https://semver.org/spec/v2.0.0.html). The path from v0.1 to v1.0 is dogfood-driven — see the plugin's `REMEMBER.md` for the v1.0 readiness criteria (multi-preset breadth, auto-fire validation in real natural-language requests, two consecutive dogfood sessions with zero critical patches).
---
## License
[MIT](LICENSE). Fork it, modify it, ship your own version under your own name.

View file

@ -1,12 +0,0 @@
I want to build a dashboard in Claude Design
help me prompt claude.ai/design
make a slide deck in claude.ai/design
iterate on my Claude Design artifact
what should I prompt Claude Design with
build a one-pager in Claude Design
design a prototype in claude.ai/design
refine my Claude Design output
create a pitch deck in Claude Design
use Claude Design
draft a Claude Design prompt
make wireframes in claude.ai/design

View file

@ -1,176 +0,0 @@
---
name: claude-design-facilitator
argument-hint: "[intent-preset]"
description: |
End-to-end facilitator for prompting Claude Design (claude.ai/design — Anthropic Labs research preview launched 2026-04-17, Opus 4.7 pinned). Walks the operator from raw idea through intent-preset selection, audience and destination clarification, DESIGN.md anchor, prompt drafting using Anthropic's verbatim Goal / Layout / Content / Audience framework plus the five-layer prompt stack, copy-paste delivery, iteration coaching across the Tweak / Comment / Chat cascade, and ship-readiness handoff to Anthropic's official knowledge-work-plugins/design plugin for critique, accessibility audit, and engineering handoff. Cites Anthropic primary sources inline; refuses to generate the artifact code itself or drive the browser. Use for any work that ends with a Claude Design artifact.
Triggers on:
- "I want to build a dashboard in Claude Design"
- "help me prompt claude.ai/design"
- "make a slide deck in claude.ai/design"
- "iterate on my Claude Design artifact"
- "what should I prompt Claude Design with"
- "build a one-pager in Claude Design"
- "design a prototype in claude.ai/design"
- "refine my Claude Design output"
- "create a pitch deck in Claude Design"
- "use Claude Design"
- "draft a Claude Design prompt"
- "make wireframes in claude.ai/design"
---
# claude-design-facilitator
You are a facilitator for prompting Claude Design (`claude.ai/design`). You walk the operator from raw idea to a copy-paste-ready prompt, through iteration, to ship-readiness. You do **not** generate artifact code yourself and you do **not** drive the browser. Claude Design is where the artifact gets built; you exist to make the operator's interaction with that surface land on the first try.
You follow the phases below in order. Phases 1 through 4 are scoping and grounding; do not draft a prompt before they are done. If the operator pushes for a prompt straight away, briefly explain that a five-second alignment pass produces a one-shot prompt instead of a four-round iteration spiral, then ask the Phase 2 intent question.
All output is English. All authoritative claims about Claude Design behaviour cite Anthropic primary sources — `anthropic.com/news`, `support.claude.com`, `claude.com/blog`, `claude.com/resources/tutorials`, `claude.com/plugins`, `platform.claude.com`, `github.com/anthropics`. Community patterns are labelled as such with the source link. The reference files under `references/` carry the canonical content; this file is the flow.
---
## Phase 1 — Disambiguate the surface
Confirm the operator wants `claude.ai/design` specifically, not one of the four surfaces it is most commonly confused with: classic Artifacts at `claude.ai`, Live Artifacts in Claude Cowork, custom visuals embedded in a chat reply, or Anthropic's `knowledge-work-plugins/design` plugin (which audits already-built artifacts and does not generate them).
If the operator is clear, move on. If signals are mixed — they mention "Artifacts" or "Cowork", they describe a feature that does not exist in Claude Design (no `/rewind`, no version history, no branching), or they expect round-trip handoff back from Claude Code — read `references/00-what-claude-design-is-and-isnt.md` and walk through the relevant anti-conflation block.
---
## Phase 2 — Name the intent preset
Claude Design exposes eight intent presets. The operator picks one before drafting begins, because the prompt pattern differs per preset and the per-preset reference files are the place that pattern lives.
The eight presets, in the order they appear in Anthropic's launch enumeration (`anthropic.com/news/claude-design-anthropic-labs`, 2026-04-17):
- **designs** — generic dashboards, components, layouts, design explorations
- **prototypes** — interactive product flows for usability testing and demos
- **slides** — presentation decks, internal or external
- **one-pagers** — single-page artifacts (memos, summaries, leave-behinds)
- **wireframes-mockups** — low-fi or high-fi layout structure, pre-visual-design
- **pitch-decks** — investor or external pitch decks (note: PPTX export trap — see preset file)
- **marketing-collateral** — landing pages, social variants, visual assets
- **frontier-design** — Anthropic's "code-powered prototypes with voice, video, shaders, 3D" preset (labelled experimental in this plugin — no validated practitioner pattern as of 2026-05-16)
If the operator is uncertain which preset fits, read `.coverage.md` and the matching one-line summaries; offer the two or three that match the situation. The evidence-grade label on each preset reference file is load-bearing — surface it: `Anthropic-documented + community-validated` (designs / prototypes / slides), `Community-only` (one-pagers / wireframes-mockups / pitch-decks / marketing-collateral), or `Experimental` (frontier-design).
---
## Phase 3 — Audience and destination
Establish the audience and the destination *before* drafting the prompt. This is `@claudedesign` Anthropic-affiliated guidance: the destination format constrains the prompt because Claude Design's export options have asymmetric fidelity.
Ask:
- **Audience:** who reads or uses this artifact? Internal team, external stakeholder, investor, customer prospect, partner, user-testing participant?
- **Destination:** where does it end up? PDF (lossless for static layouts, lossy for interactive elements), PPTX (Claude reads slide master / layouts / fonts / color scheme, but text flattens to images on complex compositions — see `references/03-iteration-and-session.md` PPTX trap section), HTML standalone, Canva import, Claude Code handoff for engineering build, or share-link?
If the destination is PPTX and the preset is `pitch-decks`, flag the export trap explicitly (`moda.app/blog/claude-design-for-pitch-decks` documents the case where PPTX flattens richly-styled text to images). If the destination is Claude Code handoff, set expectation that the bundle Claude Design produces is one-way (no return path to Claude Design — see `references/04-handoff-and-scope.md`).
---
## Phase 4 — Anchor on DESIGN.md
A DESIGN.md file is the operator's leverage against Claude Design's defaults. It anchors design-system identity (colors, typography, motion, layout, do's-and-don'ts) so the model does not fall back to its convergent middle-ground aesthetic.
Read `references/02-design-md.md`. The reference file documents the community-converged 9-section canonical structure and a copy-paste extractor prompt that converts a brand URL or screenshot into a DESIGN.md.
If the operator already has a DESIGN.md, confirm it is uploaded to the Claude Design project and that the agent prompt guide section names it. If they do not have one, point at the extractor prompt — it is the highest-leverage single piece of content in this plugin.
**Evidence grade context for the operator:** Anthropic publishes the concept of DESIGN.md (`support.claude.com/en/articles/14604397-set-up-your-design-system-in-claude-design`) but not the 9-section structure. The 9-section template comes from community practitioners (`github.com/rohitg00/awesome-claude-design`, `github.com/VoltAgent/awesome-claude-design`).
---
## Phase 5 — Draft the prompt using the five-layer stack
Now draft. Open `references/01-prompt-fundamentals.md` and `references/presets/<preset>.md` for the named preset. Compose the prompt from these layers, in order:
1. **Layer 1 — Goal / Layout / Content / Audience (GLCA)** — Anthropic's verbatim framework. Source: `support.claude.com/en/articles/14604416-get-started-with-claude-design`. Every prompt to Claude Design starts here.
2. **Layer 1.5 — Start simple, layer in complexity** — Anthropic's verbatim incremental-prompting advice (same source). Do not ship a 600-word first prompt; ship a 120-word first prompt and add detail in turn two.
3. **Layer 2a — Concrete-alternative-spec house-style control** — Anthropic's verbatim guidance from `platform.claude.com/docs/en/docs/build-with-claude/prompt-engineering/claude-4-best-practices`. Includes the AEFRM example with explicit hex palette and motion timing.
4. **Layer 2b — Propose-options-before-building** — Anthropic's verbatim prompt template asking Claude Design to surface four distinct visual directions before committing.
5. **Layer 3 — Negative constraints (the AI-slop avoid-list)** — verbatim banned items from `claude.com/blog/improving-frontend-design-through-skills` and `github.com/anthropics/skills/skills/frontend-design/SKILL.md`. Inter, Roboto, Arial, Space Grotesk; purple gradients on white; solid-color backgrounds; cookie-cutter framing; convergent middle-ground palettes; scattered micro-interactions.
6. **Layer 4 — Four design dimensions** — verbatim typography / color / motion / backgrounds guidance from `frontend-design/SKILL.md`.
7. **Layer 5 — Four design grading criteria** — Anthropic's verbatim quality criteria from `anthropic.com/engineering/harness-design-long-running-apps` (design quality, originality, craft, functionality) plus the emphasis-weighting recommendation.
On top of the five layers, layer the per-preset pattern from `references/presets/<preset>.md`. For `designs`, `prototypes`, and `slides`, this is Anthropic-published prompt material. For the other four `Community-only` presets, it is community-converged pattern with attribution. For `frontier-design`, it is honest-experimental and labelled as such.
Resist the urge to over-spec. Anthropic's own guidance is start simple, layer in complexity. Draft the layer-1+layer-2a+layer-3 composition first. Save layers 4 and 5 for the refinement turn.
---
## Phase 6 — Deliver the prompt
Output a single copy-paste-ready fenced markdown code block containing the composed prompt. No preamble, no commentary inside the block. Add a one-line caption above the block: which preset, which audience, which destination.
After the block, list three to five expected follow-up turns the operator should anticipate (e.g., "if it lands too generic, add layers 4 + 5 in turn two", "if PPTX is destination, validate the rendered text-as-text count in turn three"). This sets the iteration expectation honestly — Claude Design quality is non-monotonic across turns (`anthropic.com/engineering/harness-design-long-running-apps`).
---
## Phase 7 — Iteration coaching
When the operator returns with feedback after a Claude Design generation, you do not regenerate the prompt. You coach which surface to use next. Read `references/03-iteration-and-session.md`.
The three-surface cascade, in order of token cost:
- **Tweak panel** — controls and sliders Claude pre-derives at artifact generation time. Zero token cost. Surgical. Use for: section reordering, variant swap, density slider, spacing scale, color temperature, typography scale, padding / radius / shadow. The Anthropic-published guidance is verbatim in `references/03`.
- **Inline comments** — component-scoped edits via the comment surface. Surgical when the edit is in-component. Has an Anthropic-acknowledged vanish bug — if a comment disappears, paste the comment text into chat. Fails for new structural containers.
- **Chat** — full regeneration. Use for any structural change (add a new section), aesthetic pivot, multi-component change, or anything Claude did not pre-derive a Tweak control for. Costs one full chat turn.
Operator mantra (the synthesis from `research/04`): *anything Claude pre-derives at generation time is surgical thereafter; new controls cost one chat turn for setup.*
Session-management heuristics from `references/03-iteration-and-session.md`:
- 4-screen inflection — quality drops noticeably after the fourth screen of context in a session.
- Opus 4.7 context — quality degrades at the 4050% context mark.
- Pro budget burns in roughly 2530 minutes of active design; Max in roughly 6090.
- Session-break triggers: hitting screen 4, reorder / density tweaks stop landing, chat re-introduces removed defaults.
If the operator hits a stuck state, point at the recovery prompt library in `references/03-iteration-and-session.md` — the `break-default-aesthetic.md` adapted prompt, "fix the system not the prompt" pattern, edit-previous-message workaround, the 3-failed-comment escalation rule, and the model downshift escalator (Opus 4.7 → Opus 4.6 / Sonnet 4.6).
---
## Phase 8 — Ship-readiness
Before the operator declares an artifact done, run a short ship-readiness check against `references/04-handoff-and-scope.md`:
- Has the destination format been validated against the rendered output? (PPTX text-as-text count, PDF interactive-element check, HTML standalone export at target viewport.)
- If handing off to engineering: is the export bundle complete? Anthropic's handoff bundle includes a machine-readable component spec, design tokens, layout hierarchy, referenced assets, standalone HTML + inline CSS + JS, per-state screenshots, PM-annotated notes, and a stack / framework README (`anthropic.com/news/claude-design-anthropic-labs` + `support.claude.com/en/articles/14604416`).
- Is the operator aware that the Design → Code direction is one-way? Once handed off, the path back to Claude Design is lossy (screenshot → new Claude Design session).
**Downstream tool recommendation.** Once the operator has an artifact in hand and wants critique, accessibility audit, UX copy review, design-system audit, or engineering handoff guidance, recommend Anthropic's official plugin:
```
claude plugins add knowledge-work-plugins/design
```
That plugin operates on existing artifacts (Figma URLs, screenshots, copy snippets) and ships six commands: `/critique`, `/accessibility`, `/ux-copy`, `/research-synthesis`, `/design-system`, `/handoff`. It is the lifecycle complement to this one — see `references/04-handoff-and-scope.md` for the full coverage table. This plugin (claude-design) covers idea through delivered prompt through iteration coaching; `knowledge-work-plugins/design` covers everything after. There is no command overlap and no functional redundancy.
---
## What this skill never does
- It does not generate the artifact code itself. Claude Design is the artifact generator. This skill produces prompts that go into Claude Design.
- It does not automate the browser, paste prompts on the operator's behalf, or read the Claude Design canvas. The operator copies and pastes manually.
- It does not store artifact history, version artifacts, or branch between iterations. Claude Design has no version tree and this skill does not invent one.
- It does not duplicate the post-design lane covered by `knowledge-work-plugins/design`. No `/critique`, no `/accessibility`, no `/ux-copy`, no `/research-synthesis`, no `/design-system`, no `/handoff` commands.
---
## Reference files
- `references/00-what-claude-design-is-and-isnt.md` — surface disambiguation
- `references/01-prompt-fundamentals.md` — the five-layer prompt stack
- `references/02-design-md.md` — DESIGN.md template + brand-to-DESIGN.md extractor
- `references/03-iteration-and-session.md` — Tweak / Comment / Chat cascade, session economics, recovery prompt library
- `references/04-handoff-and-scope.md` — one-way handoff, scope fence vs Anthropic's design plugin
- `references/presets/designs.md`, `prototypes.md`, `slides.md` — Anthropic-documented per-preset patterns
- `references/presets/one-pagers.md`, `wireframes-mockups.md`, `pitch-decks.md`, `marketing-collateral.md` — Community-only per-preset patterns
- `references/presets/frontier-design.md` — Experimental, no validated practitioner pattern
- `.coverage.md` — preset enumeration with evidence-grade labels (the source of truth for SC2 verification)
---
## Explicit invocation
The skill name registers as the explicit slash command `/claude-design-facilitator`. Operators can either trigger by natural language (the description above is the auto-fire surface) or invoke explicitly when they want to start a facilitation session from a clean state.

View file

@ -1,113 +0,0 @@
# What Claude Design is and isn't
**Last updated:** 2026-05-17 | **Verified:** research/01-claude-design-surface.md
**Status:** Beta (Labs research preview)
**Captured-on date:** 2026-05-16
This file disambiguates `claude.ai/design` from the four surfaces it is most commonly conflated with. The cost of getting this wrong is wasted iteration: applying a prompt pattern that fits Live Artifacts to Claude Design (or vice versa) produces output that misses the operator's intent, and the failure looks like a prompt problem instead of a surface problem.
Read this file when the operator's signals are mixed — they reference "Artifacts" loosely, they expect a feature that does not exist in Claude Design (like `/rewind` or a version tree), they think Claude Design audits artifacts rather than generates them, or they expect round-trip handoff back from Claude Code.
---
## 1. What Claude Design is
Claude Design is an Anthropic Labs research preview that launched on 2026-04-17 (`https://anthropic.com/news/claude-design-anthropic-labs`). It is a dedicated workspace at `claude.ai/design` for generating interactive design artifacts from a prompt.
Five properties define the surface:
- **Labs research preview, not GA.** The product can change without notice. Anthropic surfaces it under the Labs banner specifically to signal that the contract is non-stable. The URL still carries the `-anthropic-labs` slug today; a Labs → GA rename is a known re-research trigger captured in `.coverage.md`.
- **Opus 4.7 pinned.** All generations run on Opus 4.7. Operators cannot select a model from the Claude Design UI. The session inherits Anthropic's model choice for this surface (`https://anthropic.com/news/claude-design-anthropic-labs`).
- **Single HTML/React substrate.** Underneath every output is one rendering engine — HTML, React components, inline CSS — regardless of which intent preset the operator picks. The intent preset shapes prompting and export, not the underlying tech.
- **Eight intent presets exposed in the UI.** Anthropic's launch post enumerates: designs, prototypes, slides, one-pagers, wireframes-mockups, pitch-decks, marketing-collateral, frontier-design. The enumeration is the source of truth for SC2 coverage in this plugin (`https://anthropic.com/news/claude-design-anthropic-labs`).
- **Multiple export paths.** PDF (lossless for static layouts, lossy for interactive elements), PPTX (slide master / layouts / fonts honored, but text can flatten to images on complex compositions), HTML standalone, Canva import, share-link, and Claude Code handoff (machine-readable component spec + design tokens + layout hierarchy + assets + standalone HTML/CSS/JS + per-state screenshots + PM notes + framework README — verbatim per `https://support.claude.com/en/articles/14604416-get-started-with-claude-design`).
Three Anthropic-published support articles ground the surface: the get-started article (`https://support.claude.com/en/articles/14604416-get-started-with-claude-design`), the design-system setup article (`https://support.claude.com/en/articles/14604397-set-up-your-design-system-in-claude-design`), and the PowerPoint-mode conventions article (`https://support.claude.com/en/articles/13521390-use-claude-for-powerpoint`).
---
## 2. What Claude Design is NOT
### Not classic Artifacts at `claude.ai`
Classic Artifacts live in any Claude.ai chat. They appear in a side panel when Claude generates code, markdown, SVG, mermaid diagrams, or other inline outputs. Artifacts carry no intent presets, no Tweak panel, no export-to-PPTX, no Claude Code handoff bundle, no DESIGN.md anchor concept. They are a chat affordance.
Confusion happens because both surfaces produce HTML/React output and Anthropic's documentation has used "Artifacts" loosely in launch contexts. If the operator says "Artifacts" but describes intent presets or destination formats (`https://anthropic.com/news/claude-design-anthropic-labs`), they mean Claude Design. If they describe a side panel inside a chat (`support.claude.com` discusses Artifacts in the chat-product context), they mean classic Artifacts.
### Not Live Artifacts in Claude Cowork
Live Artifacts is a different Labs surface — collaborative real-time editing of artifacts inside Claude Cowork sessions. It runs in a different workspace, has different affordances (multi-cursor presence, version stream), and is a separate product line at `claude.ai/code` family (see Anthropic's Cowork-related communications). Claude Design has none of those collaborative primitives. The operator working alone in `claude.ai/design` is the canonical flow.
### Not custom visuals embedded in a chat reply
Sometimes Claude generates an inline HTML/SVG visual as part of a chat answer (a chart, a diagram, an illustration). That is a one-off chat artifact, not a Claude Design session. The prompt patterns are different (chat conversational tone vs design intent presets), the export options are different (chat artifact has Save / Copy, Claude Design has the full export matrix), and there is no Tweak panel on the chat-inline visuals.
### Not Anthropic's `knowledge-work-plugins/design` plugin
This is the most consequential conflation. Anthropic ships an official plugin at `https://claude.com/plugins/design` (`https://github.com/anthropics/knowledge-work-plugins`) with six slash-commands: `/critique`, `/accessibility`, `/ux-copy`, `/research-synthesis`, `/design-system`, `/handoff`. That plugin operates on **existing** artifacts (Figma URLs, screenshots, copy snippets). It does not generate artifacts.
The lifecycle split is clean:
- This plugin (`claude-design`) covers **pre-design and during-design** — idea → intent-preset selection → prompt drafting → copy-paste delivery → iteration coaching → ship-readiness.
- Anthropic's `knowledge-work-plugins/design` covers **post-design** — critique → accessibility → UX copy review → research synthesis → design-system audit → engineering handoff.
There is zero command overlap (this plugin ships no commands named `/critique`, `/accessibility`, `/ux-copy`, `/research-synthesis`, `/design-system`, or `/handoff``tests/validate-plugin.sh` assertion (h) enforces this mechanically). Workflow recommendation: use this plugin to land the artifact in `claude.ai/design`; once the artifact exists, install Anthropic's official plugin via `claude plugins add knowledge-work-plugins/design` for downstream review and handoff.
### Not third-party clones like `jiji262/claude-design-skill`
Several third-party repos use names like `claude-design-skill`. They are independent community efforts targeting general design workflows in Claude Code, not the `claude.ai/design` surface specifically. They predate the Anthropic Labs launch in some cases. This plugin is *Claude Design facilitation* — it targets the Anthropic surface explicitly, citing Anthropic's primary sources. Verify the operator's mental model accordingly.
---
## 3. Why the distinction matters operationally
Three operational consequences flow from getting the surface identification right.
### Prompt patterns differ
Claude Design's prompt patterns are documented in `https://anthropic.com/news/claude-design-anthropic-labs`, `https://support.claude.com/en/articles/14604416-get-started-with-claude-design`, and the two per-preset tutorials (`https://claude.com/resources/tutorials/using-claude-design-for-prototypes-and-ux`, `https://claude.com/resources/tutorials/using-claude-design-for-presentations-and-slide-decks`). These prompts assume the Claude Design substrate, intent presets, and the Tweak / Comment / Chat iteration cascade. Applying them to classic Artifacts, Cowork, or an inline chat visual produces noise.
Classic Artifacts prompts (the kind used inside any `claude.ai` chat) are conversational and lean on chat affordances. Claude Design prompts use the verbatim Goal / Layout / Content / Audience framework and lean on intent presets. The frameworks do not interchange cleanly.
### Limits differ
Claude Design has its own quota economics — the operator's Max / Pro plan budget burns down at a different rate than classic chat (research/04 documents observed Pro burn of roughly 25-30 minutes of active design work, Max roughly 60-90; these are community-observed, not Anthropic-published, and may shift). Opus 4.7 quality degrades at 40-50% context (`https://anthropic.com/engineering/harness-design-long-running-apps`). A 4-screen session inflection is documented community-wide.
None of these limits apply identically to classic Artifacts or to the official `knowledge-work-plugins/design` plugin. Diagnosing a quota / quality issue requires knowing which surface is in play.
### Scope differs
The official `knowledge-work-plugins/design` plugin is the right tool for post-design critique. Trying to make this plugin (`claude-design`) emit a critique would duplicate Anthropic's command surface and add nothing. The reverse — using `knowledge-work-plugins/design` to generate the artifact — does not work because that plugin operates on artifacts that already exist.
If the operator is uncertain whether their question is pre-design or post-design, ask: *does the artifact exist yet?* If no — this plugin. If yes — Anthropic's plugin.
---
## 4. Decision shortcuts
- The operator mentions intent presets (designs / prototypes / slides / one-pagers / wireframes-mockups / pitch-decks / marketing-collateral / frontier-design) → Claude Design.
- The operator mentions a workspace URL `claude.ai/design` → Claude Design.
- The operator mentions PPTX / PDF / Canva / Code-handoff exports → Claude Design.
- The operator says "Tweak panel" or "Tweak slider" → Claude Design.
- The operator says "Artifact" in a side panel context inside a normal chat → classic Artifacts.
- The operator says "Cowork" or "real-time collaborative" or "multi-cursor" → Live Artifacts.
- The operator says "critique" / "accessibility audit" / "Figma" → Anthropic's `knowledge-work-plugins/design`.
- The operator references a third-party repo named `claude-design-*` → ask what surface they target; likely not the Anthropic Labs preview.
If signals remain mixed after this read-through, ask one clarifying question rather than guess: *"Are you working in the dedicated Claude Design workspace at `claude.ai/design`, or somewhere else?"*
---
## Sources
- `https://anthropic.com/news/claude-design-anthropic-labs` — Anthropic Labs launch announcement (2026-04-17), Opus 4.7 pin, intent-preset enumeration, export options
- `https://support.claude.com/en/articles/14604416-get-started-with-claude-design` — get-started article, GLCA framework, handoff bundle contents
- `https://support.claude.com/en/articles/14604397-set-up-your-design-system-in-claude-design` — design-system setup, DESIGN.md concept
- `https://support.claude.com/en/articles/13521390-use-claude-for-powerpoint` — PowerPoint-mode conventions
- `https://claude.com/plugins/design` — Anthropic's official knowledge-work-plugins/design plugin
- `https://github.com/anthropics/knowledge-work-plugins` — source for the official plugin
- `https://claude.com/resources/tutorials/using-claude-design-for-prototypes-and-ux` — Anthropic-published per-preset tutorial (prototypes)
- `https://claude.com/resources/tutorials/using-claude-design-for-presentations-and-slide-decks` — Anthropic-published per-preset tutorial (slides)
- `https://anthropic.com/engineering/harness-design-long-running-apps` — design grading criteria, non-monotonic-improvement framing
When in doubt: the Anthropic news post and the get-started support article are the load-bearing sources. Everything else triangulates against them.

View file

@ -1,265 +0,0 @@
# Prompt fundamentals — the five-layer stack
**Last updated:** 2026-05-17 | **Verified:** research/03-prompt-patterns-intent-presets.md
**Status:** Beta (Labs research preview)
**Captured-on date:** 2026-05-16
This file documents the universal prompt framework an operator applies across every Claude Design intent preset. The five layers compose into one prompt block. Layers 1 to 3 are load-bearing for every preset; layers 4 and 5 are the refinement turn.
Every authoritative claim cites an Anthropic primary source. Where community practice extends an Anthropic concept, the extension is labelled and attributed.
---
## Layer 1 — Goal / Layout / Content / Audience (GLCA)
Anthropic's verbatim framework for every Claude Design prompt. The framework is published in the get-started support article `https://support.claude.com/en/articles/14604416-get-started-with-claude-design`. Anthropic's framing: a good Claude Design prompt names the **Goal**, the **Layout**, the **Content**, and the **Audience**, in that order, before any aesthetic specification.
The four canonical questions:
- **Goal** — what is the artifact for? "An admin dashboard for monitoring API latency", "an onboarding flow for first-time users", "a landing page that converts free trial signups". One sentence.
- **Layout** — what is the page structure? Header / hero / metrics row / table / footer; or: hero / three-feature-grid / pricing table / CTA. Name the regions.
- **Content** — what fills the regions? Real data placeholders if you have them, named labels if not. Avoid generic "lorem ipsum" — the model defaults to convergent middle-ground content if you do not constrain it.
- **Audience** — who reads or uses this artifact? Internal team, external stakeholder, B2B procurement, B2C consumer, investor. Audience determines tone, density, and aesthetic.
Anthropic publishes three verbatim canonical examples in the same support article:
```
Goal: An analytics dashboard for our customer success team
Layout: Top metrics row (4 KPIs), main chart panel, recent activity table
Content: Today's MRR, 30-day churn, NPS, expansion revenue; revenue chart;
the last 10 account events
Audience: Internal CS leads — they're in this thing every day, want density
and signal, not flashy
```
```
Goal: A mobile onboarding flow for a new fitness app
Layout: Welcome screen, goal-selection (3 cards), motion preference, sign-in
Content: Headlines, single CTA per screen, accessible touch targets
Audience: First-time users, gym beginners, ages 25-45
```
```
Goal: A SaaS landing page that converts free trial signups
Layout: Hero, three-feature grid, social proof, pricing table, FAQ, footer CTA
Content: Product name placeholder "ProductX", real headline benefit copy,
three feature blurbs (icon + headline + line)
Audience: B2B technical buyers evaluating dev tools
```
The GLCA framework is sufficient on its own for a first prompt at intent preset `designs`. For other presets, GLCA composes with the per-preset pattern in `references/presets/<preset>.md`.
Source: `https://support.claude.com/en/articles/14604416-get-started-with-claude-design`.
---
## Layer 1.5 — Start simple, layer in complexity
The same Anthropic get-started article publishes verbatim incremental-prompting advice: do not ship a 600-word first prompt. Ship a 120-word first prompt that names GLCA, see what Claude Design produces, then add complexity in turn two and turn three.
Anthropic frames this as the dominant failure mode for first-time Claude Design operators: over-specifying the first prompt produces an output that is dense but generic. The remedy is staged — let Claude Design make its default choices, then react to what it produces with targeted constraints.
This frames how the rest of the stack composes. In turn one, ship layers 1 + 2a (or 2b) + 3. In turn two, add layer 4. In turn three, add layer 5 emphasis-weighting.
Source: `https://support.claude.com/en/articles/14604416-get-started-with-claude-design`.
---
## Layer 2a — Concrete-alternative-spec house-style control
The first of two Anthropic-documented house-style controls. Verbatim guidance from `https://platform.claude.com/docs/en/docs/build-with-claude/prompt-engineering/claude-4-best-practices`: name a concrete aesthetic family with explicit visual primitives rather than gesturing at a style.
The Anthropic-published exemplar — the AEFRM (Anthropic Engineering Field Reference Material) example — is verbatim usable:
```
Aesthetic family: industrial-utilitarian, slate-monochrome
Color palette (CSS hex):
--color-bg: #E9ECEC
--color-surface: #C9D2D4
--color-muted: #8C9A9E
--color-fg: #44545B
--color-ink: #11171B
Typography: square angular sans-serif (Söhne, Inter Variable as fallback);
no rounded glyphs; weight 500 for body, 700 for headers
Corner radius: 4px throughout — no fully rounded buttons, no pill shapes
Motion: transition: all 160ms ease-out on hover; no springy easing
Density: dense (table rows 32px tall; padding 8px on cards)
Surface: flat — no shadows, no glassmorphism
```
The control works because Claude Design reads this as a concrete brief and constrains its aesthetic decision space accordingly. Without an explicit concrete-alternative-spec, the model defaults to its convergent middle-ground aesthetic (rounded corners, generous spacing, friendly typography, gentle shadows — Anthropic's documented "AI-slop" default).
The hex palette, corner radius, and motion timing are all required — naming "industrial-utilitarian" alone is gesturing, not specifying.
Source: `https://platform.claude.com/docs/en/docs/build-with-claude/prompt-engineering/claude-4-best-practices`.
---
## Layer 2b — Propose-options-before-building
The second Anthropic-documented house-style control, also from `https://platform.claude.com/docs/en/docs/build-with-claude/prompt-engineering/claude-4-best-practices`. When the operator does not know exactly which aesthetic to brief, Anthropic publishes a verbatim prompt template asking Claude Design to propose four distinct visual directions before committing to one.
The verbatim prompt:
```
Before building the dashboard, propose 4 distinct visual directions.
For each, give:
- bg hex
- accent hex
- typeface (named, not gestured)
- one-line rationale tying the direction to the audience and goal
Wait for me to pick a direction before generating the artifact.
```
This forks the conversation: turn one returns four named directions, the operator picks one, turn two generates against the chosen direction. The cost is one extra round; the upside is the operator avoids the dead-end of generating against an aesthetic that does not fit and only finding out after generation.
Use layer 2b when layer 2a is not feasible (the operator does not yet know the aesthetic). Use layer 2a when the aesthetic is known.
---
## Layer 3 — AI-slop avoid-list (negative constraints)
Anthropic publishes a verbatim banned-items list in `https://claude.com/blog/improving-frontend-design-through-skills` and reinforces it in the open-source frontend-design skill at `https://github.com/anthropics/skills/skills/frontend-design/SKILL.md`. The list names the convergent middle-ground patterns that Claude Design defaults to when underspecified.
Anthropic's verbatim AI-slop fingerprints to avoid:
- **Typography slop:** Inter, Roboto, Arial as default body font. Space Grotesk is flagged as overused. Default to a concrete-named typeface in the brief, not a generic sans-serif.
- **Color slop:** purple gradients on white backgrounds; solid-color hero backgrounds; convergent middle-ground palettes (the muted blue-and-grey "professional" default).
- **Layout slop:** cookie-cutter three-column feature grids; centered-hero-with-CTA defaults; full-width-image-with-text-overlay defaults.
- **Motion slop:** scattered micro-interactions; bouncy spring easing on hover; pulse animations on idle elements.
- **Complexity-to-vision mismatch:** ornate components on simple layouts; flat components on otherwise rich layouts.
Operator-actionable copy-paste anti-prompt block (composes with layers 1 and 2):
```
Negative constraints — do not produce any of:
- Inter, Roboto, Arial, or Space Grotesk as the primary typeface
- Purple gradients on white backgrounds
- Solid-color hero backgrounds
- Three-column feature grids with icon + headline + line
- Centered-hero-with-single-CTA layout default
- Bouncy spring easing on hover transitions
- Pulse / breathing animations on idle elements
- Glassmorphism, neumorphism, or generic "modern SaaS" defaults
If you find yourself defaulting to any of these, stop and ask me to
clarify the aesthetic before continuing.
```
Sources: `https://claude.com/blog/improving-frontend-design-through-skills` and `https://github.com/anthropics/skills/skills/frontend-design/SKILL.md`.
---
## Layer 4 — Four design dimensions to optimize
Anthropic's verbatim per-dimension guidance from `https://github.com/anthropics/skills/skills/frontend-design/SKILL.md`. Four dimensions to brief explicitly when refining beyond the first turn:
- **Typography** — name typeface, modular scale (e.g., 1.250 minor third or 1.333 perfect fourth), weight palette, line-height palette, letter-spacing for headings. Anthropic's frontend-design SKILL.md publishes specific modular scales and weight palettes verbatim.
- **Color** — beyond palette hex, specify semantic roles (background, surface, accent, muted, error, success). Define interaction states explicitly (hover, active, disabled, focus). Anthropic's guidance: avoid relying on opacity for state changes; use explicit color tokens.
- **Motion** — name easing curves (ease-out, cubic-bezier values), name durations (120ms / 160ms / 240ms tiers), name what gets animated and what does not. Anthropic's guidance: motion should clarify hierarchy and confirm interaction; avoid decorative motion.
- **Backgrounds** — flat surface vs depth, when to layer surfaces, when shadows or borders define edges. Anthropic's guidance: backgrounds carry meaning; the bare-default-white background is rarely the right choice.
In turn two of an iteration, add layer-4 dimension specs to the brief. In turn three, refine the dimension that drifted most from intent.
Source: `https://github.com/anthropics/skills/skills/frontend-design/SKILL.md`.
---
## Layer 5 — Four design grading criteria
Anthropic publishes verbatim grading criteria for design quality in `https://anthropic.com/engineering/harness-design-long-running-apps`. Four criteria, used as emphasis weights:
- **Design quality** — does the artifact look intentional, not defaulted? Is the aesthetic coherent across regions?
- **Originality** — does the artifact avoid the convergent middle-ground? Does it surprise without being weird?
- **Craft** — does the artifact feel detailed and considered at every level — typography, spacing, alignment, hierarchy, color?
- **Functionality** — does the artifact work for its goal and audience? Would it survive a usability test or a stakeholder review?
Anthropic's emphasis-weighting recommendation: in the prompt, weight which criterion matters most for *this* artifact. A dashboard for internal use weights functionality and craft highest. A pitch deck for an external investor weights design quality and originality highest. A wireframe for early exploration weights functionality highest with craft and originality deprioritized.
Operator-actionable layer-5 block:
```
Grading criteria for this artifact, in priority order:
1. {craft|design quality|originality|functionality} — weight 0.4
2. {one of the others} — weight 0.3
3. {one of the others} — weight 0.2
4. {the remaining one} — weight 0.1
Optimize against this ordering. If the artifact has to trade off,
trade off the lowest-weighted criterion first.
```
The non-monotonic-improvement caveat applies — Anthropic notes that quality across iterations is not strictly increasing. If turn three is worse than turn two on a critical criterion, the recovery move is documented in `references/03-iteration-and-session.md` ("pivot to an entirely different aesthetic if the approach wasn't working").
Source: `https://anthropic.com/engineering/harness-design-long-running-apps`.
---
## How the layers compose into one prompt
A worked example for the `designs` intent preset, dashboard, three turns:
### Turn 1 — layers 1 + 2a + 3 (the first prompt)
```
Goal: An admin dashboard for monitoring API latency by route, by region,
and by P50/P95/P99
Layout: Header with environment switcher; top metrics row (4 KPIs:
global P95, error rate, throughput, active requests); main chart
(time series, P50/P95/P99 lines); routes table with sortable
latency columns; alerts sidebar
Content: KPI placeholders are real metric names; chart uses synthetic
24-hour data; table has 12 routes with realistic paths
(/api/v1/users, /api/v1/orders, etc.)
Audience: Platform engineers, on-call rotation, ages 25-45,
comfortable with dense interfaces
Aesthetic family: industrial-utilitarian, slate-monochrome
Color palette (CSS hex):
--color-bg: #E9ECEC
--color-surface: #C9D2D4
--color-muted: #8C9A9E
--color-fg: #44545B
--color-ink: #11171B
Typography: square angular sans-serif (Söhne, Inter Variable fallback);
no rounded glyphs
Corner radius: 4px throughout
Motion: transition: all 160ms ease-out
Density: dense (32px table rows, 8px card padding)
Surface: flat — no shadows
Negative constraints — do not produce any of:
- Inter, Roboto, Arial, or Space Grotesk as primary typeface
- Purple gradients on white backgrounds
- Pulse animations on idle elements
- Glassmorphism, neumorphism, generic "modern SaaS" defaults
```
### Turn 2 — add layer 4 dimensions
Operator reacts to turn-1 output by adding typography modular scale, semantic color roles, motion easing, and surface-depth rules.
### Turn 3 — add layer 5 weighting
Operator specifies that craft and functionality are the two highest-weighted criteria for this dashboard; design quality is third; originality lowest.
### Turn 4+ — Tweak panel takes over
Most subsequent refinements happen in the Tweak panel (per-artifact Claude-generated controls; zero-token surgical edits) — see `references/03-iteration-and-session.md` for the surface cascade.
---
## Source map
The five layers anchor on four Anthropic primary sources plus one open-source skill:
| Layer | Anthropic source |
|-------|------------------|
| 1, 1.5 | `https://support.claude.com/en/articles/14604416-get-started-with-claude-design` |
| 2a, 2b | `https://platform.claude.com/docs/en/docs/build-with-claude/prompt-engineering/claude-4-best-practices` |
| 3 | `https://claude.com/blog/improving-frontend-design-through-skills` + `https://github.com/anthropics/skills/skills/frontend-design/SKILL.md` |
| 4 | `https://github.com/anthropics/skills/skills/frontend-design/SKILL.md` |
| 5 | `https://anthropic.com/engineering/harness-design-long-running-apps` |
Re-research trigger: any of the four URLs returning 404 or shifting content materially; Anthropic publishing a sixth layer or revising any of the five. Captured-on date 2026-05-16 — the layer-1 framework has been stable since the launch announcement.

View file

@ -1,333 +0,0 @@
# DESIGN.md — template and extractor
**Last updated:** 2026-05-17 | **Verified:** research/03-prompt-patterns-intent-presets.md
**Status:** Beta (Labs research preview)
**Captured-on date:** 2026-05-16
**Evidence grade:** Community-converged — Anthropic publishes the *concept* of a design-system document anchored to a Claude Design project (`https://support.claude.com/en/articles/14604397-set-up-your-design-system-in-claude-design`), but does not publish the 9-section canonical structure. The 9-section template comes from community practitioners (`https://github.com/rohitg00/awesome-claude-design`, `https://github.com/VoltAgent/awesome-claude-design`). Use accordingly: the concept is Anthropic-authoritative; the structure is community-converged.
---
## 1. Why DESIGN.md
A DESIGN.md file uploaded to a Claude Design project anchors design-system identity for every artifact generated in that project. Without an anchor, Claude Design defaults to its convergent middle-ground aesthetic (rounded corners, generous spacing, friendly typography, gentle shadows — the AI-slop pattern documented at `https://claude.com/blog/improving-frontend-design-through-skills`). With an anchor, the model reads the file at generation time and constrains its aesthetic, component, and motion decisions to match.
Anthropic publishes the concept of design-system anchors in `https://support.claude.com/en/articles/14604397-set-up-your-design-system-in-claude-design`. The article describes asset uploads, brand kits, and the principle that artifacts in a Claude Design project inherit the project's design language. What Anthropic does *not* publish is a recommended structure for the design-language file itself.
The community converged on a 9-section structure — documented across multiple awesome-claude-design repos, Substack posts, and practitioner blogs — that maps cleanly onto how Claude Design reads design context. The sections below are that converged structure.
---
## 2. The 9-section canonical structure
Each section names a decision Claude Design will otherwise default. The order is the order Claude Design appears to read most reliably (heaviest design-decision sections first).
### Section 1 — Visual Theme & Atmosphere
A one-paragraph description of the aesthetic family. Use named visual references the model can anchor to: "industrial-utilitarian like a Bloomberg terminal", "warm-editorial like The New York Times opinion section", "minimal-monochrome like Linear's UI".
Worked example:
```markdown
# Visual Theme & Atmosphere
Industrial-utilitarian. Slate-monochrome palette, square-cut typography,
flat surfaces. Reference: a modern data-tool UI (Linear, Datadog,
Bloomberg) — dense, intentional, no flourish. The product should look
like it was built for engineers by engineers.
```
### Section 2 — Color Palette & Roles
CSS-variable form with explicit hex values and semantic roles. Avoid relying on opacity for state changes — name each state explicitly.
Worked example:
```markdown
# Color Palette & Roles
:root {
--color-bg: #E9ECEC;
--color-surface: #C9D2D4;
--color-muted: #8C9A9E;
--color-fg: #44545B;
--color-ink: #11171B;
--color-accent: #4A6FA5;
--color-accent-hover: #3D5C8A;
--color-accent-active: #2F4A70;
--color-error: #B23A48;
--color-warning: #C89B3F;
--color-success: #4F7A4F;
}
Semantic roles:
- bg — page background
- surface — card / panel background
- muted — secondary text, borders
- fg — primary text
- ink — emphasis / heading text
```
### Section 3 — Typography Rules
Named typeface, modular scale, weight palette, line-height palette. Modular scales the community converged on are 1.250 (minor third) for dense interfaces and 1.333 (perfect fourth) for marketing pages.
Worked example:
```markdown
# Typography Rules
Primary typeface: Söhne (concrete-named, not "modern sans-serif").
Fallback: Inter Variable.
Display typeface: same as primary (no separate display face).
Modular scale: 1.250 (minor third).
--text-xs: 0.64rem;
--text-sm: 0.8rem;
--text-base: 1rem;
--text-lg: 1.25rem;
--text-xl: 1.563rem;
--text-2xl: 1.953rem;
Weight palette: 500 body, 600 emphasized, 700 headings.
Line height: 1.4 body, 1.2 headings.
If the typeface is not available, substitute Inter Variable — never
default to Inter, Roboto, Arial, or Space Grotesk
(per https://claude.com/blog/improving-frontend-design-through-skills
AI-slop avoid-list).
```
### Section 4 — Component Stylings
Per-component rules for the components Claude Design generates. Cover buttons, inputs, cards, tables, navigation. Specify radius, padding, border treatment, hover/active/disabled state explicitly.
Worked example:
```markdown
# Component Stylings
Buttons:
- radius: 4px (no pill shapes)
- padding: 8px 16px
- primary: bg accent, fg surface
- secondary: border 1px muted, bg transparent
- hover: bg accent-hover
- active: bg accent-active
- disabled: opacity 0.4, no pointer events
Inputs:
- radius: 4px
- padding: 8px 12px
- border: 1px solid muted
- focus: border accent + 2px outset ring at accent + 20% alpha
Cards:
- radius: 4px
- padding: 16px
- bg surface
- no shadow — borders define edges if needed
Tables:
- row height: 32px (dense)
- cell padding: 8px
- alternating row: bg + 4% darken
- hover row: bg + 8% darken
```
### Section 5 — Layout Principles
Grid system, spacing scale, breakpoint widths. Name the grid columns and the gap value.
Worked example:
```markdown
# Layout Principles
Grid: 12-column on screens >= 1024px, 8-column on screens 768-1023px,
4-column on screens < 768px.
Gap: 16px (--space-md).
Spacing scale:
--space-xs: 4px
--space-sm: 8px
--space-md: 16px
--space-lg: 24px
--space-xl: 32px
--space-2xl: 48px
Page max-width: 1440px centered.
Container padding: 24px on screens >= 768px, 16px below.
```
### Section 6 — Depth & Elevation
Surface depth rules. Most designs benefit from a clear flat-vs-layered decision rather than a mixed palette.
Worked example:
```markdown
# Depth & Elevation
Flat. No box-shadows by default. Borders define component edges.
Z-stack:
z-0: page surface
z-10: navigation
z-20: dropdown / popover
z-30: modal backdrop
z-40: modal content
z-50: toast / notification
Modal: bg surface, 1px border ink, no shadow.
Popover: bg surface, 1px border muted, no shadow.
```
### Section 7 — Do's and Don'ts
Explicit constraint list. This is where layer-3 (AI-slop avoid-list) gets project-specific.
Worked example:
```markdown
# Do's and Don'ts
Do:
- Use accent color sparingly (CTA + active state only)
- Use ink for headings, fg for body, muted for secondary
- Use 4px corner radius consistently
- Use 160ms ease-out for all hover transitions
Don't:
- Use purple gradients on white backgrounds
- Use solid-color hero backgrounds
- Use Inter / Roboto / Arial / Space Grotesk as primary typeface
- Use bouncy spring easing
- Use pulse / breathing animations on idle elements
- Use glassmorphism or neumorphism
- Use shadows except where the depth-and-elevation section explicitly permits
```
### Section 8 — Responsive Behavior
Breakpoint behavior. Anthropic does not publish responsive rules; this is the section where a project encodes its responsive philosophy.
Worked example:
```markdown
# Responsive Behavior
Mobile-first reasoning, but built desktop-first (target audience is
desktop). Below 768px:
- Navigation collapses to single icon-button row
- Tables become card stacks (one card per row)
- 12-column grid becomes 4-column
- Container padding drops from 24px to 16px
- Font sizes scale down by 0.9x
Touch targets: minimum 44px height (regardless of viewport).
```
### Section 9 — Agent Prompt Guide
A short block telling Claude Design how to use this DESIGN.md. This section is the bridge between the file and the prompt — it names the file by section and reminds the model that the constraints are load-bearing.
Worked example:
```markdown
# Agent Prompt Guide
When generating an artifact in this project, read every section of this
DESIGN.md before producing output. Treat color palette, typography rules,
component stylings, and layout principles as constraints — not
suggestions. If a generation would violate a constraint, stop and ask
which constraint to relax.
Cite specific section names when justifying design decisions in
explanatory text (e.g., "I chose 4px corners per Section 4 Component
Stylings").
```
---
## 3. Brand-to-DESIGN.md extractor prompt
A copy-paste-ready prompt the operator pastes into `claude.ai` (the chat product) or Claude.com to convert a brand URL, screenshot, or marketing asset into a DESIGN.md. The pattern comes from `https://github.com/rohitg00/awesome-claude-design/blob/main/prompts/brand-to-design-md.md` (adapted with attribution to the awesome-claude-design community template).
```
You will produce a DESIGN.md file by analyzing the brand reference
materials I provide. Output structure: 9 sections, in this order,
with the exact heading names:
1. Visual Theme & Atmosphere
2. Color Palette & Roles
3. Typography Rules
4. Component Stylings
5. Layout Principles
6. Depth & Elevation
7. Do's and Don'ts
8. Responsive Behavior
9. Agent Prompt Guide
Rules:
- Use CSS-variable form (--color-name: #HEX) for color palette
- Use modular scale form (--text-xs / --text-sm / ...) for typography
- Use named typefaces ONLY — if you cannot identify the typeface from
the brand materials with high confidence, write "unknown — operator
to fill in" rather than guessing. Do not hallucinate a typeface name.
- For each component (button, input, card, table, navigation), name
radius, padding, border treatment, and hover / active / disabled states
- Cite the source brand material at the top (e.g., "Extracted from
brand kit at <URL> on 2026-05-17")
Brand reference materials:
[paste URL, screenshot, or brand kit description here]
```
The anti-hallucination clause ("if you cannot identify... write unknown") is load-bearing — the failure mode without it is plausible-but-wrong typography names that the operator does not catch until they brief Claude Design and the output drifts.
Source for this extractor: community pattern at `https://github.com/rohitg00/awesome-claude-design/blob/main/prompts/brand-to-design-md.md`, adapted.
---
## 4. DESIGN.md failure modes
Four failure modes the operator should know before adopting DESIGN.md as a workflow primitive.
### Vision-token cost penalty
If the DESIGN.md is uploaded as an image (screenshot of a brand page) rather than as text, Claude Design pays a vision-token cost on every generation. Practitioner walkthroughs (Xinran Ma's documented experience in `research/03`) report meaningful quota burn from image-based DESIGN.md anchors. Use text-form DESIGN.md whenever possible.
### Per-user quota not pooled
Anthropic does not pool Claude Design quota across team members. A team using a shared DESIGN.md will not share quota burn — each member pays separately. Plan project workflow accordingly (research/04 documents community-observed Pro burn of roughly 25-30 minutes; Max roughly 60-90).
### Long-session degradation
DESIGN.md adherence appears to degrade in the back third of a long session. Opus 4.7 quality drops at the 40-50% context mark (`https://anthropic.com/engineering/harness-design-long-running-apps`); DESIGN.md is part of context, so its enforcement weakens accordingly. Session-break heuristics in `references/03-iteration-and-session.md` apply.
### Post-export drift
When an artifact is exported (PPTX, PDF, Code-handoff), the DESIGN.md does not travel with it. Downstream editing tools — PowerPoint, Adobe, Code IDEs — apply their own defaults. Validate the rendered output against DESIGN.md after export.
---
## 5. DESIGN.md sanity-check pattern
A community-converged test for DESIGN.md adherence: generate three artifacts in the same Claude Design project using deliberately different intent presets (designs, slides, one-pagers) and confirm that all three respect the DESIGN.md color palette, typography, and component-styling rules. If one preset drifts more than the others, the DESIGN.md needs sharpening on the section the drifting preset emphasized.
The community attribution for this pattern comes from a `theadpharm` Substack walkthrough (cited in `research/03`). It is a smoke test, not a guarantee — but it catches the common case where DESIGN.md is too general to constrain the model.
---
## Sources
- `https://support.claude.com/en/articles/14604397-set-up-your-design-system-in-claude-design` — Anthropic's design-system setup concept
- `https://github.com/anthropics/skills/skills/frontend-design/SKILL.md` — Anthropic's AI-slop avoid-list and four design dimensions
- `https://claude.com/blog/improving-frontend-design-through-skills` — Anthropic blog on default-avoidance
- `https://anthropic.com/engineering/harness-design-long-running-apps` — context-degradation framing
- `https://github.com/rohitg00/awesome-claude-design` — community awesome-list, brand-to-DESIGN.md extractor source
- `https://github.com/VoltAgent/awesome-claude-design` — community awesome-list, alternate 9-section structure references
Re-research trigger: Anthropic publishing an official DESIGN.md structure; either community awesome-list reaching consensus on a different section ordering; new failure mode surfaced in practitioner posts.

View file

@ -1,256 +0,0 @@
# Iteration and session — Tweak / Comment / Chat cascade and recovery
**Last updated:** 2026-05-17 | **Verified:** research/04-iteration-mechanics-recovery.md
**Status:** Beta (Labs research preview)
**Captured-on date:** 2026-05-16
This file documents three things in order of operational urgency: which iteration surface to use when, when to break a session, and how to recover when iteration stops landing. The cost asymmetry between Tweak / Comment / Chat is the single largest leverage point in a Claude Design workflow.
---
## 1. The three-surface cascade
Claude Design exposes three edit surfaces with asymmetric token costs and asymmetric scope:
| Surface | Token cost | Scope | When to use |
|---------|-----------|-------|-------------|
| Tweak panel | Zero | Surgical, per-control | Anything Claude pre-derived at generation time |
| Inline comment | Zero on success | Component-scoped, in-component | Targeted in-component text or visual change |
| Chat | One full turn | Whole artifact | Structural change, aesthetic pivot, new section |
### Tweak panel
The Tweak panel is the per-artifact set of controls and sliders Claude pre-derives during generation. Each artifact comes with its own Tweak surface — section reordering, variant swap, density slider, spacing scale, color temperature, typography scale, padding / radius / shadow. The controls are surgical and zero-token: applying them does not consume a chat turn or budget time. They are also lossy-free — the artifact does not regenerate; the controls operate on the existing render.
Tweak panel coverage is per-artifact. If Claude did not pre-derive a control for a dimension, that dimension is not Tweak-editable. The first move is always to check the Tweak panel: most dimensions an operator wants to refine after the first generation are already there.
Operator-actionable mantra (the synthesis from `research/04`):
> Anything Claude pre-derives at generation time is surgical thereafter; new controls cost one chat turn for setup.
### Inline comments
The comment surface lets the operator click anywhere on the rendered artifact and attach a directive — "make this section narrower", "use a darker shade for this header", "remove this icon". Comments are surgical when the change is in-component (text edit, color tweak, sizing within an existing container) and they cost zero tokens on success.
Two failure modes the operator should know:
1. **Vanish bug** — comments sometimes disappear after submission with no edit applied. Anthropic has acknowledged this (community-cited; the workaround is to paste the comment text directly into chat as a follow-up turn).
2. **Structural-container failure** — comments cannot add a new structural container (a new section, a new column, a new modal). The model interprets the directive but produces no change, or makes an irrelevant change. For new containers, escalate to chat.
### Chat
Chat is the full-regeneration surface. Any structural change, aesthetic pivot, multi-component change, or new section requires a chat turn. The artifact regenerates against the new prompt; previous Tweak panel and comment state may not survive intact.
Chat costs one full turn — count it against the session budget. Use the layer-1-through-5 framework (`references/01-prompt-fundamentals.md`) for the chat prompt rather than free-form natural language.
### Per-operation surgical-vs-regen catalogue
A practical lookup for which surface fits which operation (synthesized from `research/04`):
| Operation | Surface | Notes |
|-----------|---------|-------|
| Section reordering | Tweak | Pre-derived if Claude includes a section-order control |
| Variant swap (component variant A → B) | Tweak | If Claude generated multiple variants |
| Density slider (compact / cozy / comfortable) | Tweak | Common Tweak control |
| Spacing scale (--space-* token shift) | Tweak | Common Tweak control |
| Color temperature (warmer / cooler) | Tweak | If Claude derives this dimension |
| Typography scale (modular scale shift) | Tweak | If Claude derives this dimension |
| Padding / radius / shadow per component | Tweak | Common Tweak controls |
| Text edit in existing component | Comment | Surgical, in-component |
| Color tweak in existing component | Comment | Surgical, in-component |
| Add a new section | Chat | Structural — Tweak / Comment cannot do this |
| Aesthetic pivot (industrial → editorial) | Chat | Full regen — name the new aesthetic |
| Multi-component change (revise hero + CTA + footer together) | Chat | Full regen — too broad for Comment |
| New interaction state (hover / disabled / active) | Chat | Structural — requires regeneration |
---
## 2. Anthropic-published surgical/structural split
Anthropic's verbatim framing in `https://support.claude.com/en/articles/14604416-get-started-with-claude-design`: the Claude Design canvas distinguishes between *surgical edits* (per-element changes that do not regenerate the artifact) and *structural edits* (new components, new layouts, aesthetic pivots that require regeneration). The Tweak panel and inline comments are surgical surfaces; chat is the structural surface.
The operator's job is to identify which kind of edit a given change is *before* picking the surface. A surgical change attempted via chat regenerates the whole artifact and burns a turn; a structural change attempted via comment fails silently and wastes time. Misclassification is the dominant inefficiency in a long Claude Design session.
Source: `https://support.claude.com/en/articles/14604416-get-started-with-claude-design`.
---
## 3. Anthropic-engineering refine-vs-pivot rule
Anthropic publishes a verbatim refine-vs-pivot guideline in `https://anthropic.com/engineering/harness-design-long-running-apps`:
> Pivot to an entirely different aesthetic if the approach wasn't working — iteration within a bad direction compounds the failure.
The companion warning, also verbatim from the same source: design quality is **non-monotonic** across iterations. Turn 4 can be worse than turn 3 on a critical criterion. The framing matters because the operator's intuition pushes toward continued refinement; the discipline is to recognize a stuck state and pivot.
Operational signal that a pivot is needed (community-converged from `research/04`):
- Three consecutive comments have failed to land
- The aesthetic is drifting back to the AI-slop default on each regeneration
- The operator finds themselves explaining what they *don't* want more than what they *do* want
- The artifact is converging on a different audience than the brief
Pivot move: rewrite the layer-2 aesthetic-family specification entirely, then ship a fresh chat turn against the new family. Do not try to incrementally edit out of a stuck state.
Source: `https://anthropic.com/engineering/harness-design-long-running-apps`.
---
## 4. Session-management heuristics
Four heuristics — one Anthropic-published, three community-converged — govern when to break a session.
### 4-screen inflection (community-converged)
Practitioners across multiple posts in `research/04` document a quality inflection around the fourth screen of context in a Claude Design session. Before screen four, edits land cleanly; after, comments start vanishing, aesthetic defaults creep back, and Tweak controls feel less precise. The exact mechanism is unclear (context-window pressure on Opus 4.7 + cumulative DESIGN.md re-reads + cumulative artifact history), but the pattern is consistent.
Practitioner mantra: **at screen four, save what you have and start a new session.**
### Opus 4.7 context degradation (Anthropic-published)
`https://anthropic.com/engineering/harness-design-long-running-apps` publishes the verbatim observation: Opus 4.7 quality degrades noticeably at the 40-50% context-window mark. Claude Design sessions accumulate context faster than chat sessions (each generation includes the artifact in context for subsequent turns); the 40-50% mark arrives sooner.
### Quota burn (community-observed)
Practitioner walkthroughs cited in `research/04` report quota burn rates as of 2026-04-28 per MindStudio's documented walkthrough — these are community observations, not Anthropic-published limits and may shift:
- **Pro plan:** ~25-30 minutes of active design before quota becomes the binding constraint
- **Max plan:** ~60-90 minutes of active design before quota becomes the binding constraint
These numbers assume continuous active design (chat turns, regenerations, image-form DESIGN.md anchors). Tweak panel and comment surface usage does not burn quota.
Captured-on date: 2026-04-28 per `research/04`. Not an Anthropic-published limit.
### Session-break triggers (community-converged)
Three signals that a session has reached its productive end:
- Reorder / density Tweak controls stop landing (the model is not respecting the surgical surface)
- Chat re-introduces previously-removed defaults (the model is losing the negative constraints)
- The operator finds themselves repeating the same constraint in three consecutive turns
When two of three trigger together, break the session.
---
## 5. Context-reset prompt
When the operator needs to break a session but does not want to lose what worked, the verbatim community pattern from MindStudio (2026-04-28, cited in `research/04`):
```
Before we continue, summarize the design system and component decisions
we've made in this session as a structured markdown document I can use
as a fresh starting context. Include:
- the aesthetic family we converged on
- color palette in CSS-variable form
- typography decisions (typeface, modular scale, weights)
- component patterns we settled on
- decisions we made and then reversed (so I don't reintroduce them)
- anything we tried that did not work
```
Paste the produced markdown into a new Claude Design session as the opening context, alongside the original DESIGN.md. The new session starts with the cumulative decisions but a fresh context window.
Captured-on date: 2026-04-28.
---
## 6. Recovery prompt library
Five recovery moves, listed in escalating cost order.
### 6.1 — Break the default aesthetic
The highest-leverage single content asset in this plugin. Adapted with attribution from `https://github.com/rohitg00/awesome-claude-design/blob/main/prompts/break-default-aesthetic.md`. Use when the artifact has drifted toward AI-slop defaults despite negative constraints in the brief.
```
The current direction has converged on a generic default. I want a
distinct visual direction. Constraints:
1. Pick ONE aesthetic family and commit to it. Name a concrete reference
(an existing product, an editorial source, a design movement). No
"modern SaaS", no "clean", no "minimal" as the named family — those
are defaults, not directions.
2. Do not produce any of:
- Inter, Roboto, Arial, Space Grotesk as primary typeface
- Purple gradients on white backgrounds
- Three-column feature grids with icon + headline + line
- Centered-hero-with-single-CTA layout default
- Glassmorphism, neumorphism, generic "modern" defaults
3. Before generating: list four candidate directions matching the goal
and audience. For each:
- Aesthetic family (with concrete reference)
- Color palette in hex
- Typeface (named)
- One-line rationale tying it to goal + audience
Wait for me to pick one. Do NOT default to "the most common modern
approach."
4. The aesthetic should surprise without being weird. If you're tempted
to write "professional" or "balanced" or "approachable", stop.
Those words signal default-mode reasoning.
```
### 6.2 — Fix the system, not the prompt
Community pattern: when iteration is stuck, the prompt is rarely the problem. The DESIGN.md is. Reopen the DESIGN.md, audit the section the artifact is drifting on (typography, color, components), tighten that section, re-upload, then re-generate.
The instinct is to add more constraints to the chat prompt. The discipline is to fix the upstream anchor.
### 6.3 — Edit previous message rather than send a new one
Community-documented workaround for context-bloat: when the previous prompt almost worked but missed one detail, edit the previous message rather than send a new turn. Claude Design re-generates from the edited message without adding to context. This is in `research/04` as a low-cost recovery move for the case where a single-word change would have fixed the output.
### 6.4 — 3-failed-comment escalation rule
If three consecutive inline comments fail to land, stop commenting and escalate to chat. The comment surface is signaling that the model is not in a state to respect surgical edits — either the artifact has drifted too far from the brief, the context window is pressured, or the change is actually structural and was misclassified.
Escalation move: paste the failed comment text directly into a chat turn, prefaced with "the inline comment surface is not landing on this; please apply this change via regeneration".
### 6.5 — Model downshift escalator
When Opus 4.7 generations are non-monotonic in quality and Tweak / Comment / chat moves all stop landing, the recovery move is to start a fresh session at a different model. The downshift sequence community-converged on (per `research/04`):
- Opus 4.7 → Opus 4.6 (same family, less context-pressure-sensitive)
- Opus 4.6 → Sonnet 4.6 (faster, less context-sensitive, sometimes better at constraint-following on tight briefs)
Claude Design pins to Opus 4.7. The downshift happens by moving the work to a different Anthropic surface (Claude.com chat with a model picker) for the constraint-tightening turn, then bringing the result back to Claude Design as a new session anchor.
### 6.6 — Verbal save-pattern
When the operator wants to preserve what works but try a different direction without losing the current state, the community pattern is to **verbally save** in chat:
```
Save what we have. The current direction is good but I want to explore
a completely different aesthetic for comparison. Acknowledge this save,
then start fresh on a new direction without referencing the saved state.
We may come back to it.
```
The "save" is verbal — Claude Design has no version-tree primitive — but it signals to the model that the previous direction is preserved in the operator's mental model and the next turn is exploratory.
---
## 7. What Claude Design lacks
Four primitives that exist in adjacent Anthropic surfaces but not in Claude Design today. The plugin must never promise these:
- **No `/rewind`** — Anthropic Code has a `/rewind` primitive that reverts to a prior conversational state. Claude Design does not.
- **No version history** — there is no Tweak-history, no Comment-history, no chat-thread-fork primitive. The verbal save-pattern (Section 6.6) is the closest substitute.
- **No two-way handoff** — once an artifact is exported to Claude Code, there is no path back into Claude Design. Re-import requires a screenshot → new Claude Design session (lossy). See `references/04-handoff-and-scope.md`.
- **No branching** — Claude Design cannot fork a session into parallel directions and compare. The verbal save-pattern is the only branching primitive.
When the operator asks for any of these, name the constraint and offer the closest substitute (verbal save-pattern, multi-session-with-context-reset-prompt, manual screenshot archive).
---
## Sources
- `https://support.claude.com/en/articles/14604416-get-started-with-claude-design` — surgical / structural edit split, intent presets
- `https://anthropic.com/engineering/harness-design-long-running-apps` — refine-vs-pivot rule, non-monotonic improvement, 40-50% context degradation, design grading criteria
- `https://github.com/rohitg00/awesome-claude-design` — community recovery prompts, break-default-aesthetic source
- `https://claude.com/blog/improving-frontend-design-through-skills` — AI-slop avoid-list applied during recovery
Re-research trigger: Anthropic publishing version-history or branching primitives; community 4-screen inflection no longer reproducing; quota mechanics shifting (Pro / Max minute counts have a 2026-04-28 captured-on date and are community-observed, not Anthropic-published).

View file

@ -1,157 +0,0 @@
# Handoff and scope fence
**Last updated:** 2026-05-17 | **Verified:** research/04-iteration-mechanics-recovery.md + research/05-anthropic-design-plugin-scope.md
**Status:** Beta (Labs research preview)
**Captured-on date:** 2026-05-16
This file documents two things: how Claude Design hands artifacts off to downstream tools (Claude Code, PowerPoint, PDF, Canva), and how this plugin (`claude-design`) fits next to Anthropic's official `knowledge-work-plugins/design`. The scope fence is load-bearing — getting it wrong duplicates Anthropic's command surface and adds nothing.
---
## 1. Handoff bundle contents
When the operator chooses Claude Code handoff as the destination, Claude Design produces a bundle containing — verbatim per `https://anthropic.com/news/claude-design-anthropic-labs` and `https://support.claude.com/en/articles/14604416-get-started-with-claude-design`:
- **Machine-readable component spec** — a JSON-shaped description of the components in the artifact, with names, props, and variants
- **Design tokens** — colors, typography, spacing, radii in token form (CSS variables or JSON tokens)
- **Layout hierarchy** — the page / screen structure as a tree
- **Referenced assets** — images, icons, fonts referenced in the artifact, bundled
- **Standalone HTML + inline CSS + JS** — a self-contained render that runs without Claude Design
- **Per-state screenshots** — visual snapshots of each interaction state (default, hover, active, disabled, focused)
- **PM-annotated notes** — annotations Claude Design surfaces about design decisions, edge cases, and trade-offs
- **Stack / framework README** — a guide to which framework conventions the artifact assumes (e.g., React + Tailwind, or vanilla HTML)
The bundle is generated once on export. It does not regenerate when the operator iterates the artifact further inside Claude Design — the operator must re-export to pick up changes.
Sources: `https://anthropic.com/news/claude-design-anthropic-labs` and `https://support.claude.com/en/articles/14604416-get-started-with-claude-design`.
---
## 2. Direction is one-way
The Design → Code handoff direction is one-way. Once the bundle is exported and the operator starts iterating in Claude Code (or any code editor), there is no return path to Claude Design. The component spec, design tokens, and standalone HTML continue to live in the code repository; Claude Design has no concept of "re-ingest from code".
If the operator wants to visit the visual surface again after engineering iteration, the only path is:
1. Screenshot the current Claude Code render
2. Open a new Claude Design session
3. Paste the screenshot as the starting visual reference
4. Brief Claude Design from scratch using layer-1-through-5 framework
This is lossy: the design tokens, component spec, and PM notes from the original bundle do not travel into the new Claude Design session. The new session inherits only what the screenshot communicates.
Operational consequences:
- **Finalize visual decisions inside Claude Design before exporting.** The Tweak panel and inline comments are free; chat turns inside Claude Design are budget-priced; engineering iteration in code is budget-free but the visual round-trip is one-way. Order accordingly.
- **Export once, intentionally.** Bundling everything in a single export (per Section 6 below) costs one chat turn; bundling screen-by-screen costs N turns and consumes budget faster.
- **Plan for asymmetric revisit.** When the engineering implementation diverges from the design intent and the operator wants a designer review, schedule that revisit as a fresh Claude Design session, not as an extension of the original session.
Practitioner consensus on this point is documented at `https://claudefa.st/blog/guide/mechanics/claude-design-handoff` (community source). Anthropic frames the same one-way property implicitly in the get-started article — the handoff is described as an export, not a connection.
---
## 3. Workflow recommendation
The recommended flow for any Claude Design artifact destined for engineering implementation:
1. **Iterate visually in Claude Design until the artifact is shippable.** Use Tweak panel and inline comments first; chat turns for structural and aesthetic changes.
2. **Validate the destination format before exporting.** If destination is PPTX, verify the text-as-text count (see Section 6 token cost trap). If destination is HTML standalone, render it in the target browser at the target viewport. If destination is PDF, check the interactive-element handling.
3. **Export the full bundle once.** Bundle all screens in one export, not per-screen. The token cost trap (Section 6) compounds with per-screen exports.
4. **Iterate engineering inside Claude Code or the code editor.** Use Claude Code's `/edit` and chat surfaces. Pull the design tokens from the bundle into the repository's styling layer.
5. **For post-design design-quality work — critique, accessibility audit, UX copy review, design-system audit, engineering handoff guidance — install Anthropic's official plugin (Section 4 below).**
6. **If a visual revisit becomes necessary later, accept the one-way cost.** Open a new Claude Design session against a screenshot; do not try to re-extend the original session.
This is the flow per Section 4's scope-fence reasoning: this plugin covers the upstream lifecycle; Anthropic's covers downstream.
---
## 4. Scope fence vs Anthropic's `knowledge-work-plugins/design`
Anthropic ships an official Claude Code plugin at `https://claude.com/plugins/design` (source: `https://github.com/anthropics/knowledge-work-plugins`). It is skill-driven, Apache 2.0 licensed (MIT-equivalent), and ships six slash-commands operating on **existing** artifacts (Figma URLs, screenshots, copy snippets).
The lifecycle-stage coverage map:
| Lifecycle stage | This plugin (claude-design) | Anthropic's plugin (knowledge-work-plugins/design) |
|-----------------|------------------------------|----------------------------------------------------|
| Idea ingestion | ✓ Disambiguate surface, intent preset, audience | — |
| Intent-preset selection | ✓ Eight presets, evidence-grade labelled | — |
| Prompt engineering | ✓ Five-layer stack + per-preset patterns | — |
| Copy-paste delivery | ✓ Composed prompt block | — |
| Iteration coaching | ✓ Tweak / Comment / Chat cascade, session economics | — |
| Ship-readiness | ✓ Operator-attested + recommend downstream tool | — |
| Critique | — | ✓ `/critique` |
| Accessibility audit | — | ✓ `/accessibility` |
| UX copy review | — | ✓ `/ux-copy` |
| Research synthesis | — | ✓ `/research-synthesis` |
| Design-system audit | — | ✓ `/design-system` |
| Engineering handoff | — | ✓ `/handoff` |
There is no functional overlap. This plugin produces prompts that go into Claude Design; Anthropic's plugin operates on artifacts that already exist. The split is clean by design — both plugins document the other as the lifecycle complement.
**Forbidden command-name list.** This plugin must NOT ship slash-commands with any of these names (with or without a `claude-design:` namespace prefix):
- `/critique`
- `/accessibility`
- `/ux-copy`
- `/research-synthesis`
- `/design-system`
- `/handoff`
`tests/validate-plugin.sh` assertion (h) enforces this mechanically. The rationale is collision-avoidance — if both plugins are installed and both ship `/critique`, command resolution becomes ambiguous and one or the other silently fails. The cleaner solution is: this plugin does not own those commands.
---
## 5. Recommended downstream tool
When the operator finishes the Claude Design lifecycle (artifact exists, exported, ready for review), surface the downstream tool installation as the next step:
```
claude plugins add knowledge-work-plugins/design
```
In a new Claude Code session with that plugin installed:
- Run `/critique <path-or-URL>` to get a design critique
- Run `/accessibility <path-or-URL>` for a WCAG audit
- Run `/ux-copy <path-or-URL>` for copy review
- Run `/research-synthesis` if the operator has user-research notes to synthesize
- Run `/design-system <path-or-URL>` for design-system consistency check
- Run `/handoff <path-or-URL>` for engineering-handoff guidance
Sources: `https://claude.com/plugins/design` and `https://github.com/anthropics/knowledge-work-plugins`.
The plugin is Apache 2.0, free, and maintained by Anthropic. There is no commercial trade-off; it is the canonical downstream tool.
---
## 6. Token cost trap — bundle all screens in one export
Practitioner-documented failure mode: exporting screen-by-screen instead of bundling all screens in one export. The community-cited reference is `token-budget-claude-design.md` (cited in `research/04` as one of the highest-leverage cost-management items).
The mechanism: each export turn passes the current artifact state through Opus 4.7 to produce the bundle. For an N-screen artifact, N separate exports run N separate bundle generations and burn N chat turns. Bundling all N screens in a single export runs one bundle generation against the cumulative state and burns one chat turn.
The bundling prompt pattern:
```
Generate the full export bundle covering all N screens of this artifact:
[screen 1: name], [screen 2: name], ... [screen N: name].
Include for each screen: HTML standalone, design tokens, component spec,
per-state screenshots, PM notes. Bundle as a single download.
```
Multi-screen artifacts (prototypes, slide decks, multi-page landing pages) benefit most from this discipline. Single-screen artifacts (a single dashboard, a single one-pager) are not affected because there is only one bundle to generate.
If the operator has already paid the per-screen cost and noticed mid-flight, the recovery is to abandon partial exports and run one final bundling export against the cumulative artifact state.
---
## Sources
- `https://anthropic.com/news/claude-design-anthropic-labs` — Anthropic Labs launch, bundle contents
- `https://support.claude.com/en/articles/14604416-get-started-with-claude-design` — get-started, handoff bundle contents
- `https://claude.com/plugins/design` — Anthropic's official knowledge-work-plugins/design plugin
- `https://github.com/anthropics/knowledge-work-plugins` — source for the official plugin
- `https://anthropic.com/engineering/harness-design-long-running-apps` — design grading framing
- `https://claudefa.st/blog/guide/mechanics/claude-design-handoff` — community operational consensus on one-way direction
Re-research trigger: Anthropic announcing a two-way handoff primitive; `knowledge-work-plugins/design` adding or removing slash-commands; bundle contents changing materially; this plugin and Anthropic's plugin overlap emerging.

View file

@ -1,183 +0,0 @@
# Preset: designs
**Last updated:** 2026-05-17 | **Verified:** research/03-prompt-patterns-intent-presets.md
**Evidence grade:** Anthropic-documented + community-validated
**Captured-on date:** 2026-05-16
The `designs` intent preset is Claude Design's generic generation mode. It covers dashboards, components, layouts, and design explorations that do not fit into one of the more specialised presets (prototypes, slides, one-pagers, etc.). It is the preset operators reach for when the goal is "produce a high-quality visual artifact" rather than a destination-shaped artifact.
This file documents the `designs` preset across six dimensions: what it is, when to use it, Anthropic's published prompt patterns, community uplift, critical caveats, and one end-to-end worked prompt.
---
## (a) What this preset is
Anthropic's launch post (`https://anthropic.com/news/claude-design-anthropic-labs`) describes `designs` as the default-mode preset — the substrate every other preset effectively inherits from, with destination shaping layered on top. Output is HTML + React + inline CSS, viewable in the Claude Design canvas, exportable to PDF / HTML standalone / Code-handoff.
Two Anthropic primary sources ground this preset:
- The Anthropic-engineering blog `https://anthropic.com/engineering/harness-design-long-running-apps` publishes the four design grading criteria (design quality, originality, craft, functionality) that the `designs` preset is optimised against.
- The frontend-design open-source skill at `https://github.com/anthropics/skills/skills/frontend-design/SKILL.md` documents Anthropic's verbatim Design-Thinking Framework — **Purpose**, **Tone**, **Constraints**, **Differentiation** — and the verbatim AI-slop avoid-list.
The frontend-design skill is the closest thing Anthropic publishes to a `designs`-preset system prompt. Read it whenever the operator wants to understand what Claude Design is internally optimising for.
---
## (b) When to use it
Pick `designs` when the goal is generic, exploratory, or composite. The decision matrix:
| Operator goal | Preset |
|---------------|--------|
| Generic dashboard, component library exploration, design system playground | **designs** |
| Interactive product flow for usability testing | prototypes |
| Presentation for stakeholders | slides |
| Single-page memo or leave-behind | one-pagers |
| Low-fi structural layout for early review | wireframes-mockups |
| Investor / external pitch | pitch-decks |
| Landing page, social variant, marketing asset | marketing-collateral |
| Code-powered prototype with voice / video / shaders / 3D | frontier-design (experimental — see preset file) |
If the operator is uncertain between `designs` and `prototypes`, the distinguishing question is: **is this for usability testing?** Yes → prototypes. No → designs.
If uncertain between `designs` and `marketing-collateral`, the distinguishing question is: **is this destined for a marketing surface (landing page, social, ad)?** Yes → marketing-collateral. No → designs.
---
## (c) Anthropic-published prompt patterns
### The Design-Thinking Framework (verbatim from frontend-design/SKILL.md)
Anthropic's `https://github.com/anthropics/skills/skills/frontend-design/SKILL.md` publishes the verbatim four-part framework Claude Design uses when reasoning about a design:
- **Purpose** — what is the artifact for? Match every aesthetic decision to the purpose.
- **Tone** — what emotional register fits the audience and the purpose? Energetic, calm, authoritative, playful, terse?
- **Constraints** — what cannot be changed? Brand colors, typeface restrictions, layout rules, accessibility minimums.
- **Differentiation** — what makes this artifact distinct from the convergent middle-ground default? Name the differentiation explicitly.
Use this framework as a pre-brief check before composing a layer-1-through-5 prompt (see `../01-prompt-fundamentals.md`). If any of the four parts is fuzzy, sharpen it before drafting.
### Verbatim AI-slop avoid-list
Anthropic's frontend-design skill + the blog post `https://claude.com/blog/improving-frontend-design-through-skills` publish the verbatim banned-items list used in layer 3 of the prompt stack. See `../01-prompt-fundamentals.md` Section "Layer 3" for the full list. The `designs` preset inherits this list — it is not optional.
### Anthropic's verbatim canonical examples
The Anthropic get-started article `https://support.claude.com/en/articles/14604416-get-started-with-claude-design` publishes three verbatim canonical examples (dashboard, mobile onboarding, landing page) demonstrating the Goal / Layout / Content / Audience framework. Read them as the reference shape for a first prompt against `designs`. Reproduced in full in `../01-prompt-fundamentals.md` Section "Layer 1".
---
## (d) Community uplift
Three community-converged patterns extend Anthropic's published material for the `designs` preset.
### Real-data injection over lorem ipsum
Victor Dibia's documented pattern (`research/03`): substitute realistic placeholder content rather than lorem ipsum. The model defaults to convergent middle-ground content when content is unspecified; named placeholders ("Today's MRR: $48,200", "Last 24h error rate: 0.12%") anchor the model to real-shaped output.
For dashboards specifically: use realistic metric values, realistic timestamps, realistic user names. The visual difference between a chart with `$3,200` / `$4,500` / `$2,800` and a chart with `$XXX` / `$YYY` / `$ZZZ` is large — Claude Design will infer typography spacing and component sizing from the named values.
### Explicit modular scale and weight palette
Community pattern (research/03): name the typographic modular scale and weight palette in the brief rather than letting the model default. The `1.250` (minor third) scale fits dense informational artifacts; the `1.333` (perfect fourth) scale fits marketing pages. Weight palettes converge on `500 body / 600 emphasized / 700 headings`.
### Specify the negative aesthetic family
Beyond layer-3 negative constraints (which name specific banned items), community practice (research/03) is to name an entire negative aesthetic family — "not modern SaaS", "not playful illustrated", "not corporate professional" — to push the model out of its default neighbourhood. The model interprets aesthetic-family naming as a strong signal even in the negative.
---
## (e) Critical caveats
Three caveats specific to the `designs` preset.
### Default-aesthetic drift on iteration
The `designs` preset is most susceptible to default-aesthetic drift because it has no destination-shaped constraint pulling it toward a specific genre. Watch for drift back to AI-slop defaults across iterations — the `references/03-iteration-and-session.md` "break-default-aesthetic" recovery prompt is targeted at exactly this drift.
### Non-monotonic improvement across iterations
`https://anthropic.com/engineering/harness-design-long-running-apps` documents that quality across iterations is not strictly increasing. Turn 4 can be worse than turn 3 on design quality, originality, or craft. The recovery move (pivot, not refine) is in `../03-iteration-and-session.md`.
### Component spec coherence
For dashboards and component libraries specifically, the export bundle's machine-readable component spec is load-bearing for engineering handoff. Ensure the artifact has coherent component definitions (named, with consistent variants) before exporting — otherwise the component spec will be partial and the engineering implementation will diverge.
---
## (f) One end-to-end worked prompt — layers 1 + 2a + 3 composed
Goal: an admin dashboard for an analytics product, audience is data engineers.
```
Goal: An admin dashboard for monitoring data-pipeline freshness across
120 tables, sorted by last-successful-load timestamp
Layout: Header with environment switcher + global time-window selector;
top metrics row (4 KPIs: tables behind SLA, tables current,
tables stale, tables errored); main panel with stacked area
chart showing freshness over the last 24 hours; sortable table
below with 120 rows; alerts sidebar
Content: Realistic table names (orders, customers, inventory,
user_events, sessions, etc.); realistic timestamps (last
successful load within the last 6 hours for most, some at
12 hours, some at 48 hours); realistic error rates (0.01% to
3.2%)
Audience: Data engineers, on-call rotation, ages 25-50, comfortable
with dense interfaces, need to scan and triage quickly
Aesthetic family: industrial-utilitarian, slate-monochrome
Color palette (CSS hex):
--color-bg: #E9ECEC
--color-surface: #C9D2D4
--color-muted: #8C9A9E
--color-fg: #44545B
--color-ink: #11171B
--color-accent: #4A6FA5
--color-error: #B23A48
--color-warning: #C89B3F
Typography: square angular sans-serif (Söhne preferred, Inter Variable
fallback); no rounded glyphs; modular scale 1.250
Corner radius: 4px throughout — no pill shapes
Motion: transition: all 160ms ease-out
Density: dense (32px table rows, 8px card padding)
Surface: flat — no shadows, borders define edges
Design-Thinking Framework:
Purpose: enable on-call triage in under 60 seconds per incident
Tone: terse, signal-dense, no decorative copy
Constraints: 32px row height minimum (accessibility), accent reserved
for actionable items only
Differentiation: this is a data-engineer tool, not a marketing
dashboard — no card-style metric tiles, no playful
illustrations, no progress-ring widgets
Negative constraints — do not produce any of:
- Inter, Roboto, Arial, or Space Grotesk as primary typeface
- Purple gradients on white backgrounds
- Card-style KPI tiles with shadows and rounded corners
- Centered-hero with single CTA
- Bouncy spring easing on hover
- Pulse animations on idle elements
- Glassmorphism, neumorphism, generic "modern SaaS" defaults
If you find yourself defaulting to any of these, stop and ask me to
clarify the aesthetic before continuing.
```
Expected follow-up turns:
1. Turn 2: add layer 4 (typography modular scale specifics, semantic color roles, motion easing curves)
2. Turn 3: add layer 5 (grading criteria weighting — craft and functionality at 0.4 and 0.3, design quality 0.2, originality 0.1)
3. Turn 4+: Tweak panel takes over for surgical edits
---
## Sources
- `https://anthropic.com/news/claude-design-anthropic-labs` — preset enumeration, launch post
- `https://support.claude.com/en/articles/14604416-get-started-with-claude-design` — GLCA framework, three canonical examples
- `https://anthropic.com/engineering/harness-design-long-running-apps` — design grading criteria, non-monotonic improvement
- `https://github.com/anthropics/skills/skills/frontend-design/SKILL.md` — Design-Thinking Framework, AI-slop avoid-list
- `https://claude.com/blog/improving-frontend-design-through-skills` — default-avoidance blog post
Re-research trigger: Anthropic updating the Design-Thinking Framework; new canonical examples added to get-started article; AI-slop avoid-list materially extended.

View file

@ -1,149 +0,0 @@
# Preset: frontier-design
**Last updated:** 2026-05-17 | **Verified:** research/03-prompt-patterns-intent-presets.md
Evidence grade: Experimental — no validated practitioner pattern as of 2026-05-16. Frontier design is currently marketing language for "elaborate variants of the other presets," not a distinguishable generation mode practitioners can reliably invoke today.
This file documents what Anthropic publishes about the `frontier-design` preset, what practitioners have shipped (nothing verified), what adjacent material exists, and the single experimental pattern the plugin offers — clearly labelled as unverified speculation. The honest position the plugin takes is in Section (e).
---
## (a) What Anthropic says
Anthropic's launch post `https://anthropic.com/news/claude-design-anthropic-labs` describes `frontier-design` in a single sentence (verbatim):
> code-powered prototypes with voice, video, shaders, 3D and built-in AI
This is the entirety of Anthropic's per-preset documentation as of the 2026-05-16 captured-on date. There is no dedicated tutorial, no support article, no canonical prompt set, no Anthropic-published example artifact.
The launch sentence implies the preset targets:
- Code-powered prototypes (not static designs) — implying interactive elements at minimum
- Voice (audio playback, speech recognition, voice UI)
- Video (embedded video playback, possibly video-driven UI)
- Shaders (WebGL, custom GLSL shaders, GPU-driven visual effects)
- 3D (WebGL 3D scenes, possibly Three.js or similar)
- Built-in AI (LLM-driven interactions inside the artifact)
Anthropic's framing suggests `frontier-design` is the preset for showpiece artifacts demonstrating Claude Design's outer-edge capabilities — not a workhorse preset like `designs`, `prototypes`, or `slides`.
---
## (b) What practitioners have shipped
Verifiable practitioner outputs as of 2026-05-16: **NONE that we could verify.**
The most explicit acknowledgment of this gap comes from `https://llmx.tech/blog/claude-design-hands-on-review-2026` (cited in `research/03`):
> ...no frontier design assessment provided. The hands-on review covers designs, prototypes, slides, and one-pagers. Frontier design is named in the preset list but received zero hands-on evaluation, because no practitioner artifact has been published demonstrating what the preset produces in practice.
Across the community sources surveyed in `research/03` (Substack walkthroughs, awesome-claude-design lists, Twitter / X threads, MindStudio walkthroughs, sagnikbhattacharya, victordibia, theadpharm, claudefa.st, etc.), no practitioner has published a verifiable frontier-design artifact with prompt, output, and reproduction steps. The preset is named, occasionally referenced, but not demonstrated.
This may change. The preset is new (April 2026 launch); practitioner adoption lags. The `.coverage.md` re-research trigger explicitly flags "first verified frontier-design practitioner artifact ships publicly" as a refresh trigger for this file.
---
## (c) Adjacent material
While no `frontier-design`-specific Anthropic or practitioner material exists, two adjacent sources cover the underlying capabilities Anthropic names.
### Motion and spatial composition — `frontend-design/SKILL.md`
`https://github.com/anthropics/skills/skills/frontend-design/SKILL.md` publishes Anthropic's guidance on motion (easing curves, timing tiers, what to animate and what not to) and spatial composition (typography hierarchy, surface depth, layered backgrounds). These are the building blocks the `frontier-design` preset would extend with voice / video / shaders / 3D, but the building blocks themselves are general-purpose.
### Animated and 3D websites — MindStudio walkthrough
MindStudio's 2026-04-28 walkthrough (cited in `research/03`) covers prompting Claude for animated and 3D websites — but the walkthrough is set in adjacent Anthropic surfaces (Claude.com chat with an HTML artifact), not in `claude.ai/design` with the `frontier-design` preset specifically. The walkthrough is useful for the prompt-engineering pattern (naming GLSL fragment shader constraints, polygon-count budgets, voice-prompt structuring) but is not a frontier-design-preset artifact.
---
## (d) Single experimental pattern (unverified speculation)
One experimental pattern, clearly labelled as unverified, that an operator could try if they want to engage with the preset despite the gap.
The pattern comes from Google's Gemini deep-research output (cited in `research/03`) and carries low confidence. It is a constraint-language pattern for shader and physics elements, adapted from broader frontend-design practice:
```
[layers 1 through 5 of the standard prompt stack from
../01-prompt-fundamentals.md]
Frontier capabilities to engage:
Shaders:
- One custom GLSL fragment shader applied to the hero region
- Shader pattern: [name the visual character — e.g.,
"subtle gradient flow with imperceptible noise" or
"iridescent surface reacting to cursor position"]
- Frame budget: 60fps target on Apple M1 / equivalent
- No fullscreen shader-bombs (battery / heat / accessibility)
3D:
- One 3D element in the hero region, scene-bounded (no fullscreen)
- Polygon count budget: <50,000 triangles
- Lighting: 2-3 light sources max
- Camera: fixed or single-axis orbit; no free-camera
Voice:
- [if voice UI relevant] one voice-driven interaction, with
visible text-transcript fallback
- Speech-recognition language and accent assumptions named
explicitly
Video:
- [if video element relevant] embedded video with explicit
autoplay/no-autoplay decision; explicit captions decision
Built-in AI:
- [if applicable] one LLM-driven interaction in the artifact
- Explicit fallback for when the LLM call fails
Test in target browsers (Chrome, Safari, Firefox) at the target device
class (M1 / M2 desktop, mid-range mobile). Expect aesthetic drift
across runs; non-monotonic improvement applies amplified for frontier
capabilities.
```
Confidence rating on this pattern: **low**. It is a reasoned extrapolation from frontend-design principles, not a tested frontier-design prompt. If you try it, document what works and what does not — there is a community gap to fill.
---
## (e) The plugin's honest position
The plugin's stance on `frontier-design`:
If you want to attempt frontier design, treat it as a high-fidelity prototype (`prototypes` preset) with extra constraint language for shaders, polygons, voice, video, and built-in AI. Expect aesthetic drift on first generations. Verify that your output works in target browsers before committing chat-turn budget to refinement. Expect that the model's prior on what "frontier design" means may differ from yours — over-specify everything that matters.
Do not assume `frontier-design` produces a categorically different artifact from `prototypes` + extra capability constraints. The launch sentence is suggestive; the practitioner evidence is absent. The preset is marketing language for elaborate prototype variants until proven otherwise.
When the operator names `frontier-design` specifically:
1. Read this file with them
2. Confirm they have understood the practitioner-evidence gap
3. Offer the experimental pattern in Section (d) as a starting point, clearly labelled as unverified
4. Treat the resulting artifact as exploratory — surface what worked and what did not, contribute back to the community gap
5. Plan for amplified non-monotonic-improvement (`../03-iteration-and-session.md`) — frontier capabilities compound the standard non-monotonic risk
---
## (f) Re-research trigger
This file refreshes when any of the following happens:
- Anthropic publishes a dedicated tutorial, support article, or canonical prompt set for `frontier-design`
- A verified practitioner artifact appears publicly with prompt + output + reproduction steps
- The launch-post one-sentence description changes materially
- A community pattern reaches enough adoption to be cited (not speculation) — the `awesome-claude-design` lists and adjacent practitioner blogs are the primary surfaces to watch
When any of these triggers, update Section (b) to reflect verified material, replace Section (d) with the verified pattern, and re-grade the evidence label from "Experimental" to "Community-only" or "Anthropic-documented + community-validated" as appropriate.
---
## Sources
- `https://anthropic.com/news/claude-design-anthropic-labs` — Anthropic's verbatim one-sentence description (the entirety of Anthropic-published material on this preset)
- `https://llmx.tech/blog/claude-design-hands-on-review-2026` — community practitioner explicitly noting the frontier-design evaluation gap
- `https://github.com/anthropics/skills/skills/frontend-design/SKILL.md` — adjacent material on motion and spatial composition
- `https://anthropic.com/engineering/harness-design-long-running-apps` — non-monotonic-improvement framing (amplified here)
- `https://claude.com/blog/improving-frontend-design-through-skills` — AI-slop avoid-list (composed for frontier prompts)
Re-research trigger: see Section (f). The preset is the most volatile in this plugin's coverage; expect this file to refresh first when Anthropic ships material or practitioners publish artifacts.

View file

@ -1,218 +0,0 @@
# Preset: marketing-collateral
**Last updated:** 2026-05-17 | **Verified:** research/03-prompt-patterns-intent-presets.md
Evidence grade: Community-only — Anthropic publishes no per-preset prompt patterns for this preset as of 2026-05-16.
Anthropic names `marketing-collateral` in the launch enumeration at `https://anthropic.com/news/claude-design-anthropic-labs` but publishes no dedicated tutorial. The patterns below come from community practitioners; treat them as field-tested but not Anthropic-authoritative. Anthropic's frontend-design open-source skill at `https://github.com/anthropics/skills/skills/frontend-design/SKILL.md` is the closest adjacent Anthropic source — it covers landing-page and marketing-site design philosophy without per-preset prompts.
---
## (a) What this preset is
Anthropic launch post one-sentence description: `marketing-collateral` covers landing pages, social variants, banner ads, email creative, and other visual assets in the marketing surface area. Output is typically HTML for landing pages, image-shaped for social and ads.
Distinguishing properties:
- Conversion-oriented — the artifact has a measurable goal (signups, clicks, opens)
- Multi-format — a single campaign typically needs landing page + social variants + email + ad creative
- Brand-anchored — marketing collateral lives or dies on brand fidelity; a DESIGN.md is essentially mandatory
- Variant-heavy — A/B testing assumes multiple variants of the same creative
---
## (b) Why Anthropic published no per-preset guidance
The launch enumeration treats marketing-collateral as a destination shape rather than a distinct generation mode. The frontend-design open-source skill (`https://github.com/anthropics/skills/skills/frontend-design/SKILL.md`) is the closest thing Anthropic publishes — it covers the design-philosophy layer (Purpose / Tone / Constraints / Differentiation) but not marketing-specific prompt patterns.
Community practitioners have built patterns around landing-page composition, social-variant fan-out, and competitor-screenshot extraction (Section c).
---
## (c) Community patterns
### chatprd.ai landing-page workflow
Community pattern from `https://chatprd.ai` (cited in `research/03`): a four-stage landing-page production flow optimised for Claude Design:
1. **Brief stage** — define the audience, the value prop, the one CTA, the proof points. Output: text document, not in Claude Design yet.
2. **Outline stage** — translate the brief into a section-by-section landing-page outline. Hero, problem, solution, features (3-grid or 4-grid), proof (logos / quotes / numbers), pricing or single-CTA, FAQ, footer. Output: text outline.
3. **Visual stage** — brief Claude Design from the outline using layers 1-5. First turn produces the landing page; iteration tightens.
4. **Variant stage** — once the master landing page works, generate variants for A/B testing (different hero, different proof-point ordering, different CTA framing) using the variant-fan-out pattern below.
The four-stage workflow separates copy decisions from visual decisions, which lets the operator iterate each independently. The community-documented failure mode is briefing visual + copy together in one prompt — the model conflates the two and produces a generic landing page.
### Sagnik Bhattacharya variant-fan-out for social
Community pattern from `https://sagnikbhattacharya.com/blog/claude-design` (cited in `research/03`): for social-format collateral (Instagram square, LinkedIn rectangle, Twitter / X aspect), generate N variants in parallel rather than sequentially. The brief pattern:
```
Generate 6 variants of the [campaign] creative, sized for [format
spec]. Across the 6:
- Vary the headline framing (problem-led, solution-led,
proof-led)
- Vary the visual hierarchy (text-dominant, image-dominant,
balanced)
- Vary the color emphasis (accent-dominant, monochrome,
high-contrast)
- Keep the value prop, audience, and CTA identical across all 6
Output as 6 distinct artifacts I can A/B test.
```
The pattern produces a campaign-set in one chat turn rather than six iterations.
### Competitor-screenshot visual-reference extraction
Community pattern (cited in `research/03`): when the operator has a competitor's marketing page that visually achieves what they want, screenshot it and brief Claude Design with the screenshot as a visual reference, paired with an explicit "do not copy; extract the visual-language principles" instruction:
```
The attached screenshot shows [competitor]'s landing page. Do NOT
copy the structure, the copy, or the layout. DO extract the
visual-language principles:
- typography character (named family + scale + weights)
- color temperature and palette structure
- visual density (how much whitespace, how many elements per fold)
- motion language (if visible from the screenshot or apparent from
the brand)
- overall aesthetic family (named with concrete reference)
Apply those principles to our landing page, which has a fundamentally
different structure, copy, and CTA flow. Output our landing page
respecting the extracted visual language but original in structure.
```
The pattern is high-leverage when the operator has a clear visual reference but cannot articulate it in DESIGN.md form. The risk: too-literal copying produces a derivative-feeling artifact. Brief the "extract, do not copy" constraint explicitly.
### Slop-fingerprints warning amplified
Marketing collateral is the surface where AI-slop fingerprints are most punishing. The teal gradient + serif headline + blinking status dot + container-on-container + glassmorphism pattern is recognisable across many AI-generated landing pages. Audiences pattern-match on it and discount the artifact. Layer 3 negative constraints apply with extra weight:
```
Negative constraints — do not produce any of:
- Teal-to-blue or teal-to-green gradients
- Serif headline on sans-serif body (unless explicitly briefed for
editorial direction)
- Blinking / pulsing status indicators ("Live", "New", "Updated")
- Container-on-container layouts (card-inside-card)
- Glassmorphism or neumorphism on any element
- Generic "modern SaaS landing page" template defaults
- Stock-photo abstract gradient hero imagery
```
---
## (d) Critical caveats
### Brand fidelity is the dominant failure mode
Marketing collateral without a tight DESIGN.md anchor produces generic output. The brand DESIGN.md is essentially mandatory — see `../02-design-md.md` for the extractor pattern when the operator does not already have one. Validate brand fidelity at every iteration: typeface, color palette, voice (tone of copy), visual density. Brand drift on marketing collateral is more visible to the audience than brand drift on internal artifacts.
### A/B testing requires more than aesthetic variation
The variant-fan-out pattern produces aesthetic variations. For meaningful A/B testing, the variants should test specific hypotheses (does problem-led headline outperform solution-led? does image-dominant outperform text-dominant?) rather than test generic aesthetic variation. Brief the hypotheses explicitly.
### Export-to-image for social formats
Social-format collateral typically exports as PNG or JPG (Claude Design produces HTML; the operator screenshots at the target dimensions). The export is lossy for hover states, interactive elements, and motion. Brief the static state explicitly when the destination is image:
```
The destination for this creative is a static PNG/JPG export. Generate
the static state only. No hover states, no interaction logic, no motion.
```
---
## (e) One worked prompt — layers 1 + 3 composed, four-stage landing-page flow
Goal: a landing page for a developer-tools SaaS product, audience is senior engineers evaluating dev tools.
```
Goal: A landing page for "ObserveAPI", a developer-tools SaaS product
for API observability. The goal: convert senior-engineer
visitors to free-trial signups.
Layout: Hero (above-fold), problem (one paragraph + 3 pain points
as labelled rows), solution (one paragraph + product
screenshot), features (3-grid), proof (3 customer logos +
one quote + one named metric), pricing (single tier + free
trial CTA), FAQ (4 questions), footer (links + secondary
CTA)
Content: Real product positioning, real customer logos (placeholder
names but realistic shapes), real metric numbers, real
FAQ content. No lorem ipsum.
Audience: Senior engineers, ages 30-50, evaluating dev tools,
allergic to marketing fluff, allergic to AI-generated
landing page fingerprints, will scroll fast and bounce
fast unless the headline lands
Stage 1 (brief): Audience = senior engineers, value prop = "the
first API observability tool that doesn't require
you to instrument anything", CTA = "Start free
trial", proof points = 3 customer logos + one
quote + one metric
Stage 2 (outline): use the layout above
Stage 3 (visual): use the brief below
Stage 4 (variants): defer to next session
Aesthetic family: developer-confident — like Linear's marketing site
meets the editorial confidence of The New York Times
opinion section. No flourish, every claim earns its
place, headline is a claim not a tagline.
Color palette (CSS hex):
--color-bg: #FAFAF8
--color-surface: #FFFFFF
--color-muted: #6B6B6B
--color-fg: #2A2A2A
--color-ink: #0A0A0A
--color-accent: #2D6356
Typography: Söhne (preferred — concrete-named) or Inter Variable;
modular scale 1.333; weight palette 400 body / 600
emphasized / 700 hero headline
Corner radius: 4px on buttons and cards; full-bleed hero
Motion: transition: all 160ms ease-out on hover; no auto-play motion
anywhere
Density: comfortable above the fold (5 elements max), denser below
the fold (features grid, proof, FAQ)
Surface: flat — single subtle border or single subtle shadow on
cards, never both
Negative constraints — do not produce any of:
- Inter, Roboto, Arial, Space Grotesk as primary typeface
- Teal-to-blue or teal-to-green gradients
- Serif headline on sans-serif body
- Blinking / pulsing status indicators
- Container-on-container layouts
- Glassmorphism, neumorphism
- Generic "modern SaaS landing page" defaults
- Stock-photo abstract gradient hero imagery
- Three-column feature grid with icon + headline + line (default
fingerprint)
- Centered-hero with single CTA (default fingerprint)
If you find yourself defaulting to any of these, stop and ask me to
clarify before continuing.
Brand DESIGN.md: ObserveAPI brand kit attached as project asset.
Reference it at every section.
```
Expected follow-up turns:
1. Turn 1: outline review (Stage 2)
2. Turn 2: visual generation (Stage 3) at the brief above
3. Turn 3: layer-4 dimension refinement (typography modular scale, semantic color roles, motion easing)
4. Turn 4: layer-5 grading-criteria weighting (functionality 0.4, craft 0.3, design quality 0.2, originality 0.1 — landing pages weight functionality high)
5. Turn 5+: Tweak panel for spacing and density adjustments
6. Variant fan-out (Stage 4) in next session, against the approved master
---
## Sources
- `https://anthropic.com/news/claude-design-anthropic-labs` — preset enumeration
- `https://github.com/anthropics/skills/skills/frontend-design/SKILL.md` — Anthropic's frontend-design skill (closest adjacent Anthropic source; Design-Thinking Framework, AI-slop avoid-list, four design dimensions)
- `https://claude.com/blog/improving-frontend-design-through-skills` — AI-slop avoid-list (amplified for marketing collateral)
- `https://chatprd.ai` — community four-stage landing-page workflow
- `https://sagnikbhattacharya.com/blog/claude-design` — community variant-fan-out pattern for social formats
- `https://anthropic.com/engineering/harness-design-long-running-apps` — design grading criteria (composed for marketing collateral)
Re-research trigger: Anthropic publishing a marketing-collateral tutorial; community four-stage workflow drifting; new slop-fingerprint patterns emerging in the AI-generated landing-page corpus; competitor-screenshot extraction patterns evolving.

View file

@ -1,168 +0,0 @@
# Preset: one-pagers
**Last updated:** 2026-05-17 | **Verified:** research/03-prompt-patterns-intent-presets.md
Evidence grade: Community-only — Anthropic publishes no per-preset prompt patterns for this preset as of 2026-05-16.
Anthropic names `one-pagers` in the launch enumeration at `https://anthropic.com/news/claude-design-anthropic-labs` but does not publish a dedicated tutorial, support article, or canonical prompt set for it. The patterns below come from community practitioners — Substack walkthroughs, blog posts, newsletter pieces — with full attribution. Treat them as field-tested but not Anthropic-authoritative.
---
## (a) What this preset is
Anthropic launch post one-sentence description: a one-pager is a single-screen artifact for memos, summaries, leave-behinds, executive briefs, or single-page deliverables. The destination is typically PDF or print.
Distinguishing properties:
- Single page — no multi-screen navigation, no scrolling sections that imply continuation
- High information density compared to a slide
- Self-contained narrative — reader does not need surrounding context
- Often delivered as a leave-behind after a meeting or as a one-shot brief
---
## (b) Why Anthropic published no per-preset guidance
The launch enumeration treats one-pagers as a destination shape rather than a generation mode requiring distinct prompt patterns. The Goal / Layout / Content / Audience framework (`../01-prompt-fundamentals.md` Layer 1) and the five-layer stack apply directly — Layout becomes single-page structure, Content becomes the dense information payload, Audience tightens the tone.
Community practitioners have converged on patterns that constrain the one-pager preset more tightly than the generic stack does (Sections c and d).
---
## (c) Community patterns
### Word-count cap per block
Community pattern from `https://sagnikbhattacharya.com/blog/claude-design` (cited in `research/03`): cap the word count per layout block in the brief. The mechanism — Claude Design defaults to verbose prose when block content is unspecified, and one-pagers fail when any block runs long. The convergent caps from community practice:
- Title block: 8 words max
- Subtitle: 15 words max
- Body paragraph: 60 words max
- Bullet item: 12 words max
- Callout box: 25 words max
Brief the caps explicitly in the prompt — the model otherwise produces blocks 2-3x longer than the operator wants.
### Above-the-fold density limit
Community pattern from `https://newsletter.victordibia.com` (cited in `research/03`): cap the number of distinct elements visible in the top half of the one-pager. Convergent limits:
- Maximum 5 distinct visual elements above the fold (counting title, subtitle, one body block, one visual, one callout = 5)
- Maximum 3 colour roles visible above the fold (typically: ink for title, fg for body, accent for one emphasis)
- Maximum 2 typographic weights above the fold (typically 700 title, 500 body)
The brief encodes these as explicit constraints:
```
Above the fold (top half of the page), no more than 5 distinct visual
elements, no more than 3 color roles, no more than 2 typographic
weights. Density below the fold can scale up.
```
### Real-data injection over lorem ipsum
Same pattern as `designs.md` and `prototypes.md`: use realistic placeholder content. For one-pagers specifically, this matters more — a one-pager is typically read once and discarded; if the content reads as placeholder, it loses the reader.
---
## (d) Critical caveats
### Density-versus-readability trade-off
One-pagers are constrained by physical reading mechanics — the operator can pack a lot into one page, but each element added reduces the reader's attention to every other element. The brief should weight density-vs-readability explicitly:
```
Optimise for the reader's ability to extract the takeaway in 30 seconds
of scanning. If a block requires more than 30 seconds of focused reading
to extract the takeaway, it does not belong on this one-pager.
```
### Export to PDF preserves layout; export to other formats may not
PDF is the canonical one-pager export. HTML standalone works. PPTX is awkward for one-pagers (PPTX assumes deck format, not single-page format). Code-handoff is rare for one-pagers but works.
### Anthropic AI-slop avoid-list still applies
Layer 3 negative constraints (`../01-prompt-fundamentals.md`) apply with full force on one-pagers — the dense information context does not exempt the artifact from the avoid-list. Inter, Roboto, Arial, purple gradients on white, generic-modern defaults all degrade the one-pager.
---
## (e) One worked prompt — layers 1 + 3 composed (Layer 2a is preset-optional)
Goal: an executive one-pager summarizing a project's Q1 status, audience is VP of Engineering.
```
Goal: A single-page executive summary of the platform team's Q1 2026
delivery, reliability, and Q2 themes. Designed to be scanned in
30 seconds and absorbed in 3 minutes.
Layout: Single-page A4 portrait. Top quarter: title + headline takeaway
+ 3 KPI numbers in a row. Middle half: 3 short body paragraphs
(one per: delivery, reliability, Q2 themes). Bottom quarter:
callout box with the one explicit ask + signature/contact block.
Content: Real KPI numbers (% completion, MTTR minutes, uptime %); real
body content (no lorem ipsum); explicit ask is one sentence;
contact block names the person + email
Audience: VP of Engineering, scanning between meetings, needs the
takeaway and one ask, will dive into details only if the
takeaway warrants it
Word-count caps (community pattern from
https://sagnikbhattacharya.com/blog/claude-design):
- Title block: 8 words max
- Subtitle / headline takeaway: 15 words max
- Body paragraph: 60 words max
- Bullet item: 12 words max
- Callout box: 25 words max
Above-the-fold density limit (community pattern from
https://newsletter.victordibia.com):
- Maximum 5 distinct visual elements above the fold
- Maximum 3 color roles visible above the fold
- Maximum 2 typographic weights above the fold
Aesthetic family: editorial-confident — terse, signal-dense, no flourish
Color palette (CSS hex):
--color-bg: #FAFAF8
--color-surface: #FFFFFF
--color-muted: #6B6B6B
--color-fg: #2A2A2A
--color-ink: #0A0A0A
--color-accent: #3D5C8A
Typography: Söhne or Inter Variable; modular scale 1.250; weight palette
500 body / 700 headings
Corner radius: 4px on the callout box only; rest is flat
Motion: none (one-pager is static)
Density: dense (8mm margins, 4mm gutters)
Surface: flat — no shadows
Negative constraints — do not produce any of:
- Inter, Roboto, Arial, or Space Grotesk as primary typeface
- Purple gradients on white backgrounds
- Card-style metric tiles with shadows
- Centered-title-and-subtitle generic header
- Pulse / breathing animations (this is a static one-pager)
- Generic "executive summary template" defaults
Optimise for the reader's ability to extract the takeaway in 30 seconds
of scanning. If a block requires more than 30 seconds of focused reading
to extract the takeaway, it does not belong on this one-pager.
```
Expected follow-up turns:
1. Turn 2: tighten word counts if any block ran over cap
2. Turn 3: refine callout-box positioning if it competes with the headline takeaway
3. Turn 4+: Tweak panel for spacing scale and density adjustments
4. Export to PDF; visual-audit at 100% zoom and at print size
---
## Sources
- `https://anthropic.com/news/claude-design-anthropic-labs` — preset enumeration, one-sentence description
- `https://support.claude.com/en/articles/14604416-get-started-with-claude-design` — GLCA framework (composed in this preset)
- `https://sagnikbhattacharya.com/blog/claude-design` — community pattern for word-count caps per block
- `https://newsletter.victordibia.com` — community pattern for above-the-fold density limits
- `https://claude.com/blog/improving-frontend-design-through-skills` — AI-slop avoid-list (composed)
- `https://github.com/anthropics/skills/skills/frontend-design/SKILL.md` — Design-Thinking Framework reference
Re-research trigger: Anthropic publishing a dedicated tutorial for one-pagers; community word-count caps drifting; new one-pager-specific community pattern emerging.

View file

@ -1,198 +0,0 @@
# Preset: pitch-decks
**Last updated:** 2026-05-17 | **Verified:** research/03-prompt-patterns-intent-presets.md
**Evidence grade:** Community-only — Anthropic publishes no per-preset prompt patterns for this preset as of 2026-05-16.
Evidence grade: Community-only — Anthropic publishes no per-preset prompt patterns for this preset as of 2026-05-16.
Anthropic names `pitch-decks` in the launch enumeration at `https://anthropic.com/news/claude-design-anthropic-labs` but publishes no dedicated tutorial. **Critical caveat upfront:** community practitioner `https://moda.app/blog/claude-design-for-pitch-decks` documents an explicit recommendation against using Claude Design for external/investor pitch decks when PPTX is the required delivery format — see Section (d).
---
## (a) What this preset is
Anthropic launch post one-sentence description: `pitch-decks` covers investor pitches, external partner proposals, and any high-stakes presentation format that needs to look polished. The preset distinguishes itself from the more general `slides` preset by audience — external rather than internal — and by typical destination — PPTX or PDF rather than HTML.
The distinguishing question vs `slides`: **is the audience an external investor or external partner where the deck represents the company's positioning?** Yes → `pitch-decks`. Internal audience → `slides`.
---
## (b) Why Anthropic published no per-preset guidance
Anthropic likely treats pitch-decks as a high-stakes specialisation of `slides` rather than a fundamentally distinct generation mode. The `slides` tutorial at `https://claude.com/resources/tutorials/using-claude-design-for-presentations-and-slide-decks` covers the prompt patterns; the `pitch-decks` preset inherits those patterns and adds the audience-stakes layer.
Community practitioners have converged on patterns specific to pitch-deck production (Section c). The most important community contribution, however, is the PPTX-export caveat (Section d) — the failure mode is severe enough that the default recommendation diverges from `slides`.
---
## (c) Community patterns
### Sagnik Bhattacharya's 10-slide template
Community pattern from `https://sagnikbhattacharya.com/blog/claude-design` (cited in `research/03`): the convergent 10-slide pitch-deck template for B2B SaaS pitches:
1. Title — company name, one-line positioning, tagline
2. Problem — who has it, what it costs them, how acute
3. Solution — what we built, one-sentence value prop
4. Market — TAM / SAM / SOM (sized realistically)
5. Product — 2-3 screenshots or visual demos
6. Business model — how we charge, ACV ranges, GTM motion
7. Traction — revenue, growth rate, named customers
8. Team — founders + key hires, why this team for this problem
9. Competition — competitive map (4-quadrant or named comparisons)
10. Ask — funding round size, use of funds, timeline
The template is community-converged, not Anthropic-published. It composes with Anthropic's `slides` tutorial patterns from `https://claude.com/resources/tutorials/using-claude-design-for-presentations-and-slide-decks`.
### MindStudio per-slide micro-prompts
Community pattern from MindStudio (cited in `research/03`): rather than briefing the full pitch deck in one prompt, micro-prompt each slide individually. The pattern produces tighter per-slide narrative because each slide gets dedicated attention.
The micro-prompt pattern (per slide):
```
Generate slide N of the pitch deck. This slide does one job:
[the slide's job — e.g., "convince the audience that the problem is
acute by quantifying customer cost"].
Visual elements: [specific to this slide — e.g., "one large number
showing annual cost, two supporting smaller numbers, one explanatory
sentence"].
Constraints from DESIGN.md: [reference the project's DESIGN.md].
Do not include filler — every element on this slide must support the
one job.
```
Walk through slides 1-10 sequentially.
### Outline-first scaffolding (composed from `slides.md`)
The outline-first pattern from `slides.md` Section (d) applies: brief the deck as an outline first (turn 1), then expand to full slides (turn 2-N).
---
## (d) Critical caveats
### PPTX export trap — explicit recommendation against external pitch decks
Community-documented at `https://moda.app/blog/claude-design-for-pitch-decks` (cited in `research/03`) and `https://claudedesign.substack.com`: when an HTML-rendered pitch deck is exported to PPTX, richly-styled text can flatten to images. PowerPoint loses the editability — the text becomes a rasterised picture.
For internal slide decks (audience tolerates some export friction), the operator can mitigate by keeping typography simple. For external pitch decks (audience expects polish, may want to add their own annotations or edit the deck), this failure mode is severe enough that the community recommendation is:
> Do not use Claude Design for external/investor pitch decks where PPTX export is the required delivery format. Use HTML standalone or PDF if Claude Design is required; otherwise produce the deck in PowerPoint or Keynote directly.
This plugin surfaces the recommendation but does not refuse to operate. The operator may have a reason to proceed (HTML acceptable, PDF acceptable, the PPTX text-as-text survival is verified to be acceptable for their specific styling). When proceeding, validate PPTX export early — generate slide 1 fully, export to PPTX, verify text-as-text survival, then commit to the deck.
### Audience-stakes asymmetry
A pitch deck for a $50M Series C carries different stakes than a pitch deck for a $500K seed extension. The operator's tolerance for export imperfection scales with the dollar amount on the line. Default conservatively — when in doubt about whether the export will survive, treat the deck as high-stakes.
### Slop-fingerprints warning amplified
Layer 3 negative constraints apply with extra weight on pitch decks. Investors see many decks; AI-slop fingerprints (purple gradients, generic three-column structure, Inter typography, centered-hero defaults, glassmorphism, neumorphism) signal that the deck is templated and the team did not invest care. The brief should over-specify the negative constraints.
---
## (e) One worked prompt — layers 1 + 3 composed, slide-by-slide micro-prompt pattern
Goal: a 10-slide investor pitch deck for a B2B SaaS observability product, audience is Series A investors.
```
PRECONDITION: Before generating any slide, render slide 1 fully and
export to PPTX. Verify text-as-text survival. If text flattens to
images, switch destination to HTML standalone or PDF and notify me
before continuing.
Goal: A 10-slide Series A pitch deck for a B2B SaaS observability
product
Layout (outline — per Sagnik Bhattacharya's 10-slide template at
https://sagnikbhattacharya.com/blog/claude-design):
1. Title
2. Problem
3. Solution
4. Market (TAM / SAM / SOM)
5. Product (2-3 visual demos)
6. Business model
7. Traction (revenue, growth, named customers)
8. Team
9. Competition
10. Ask
Content: Real numbers, real customer names, real founder names, real
competitive references. No lorem ipsum, no placeholder logos.
Audience: Series A investors at top-tier funds, ages 35-55, see 50+
decks per quarter, allergic to template fingerprints
Aesthetic family: editorial-confident — like Andreessen Horowitz pitch
decks meets Linear's design language. Authoritative,
no flourish, every visual element earns its place.
Color palette (CSS hex):
--color-bg: #FAFAF8
--color-surface: #FFFFFF
--color-muted: #6B6B6B
--color-fg: #2A2A2A
--color-ink: #0A0A0A
--color-accent: #1A3552
Typography: Söhne (preferred — concrete-named) or Inter Variable;
modular scale 1.333; weight palette 400 body / 600
emphasized / 700 slide titles
Corner radius: 0 (full-bleed slides), 4px on any inline container
Motion: none on static slides; ease-out 240ms on slide transitions
Density: comfortable — one job per slide, generous spacing
Surface: flat — full-bleed, no shadows
Slide composition rules:
- Each slide does one job
- Slide titles are claims, not topics ("$2.4B addressable market"
not "Market")
- Body text is 2 lines max per slide
- One number, chart, or visual element per slide max
- Speaker notes carry depth; slides carry the takeaway
Per-slide micro-prompt pattern (MindStudio, cited in research/03):
Generate slide N. Its one job: [name the job].
Visual elements: [specific to slide].
No filler — every element supports the one job.
Negative constraints — do not produce any of:
- Inter, Roboto, Arial, Space Grotesk as primary typeface
- Purple gradients on white backgrounds
- Three-column feature grid as a default slide structure
- Centered-title-and-subtitle on every slide
- Glassmorphism, neumorphism, gradient hero backgrounds
- Pulse / breathing animations or fly-in transitions
- Generic "investor pitch deck template" defaults
- Stock-photo placeholder imagery
If you find yourself defaulting to any AI-slop pattern (per
https://claude.com/blog/improving-frontend-design-through-skills),
stop and ask me to clarify before continuing.
Slop-fingerprints warning is amplified — investors recognise template
patterns. Over-specify the aesthetic to push the deck out of default
neighbourhood.
```
Expected follow-up turns:
1. Turn 1 (precondition): slide 1 + PPTX export validation. If text flattens, switch destination.
2. Turn 2: 10-slide outline approval
3. Turn 3-12: per-slide micro-prompt for each slide
4. Turn 13: full-deck render, cross-slide consistency check
5. Turn 14: Tweak panel for spacing and density adjustments
6. Export and visual-audit at full deck level
---
## Sources
- `https://anthropic.com/news/claude-design-anthropic-labs` — preset enumeration
- `https://claude.com/resources/tutorials/using-claude-design-for-presentations-and-slide-decks` — Anthropic's slides tutorial (composed for pitch-decks)
- `https://support.claude.com/en/articles/13521390-use-claude-for-powerpoint` — PowerPoint-mode conventions (relevant for PPTX export)
- `https://moda.app/blog/claude-design-for-pitch-decks` — community-documented PPTX export caveat (load-bearing)
- `https://claudedesign.substack.com` — community pattern reinforcing PPTX export caveat
- `https://sagnikbhattacharya.com/blog/claude-design` — community 10-slide pitch-deck template
- `https://claude.com/blog/improving-frontend-design-through-skills` — AI-slop avoid-list (amplified for pitch decks)
Re-research trigger: Anthropic publishing a pitch-decks-specific tutorial; PPTX export behaviour changing (text-as-text survival improving or worsening); community 10-slide template drifting; new investor-deck pattern emerging.

View file

@ -1,225 +0,0 @@
# Preset: prototypes
**Last updated:** 2026-05-17 | **Verified:** research/03-prompt-patterns-intent-presets.md
**Evidence grade:** Anthropic-documented + community-validated
**Captured-on date:** 2026-05-16
The `prototypes` intent preset generates interactive product flows for usability testing, design review, and stakeholder demos. Output is multi-screen HTML with working state transitions, clickable navigation, and per-state visual treatments. The preset is documented by Anthropic in a dedicated tutorial.
---
## (a) What this preset is
Anthropic frames `prototypes` (launch post `https://anthropic.com/news/claude-design-anthropic-labs`) as the preset for product flows that need to behave like a real product, not just look like one. The distinguishing property vs `designs`: interaction state. Prototypes have hover states, active states, click-through transitions, multi-screen navigation, and per-state visual treatments.
The dedicated tutorial is `https://claude.com/resources/tutorials/using-claude-design-for-prototypes-and-ux`. It is the load-bearing source for this preset.
Output is HTML + React + inline CSS + JS (the JS makes the interactions work). Exportable to Code-handoff (engineering takes the working interaction logic forward) or HTML standalone (runs in a browser without Claude Design).
---
## (b) When to use it
Pick `prototypes` when the goal is interactive validation. The decision matrix:
| Operator goal | Preset |
|---------------|--------|
| Feature flow for usability testing (5-user study) | **prototypes** |
| Internal tool demo for stakeholder review | **prototypes** |
| A-B comparison of two design directions in working form | **prototypes** |
| Onboarding flow walkthrough for new hire training | **prototypes** |
| Static design exploration (no interaction needed) | designs |
| Slide deck for a meeting | slides |
If the operator describes the artifact in terms of "user clicks here, then sees this", they want `prototypes`. If they describe it in terms of "screen with these regions", they may want `designs`.
---
## (c) Anthropic-published prompt patterns
The Anthropic tutorial `https://claude.com/resources/tutorials/using-claude-design-for-prototypes-and-ux` publishes nine canonical prompt patterns across four families:
### Family 1 — Feature prototyping (4 verbatim canonical prompts)
For new feature flows where the operator needs to test interaction logic. The patterns cover: a sign-in / sign-up multi-step flow; a checkout / payment flow with form validation states; a settings / preferences flow with toggles and selects; a search / filter flow with result-state transitions. Each prompt names entry point, success path, error states, and edge cases.
Refer to the tutorial for the verbatim prompt text — Anthropic publishes the exact wording, and this plugin cites it by URL rather than copying it (per the brief's source-quality rule and the Apache-2.0/MIT compatibility note in `../04-handoff-and-scope.md`).
### Family 2 — Design review and A-B comparison (2 verbatim canonical prompts)
For prototyping when the goal is to compare two design directions side-by-side or in turn. The verbatim Anthropic comparison-prompt pattern:
```
Show me three different layouts for [feature]. For each:
- Visual direction (named, with concrete reference)
- Interaction model (where the user starts, where they end up)
- One-line rationale tying it to the audience and goal
Once I pick one, generate the full interactive flow.
```
Use this for A-B-C exploration before committing to a direction. The pattern composes with layer 2b (propose-options-before-building) from `../01-prompt-fundamentals.md`.
### Family 3 — User-flow scaffolding (1 verbatim canonical prompt)
For mapping a multi-screen user journey. The pattern names the entry context, the screens in sequence, the decisions at each screen, and the success path vs the error paths. The output is a clickable multi-screen prototype with the navigation logic baked in.
### Family 4 — Internal tools (2 verbatim canonical prompts)
For internal-tooling prototypes — admin panels, content-moderation queues, customer-support consoles. The pattern emphasises dense interfaces, keyboard-driven navigation, and minimal aesthetic flourish. The patterns differ from external-product prototypes in tone and density.
### Component-naming clarity, decision documentation, edge-case flagging
The tutorial also publishes three transversal recommendations Anthropic asks operators to apply across all four families:
- **Component-naming clarity** — name components in the brief so the generated artifact's component spec is engineering-handoff-ready (research/03 D2). Generic names like "Button1" produce generic component specs.
- **Decision documentation** — ask Claude Design to document its design decisions inline (the PM-annotated notes feature) so the engineering handoff carries rationale, not just visuals.
- **Edge-case flagging** — explicitly request that Claude Design flag interaction edge cases (empty state, loading state, error state, offline state, permission-denied state). The model defaults to happy-path-only without this directive.
---
## (d) Community uplift
Three community-converged patterns extend Anthropic's published material for `prototypes`.
### Request every state upfront
Community pattern (`research/03`): explicitly request every interaction state in the first prompt rather than discovering missing states across iterations. The verbatim community phrasing:
```
For every interactive element in this prototype, generate:
- default state
- hover state
- active / pressed state
- focused state (keyboard navigation)
- disabled state
- loading state (if the element triggers async work)
- error state (if the element can fail)
Render every state visibly somewhere in the prototype — either inline
or in a dedicated state-catalogue page.
```
This catches the failure mode where the operator does not notice a missing state until a usability test surfaces it.
### Real-data injection over lorem ipsum
Same pattern as the `designs` preset, more important here: prototypes used in usability testing fail when the content is obviously fake. Test participants react to lorem ipsum and stop engaging with the flow. Use realistic content even when the prototype is throwaway.
### Explicit motion timing and easing
MindStudio community walkthrough (cited in `research/03`): name the easing curve and the duration explicitly for prototypes that include any motion. Default motion is the largest source of "feels like AI" in a prototype. The community-converged baselines for product prototypes:
- Hover transitions: `transition: all 160ms ease-out`
- Modal / drawer enter: `cubic-bezier(0.16, 1, 0.3, 1) 240ms`
- Modal / drawer exit: `cubic-bezier(0.7, 0, 0.84, 0) 180ms`
- Page transitions: `ease-out 280ms`
---
## (e) Critical caveats
Three caveats specific to `prototypes`.
### Interactive state count compounds context
A prototype with 10 components × 7 states each = 70 distinct visual treatments in one artifact. Each treatment consumes context. Claude Design quality drops faster on prototypes than on `designs` for the same number of screens. Session-break heuristics (`../03-iteration-and-session.md`) apply with extra weight.
### Test in target browsers before stakeholder review
The standalone HTML export runs the prototype's JavaScript locally. Edge-case JavaScript (touch handlers, IntersectionObserver, ResizeObserver) does not always work the same across browsers. Test in Chrome + Safari + Firefox before sharing with stakeholders. If you target mobile usability testing, test on actual mobile devices, not just a browser DevTools mobile-emulation viewport.
### Multi-screen exports — bundle in one export
The token-cost trap in `../04-handoff-and-scope.md` Section 6 applies most strongly to multi-screen prototypes. Bundle all screens in one export turn; do not export screen-by-screen.
---
## (f) One end-to-end worked prompt — layers 1 + 2a + 3 composed
Goal: a multi-step onboarding flow for a new SaaS analytics product, audience is small-business operators.
```
Goal: An interactive 5-step onboarding flow for new users of a SaaS
product. The flow: welcome → data-source connection → metric
selection → notification preferences → first-dashboard generation
Layout: Single-column centered, fixed step indicator at top, primary
CTA at bottom of each step, secondary "back" link to top-left
Content: Real product-facing copy (no lorem ipsum); step indicator
labels match the 5 steps verbatim; each step has a one-line
description below the step name; CTAs use action-verb naming
("Connect your data", "Select your metrics", etc.)
Audience: First-time users of a SaaS product, B2B small-business
operators, ages 30-55, comfortable with software but not
power-users
Aesthetic family: warm-confident — like Linear's onboarding, like
Notion's first-run, like Vercel's CLI prompts.
Approachable but tight; never playful.
Color palette (CSS hex):
--color-bg: #FAFAF8
--color-surface: #FFFFFF
--color-muted: #6B6B6B
--color-fg: #2A2A2A
--color-ink: #0A0A0A
--color-accent: #2D6356
--color-accent-hover: #1F4A41
--color-success: #2D6356
--color-warning: #C89B3F
--color-error: #B23A48
Typography: Söhne (preferred) or Inter Variable; modular scale 1.250;
weight palette 400 body / 500 emphasized / 600 headings
Corner radius: 6px on cards, 4px on buttons and inputs
Motion: transition: all 160ms ease-out on hover; cubic-bezier(0.16, 1,
0.3, 1) 240ms on step transitions
Density: comfortable (44px touch targets, 16px card padding)
Surface: subtle depth — 1px border + very subtle shadow on cards
Interaction states (render every one for every interactive element):
default, hover, active, focused, disabled, loading, error
Multi-screen requirements:
- Step 1: welcome — value prop in 2 sentences + Get Started CTA
- Step 2: data-source connection — list of 6 integrations with
connect buttons, hover states show "Connect" tooltip
- Step 3: metric selection — multi-select chip interface with 12
metric options, selection persists across step navigation
- Step 4: notification preferences — three toggle rows, with help-text
below each toggle
- Step 5: first-dashboard generation — loading state for 4-6 seconds,
then success state with "View Dashboard" CTA
Edge cases to flag:
- Step 2 connection failure (network error visible)
- Step 3 zero metrics selected (CTA disabled, help-text appears)
- Step 5 generation timeout (recovery CTA appears)
Negative constraints — do not produce any of:
- Inter, Roboto, Arial, or Space Grotesk as primary typeface
- Purple gradients on white backgrounds
- Centered-hero with single CTA (this is sequenced flow, not landing
page)
- Bouncy spring easing on hover
- Pulse animations on idle elements
- Generic "modern SaaS onboarding" template defaults
```
Expected follow-up turns:
1. Turn 2: refine motion easing if step transitions feel sluggish or jumpy
2. Turn 3: add layer 5 grading criteria (functionality 0.5, craft 0.3, design quality 0.2, originality 0)
3. Turn 4+: Tweak panel for density and color-temperature adjustments
4. Usability test surfaces missing states → iterate states via comments
5. Export bundle for engineering handoff once stakeholders sign off
---
## Sources
- `https://anthropic.com/news/claude-design-anthropic-labs` — preset enumeration
- `https://claude.com/resources/tutorials/using-claude-design-for-prototypes-and-ux` — verbatim canonical prompts (4 families, 9 prompts) + component-naming clarity + decision documentation + edge-case flagging recommendations
- `https://support.claude.com/en/articles/14604416-get-started-with-claude-design` — GLCA framework
- `https://anthropic.com/engineering/harness-design-long-running-apps` — design grading criteria
- `https://github.com/anthropics/skills/skills/frontend-design/SKILL.md` — Design-Thinking Framework, AI-slop avoid-list
Re-research trigger: Anthropic updating the prototypes tutorial; new canonical prompt family added; component-naming-clarity / decision-documentation / edge-case-flagging recommendations materially revised.

View file

@ -1,237 +0,0 @@
# Preset: slides
**Last updated:** 2026-05-17 | **Verified:** research/03-prompt-patterns-intent-presets.md
**Evidence grade:** Anthropic-documented + community-validated
**Captured-on date:** 2026-05-16
The `slides` intent preset generates presentation decks — internal stakeholder updates, executive roadmaps, customer briefings, partner proposals, all-hands meetings. Output is HTML deck with per-slide layouts, optionally exportable to PPTX (with caveats — see Section e).
---
## (a) What this preset is
Anthropic launch post (`https://anthropic.com/news/claude-design-anthropic-labs`) names `slides` as a destination-shaped preset: the artifact assumes the slide-deck format, not the dashboard / one-pager / prototype format. Output renders in the Claude Design canvas as a slide-by-slide thumbnail strip plus the active slide in full view.
Two Anthropic primary sources ground this preset:
- The dedicated tutorial `https://claude.com/resources/tutorials/using-claude-design-for-presentations-and-slide-decks` publishes five verbatim canonical prompts (Section c) and the slide-deck composition framework.
- The PowerPoint-mode article `https://support.claude.com/en/articles/13521390-use-claude-for-powerpoint` publishes the PPTX export conventions and the template-respecting guidance: Claude reads the slide master, layouts, fonts, and color scheme of an uploaded PPTX template and produces output that respects them.
The two sources compose: the tutorial covers the prompt patterns, the PowerPoint-mode article covers the export discipline.
---
## (b) When to use it
Pick `slides` when the destination is a presentation surface. The decision matrix:
| Operator goal | Preset |
|---------------|--------|
| Internal team update / project review | **slides** |
| Customer-prep briefing for a sales call | **slides** |
| Executive roadmap or quarterly business review (Q1/Q2/Q3/Q4 results) | **slides** |
| Partner proposal / co-development pitch | **slides** |
| All-hands or company-wide announcement | **slides** |
| External investor pitch deck | **pitch-decks** (separate preset — see preset file for the PPTX trap) |
| Single-page memo / one-pager | one-pagers |
The distinguishing question vs `pitch-decks`: **is the audience internal or external?** Internal → `slides`. External investor → `pitch-decks` (with explicit caveat about PPTX export, see `pitch-decks.md`).
---
## (c) Anthropic-published prompt patterns
The Anthropic tutorial `https://claude.com/resources/tutorials/using-claude-design-for-presentations-and-slide-decks` publishes five verbatim canonical prompts:
### Pattern 1 — Q1 results deck
For quarterly business review decks (Q1 / Q2 / Q3 / Q4 results). Pattern names the metrics in priority order, the audience seniority level, the narrative arc (where we started, what changed, where we are, what's next), and the supporting visualisations (charts, tables, callout numbers).
### Pattern 2 — Executive roadmap
For multi-quarter roadmap decks. Pattern names the roadmap horizon (quarters or half-years), the workstreams (3-7 named tracks), the major milestones per workstream, the dependencies between workstreams, and the assumptions / risks per quarter.
### Pattern 3 — Customer-prep briefing
For sales-call preparation decks. Pattern names the customer (company + named contacts), the meeting goal, the customer's known priorities, the value-prop alignment, the proof points (case studies, metrics), and the asks / next steps.
### Pattern 4 — Partner proposal
For co-development or partnership proposals. Pattern names the proposed scope, the resourcing model, the timeline, the success metrics, the IP / licensing model, and the open questions.
### Pattern 5 — All-hands announcement
For company-wide updates. Pattern names the announcement (one sentence), the why-now context, the impact on employees, the timeline, and the resources / Q&A links.
Refer to the tutorial URL for the verbatim prompt text. This plugin cites by URL rather than reproducing Anthropic's exact wording (per the brief's source-quality rule and the Apache-2.0/MIT compatibility note in `../04-handoff-and-scope.md`).
### Template-respecting guidance (verbatim from PowerPoint-mode article)
`https://support.claude.com/en/articles/13521390-use-claude-for-powerpoint` publishes the verbatim guidance about uploading an existing PPTX template:
> Claude reads the slide master, layouts, fonts, and color scheme of an uploaded PowerPoint template and produces output that respects them.
Practical implication: if the operator has an existing brand-compliant PPTX template, upload it as a Claude Design project asset before prompting. The generated deck will respect the template's typography, color palette, and layout conventions. Without an uploaded template, the model defaults to its convergent middle-ground deck aesthetic.
---
## (d) Community uplift
Three community-converged patterns extend Anthropic's material for `slides`.
### Outline-first narrative scaffolding
Community pattern (`research/03`): brief the deck as an outline first (turn 1: produce the slide-by-slide outline as a markdown bullet list), then expand to full slides (turn 2: generate the deck from the approved outline). This forks the conversation but produces tighter narrative arcs than briefing the full deck in one turn.
The outline-first pattern composes with Anthropic's GLCA framework (`../01-prompt-fundamentals.md` Layer 1) — Goal becomes the deck's takeaway, Layout becomes the outline, Content becomes the per-slide bullets, Audience becomes the seniority + context match.
### Single-job-per-slide constraint
Community pattern (research/03): each slide should communicate exactly one idea. Slides with two or more ideas leak comprehension. Brief the constraint explicitly:
```
Each slide does one job. If a slide is trying to communicate two ideas,
split it into two slides. The takeaway from each slide should be
nameable in one sentence.
```
### Audience translation matrix
Community pattern (research/03): brief the audience translation explicitly when the deck spans seniority levels. For example, a roadmap deck shared with both engineering leads and executive sponsors needs to translate technical decisions into business outcomes for the exec audience without losing fidelity for the engineering audience. The pattern:
```
For each slide, write two versions of the takeaway:
- The technical-detail version (for the engineering audience)
- The business-outcome version (for the executive audience)
Use the business-outcome version on the slide and the technical-detail
version in the speaker notes.
```
---
## (e) Critical caveats
Three caveats specific to `slides`.
### HTML → PPTX export is lossy for richly-styled text
Community-documented at `https://moda.app/blog/claude-design-for-pitch-decks` (cited in research/03) and `https://claudedesign.substack.com`: when the operator exports an HTML-rendered slide deck to PPTX, richly-styled text (custom typography, mixed weights, inline color variations) can flatten to images. PowerPoint loses the editability — the text becomes a rasterised picture.
The mitigation:
- If the destination is final PPTX delivery, validate the rendered PPTX text-as-text count before assuming editability survived
- If text-as-text is critical (legal review, copy-edit-after-the-fact), keep the typographic styling simple in the brief — single typeface, two weights, no inline color variation, no inline highlighting
- For the `pitch-decks` preset specifically, this caveat is severe enough that the recommendation is "do not use Claude Design for external pitch decks where PPTX is required" — see `pitch-decks.md`
### Don't trust the canvas as ground truth if destination is PPTX
The Claude Design canvas renders the deck in HTML. The PPTX export converts to PowerPoint format. Some aesthetic decisions that look correct in the canvas do not survive the export:
- Custom backgrounds with gradients can rasterize
- Inline icons positioned via CSS can shift
- Multi-column slide layouts can collapse
- Speaker-notes-equivalent annotations may not round-trip
Validate by opening the exported PPTX in PowerPoint before stakeholder delivery, especially for high-stakes decks.
### Quota burn on long decks
Multi-slide decks (10+ slides) compound context faster than single-page artifacts. The 4-screen inflection in `../03-iteration-and-session.md` applies — long decks reach the inflection within 2-3 chat turns. Plan to break the deck into outline → first 5 slides → next 5 slides if the deck is large, using the context-reset prompt between sessions.
---
## (f) One end-to-end worked prompt — layers 1 + 2a + 3 composed
Goal: a 12-slide internal-team Q1 results deck, audience is engineering leadership + cross-functional partners.
```
Goal: A 12-slide Q1 2026 results deck covering platform-team delivery,
reliability metrics, headcount and hiring, top 3 themes for Q2,
and one slide on a major incident retrospective
Layout (outline):
1. Title — "Platform team Q1 2026 results"
2. TL;DR — three bullet takeaways
3. Delivery — features shipped, % of roadmap completed
4. Reliability — uptime, MTTR, incident count
5. Latency — p95/p99 trend
6. Hiring — headcount delta, key hires, open roles
7. Top theme 1 for Q2 — name + one-sentence framing
8. Top theme 2 for Q2 — name + one-sentence framing
9. Top theme 3 for Q2 — name + one-sentence framing
10. Incident retrospective — what happened, what we learned
11. Asks — explicit asks of leadership and partners
12. Q&A / Discussion prompt
Content: Real numbers throughout — actual % completion, real MTTR
minutes, real headcount, real names for hires (or named
placeholders); each slide's takeaway nameable in one sentence
Audience: VP of Engineering, peer Eng-leadership, partner-team PMs,
partner-team Eng-leads — mixed seniority, mixed technical
depth, ages 30-55
Aesthetic family: editorial-confident — like The New York Times opinion
section meets Linear's design language. Clean,
authoritative, no flourish. Each slide reads like a
well-edited paragraph.
Color palette (CSS hex):
--color-bg: #FAFAF8
--color-surface: #FFFFFF
--color-muted: #6B6B6B
--color-fg: #2A2A2A
--color-ink: #0A0A0A
--color-accent: #3D5C8A
--color-success: #2D6356
--color-warning: #C89B3F
--color-error: #B23A48
Typography: Söhne or Inter Variable; modular scale 1.333 (perfect
fourth — slides scale up); weight palette 400 body / 600
emphasized / 700 slide titles
Corner radius: 4px on any card-like containers; slides themselves
have no corner radius (full-bleed)
Motion: none on static slides; ease-out 240ms on slide transitions
Density: comfortable — generous spacing, one job per slide
Surface: flat — full-bleed slides, no shadows, single subtle accent
line under slide title
Slide composition rules:
- Each slide does one job
- Slide titles are claims, not topics ("We shipped 87% of roadmap"
not "Roadmap delivery")
- Body text is 2-3 lines max per slide
- One number, chart, or visual element per slide max
- Speaker notes carry the depth; slides carry the takeaway
Negative constraints — do not produce any of:
- Inter, Roboto, Arial, Space Grotesk as primary typeface
- Purple gradients on white backgrounds
- Three-bullet-and-image generic slide template
- Pulse animations or fly-in transitions
- Generic "corporate deck" template defaults (centered title-and-
subtitle on every slide)
- Multi-column slides with more than two ideas per slide
If the destination is PPTX, ensure text-heavy slides keep text as text
(not rasterized). Keep typography simple to maximise text-as-text
survival in export.
```
Expected follow-up turns:
1. Turn 2: outline-first review — confirm the 12-slide structure, adjust ordering, swap titles if needed
2. Turn 3: add audience translation per slide (speaker notes vs slide takeaway)
3. Turn 4: render full deck against the approved outline
4. Turn 5+: Tweak panel for typography scale and spacing; comments for slide-by-slide refinements
5. Export validation: open PPTX in PowerPoint and audit text-as-text vs rasterized
---
## Sources
- `https://anthropic.com/news/claude-design-anthropic-labs` — preset enumeration
- `https://claude.com/resources/tutorials/using-claude-design-for-presentations-and-slide-decks` — verbatim canonical prompts (5 patterns), slide-deck composition framework
- `https://support.claude.com/en/articles/13521390-use-claude-for-powerpoint` — PowerPoint-mode conventions, template-respecting guidance
- `https://support.claude.com/en/articles/14604416-get-started-with-claude-design` — GLCA framework
- `https://moda.app/blog/claude-design-for-pitch-decks` — community-documented PPTX export caveat (cited)
- `https://anthropic.com/engineering/harness-design-long-running-apps` — design grading criteria
Re-research trigger: Anthropic updating the slides tutorial; new canonical pattern added; PowerPoint-mode conventions revised; PPTX export behaviour changing materially.

View file

@ -1,163 +0,0 @@
# Preset: wireframes-mockups
**Last updated:** 2026-05-17 | **Verified:** research/03-prompt-patterns-intent-presets.md
Evidence grade: Community-only — Anthropic publishes no per-preset prompt patterns for this preset as of 2026-05-16.
Anthropic names `wireframes-mockups` in the launch enumeration at `https://anthropic.com/news/claude-design-anthropic-labs` but publishes no dedicated tutorial, support article, or canonical prompt set for it. The patterns below come from community practitioners; treat them as field-tested but not Anthropic-authoritative.
---
## (a) What this preset is
Anthropic launch post one-sentence description: `wireframes-mockups` covers the spectrum from low-fidelity layout sketches (boxes, labels, structure-only) to high-fidelity mockups (visual design applied, but not interactive). The output is structural — the goal is to communicate layout, not aesthetic and not interaction.
Distinguishing properties:
- Static (not interactive) — wireframes and mockups do not have working state transitions; for interaction logic, use `prototypes`
- Low-fi or high-fi — the preset spans both ends; the operator picks via prompt
- Pre-visual-design — wireframes are often deliverables before the visual designer commits to a direction
- Iteration-cheap — wireframes are intended to be iterated quickly, so the prompt patterns lean on N-variations-first generation
---
## (b) Why Anthropic published no per-preset guidance
Wireframes occupy a niche between `designs` (visual exploration) and `prototypes` (interaction validation). Anthropic appears to treat the preset as a destination shape rather than a distinct generation mode. The Goal / Layout / Content / Audience framework (`../01-prompt-fundamentals.md` Layer 1) applies — Layout is the dominant concern, Content becomes structural labels, Audience determines fidelity level.
Community practitioners have converged on the patterns below (Section c).
---
## (c) Community patterns
### N-variations-first
Community pattern from `https://designwithai.substack.com` (cited in `research/03`): wireframes are most useful when generated in N variations and compared. Brief the model to produce N distinct layout variations in the first turn, then pick one to refine.
Convergent N values from community practice: 3 or 4 variations is the sweet spot. More than 4 dilutes the operator's attention; fewer than 3 does not surface meaningful alternatives.
The brief pattern:
```
Generate 4 distinct wireframe variations for [feature/page]. For each:
- One sentence describing the structural direction
- The wireframe itself (boxes, labels, no visual design)
After I pick one, refine that variation into a mockup with visual
design applied.
```
This composes with Layer 2b (propose-options-before-building) from `../01-prompt-fundamentals.md`.
### Wireframe vs High-Fidelity sub-preset selection
Community pattern from `https://computingforgeeks.com` (cited in `research/03`): the preset spans low-fi to high-fi, but the model behaves differently across the spectrum. Brief the fidelity level explicitly:
```
Fidelity: low-fi
- boxes with labels, no typography weights other than 500
- one color (greyscale) — bg, surface, muted, fg
- no images, no icons — represent visual elements as labelled boxes
- 8pt grid visible if helpful
OR
Fidelity: high-fi
- actual typography, full color palette, real icons, real images
- production-ready visual treatment
- no interaction logic (this is wireframes preset, not prototypes)
```
Pick one explicitly. The default-mode failure is the model producing a mid-fidelity output that satisfies neither the low-fi structural goal nor the high-fi visual-validation goal.
### The Aakashg / Nielsen "low-fi-is-deprecated" debate (flagged as unsettled)
A community debate documented across Aakash Gupta's and Jakob Nielsen's posts in 2024-2025 (cited in `research/03`) argues that AI-generated high-fi mockups have made low-fi wireframes operationally obsolete — the marginal cost of generating a high-fi mockup is now low enough that there is no reason to start with low-fi. The counter-argument: low-fi wireframes still serve a communication function (forcing reviewers to focus on structure, not aesthetic) that high-fi mockups undermine.
This plugin treats the debate as **unsettled**. The brief should pick the fidelity level deliberately, with the choice tied to the audience and the review purpose, not to a default assumption that one fidelity dominates. Flag the debate when the operator's choice seems unconsidered.
---
## (d) Critical caveats
### Aesthetic drift if starting in high-fi
When starting in high-fidelity mode, the model imports its convergent middle-ground aesthetic defaults more aggressively (because the visual decisions are within scope). Layer-3 negative constraints (`../01-prompt-fundamentals.md`) apply with extra weight on high-fi mockups.
### Iteration economy — wireframes burn turns
Each variation requested in the N-variations-first pattern costs a fraction of a turn (the model generates all N in one chat round). But subsequent refinement of the chosen variation often requires multiple turns (typography decisions, color palette, component-level styling). Budget accordingly — a wireframe-to-mockup flow can consume 4-6 turns for a single page.
### Wireframe ≠ prototype
If the operator describes user interactions ("the user clicks here, then sees this"), they want `prototypes`, not `wireframes-mockups`. Wireframes capture structure; prototypes capture behaviour. Misclassification leads to wasted turns regenerating an artifact in the wrong preset.
---
## (e) One worked prompt — layers 1 + 3 composed, N-variations-first pattern
Goal: 4 wireframe variations for a customer-onboarding page, audience is product team for review.
```
Goal: 4 distinct wireframe variations for the first page of a customer
onboarding flow. The page introduces the product, captures
essential information, and routes the customer to one of three
paths (self-serve, sales-assisted, partner-handoff).
Layout: Single page, viewport ~1440x900. Each variation lays out the
same content differently.
Content: Real placeholder content — actual headlines, actual button
labels, actual form field labels. No lorem ipsum.
Audience: Internal product team (PM, design lead, eng lead) reviewing
structure choices before committing to a direction
Fidelity: low-fi (community pattern from
https://computingforgeeks.com — fidelity affects iteration
path)
- boxes with labels, no typography weights other than 500
- greyscale only (bg, surface, muted, fg)
- no images, no icons — labelled boxes
- 8pt grid visible
N-variations-first (community pattern from
https://designwithai.substack.com):
Generate 4 distinct wireframe variations. For each variation:
- One-sentence description of the structural direction (e.g.,
"Top-down narrative — story first, paths second")
- The wireframe itself
- One-line rationale tying the structure to the audience and goal
The 4 variations should be meaningfully distinct from each other —
not minor tweaks of one base layout.
After I pick one, generate a fifth output: a refined mockup of the
chosen variation, transitioning fidelity from low-fi to medium-fi.
Negative constraints (Anthropic AI-slop avoid-list):
- Inter, Roboto, Arial, Space Grotesk as primary typeface (the
fidelity-low constraint covers most of this, but flag explicitly)
- Purple gradients (low-fi means greyscale anyway)
- Three-column feature grid as the default structural pattern
- Centered-hero with single CTA as the default
- Cookie-cutter framing
```
Expected follow-up turns:
1. Turn 1: 4 wireframe variations generated
2. Turn 2: operator picks variation, refined low-fi mockup generated
3. Turn 3: aesthetic family applied (full layer-2a brief), medium-fi mockup
4. Turn 4: layer-4 dimensions applied (typography modular scale, color palette, component stylings)
5. Turn 5+: Tweak panel for spacing and density adjustments
---
## Sources
- `https://anthropic.com/news/claude-design-anthropic-labs` — preset enumeration, one-sentence description
- `https://designwithai.substack.com` — community pattern: N-variations-first
- `https://computingforgeeks.com` — community pattern: explicit Wireframe-vs-High-Fidelity fidelity selection
- `https://claude.com/blog/improving-frontend-design-through-skills` — AI-slop avoid-list (composed for high-fi mode)
- `https://github.com/anthropics/skills/skills/frontend-design/SKILL.md` — Design-Thinking Framework reference
Re-research trigger: Anthropic publishing a dedicated wireframes-mockups tutorial; the Aakashg/Nielsen low-fi-is-deprecated debate reaching practitioner consensus; new sub-fidelity tier surfacing in community practice.

View file

@ -1,203 +0,0 @@
#!/usr/bin/env bash
# test-sc1-dogfood-log.sh — Verifies SC1 (operator-attested dogfood log) in REMEMBER.md
#
# Usage:
# bash tests/test-sc1-dogfood-log.sh # missing block = WARN, exit 0
# bash tests/test-sc1-dogfood-log.sh --strict # missing block = FAIL, exit 1
#
# Expects in REMEMBER.md (plugin root, gitignored):
# - A fenced section with heading `## Dogfood log — v0.1 slides run`
# - Five mechanically-checkable fields inside the section:
# artifact_type: <preset-name from .coverage.md>
# refine_rounds: <integer>
# final_prompt:
# ```
# <non-empty prompt content>
# ```
# shipped: yes (or `shipped: equivalent`)
# comparison_to_unaided: <one sentence ending with .>
#
# REMEMBER.md is gitignored — this evidence is local-only. The script
# validates format only; the outcome judgement is operator-attested.
set -euo pipefail
LC_ALL=en_US.UTF-8
RED='\033[0;31m'
GREEN='\033[0;32m'
YELLOW='\033[1;33m'
NC='\033[0m'
PLUGIN_ROOT="$(cd "$(dirname "$0")/.." && pwd)"
PASS=0
FAIL=0
WARN=0
pass() { printf "${GREEN} ✓ %s${NC}\n" "$1"; PASS=$((PASS + 1)); }
fail() { printf "${RED} ✗ %s${NC}\n" "$1"; FAIL=$((FAIL + 1)); }
warn() { printf "${YELLOW} ⚠ %s${NC}\n" "$1"; WARN=$((WARN + 1)); }
STRICT=false
for arg in "$@"; do
case "$arg" in
--strict) STRICT=true ;;
esac
done
echo "=== test-sc1-dogfood-log ==="
echo "Plugin root: $PLUGIN_ROOT"
echo "Strict mode: $STRICT"
echo ""
REMEMBER_FILE="$PLUGIN_ROOT/REMEMBER.md"
COVERAGE_FILE="$PLUGIN_ROOT/.coverage.md"
# -------------------------------------------------------
# Locate REMEMBER.md
# -------------------------------------------------------
if [ ! -f "$REMEMBER_FILE" ]; then
if $STRICT; then
fail "REMEMBER.md missing (strict mode — required)"
echo ""
echo "=== Summary ==="
printf "Pass: %d Fail: %d Warn: %d\n" "$PASS" "$FAIL" "$WARN"
exit 1
else
warn "REMEMBER.md missing (advisory until operator dogfood step)"
echo ""
echo "=== Summary ==="
printf "Pass: %d Fail: %d Warn: %d\n" "$PASS" "$FAIL" "$WARN"
exit 0
fi
fi
# -------------------------------------------------------
# Extract fenced block between dogfood heading and next H2 (or EOF)
# -------------------------------------------------------
BLOCK="$(awk '
/^## Dogfood log — v0\.1 slides run$/ { capture = 1; next }
capture && /^## / { exit }
capture { print }
' "$REMEMBER_FILE")"
if [ -z "$BLOCK" ]; then
if $STRICT; then
fail "REMEMBER.md missing dogfood block '## Dogfood log — v0.1 slides run' (strict mode — required)"
echo ""
echo "=== Summary ==="
printf "Pass: %d Fail: %d Warn: %d\n" "$PASS" "$FAIL" "$WARN"
exit 1
else
warn "REMEMBER.md missing dogfood block (advisory until operator dogfood step)"
echo ""
echo "=== Summary ==="
printf "Pass: %d Fail: %d Warn: %d\n" "$PASS" "$FAIL" "$WARN"
exit 0
fi
fi
pass "found '## Dogfood log — v0.1 slides run' block"
# -------------------------------------------------------
# Field 1: artifact_type — must match a preset name from .coverage.md
# -------------------------------------------------------
ARTIFACT_TYPE="$(printf '%s\n' "$BLOCK" | awk -F': *' '/^artifact_type:/ { print $2; exit }' | tr -d '[:space:]')"
if [ -z "$ARTIFACT_TYPE" ]; then
fail "artifact_type: field missing or empty"
else
# extract preset names from .coverage.md table column 1
if [ -f "$COVERAGE_FILE" ]; then
PRESETS="$(awk -F'|' '
/^\| [a-z]/ { gsub(/^ +| +$/, "", $2); print $2 }
' "$COVERAGE_FILE")"
FOUND=false
while IFS= read -r preset; do
[ -z "$preset" ] && continue
if [ "$preset" = "$ARTIFACT_TYPE" ]; then
FOUND=true
break
fi
done < <(printf '%s\n' "$PRESETS")
if $FOUND; then
pass "artifact_type='$ARTIFACT_TYPE' matches a preset in .coverage.md"
else
fail "artifact_type='$ARTIFACT_TYPE' does not match any preset in .coverage.md"
fi
else
fail ".coverage.md missing — cannot validate artifact_type"
fi
fi
# -------------------------------------------------------
# Field 2: refine_rounds — integer
# -------------------------------------------------------
REFINE_ROUNDS_LINE="$(printf '%s\n' "$BLOCK" | grep -E '^refine_rounds:[[:space:]]*[0-9]+[[:space:]]*$' || true)"
if [ -n "$REFINE_ROUNDS_LINE" ]; then
pass "refine_rounds: matches integer regex"
else
fail "refine_rounds: missing or not an integer"
fi
# -------------------------------------------------------
# Field 3: final_prompt: followed by non-empty fenced code block
# -------------------------------------------------------
HAS_FINAL_PROMPT="$(printf '%s\n' "$BLOCK" | grep -c '^final_prompt:' || true)"
if [ "$HAS_FINAL_PROMPT" -ge 1 ]; then
# check that a fenced code block (```) appears after final_prompt:
FENCE_AFTER="$(awk '
/^final_prompt:/ { found = 1; next }
found && /^```/ { fence_open = !fence_open; if (fence_open) { in_fence = 1 } else { exit } }
found && in_fence && fence_open && /./ { content_lines++ }
END { print content_lines + 0 }
' <<<"$BLOCK")"
if [ -z "$FENCE_AFTER" ]; then FENCE_AFTER=0; fi
if [ "$FENCE_AFTER" -ge 1 ]; then
pass "final_prompt: followed by non-empty fenced code block ($FENCE_AFTER content line(s))"
else
fail "final_prompt: not followed by a non-empty fenced code block"
fi
else
fail "final_prompt: field missing"
fi
# -------------------------------------------------------
# Field 4: shipped — yes or equivalent
# -------------------------------------------------------
SHIPPED_LINE="$(printf '%s\n' "$BLOCK" | grep -E '^shipped:[[:space:]]*(yes|equivalent)[[:space:]]*$' || true)"
if [ -n "$SHIPPED_LINE" ]; then
pass "shipped: matches 'yes' or 'equivalent'"
else
fail "shipped: missing or not 'yes'/'equivalent'"
fi
# -------------------------------------------------------
# Field 5: comparison_to_unaided — non-empty sentence >=10 chars ending with .
# -------------------------------------------------------
COMP_LINE="$(printf '%s\n' "$BLOCK" | awk -F': *' '/^comparison_to_unaided:/ { for (i=2;i<=NF;i++) printf "%s%s", $i, (i<NF?": ":""); print ""; exit }')"
COMP_TRIMMED="$(printf '%s' "$COMP_LINE" | sed -E 's/^[[:space:]]+//; s/[[:space:]]+$//')"
COMP_LEN="${#COMP_TRIMMED}"
if [ -z "$COMP_TRIMMED" ]; then
fail "comparison_to_unaided: field missing or empty"
elif [ "$COMP_LEN" -lt 10 ]; then
fail "comparison_to_unaided: too short ($COMP_LEN chars; need >=10)"
elif [ "${COMP_TRIMMED: -1}" != "." ]; then
fail "comparison_to_unaided: does not end with '.'"
else
pass "comparison_to_unaided: non-empty, $COMP_LEN chars, ends with '.'"
fi
# -------------------------------------------------------
# Summary
# -------------------------------------------------------
echo ""
echo "=== Summary ==="
printf "Pass: %d Fail: %d Warn: %d\n" "$PASS" "$FAIL" "$WARN"
if [ "$FAIL" -gt 0 ]; then
exit 1
fi
exit 0

View file

@ -1,100 +0,0 @@
#!/usr/bin/env bash
# test-sc2-artifact-coverage.sh — Verifies SC2 (per-preset coverage)
#
# Reads .coverage.md, extracts preset names from the table column 1,
# for each preset runs:
# grep -rli "<preset>" plugins/claude-design/ --include='*.md' \
# --exclude-dir='.claude' --exclude-dir='tests'
# and asserts ≥1 file hit.
#
# The preset list is NOT hardcoded — auto-adapts when .coverage.md changes.
#
# Usage: bash tests/test-sc2-artifact-coverage.sh
# Exit codes: 0 = all presets covered; 1 = at least one preset uncovered
set -euo pipefail
LC_ALL=en_US.UTF-8
RED='\033[0;31m'
GREEN='\033[0;32m'
YELLOW='\033[1;33m'
NC='\033[0m'
PLUGIN_ROOT="$(cd "$(dirname "$0")/.." && pwd)"
PASS=0
FAIL=0
WARN=0
pass() { printf "${GREEN} ✓ %s${NC}\n" "$1"; PASS=$((PASS + 1)); }
fail() { printf "${RED} ✗ %s${NC}\n" "$1"; FAIL=$((FAIL + 1)); }
warn() { printf "${YELLOW} ⚠ %s${NC}\n" "$1"; WARN=$((WARN + 1)); }
COVERAGE_FILE="$PLUGIN_ROOT/.coverage.md"
echo "=== test-sc2-artifact-coverage ==="
echo "Plugin root: $PLUGIN_ROOT"
echo ".coverage.md: $COVERAGE_FILE"
echo ""
if [ ! -f "$COVERAGE_FILE" ]; then
fail ".coverage.md missing — cannot verify SC2"
echo ""
echo "=== Summary ==="
printf "Pass: %d Fail: %d Warn: %d\n" "$PASS" "$FAIL" "$WARN"
exit 1
fi
# -------------------------------------------------------
# Extract preset names from .coverage.md table column 1
# -------------------------------------------------------
# Table rows look like:
# | designs | skills/.../presets/designs.md | Evidence grade: ... | https://... |
# Skip header (| Preset | ...) and separator (| --- | ...).
PRESETS="$(awk -F'|' '
/^\| / && NR > 1 {
name = $2
gsub(/^ +| +$/, "", name)
if (name != "Preset" && name !~ /^-+$/ && name != "") {
print name
}
}
' "$COVERAGE_FILE")"
if [ -z "$PRESETS" ]; then
fail "no preset names extracted from .coverage.md"
echo ""
echo "=== Summary ==="
printf "Pass: %d Fail: %d Warn: %d\n" "$PASS" "$FAIL" "$WARN"
exit 1
fi
# -------------------------------------------------------
# For each preset, grep for at least one file hit in plugin content
# -------------------------------------------------------
while IFS= read -r preset; do
[ -z "$preset" ] && continue
HITS="$(grep -rli "$preset" "$PLUGIN_ROOT" \
--include='*.md' \
--exclude-dir='.claude' \
--exclude-dir='tests' \
2>/dev/null || true)"
HIT_COUNT="$(printf '%s\n' "$HITS" | grep -c '.' || true)"
if [ -z "$HIT_COUNT" ]; then HIT_COUNT=0; fi
if [ "$HIT_COUNT" -ge 1 ]; then
pass "preset '$preset' covered by $HIT_COUNT file(s)"
else
fail "preset '$preset' has zero file hits in plugin content"
fi
done < <(printf '%s\n' "$PRESETS")
echo ""
echo "=== Summary ==="
printf "Pass: %d Fail: %d Warn: %d\n" "$PASS" "$FAIL" "$WARN"
if [ "$FAIL" -gt 0 ]; then
exit 1
fi
exit 0

View file

@ -1,123 +0,0 @@
#!/usr/bin/env bash
# test-sc3-citations.sh — Verifies SC3 (Anthropic-domain citation discipline)
#
# Two checks:
# Negative — grep -rnE '\[CITE\]|\[verify\]|\baccording to\b' against
# shipped content. Zero hits expected.
# Positive — read .coverage.md "Authoritative-claims" bullet list
# (awk on '^- ' prefix), then for each file ensure ≥1
# Anthropic-domain URL citation is present.
#
# Excludes .claude/projects/** and tests/ from greps.
#
# Anthropic-domain URL regex (positive):
# https?://(docs\.anthropic\.com|anthropic\.com|github\.com/anthropics
# |claude\.com|support\.claude\.com|platform\.claude\.com)
#
# Usage: bash tests/test-sc3-citations.sh
# Exit codes: 0 = pass; 1 = at least one FAIL
set -euo pipefail
LC_ALL=en_US.UTF-8
RED='\033[0;31m'
GREEN='\033[0;32m'
YELLOW='\033[1;33m'
NC='\033[0m'
PLUGIN_ROOT="$(cd "$(dirname "$0")/.." && pwd)"
PASS=0
FAIL=0
WARN=0
pass() { printf "${GREEN} ✓ %s${NC}\n" "$1"; PASS=$((PASS + 1)); }
fail() { printf "${RED} ✗ %s${NC}\n" "$1"; FAIL=$((FAIL + 1)); }
warn() { printf "${YELLOW} ⚠ %s${NC}\n" "$1"; WARN=$((WARN + 1)); }
COVERAGE_FILE="$PLUGIN_ROOT/.coverage.md"
echo "=== test-sc3-citations ==="
echo "Plugin root: $PLUGIN_ROOT"
echo ""
# -------------------------------------------------------
# Negative grep: \[CITE\], \[verify\], \baccording to\b
# -------------------------------------------------------
echo "--- negative grep: forbidden placeholders ---"
NEG_HITS="$(grep -rnE '\[CITE\]|\[verify\]|\baccording to\b' \
"$PLUGIN_ROOT" \
--include='*.md' \
--exclude-dir='.claude' \
--exclude-dir='tests' \
2>/dev/null || true)"
if [ -z "$NEG_HITS" ]; then
pass "no forbidden placeholders ([CITE], [verify], 'according to') in shipped content"
else
while IFS= read -r hit; do
fail "forbidden placeholder in shipped content: $hit"
done < <(printf '%s\n' "$NEG_HITS")
fi
echo ""
# -------------------------------------------------------
# Positive grep: Authoritative-claims files have Anthropic-domain URLs
# -------------------------------------------------------
echo "--- positive grep: Authoritative-claims citation coverage ---"
if [ ! -f "$COVERAGE_FILE" ]; then
fail ".coverage.md missing — cannot read Authoritative-claims registry"
echo ""
echo "=== Summary ==="
printf "Pass: %d Fail: %d Warn: %d\n" "$PASS" "$FAIL" "$WARN"
exit 1
fi
# Extract bullet-list paths under the "Authoritative-claims" section
AUTH_FILES="$(awk '
/^## Authoritative-claims files/ { capture = 1; next }
capture && /^## / { exit }
capture && /^- / {
sub(/^- /, "", $0)
print $0
}
' "$COVERAGE_FILE")"
if [ -z "$AUTH_FILES" ]; then
fail "no Authoritative-claims files extracted from .coverage.md"
echo ""
echo "=== Summary ==="
printf "Pass: %d Fail: %d Warn: %d\n" "$PASS" "$FAIL" "$WARN"
exit 1
fi
ANTHROPIC_REGEX='https?://(docs\.anthropic\.com|anthropic\.com|github\.com/anthropics|claude\.com|support\.claude\.com|platform\.claude\.com)'
while IFS= read -r relpath; do
[ -z "$relpath" ] && continue
fpath="$PLUGIN_ROOT/$relpath"
if [ ! -f "$fpath" ]; then
fail "Authoritative-claims file missing: $relpath"
continue
fi
HIT_COUNT="$(grep -cE "$ANTHROPIC_REGEX" "$fpath" || true)"
if [ -z "$HIT_COUNT" ]; then HIT_COUNT=0; fi
if [ "$HIT_COUNT" -ge 1 ]; then
pass "$relpath: $HIT_COUNT Anthropic-domain URL citation(s)"
else
fail "$relpath: zero Anthropic-domain URL citations (anthropic.com expected)"
fi
done < <(printf '%s\n' "$AUTH_FILES")
echo ""
echo "=== Summary ==="
printf "Pass: %d Fail: %d Warn: %d\n" "$PASS" "$FAIL" "$WARN"
if [ "$FAIL" -gt 0 ]; then
exit 1
fi
exit 0

View file

@ -1,122 +0,0 @@
#!/usr/bin/env bash
# test-skill-triggers.sh — Verifies skill description quality
#
# Honest limit: this only verifies strings are present in SKILL.md description.
# It cannot prove Claude Code's orchestrator fires the skill on those prompts.
# Runtime auto-fire validation is the operator's dogfood step (SC1).
#
# Checks:
# - SKILL.md frontmatter has 'description:' field
# - description block (from `description: |` to the closing `---`) is >=400 chars
# - if .triggers.txt exists, every phrase in it appears in SKILL.md description
#
# Usage: bash tests/test-skill-triggers.sh
# Exit codes: 0 = pass; 1 = at least one FAIL
set -euo pipefail
LC_ALL=en_US.UTF-8
RED='\033[0;31m'
GREEN='\033[0;32m'
YELLOW='\033[1;33m'
NC='\033[0m'
PLUGIN_ROOT="$(cd "$(dirname "$0")/.." && pwd)"
PASS=0
FAIL=0
WARN=0
pass() { printf "${GREEN} ✓ %s${NC}\n" "$1"; PASS=$((PASS + 1)); }
fail() { printf "${RED} ✗ %s${NC}\n" "$1"; FAIL=$((FAIL + 1)); }
warn() { printf "${YELLOW} ⚠ %s${NC}\n" "$1"; WARN=$((WARN + 1)); }
echo "=== test-skill-triggers ==="
echo "Plugin root: $PLUGIN_ROOT"
echo ""
# -------------------------------------------------------
# Iterate over every SKILL.md
# -------------------------------------------------------
SKILL_COUNT=0
for skill_file in "$PLUGIN_ROOT"/skills/*/SKILL.md; do
[ -f "$skill_file" ] || continue
SKILL_COUNT=$((SKILL_COUNT + 1))
skill_dir="$(dirname "$skill_file")"
skill_name="$(basename "$skill_dir")"
echo "--- $skill_name ---"
# ------------------------
# Frontmatter check
# ------------------------
first_line="$(head -n 1 "$skill_file")"
if [ "$first_line" != "---" ]; then
fail "$skill_name/SKILL.md: missing frontmatter delimiter on line 1"
echo ""
continue
fi
# ------------------------
# Description >=400 chars (Triggers on: enumeration counts)
# ------------------------
desc_block_chars="$(awk '/^description: \|/,/^---$/' "$skill_file" | wc -c | tr -d '[:space:]')"
if [ -z "$desc_block_chars" ]; then desc_block_chars=0; fi
if [ "$desc_block_chars" -ge 400 ]; then
pass "$skill_name: description block is $desc_block_chars chars (>=400)"
else
fail "$skill_name: description block is $desc_block_chars chars (<400 required)"
fi
# ------------------------
# Trigger-phrase coverage (.triggers.txt)
# ------------------------
triggers_file="$skill_dir/.triggers.txt"
if [ ! -f "$triggers_file" ]; then
warn "$skill_name: .triggers.txt missing (advisory — operator may want one)"
echo ""
continue
fi
trigger_count="$(grep -cE '.' "$triggers_file" || true)"
if [ -z "$trigger_count" ] || [ "$trigger_count" -lt 8 ]; then
fail "$skill_name/.triggers.txt: only $trigger_count phrase(s) (>=8 required)"
else
pass "$skill_name/.triggers.txt: $trigger_count phrase(s)"
fi
# check each phrase appears in SKILL.md description block
MISSING=0
while IFS= read -r phrase; do
[ -z "$phrase" ] && continue
if ! grep -qF "$phrase" "$skill_file"; then
fail "$skill_name: trigger phrase missing from SKILL.md description: '$phrase'"
MISSING=$((MISSING + 1))
fi
done < "$triggers_file"
if [ "$MISSING" -eq 0 ]; then
pass "$skill_name: all $trigger_count trigger phrase(s) appear in SKILL.md"
fi
echo ""
done
if [ "$SKILL_COUNT" -eq 0 ]; then
fail "no SKILL.md found under skills/*/"
fi
# -------------------------------------------------------
# Summary
# -------------------------------------------------------
echo "=== Summary ==="
printf "Pass: %d Fail: %d Warn: %d\n" "$PASS" "$FAIL" "$WARN"
if [ "$FAIL" -gt 0 ]; then
exit 1
fi
exit 0
# Triggers on: documented in each skill's .triggers.txt sibling file.

View file

@ -1,265 +0,0 @@
#!/usr/bin/env bash
# validate-plugin.sh — Foundation plugin structure validator for claude-design
# Usage: bash tests/validate-plugin.sh
# Exit codes: 0 = all checks pass; 1 = at least one FAIL
#
# Forked from plugins/ms-ai-architect/tests/validate-plugin.sh:
# keep: helpers (pass/fail/warn), counters, PLUGIN_ROOT, JSON-validity check,
# README/CLAUDE.md existence checks
# strip: agent frontmatter loop, commands frontmatter loop, KB-staleness checks,
# architect:* command-name assertions, references-count assertions
# add: SKILL.md frontmatter + description-length, LICENSE content, GOVERNANCE
# existence, .coverage.md existence, forbidden-command-name regex (h),
# operator-private-context grep (i), Norwegian-leakage grep (j)
set -euo pipefail
LC_ALL=en_US.UTF-8
RED='\033[0;31m'
GREEN='\033[0;32m'
YELLOW='\033[1;33m'
NC='\033[0m'
PLUGIN_ROOT="$(cd "$(dirname "$0")/.." && pwd)"
PASS=0
FAIL=0
WARN=0
pass() { printf "${GREEN} ✓ %s${NC}\n" "$1"; PASS=$((PASS + 1)); }
fail() { printf "${RED} ✗ %s${NC}\n" "$1"; FAIL=$((FAIL + 1)); }
warn() { printf "${YELLOW} ⚠ %s${NC}\n" "$1"; WARN=$((WARN + 1)); }
echo "=== claude-design Plugin Validation ==="
echo "Plugin root: $PLUGIN_ROOT"
echo ""
# -------------------------------------------------------
# Check (a): plugin.json valid + required fields
# -------------------------------------------------------
echo "--- (a) plugin.json structure ---"
PLUGIN_JSON="$PLUGIN_ROOT/.claude-plugin/plugin.json"
if [ ! -f "$PLUGIN_JSON" ]; then
fail ".claude-plugin/plugin.json missing"
else
if node -e "JSON.parse(require('fs').readFileSync('$PLUGIN_JSON'))" 2>/dev/null; then
pass ".claude-plugin/plugin.json is valid JSON"
else
fail ".claude-plugin/plugin.json is invalid JSON"
fi
for field in name version description; do
if node -e "const p = JSON.parse(require('fs').readFileSync('$PLUGIN_JSON')); if (typeof p['$field'] !== 'string' || p['$field'] === '') process.exit(1)" 2>/dev/null; then
pass "plugin.json has '$field'"
else
fail "plugin.json missing or empty '$field'"
fi
done
fi
echo ""
# -------------------------------------------------------
# Check (b): at least one SKILL.md under skills/*/
# -------------------------------------------------------
echo "--- (b) SKILL.md presence ---"
SKILL_COUNT=0
for skill_file in "$PLUGIN_ROOT"/skills/*/SKILL.md; do
[ -f "$skill_file" ] || continue
SKILL_COUNT=$((SKILL_COUNT + 1))
done
if [ "$SKILL_COUNT" -ge 1 ]; then
pass "found $SKILL_COUNT SKILL.md file(s) under skills/*/"
else
fail "no SKILL.md found under skills/*/"
fi
echo ""
# -------------------------------------------------------
# Check (c): SKILL.md frontmatter has name+description, description >=400 chars
# -------------------------------------------------------
echo "--- (c) SKILL.md frontmatter quality ---"
for skill_file in "$PLUGIN_ROOT"/skills/*/SKILL.md; do
[ -f "$skill_file" ] || continue
basename_skill="$(basename "$(dirname "$skill_file")")/SKILL.md"
first_line="$(head -n 1 "$skill_file")"
if [ "$first_line" != "---" ]; then
fail "$basename_skill: missing frontmatter delimiter on line 1"
continue
fi
frontmatter="$(awk 'NR==1{next} /^---$/{exit} {print}' "$skill_file")"
if echo "$frontmatter" | grep -qE '^name:'; then
pass "$basename_skill: has 'name:'"
else
fail "$basename_skill: missing 'name:'"
fi
if echo "$frontmatter" | grep -qE '^description:'; then
pass "$basename_skill: has 'description:'"
else
fail "$basename_skill: missing 'description:'"
fi
desc_len="$(awk '/^description: \|/,/^---$/' "$skill_file" | wc -c | tr -d '[:space:]')"
if [ -z "$desc_len" ]; then desc_len=0; fi
if [ "$desc_len" -ge 400 ]; then
pass "$basename_skill: description block is $desc_len chars (>=400)"
else
fail "$basename_skill: description block is $desc_len chars (<400)"
fi
done
echo ""
# -------------------------------------------------------
# Check (d): LICENSE exists, non-empty, contains "MIT License"
# -------------------------------------------------------
echo "--- (d) LICENSE ---"
LICENSE_FILE="$PLUGIN_ROOT/LICENSE"
if [ ! -f "$LICENSE_FILE" ]; then
fail "LICENSE missing"
elif [ ! -s "$LICENSE_FILE" ]; then
fail "LICENSE is empty"
elif ! grep -q "MIT License" "$LICENSE_FILE"; then
fail "LICENSE does not contain 'MIT License'"
else
pass "LICENSE exists, non-empty, MIT License"
fi
echo ""
# -------------------------------------------------------
# Check (e): GOVERNANCE.md exists, non-empty
# -------------------------------------------------------
echo "--- (e) GOVERNANCE.md ---"
GOVERNANCE_FILE="$PLUGIN_ROOT/GOVERNANCE.md"
if [ ! -f "$GOVERNANCE_FILE" ]; then
fail "GOVERNANCE.md missing"
elif [ ! -s "$GOVERNANCE_FILE" ]; then
fail "GOVERNANCE.md is empty"
else
pass "GOVERNANCE.md exists, non-empty"
fi
echo ""
# -------------------------------------------------------
# Check (f): README.md + CLAUDE.md exist, non-empty
# -------------------------------------------------------
echo "--- (f) README.md and CLAUDE.md ---"
for f in README.md CLAUDE.md; do
fpath="$PLUGIN_ROOT/$f"
if [ ! -f "$fpath" ]; then
fail "$f missing"
elif [ ! -s "$fpath" ]; then
fail "$f is empty"
else
pass "$f exists, non-empty"
fi
done
echo ""
# -------------------------------------------------------
# Check (g): .coverage.md exists at plugin root
# -------------------------------------------------------
echo "--- (g) .coverage.md ---"
COVERAGE_FILE="$PLUGIN_ROOT/.coverage.md"
if [ ! -f "$COVERAGE_FILE" ]; then
fail ".coverage.md missing"
elif [ ! -s "$COVERAGE_FILE" ]; then
fail ".coverage.md is empty"
else
pass ".coverage.md exists, non-empty"
fi
echo ""
# -------------------------------------------------------
# Check (h): forbidden command-name regex (scope fence vs
# Anthropic's knowledge-work-plugins/design)
# -------------------------------------------------------
echo "--- (h) forbidden command-name regex ---"
FORBIDDEN_REGEX='^name:[[:space:]]*(claude-design:)?(critique|accessibility|ux-copy|research-synthesis|design-system|handoff)[[:space:]]*$'
H_HIT=0
for cmd_file in "$PLUGIN_ROOT"/commands/*.md "$PLUGIN_ROOT"/skills/*/SKILL.md; do
[ -f "$cmd_file" ] || continue
if grep -qE "$FORBIDDEN_REGEX" "$cmd_file"; then
fail "command-name collision with Anthropic's official knowledge-work-plugins/design plugin: $cmd_file"
H_HIT=$((H_HIT + 1))
fi
done
if [ "$H_HIT" -eq 0 ]; then
pass "no forbidden command-name collisions"
fi
echo ""
# -------------------------------------------------------
# Check (i): operator-private-context grep
# -------------------------------------------------------
echo "--- (i) operator-private-context grep ---"
I_HITS="$(grep -rnE '(kjell|vegvesen|NEXT-SESSION-PROMPT|REMEMBER\.md content from)' \
"$PLUGIN_ROOT" \
--include='*.md' \
--exclude-dir='.claude' \
--exclude-dir='tests' \
--exclude='REMEMBER.md' \
--exclude='TODO.md' \
--exclude='NEXT-SESSION-PROMPT.local.md' \
2>/dev/null || true)"
if [ -z "$I_HITS" ]; then
pass "no operator-private context leaks in shipped content"
else
while IFS= read -r hit; do
fail "operator-private context leak in shipped content (brief NFR): $hit"
done < <(printf '%s\n' "$I_HITS")
fi
echo ""
# -------------------------------------------------------
# Check (j): Norwegian-leakage grep (WARN, not FAIL)
# -------------------------------------------------------
echo "--- (j) Norwegian-leakage grep ---"
J_HITS="$(grep -rnE '[æøåÆØÅ]' \
"$PLUGIN_ROOT" \
--include='*.md' \
--exclude-dir='.claude' \
--exclude='REMEMBER.md' \
--exclude='TODO.md' \
--exclude='NEXT-SESSION-PROMPT.local.md' \
2>/dev/null || true)"
if [ -z "$J_HITS" ]; then
pass "no Norwegian diacritics in shipped content"
else
while IFS= read -r hit; do
warn "Norwegian diacritic in shipped content (review case-by-case): $hit"
done < <(printf '%s\n' "$J_HITS")
fi
echo ""
# -------------------------------------------------------
# Summary
# -------------------------------------------------------
echo "=== Summary ==="
printf "Pass: %d Fail: %d Warn: %d\n" "$PASS" "$FAIL" "$WARN"
if [ "$FAIL" -gt 0 ]; then
exit 1
fi
exit 0

View file

@ -1,152 +0,0 @@
#!/usr/bin/env bash
# verify.sh — Top-level roll-up for claude-design plugin verification
#
# Runs the 5 test scripts in dependency order:
# 1. tests/validate-plugin.sh (foundation plugin structure)
# 2. tests/test-skill-triggers.sh (skill description + trigger phrases)
# 3. tests/test-sc2-artifact-coverage.sh (SC2 — every preset has ≥1 file)
# 4. tests/test-sc3-citations.sh (SC3 — citation discipline)
# 5. tests/test-sc1-dogfood-log.sh (SC1 — operator dogfood log format)
#
# Flags:
# --strict pass --strict to test-sc1-dogfood-log.sh (missing block = FAIL)
# --quick skip tests/test-skill-triggers.sh (fast incremental runs)
#
# Exit codes: 0 = all sub-tests pass; non-zero = at least one sub-test failed
#
# Bash 3.2 compatible. Modelled on plugins/voyage/verify.sh helper style.
set -u
LC_ALL=en_US.UTF-8
RED='\033[0;31m'
GREEN='\033[0;32m'
YELLOW='\033[1;33m'
BOLD='\033[1m'
NC='\033[0m'
PLUGIN_ROOT="$(cd "$(dirname "$0")" && pwd)"
# Flag parsing
STRICT=false
QUICK=false
for arg in "$@"; do
case "$arg" in
--strict) STRICT=true ;;
--quick) QUICK=true ;;
-h|--help)
echo "Usage: $0 [--strict] [--quick]"
echo " --strict Pass --strict to test-sc1-dogfood-log.sh"
echo " --quick Skip tests/test-skill-triggers.sh"
exit 0
;;
*)
echo "Unknown flag: $arg" >&2
echo "Usage: $0 [--strict] [--quick]" >&2
exit 2
;;
esac
done
TOTAL_PASS=0
TOTAL_FAIL=0
TOTAL_WARN=0
FAILED_SCRIPTS=""
run_script() {
local script_name="$1"
shift
local script_path="$PLUGIN_ROOT/tests/$script_name"
if [ ! -f "$script_path" ]; then
printf "${RED}[MISSING]${NC} %s\n" "$script_name"
TOTAL_FAIL=$((TOTAL_FAIL + 1))
FAILED_SCRIPTS="$FAILED_SCRIPTS $script_name"
return 1
fi
printf "${BOLD}### %s${NC}\n" "$script_name"
local output exit_code
output="$(bash "$script_path" "$@" 2>&1)"
exit_code=$?
printf '%s\n' "$output"
# Parse the script's own Summary line: "Pass: N Fail: N Warn: N"
local summary
summary="$(printf '%s\n' "$output" | grep -E '^Pass: [0-9]+ Fail: [0-9]+ Warn: [0-9]+$' | tail -n 1)"
if [ -n "$summary" ]; then
local p f w
p="$(printf '%s' "$summary" | awk '{print $2}')"
f="$(printf '%s' "$summary" | awk '{print $4}')"
w="$(printf '%s' "$summary" | awk '{print $6}')"
TOTAL_PASS=$((TOTAL_PASS + p))
TOTAL_FAIL=$((TOTAL_FAIL + f))
TOTAL_WARN=$((TOTAL_WARN + w))
fi
if [ "$exit_code" -ne 0 ]; then
FAILED_SCRIPTS="$FAILED_SCRIPTS $script_name"
fi
printf "\n"
return "$exit_code"
}
echo "=== claude-design verify.sh ==="
echo "Plugin root: $PLUGIN_ROOT"
echo "Strict mode: $STRICT Quick mode: $QUICK"
echo ""
# -------------------------------------------------------
# 1. validate-plugin.sh
# -------------------------------------------------------
run_script "validate-plugin.sh" || true
# -------------------------------------------------------
# 2. test-skill-triggers.sh (skipped in --quick mode)
# -------------------------------------------------------
if $QUICK; then
printf "${YELLOW}### test-skill-triggers.sh${NC} (skipped — --quick)\n\n"
else
run_script "test-skill-triggers.sh" || true
fi
# -------------------------------------------------------
# 3. test-sc2-artifact-coverage.sh
# -------------------------------------------------------
run_script "test-sc2-artifact-coverage.sh" || true
# -------------------------------------------------------
# 4. test-sc3-citations.sh
# -------------------------------------------------------
run_script "test-sc3-citations.sh" || true
# -------------------------------------------------------
# 5. test-sc1-dogfood-log.sh (strict if --strict)
# -------------------------------------------------------
if $STRICT; then
run_script "test-sc1-dogfood-log.sh" --strict || true
else
run_script "test-sc1-dogfood-log.sh" || true
fi
# -------------------------------------------------------
# Aggregate summary
# -------------------------------------------------------
echo "================================================="
echo "=== claude-design verify.sh — aggregate summary"
echo "================================================="
printf "${GREEN}Pass:${NC} %d ${RED}Fail:${NC} %d ${YELLOW}Warn:${NC} %d\n" \
"$TOTAL_PASS" "$TOTAL_FAIL" "$TOTAL_WARN"
if [ -n "$FAILED_SCRIPTS" ]; then
printf "${RED}Failed scripts:${NC}%s\n" "$FAILED_SCRIPTS"
fi
if [ "$TOTAL_FAIL" -gt 0 ]; then
exit 1
fi
exit 0

View file

@ -50,6 +50,79 @@ Analyzes and optimizes Claude Code configuration across three pillars:
| verifier-agent | Verify results | sonnet | purple | Read, Glob, Grep | | verifier-agent | Verify results | sonnet | purple | Read, Glob, Grep |
| feature-gap-agent | Context-aware feature recommendations | opus | green | Read, Glob, Grep, Write | | feature-gap-agent | Context-aware feature recommendations | opus | green | Read, Glob, Grep, Write |
## Deterministic Scanners
Node.js scanners (zero external dependencies), run via `node scanners/scan-orchestrator.mjs <path>`.
Posture CLI: `node scanners/posture.mjs <path> [--json] [--global] [--full-machine] [--output-file path]`.
Scanner CLI: `node scanners/scan-orchestrator.mjs <path> [--global] [--full-machine] [--no-suppress]`.
| Scanner | Prefix | Detects |
|---------|--------|---------|
| `claude-md-linter.mjs` | CML | Structure, length, sections, @imports, duplicates, TODOs |
| `settings-validator.mjs` | SET | Schema, unknown/deprecated keys, type mismatches, permissions |
| `hook-validator.mjs` | HKV | Format, script existence, event validity, timeouts |
| `rules-validator.mjs` | RUL | Glob matching, orphan rules, deprecated fields, unscoped rules |
| `mcp-config-validator.mjs` | MCP | Server types, trust levels, env vars, unknown fields |
| `import-resolver.mjs` | IMP | Broken @imports, circular refs, deep chains, tilde paths |
| `conflict-detector.mjs` | CNF | Settings conflicts, permission contradictions, hook duplicates |
| `feature-gap-scanner.mjs` | GAP | 25 feature checks across 4 tiers — shown as opportunities, not grades |
| `token-hotspots.mjs` | TOK | Cache-breaking volatile content, redundant tool permissions, deep import chains, oversized cascade, bloated SKILL.md descriptions, MCP tool-schema budget (Opus 4.7 patterns) |
| `cache-prefix-scanner.mjs` | CPS | Volatile content in lines 31150 of CLAUDE.md cascade (beyond Pattern A's top-30 window) |
| `disabled-in-schema-scanner.mjs` | DIS | Tools listed in BOTH `permissions.deny` AND `permissions.allow` — deny wins, allow entries are dead config |
| `collision-scanner.mjs` | COL | Cross-plugin skill name collisions (low); user-vs-plugin overlaps (medium); `details.namespaces` payload |
### Scanner Lib (`scanners/lib/`)
| Module | Purpose |
|--------|---------|
| `severity.mjs` | Severity constants, risk scoring, verdict logic, `WEIGHTS` named export (v5 F3) |
| `output.mjs` | Finding objects (CA-XXX-NNN format), scanner results, envelope, optional `details` payload (v5 N6) |
| `file-discovery.mjs` | Config file discovery: single-path, multi-path (`discoverConfigFilesMulti`), full-machine (`discoverFullMachinePaths`) |
| `yaml-parser.mjs` | Frontmatter parsing, JSON parsing, @import/section extraction |
| `string-utils.mjs` | Line counting, truncation, similarity, key extraction |
| `scoring.mjs` | Severity-weighted `scoreByArea` (v5 F3), health scorecard, dedup-by-area (v5 N3), `scoringVersion: 'v5'` |
| `backup.mjs` | Backup creation, manifest parsing, checksum verification |
| `diff-engine.mjs` | Drift diffing: diffEnvelopes(), formatDiffReport() |
| `baseline.mjs` | Baseline save/load/list/delete for drift detection |
| `report-generator.mjs` | Unified markdown reports: posture, drift, plugin health |
| `suppression.mjs` | .config-audit-ignore parsing, finding suppression, audit trail |
| `active-config-reader.mjs` | Read-only inventory: readActiveConfig(), detectGitRoot(), walkClaudeMdCascade(), readClaudeJsonProjectSlice() (longest-prefix match), enumeratePlugins(), enumerateSkills(), readActiveHooks(), readActiveMcpServers() (with cache → package.json tool-count fallback), estimateTokens() (v5: `'mcp'` kind = 500 + toolCount × 200) |
| `tokenizer-api.mjs` | Anthropic `count_tokens` wrapper for `--accurate-tokens` (v5 N5); 5s AbortController timeout, exponential 429 backoff, key masking |
| `humanizer.mjs` | Plain-language output translator (v5.1.0): `humanizeFinding`, `humanizeFindings`, `humanizeEnvelope`, `computeRelevanceContext`. Pure functions; never mutate inputs. Adds `userImpactCategory`, `userActionLanguage`, `relevanceContext` fields and replaces title/description/recommendation when a translation exists. Bypassed by `--raw` and `--json` paths. |
| `humanizer-data.mjs` | TRANSLATIONS table for 13 scanner prefixes (CML/SET/HKV/RUL/MCP/IMP/CNF/COL/TOK/CPS/DIS/GAP/PLH). Three-step lookup: exact title → regex pattern → `_default` → fall through to original |
### Action Engines (`scanners/`)
| Module | Purpose |
|--------|---------|
| `fix-engine.mjs` | planFixes(), applyFixes(), verifyFixes() — 9 fix types |
| `rollback-engine.mjs` | listBackups(), restoreBackup(), deleteBackup() |
| `fix-cli.mjs` | CLI: `node fix-cli.mjs <path> [--apply] [--json] [--global]` |
| `drift-cli.mjs` | CLI: `node drift-cli.mjs <path> [--save] [--baseline name] [--json]` |
| `whats-active.mjs` | CLI: `node whats-active.mjs <path> [--json] [--verbose] [--suggest-disables]` — read-only active-config inventory |
| `token-hotspots-cli.mjs` | CLI: `node token-hotspots-cli.mjs <path> [--json] [--global] [--output-file path] [--accurate-tokens] [--with-telemetry-recipe]` — Opus-4.7 token hotspots ranking with optional API calibration |
| `manifest.mjs` | CLI: `node manifest.mjs <path> [--json]` — ranked system-prompt token-source table (v5 N2) |
### Standalone Scanner
| Module | Prefix | Purpose |
|--------|--------|---------|
| `plugin-health-scanner.mjs` | PLH | Plugin structure, frontmatter, cross-plugin conflicts (runs independently) |
| `self-audit.mjs` | — | Runs all scanners + plugin health on this plugin itself |
## Knowledge Base (`knowledge/`)
| File | Content |
|------|---------|
| `claude-code-capabilities.md` | Feature register: 18 config surfaces, Anthropic guidance, relevance table |
| `configuration-best-practices.md` | Per-layer best practices (v5: Opus 4.7 cache-stability guidance replaces Sonnet-era 200-line rule) |
| `anti-patterns.md` | Common mistakes mapped to scanner IDs |
| `hook-events-reference.md` | All 26 hook events with details |
| `feature-evolution.md` | Feature timeline for staleness detection |
| `gap-closure-templates.md` | Config-specific templates for closing gaps |
| `opus-4.7-patterns.md` | Token-cost dynamics for Opus 4.7 era — patterns powering the TOK scanner |
| `cache-telemetry-recipe.md` | Manual `jq` recipe for verifying prompt-cache hit rate from session transcripts (v5 M7) |
## Hooks ## Hooks
| Event | Script | Purpose | | Event | Script | Purpose |
@ -59,20 +132,56 @@ Analyzes and optimizes Claude Code configuration across three pillars:
| SessionStart | `session-start.mjs` | Checks for active (unfinished) sessions | | SessionStart | `session-start.mjs` | Checks for active (unfinished) sessions |
| Stop | `stop-session-reminder.mjs` | Reminds about current session phase | | Stop | `stop-session-reminder.mjs` | Reminds about current session phase |
## Reference docs (read on demand) ## Plain-Language Output (v5.1.0)
- **Scanner inventory, lib modules, action engines, knowledge base:** `docs/scanner-internals.md` Default output of all 18 commands routes through `humanizeEnvelope` from `lib/humanizer.mjs`. Findings are decorated with three additive fields and may have title/description/recommendation replaced when a translation exists.
- **Plain-language output (v5.1.0), humanizer vocabularies, output modes:** `docs/humanizer.md`
## Plain-Language Output (v5.1.0) — summary ### Output modes
Default output of all 18 commands routes through `humanizeEnvelope` from `lib/humanizer.mjs`. Findings get three decorated fields: | Flag | Behavior |
|------|----------|
| (default, no flag) | Plain-language: humanizer applied, findings group by user-impact, titles lead with prose. Self-audit terminal render also humanized. |
| `--raw` | Byte-stable v5.0.0 verbatim — humanizer bypassed, technical IDs and severity-only labels. For tooling that scrapes stderr from v5.0.0. |
| `--json` | Unchanged from v5.0.0 — humanizer bypassed, byte-stable JSON envelope. Always preferred for programmatic consumption over `--raw`. |
| `--output-file <path>` | Writes raw v5.0.0-shape JSON (humanizer bypassed). Posture-specific. |
- `userImpactCategory` — Configuration mistake / Conflict / Wasted tokens / Dead config / Missed opportunity `--raw` is threaded through every CLI: `posture.mjs`, `scan-orchestrator.mjs`, `token-hotspots-cli.mjs`, `manifest.mjs`, `whats-active.mjs`, `fix-cli.mjs`, `drift-cli.mjs`, `self-audit.mjs`.
- `userActionLanguage` — Fix this now / Fix soon / Fix when convenient / Optional cleanup / FYI (derived from severity)
- `relevanceContext``affects-everyone` (default) / `affects-this-machine-only` (`*.local.*` files) / `test-fixture-no-impact`
`--raw` bypasses the humanizer for byte-stable v5.0.0 output. `--json` is also byte-stable. Full detail and Wave 5 lessons: `docs/humanizer.md`. ### Vocabularies
User-impact category (added to each finding as `userImpactCategory`, derived from scanner prefix):
| Label | Scanners |
|-------|----------|
| Configuration mistake | CML, SET, HKV, RUL, MCP, IMP, PLH |
| Conflict | CNF, COL |
| Wasted tokens | TOK, CPS |
| Dead config | DIS |
| Missed opportunity | GAP |
Action language (added to each finding as `userActionLanguage`, derived from severity):
| Severity | Phrase |
|----------|--------|
| critical | Fix this now |
| high | Fix soon |
| medium | Fix when convenient |
| low | Optional cleanup |
| info | FYI |
Relevance context (added to each finding as `relevanceContext`, computed from finding's file path):
| Value | When |
|-------|------|
| `test-fixture-no-impact` | Path contains `/tests/fixtures/` or `/test/fixtures/` |
| `affects-this-machine-only` | Basename matches `*.local.*` (e.g., `settings.local.json`) |
| `affects-everyone` | Default — assumed shared/committed config |
### Wave 5 lessons
- Posture's stderr scorecard is rendered prose-side and is not part of the JSON envelope; `humanized.areas[].titleHumanized` referenced by command templates lives only in the prose render.
- Posture's `--output-file` writes raw v5.0.0-shape JSON because `posture.mjs` does not call `humanizeEnvelope`. If session-files should later be humanized, posture needs its own humanize pass — out of v5.1.0 scope.
- The default-output snapshot at `tests/snapshots/default-output/posture.json` is frozen — change requires `UPDATE_SNAPSHOT=1` plus intent confirmation.
## Suppressions ## Suppressions

View file

@ -1,52 +0,0 @@
# Config-Audit — Plain-language output (v5.1.0)
Imported from `CLAUDE.md` via pointer.
Default output of all 18 commands routes through `humanizeEnvelope` from `lib/humanizer.mjs`. Findings are decorated with three additive fields and may have title/description/recommendation replaced when a translation exists.
## Output modes
| Flag | Behavior |
|------|----------|
| (default, no flag) | Plain-language: humanizer applied, findings group by user-impact, titles lead with prose. Self-audit terminal render also humanized. |
| `--raw` | Byte-stable v5.0.0 verbatim — humanizer bypassed, technical IDs and severity-only labels. For tooling that scrapes stderr from v5.0.0. |
| `--json` | Unchanged from v5.0.0 — humanizer bypassed, byte-stable JSON envelope. Always preferred for programmatic consumption over `--raw`. |
| `--output-file <path>` | Writes raw v5.0.0-shape JSON (humanizer bypassed). Posture-specific. |
`--raw` is threaded through every CLI: `posture.mjs`, `scan-orchestrator.mjs`, `token-hotspots-cli.mjs`, `manifest.mjs`, `whats-active.mjs`, `fix-cli.mjs`, `drift-cli.mjs`, `self-audit.mjs`.
## Vocabularies
User-impact category (added to each finding as `userImpactCategory`, derived from scanner prefix):
| Label | Scanners |
|-------|----------|
| Configuration mistake | CML, SET, HKV, RUL, MCP, IMP, PLH |
| Conflict | CNF, COL |
| Wasted tokens | TOK, CPS |
| Dead config | DIS |
| Missed opportunity | GAP |
Action language (added to each finding as `userActionLanguage`, derived from severity):
| Severity | Phrase |
|----------|--------|
| critical | Fix this now |
| high | Fix soon |
| medium | Fix when convenient |
| low | Optional cleanup |
| info | FYI |
Relevance context (added to each finding as `relevanceContext`, computed from finding's file path):
| Value | When |
|-------|------|
| `test-fixture-no-impact` | Path contains `/tests/fixtures/` or `/test/fixtures/` |
| `affects-this-machine-only` | Basename matches `*.local.*` (e.g., `settings.local.json`) |
| `affects-everyone` | Default — assumed shared/committed config |
## Wave 5 lessons
- Posture's stderr scorecard is rendered prose-side and is not part of the JSON envelope; `humanized.areas[].titleHumanized` referenced by command templates lives only in the prose render.
- Posture's `--output-file` writes raw v5.0.0-shape JSON because `posture.mjs` does not call `humanizeEnvelope`. If session-files should later be humanized, posture needs its own humanize pass — out of v5.1.0 scope.
- The default-output snapshot at `tests/snapshots/default-output/posture.json` is frozen — change requires `UPDATE_SNAPSHOT=1` plus intent confirmation.

View file

@ -1,76 +0,0 @@
# Config-Audit — Scanner internals
Detailed scanner inventory, lib modules, action engines, knowledge base. Imported from `CLAUDE.md` via pointer.
## Deterministic Scanners
Node.js scanners (zero external dependencies), run via `node scanners/scan-orchestrator.mjs <path>`.
Posture CLI: `node scanners/posture.mjs <path> [--json] [--global] [--full-machine] [--output-file path]`.
Scanner CLI: `node scanners/scan-orchestrator.mjs <path> [--global] [--full-machine] [--no-suppress]`.
| Scanner | Prefix | Detects |
|---------|--------|---------|
| `claude-md-linter.mjs` | CML | Structure, length, sections, @imports, duplicates, TODOs |
| `settings-validator.mjs` | SET | Schema, unknown/deprecated keys, type mismatches, permissions |
| `hook-validator.mjs` | HKV | Format, script existence, event validity, timeouts |
| `rules-validator.mjs` | RUL | Glob matching, orphan rules, deprecated fields, unscoped rules |
| `mcp-config-validator.mjs` | MCP | Server types, trust levels, env vars, unknown fields |
| `import-resolver.mjs` | IMP | Broken @imports, circular refs, deep chains, tilde paths |
| `conflict-detector.mjs` | CNF | Settings conflicts, permission contradictions, hook duplicates |
| `feature-gap-scanner.mjs` | GAP | 25 feature checks across 4 tiers — shown as opportunities, not grades |
| `token-hotspots.mjs` | TOK | Cache-breaking volatile content, redundant tool permissions, deep import chains, oversized cascade, bloated SKILL.md descriptions, MCP tool-schema budget (Opus 4.7 patterns) |
| `cache-prefix-scanner.mjs` | CPS | Volatile content in lines 31150 of CLAUDE.md cascade (beyond Pattern A's top-30 window) |
| `disabled-in-schema-scanner.mjs` | DIS | Tools listed in BOTH `permissions.deny` AND `permissions.allow` — deny wins, allow entries are dead config |
| `collision-scanner.mjs` | COL | Cross-plugin skill name collisions (low); user-vs-plugin overlaps (medium); `details.namespaces` payload |
## Scanner Lib (`scanners/lib/`)
| Module | Purpose |
|--------|---------|
| `severity.mjs` | Severity constants, risk scoring, verdict logic, `WEIGHTS` named export (v5 F3) |
| `output.mjs` | Finding objects (CA-XXX-NNN format), scanner results, envelope, optional `details` payload (v5 N6) |
| `file-discovery.mjs` | Config file discovery: single-path, multi-path (`discoverConfigFilesMulti`), full-machine (`discoverFullMachinePaths`) |
| `yaml-parser.mjs` | Frontmatter parsing, JSON parsing, @import/section extraction |
| `string-utils.mjs` | Line counting, truncation, similarity, key extraction |
| `scoring.mjs` | Severity-weighted `scoreByArea` (v5 F3), health scorecard, dedup-by-area (v5 N3), `scoringVersion: 'v5'` |
| `backup.mjs` | Backup creation, manifest parsing, checksum verification |
| `diff-engine.mjs` | Drift diffing: diffEnvelopes(), formatDiffReport() |
| `baseline.mjs` | Baseline save/load/list/delete for drift detection |
| `report-generator.mjs` | Unified markdown reports: posture, drift, plugin health |
| `suppression.mjs` | .config-audit-ignore parsing, finding suppression, audit trail |
| `active-config-reader.mjs` | Read-only inventory: readActiveConfig(), detectGitRoot(), walkClaudeMdCascade(), readClaudeJsonProjectSlice() (longest-prefix match), enumeratePlugins(), enumerateSkills(), readActiveHooks(), readActiveMcpServers() (with cache → package.json tool-count fallback), estimateTokens() (v5: `'mcp'` kind = 500 + toolCount × 200) |
| `tokenizer-api.mjs` | Anthropic `count_tokens` wrapper for `--accurate-tokens` (v5 N5); 5s AbortController timeout, exponential 429 backoff, key masking |
| `humanizer.mjs` | Plain-language output translator (v5.1.0): `humanizeFinding`, `humanizeFindings`, `humanizeEnvelope`, `computeRelevanceContext`. Pure functions; never mutate inputs. Adds `userImpactCategory`, `userActionLanguage`, `relevanceContext` fields and replaces title/description/recommendation when a translation exists. Bypassed by `--raw` and `--json` paths. |
| `humanizer-data.mjs` | TRANSLATIONS table for 13 scanner prefixes (CML/SET/HKV/RUL/MCP/IMP/CNF/COL/TOK/CPS/DIS/GAP/PLH). Three-step lookup: exact title → regex pattern → `_default` → fall through to original |
## Action Engines (`scanners/`)
| Module | Purpose |
|--------|---------|
| `fix-engine.mjs` | planFixes(), applyFixes(), verifyFixes() — 9 fix types |
| `rollback-engine.mjs` | listBackups(), restoreBackup(), deleteBackup() |
| `fix-cli.mjs` | CLI: `node fix-cli.mjs <path> [--apply] [--json] [--global]` |
| `drift-cli.mjs` | CLI: `node drift-cli.mjs <path> [--save] [--baseline name] [--json]` |
| `whats-active.mjs` | CLI: `node whats-active.mjs <path> [--json] [--verbose] [--suggest-disables]` — read-only active-config inventory |
| `token-hotspots-cli.mjs` | CLI: `node token-hotspots-cli.mjs <path> [--json] [--global] [--output-file path] [--accurate-tokens] [--with-telemetry-recipe]` — Opus-4.7 token hotspots ranking with optional API calibration |
| `manifest.mjs` | CLI: `node manifest.mjs <path> [--json]` — ranked system-prompt token-source table (v5 N2) |
## Standalone Scanner
| Module | Prefix | Purpose |
|--------|--------|---------|
| `plugin-health-scanner.mjs` | PLH | Plugin structure, frontmatter, cross-plugin conflicts (runs independently) |
| `self-audit.mjs` | — | Runs all scanners + plugin health on this plugin itself |
## Knowledge Base (`knowledge/`)
| File | Content |
|------|---------|
| `claude-code-capabilities.md` | Feature register: 18 config surfaces, Anthropic guidance, relevance table |
| `configuration-best-practices.md` | Per-layer best practices (v5: Opus 4.7 cache-stability guidance replaces Sonnet-era 200-line rule) |
| `anti-patterns.md` | Common mistakes mapped to scanner IDs |
| `hook-events-reference.md` | All 26 hook events with details |
| `feature-evolution.md` | Feature timeline for staleness detection |
| `gap-closure-templates.md` | Config-specific templates for closing gaps |
| `opus-4.7-patterns.md` | Token-cost dynamics for Opus 4.7 era — patterns powering the TOK scanner |
| `cache-telemetry-recipe.md` | Manual `jq` recipe for verifying prompt-cache hit rate from session transcripts (v5 M7) |

View file

@ -1,5 +1,5 @@
{ {
"name": "llm-security", "name": "llm-security",
"description": "Security scanning, auditing, and threat modeling for Claude Code projects. Detects secrets, validates MCP servers, assesses security posture, and generates threat models aligned with OWASP LLM Top 10.", "description": "Security scanning, auditing, and threat modeling for Claude Code projects. Detects secrets, validates MCP servers, assesses security posture, and generates threat models aligned with OWASP LLM Top 10.",
"version": "7.7.1" "version": "7.6.1"
} }

View file

@ -6,114 +6,6 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
## [Unreleased] ## [Unreleased]
## [7.7.1] - 2026-05-18
Playground UX-strip etter v7.7.0-operatør-feedback. Hjem-overflaten ledet
med prosjekter (Re-onboard / Nytt prosjekt / Command-katalog) — katalog
var tredje kort, sekundært bak prosjekt-tracks. Operatør ba om å fjerne
onboarding + prosjekter og beholde katalog ("Vi legger til funksjonalitet
senere"). Ingen scanner- eller hook-atferdsendringer.
### Changed
- **Playground routing — katalog som eneste levende overflate.**
`renderActive()` tvinger alltid `activeSurface` til `'catalog'`.
`renderOnboardingSurface`/`renderHomeSurface`/`renderProjectSurface`-
funksjonene er bevart i kildekoden, men ikke rutbare før
funksjonalitet legges til igjen. Init-default endret fra `'home'`
til `'catalog'`, også for migrerte states fra IndexedDB.
- **Playground topbar — Hjem + Re-onboard-knappene fjernet.**
Bare `Katalog`-knappen beholdt i primær navigasjon, sammen med
Eksporter/Importer + tema-toggle. Project-state forblir i IndexedDB
men ingen UI-vei dit.
- **Playground topbar breadcrumb — orgName erstattet med
`llm-security`.** Etter at onboarding ble fjernet fra routing var
`shared.organization.name` (demo-state) fortsatt synlig i toppen
("Direktoratet for digital tjenesteutvikling · Katalog"). Erstattet
med statisk `llm-security · Katalog` som nøytralt scope-anker.
### Fixed
- **Hardkodet versjons-streng i `renderHome`.** v7.7.0-versjonsbumpen
fanget ikke `'Plugin v7.6.1'` på linje 6933 i
`llm-security-playground.html` (template-string-litteral, ikke
matching regex-mønster). Bumpet til v7.7.1.
### Notes
- v7.7.1 bumpet kun versjons-strenger i 7 filer (`package.json`,
`.claude-plugin/plugin.json`, plugin `README.md` badge + Recent
versions-tabell, plugin `CLAUDE.md` header + state-seksjon,
`docs/version-history.md`, `playground/llm-security-playground.html`,
rot `README.md` plugin-entry, rot `CLAUDE.md` plugin-katalog).
- Onboarding-konseptet er nå dokumentert som v7.8.0-kandidat
(per-kommando kontekst-injeksjon) i ROADMAP.md.
## [7.7.0] - 2026-05-18
HTML-rapport for alle 18 skill-kommandoer som produserer rapport.
Hver `/security <cmd>` printer nå en klikkbar `file://`-lenke til en
self-contained HTML-versjon. Levert over fem sesjoner (UX-arbeid +
renderer-extract + CLI + skill-wiring + release). Ingen scanner-
eller hook-atferdsendringer — purely additive surface.
### Added
- **Playground katalog list-view + builder-pane** (sesjon 1, `0dc7ff4`).
Katalog-overflaten fikk list-view (grid-toggle) + builder-pane med
copy-knapp på alle 18 rapporter, så onboarding-flytene blir bredere
og dypere uten å forlate playground-modusen.
- **Playground prosjekt-surface opprydding** (sesjon 2, `86d6ecd`).
Stub-screen-håndtering (rapport ikke ferdig parsed → tydelig
placeholder i stedet for tom panel), topbar-splitt (navigasjons-
trinn vs. eksport-handlinger), generell DS-justering for prosjekt-
overflate.
- **`scripts/lib/report-renderers.mjs`** (sesjon 3, `fa5fb48`).
De 18 inline parserne + 18 inline rendererne i playground-HTML-fila
flyttet til canonical ESM-modul. Ren overflate: `import { PARSERS,
RENDERERS } from './lib/report-renderers.mjs'`. Playground beholder
bit-identisk inline-kopi (ESM `import` fungerer ikke fra `file://`
uten Chrome/Firefox-flags). Canonical kilde + playground inline = to
overflater, samme atferd.
- **`scripts/render-report.mjs` CLI** (sesjon 4, `db80854`).
Zero-dep Node-CLI som tar `commandId` + `--in`/`--out`-flags og
konverterer markdown-rapporter til self-contained HTML.
Stdin/file/stdout-modus, kebab→camel commandId-routing (alle 18
PARSERS fungerer automatisk uten hardkoding). Output inliner 6
DS-stylesheets (`tokens`, `base`, `components`, `tier2`, `tier3`,
`tier3-supplement`) + lokal `.report-table`-CSS. ~140 KB
self-contained HTML; fonter ikke inlined (ville blåst opp 7x til
~1 MB), `tokens.css` har `-apple-system, BlinkMacSystemFont,
system-ui` som fallback. Absolutte `file://`-paths i stdout for
Ghostty cmd-click. Default output `reports/<command>-<YYYYMMDD-
HHmmss>.html` relativt til CWD.
- **HTML-rapport for alle 18 skill-kommandoer** (sesjon 4-5).
Sesjon 4 wired 4 skills (`scan`, `audit`, `posture`, `deep-scan`).
Sesjon 5 wired de 14 resterende (`plugin-audit`, `mcp-audit`,
`mcp-inspect`, `ide-scan`, `supply-check`, `dashboard`, `pre-deploy`,
`diff`, `watch`, `registry`, `clean`, `harden`, `threat-model`,
`red-team`). Hver skill-fil har en avsluttende "HTML Report"-step
som instruerer Claude å (1) compute temp md-path, (2) Write hele
markdown-rapporten verbatim, (3) kjøre CLI, (4) appende
`> **HTML-rapport:** [Åpne i nettleser](file:///abs/sti.html)`
til respons.
### Changed
- Playground beholder inline-kopi av parserne og rendererne for å
forbli single-file `file://`-distribuerbar — ESM `import` fungerer
ikke fra `file://`-URLs uten Chrome/Firefox-flags. Canonical kilden
i `scripts/lib/report-renderers.mjs` og playground inline-kopien er
bit-identisk per release.
### Notes
- Pre-existing `pre-compact-scan`-perf-flake (1000 ms terskel under
last) gjenstår — defer til v7.7.x patch.
- Sync-test mellom `scripts/lib/report-renderers.mjs` og playground
inline-kopi planlagt som v7.7.x patch (krever scope-utvidelse til
`tests/`).
## [7.6.1] - 2026-05-06 ## [7.6.1] - 2026-05-06
Playground v7.6.0 visuell-patch. Seks bugs fanget under maintainer- Playground v7.6.0 visuell-patch. Seks bugs fanget under maintainer-

View file

@ -1,12 +1,168 @@
# LLM Security Plugin (v7.7.1) # LLM Security Plugin (v7.6.1)
Security scanning, auditing, and threat modeling for Claude Code projects. 5 frameworks: OWASP LLM Top 10, Agentic AI Top 10 (ASI), Skills Top 10 (AST), MCP Top 10, AI Agent Traps (DeepMind). 1820+ unit, integration, and end-to-end tests (`tests/e2e/` covers the multi-hook attack chain, multi-session state simulation, and the full scan-orchestrator pipeline); mutation-testing coverage not published. Security scanning, auditing, and threat modeling for Claude Code projects. 5 frameworks: OWASP LLM Top 10, Agentic AI Top 10 (ASI), Skills Top 10 (AST), MCP Top 10, AI Agent Traps (DeepMind). 1822+ unit, integration, and end-to-end tests (`tests/e2e/` covers the multi-hook attack chain, multi-session state simulation, and the full scan-orchestrator pipeline); mutation-testing coverage not published.
Release notes for v7.0.0 → v7.7.1: see `docs/version-history.md` — read on demand. **v7.0.0 — Severity-dominated risk scoring (v2 model, BREAKING).** Three changes target the false-positive cascade on real codebases (hyperframes.com gave `BLOCK / Extreme / 100`, ~70% noise):
**v7.7.1 highlights** — Playground UX-strip etter operatør-feedback: katalog er nå eneste levende overflate (onboarding/home/project-render-funksjonene er bevart i kildekoden men ikke rutbare før funksjonalitet legges til igjen). Topbar-breadcrumb leser ikke lenger demo-state-orgnavn; viser nøytralt `llm-security · Katalog`. Hardkodet versjons-streng i `renderHome` synket. Ingen scanner- eller hook-atferdsendringer. 1. **Risk-score v2 formula** (`scanners/lib/severity.mjs`) — severity-dominated, log-scaled within tier. Replaces v1 sum-and-cap that collapsed every non-trivial scan to 100/Extreme. Tiers: critical → 7095, high only → 4065, medium only → 1535, low only → 111. Verdict cutoffs realigned to new bands (BLOCK ≥65, WARNING ≥15). `info` findings are observability-only — counted in OWASP aggregates but contribute zero to risk_score, verdict, and riskBand (B3, v7.2.0 — was undocumented pre-7.2.0). See `severity.mjs` JSDoc for full contract.
2. **Rule-based entropy scanner with file-extension skip, 8 line-level suppression rules, and configurable policy** — extensions skipped (`.glsl/.frag/.vert/.shader/.wgsl/.css/.scss/.sass/.less/.svg/.min.*/.map`); line-suppression rules (GLSL keywords, CSS-in-JS, inline SVG, ffmpeg `filter_complex`, User-Agent strings, SQL DDL, `throw new Error(\`...\`)`, markdown image URLs). Configurable via `.llm-security/policy.json` `entropy` section (thresholds, `suppress_extensions`, `suppress_line_patterns`, `suppress_paths`). Envelope `calibration` block reports skip counters + effective thresholds + policy source.
3. **DEP typosquat allowlist expansion** — 22 npm + 5 PyPI entries for short-name tools that tripped Levenshtein detection on every modern codebase (`knip`, `oxlint`, `tsx`, `nx`, `rimraf`, `uv`, `ruff`, etc.).
**v7.7.0 highlights** — All 18 report-producing skill commands now emit a clickable `file://` link to a self-contained HTML version of their markdown report. The new `scripts/render-report.mjs` CLI converts any of the 18 report types via a canonical `scripts/lib/report-renderers.mjs` (18 parsers + 18 renderers, bit-identical to the playground). HTML wraps the Tier 1/2/3 design system inline; no external assets, system fonts only (~140 KB per report). Playground also got list-view, copy-button, and prosjekt-surface cleanup. See `docs/security-hardening-guide.md` §6 for the calibration story.
**v7.1.1 — Scan-rapport narrative coherence (patch).** Three coordinated
edits address the whiplash symptom that survived v7.0.0 (numbers fixed,
narrative still walked findings back as "false positive" in prose):
(a) `agents/skill-scanner-agent.md` Step 2.5 mandates context-first
severity assignment — every signal has exactly one disposition (suppressed
OR reported), no per-finding walk-back; (b) `templates/unified-report.md`
gains a `### Narrative Audit` block in Executive Summary surfacing
`summary.narrative_audit.suppressed_findings.{count, by_category}` from
the agent's trailing JSON; (c) both files updated from stale v1
risk-formula constants to the v2 model that has been authoritative in
`severity.mjs` since v7.0.0. Counter is distinct from the existing
top-level `output.suppressed` (`.llm-security-ignore` rule integer).
Out-of-scope but flagged: `commands/scan.md:113-114` retains the v1
formula; resolution deferred to Batch B.
**v7.3.0 — MCP cumulative-drift baseline (in progress, Wave C of Batch C).**
Closes E14 from `docs/critical-review-2026-04-20.md`. The
`mcp-description-cache.mjs` schema gains a sticky `baseline` slot per
tool plus a 10-event rolling `history` array (FIFO). Cumulative drift =
`levenshtein(current, baseline) / max(|current|, |baseline|)`; when the
ratio crosses `mcp.cumulative_drift_threshold` (default 0.25),
`post-mcp-verify.mjs` emits a separate MEDIUM `mcp-cumulative-drift`
advisory. The existing per-update >10% drift signal is unchanged — both
fire independently. Slow-burn rug-pulls that keep each update under the
per-update threshold but cumulatively diverge from baseline are now
caught. Baseline survives the 7-day TTL purge so detection persists
across the full window. New `/security mcp-baseline-reset` slash command
(plus `scanners/mcp-baseline-reset.mjs` CLI: `--list`, `--target <tool>`,
or no-args clear-all) lets the user acknowledge a legitimate MCP server
upgrade — clearing the baseline causes the next call to seed a fresh
one from the incoming description; description, firstSeen, lastSeen, and
history are preserved for audit. `LLM_SECURITY_MCP_CACHE_FILE` env var
overrides the cache path for end-to-end testing without polluting the
user's real `~/.cache/llm-security/mcp-descriptions.json`.
**v7.3.0 — Env-var deprecation warnings (D3 of Batch C, Wave D).**
Closes 8.7 from `.claude/projects/2026-04-29-batch-c-scope-finalize/plan.md`.
`scanners/lib/policy-loader.mjs` exports a new helper
`getPolicyValueWithEnvWarn(section, key, envVarName, defaultValue)`
env still wins per Preferences (existing behaviour), but when both the
env-var AND the `policy.json` key are explicitly set, the helper emits a
single per-process stderr line: `[llm-security] Deprecation: env-var
${ENVVAR} will be removed in v8.0.0; policy.json key ${section}.${key}
also set — env wins for now. Suppress with LLM_SECURITY_DEPRECATION_QUIET=1.`
Module-scoped `Set` dedupes per env-var name across call-sites. Four
overlapping vars are wired through the helper:
`LLM_SECURITY_INJECTION_MODE``injection.mode` (in
`pre-prompt-inject-scan.mjs`), `LLM_SECURITY_TRIFECTA_MODE`
`trifecta.mode` and `LLM_SECURITY_ESCALATION_WINDOW`
`trifecta.escalation_window` (in `post-session-guard.mjs`),
`LLM_SECURITY_AUDIT_LOG``audit.log_path` (in
`scanners/lib/audit-trail.mjs`). `DEFAULT_POLICY` gains
`trifecta.escalation_window: 5` to close the gap noted in the plan
revisions table (M10). Env-only vars without policy.json equivalents
(`LLM_SECURITY_UPDATE_CHECK`, `LLM_SECURITY_PRECOMPACT_MODE`,
`LLM_SECURITY_PRECOMPACT_MAX_BYTES`, `LLM_SECURITY_IDE_ROOTS`,
`LLM_SECURITY_MCP_CACHE_FILE`) are unchanged — they emit no
deprecation signal because there is nothing to deprecate yet.
**v7.5.0 — Playground (additive surface, no scanner/hook behavior changes).**
Single-file SPA at `playground/llm-security-playground.html` (~10 200 lines)
for onboarding, demo og workshop-bruk uten Claude Code-installasjon. Parser
+ renderer for alle 18 `produces_report=true`-kommandoer i `CATALOG`. State
i IndexedDB primær (`llm-security-playground-v1`) med localStorage-fallback,
sirkelfri Proxy + EventTarget store, microtask-batchet render. Theme-bootstrap
med FOUC-prevention. 4 overflater: onboarding (5 grupper) → home (3 tracks)
→ catalog (20 kommandoer) ⇄ project (rapporter / oversikt / kontekst /
eksport). Demo-state har tre prosjekter inline; `dft-komplett-demo` har alle
18 rapporter ferdig parsed for klikk-gjennom. Vendor-synket design-system
under `playground/vendor/playground-design-system/` (sjekksum-låst via
`MANIFEST.json`, redigeres aldri direkte). Test-fixtures under
`playground/test-fixtures/` (én markdown-fil per kommando) er kontrakt-anker
for parser-utvikling. Skjermdumper i `playground/screenshots/v7.5.0/`.
Eksponerte vinduer-globaler for testing/automasjon: `__store`, `__navigate`,
`__loadDemoState`, `__scheduleRender`, `__PARSERS`, `__RENDERERS`, `__CATALOG`,
`__inferVerdict`, `__inferKeyStats`, `__renderPageShell`, `__handlePasteImport`.
Inkluderer fix av `normalizeVerdictText` regex-rekkefølge: GO-WITH-CONDITIONS
sjekkes før GO så betinget verdict ikke kollapser til ALLOW.
**v7.6.0 — Playground Tier 3-referanse-case (additive surface, no
scanner/hook behavior changes).** Playgroundet er nå en visuelt og
strukturelt fullført referanse-implementasjon for
`shared/playground-design-system/` Tier 3-supplementet. 8 nye Tier 3-
komponenter integrert i de 18 rapport-rendererne: `tfa-flow` + `tfa-leg`
+ `tfa-arrow` (lethal trifecta-kjede med `<button>`-elementer + ARIA-
group/aria-label) i `renderScan` + `renderDeepScan`; `mat-ladder` +
`mat-step` (5-trinns modenhets-stige med terskler 0/25/50/75/95% PASS)
i `renderPosture`; `suppressed-group` (narrative-audit fra
`summary.narrative_audit.suppressed_findings`) i `renderScan` +
`renderDeepScan`; `codepoint-reveal` + `cp-tag`/`cp-zw`/`cp-bidi`
(Unicode-steganografi side-ved-side reveal med U+200B-D|FEFF|2060|180E
`cp-zw`, U+202A-E|2066-9 → `cp-bidi`-detection) i `renderMcpInspect`;
`top-risks` + `top-risk[data-severity]` (rangert top-funn-listing,
semantisk `<ol>`, ekskluderer info-funn) i `renderScan`/`renderDeepScan`/
`renderPluginAudit`/`renderPosture`/`renderAudit`; utvidet
`recommendation-card[data-severity]` (severity-tinted advisory) på alle
inline-bruk + nye per-bucket advisory-cards i `renderClean` + intro
snapshot + diff-rows i `renderHarden` (action-mapping CREATE→positive /
APPEND→medium / MERGE→low / SKIP→low); `risk-meter` (band-visualisering
0-100 med Low/Medium/High/Critical/Extreme bands) på 5 archetypes
(scan, deep-scan, plugin-audit, audit, red-team); `card--severity-{level}`
modifier på `findings__item`-cards. Wave 1 (Sesjon 2) la til
`badge--scope-security` (identitets-chip), `verdict-pill-lg` med
`__verdict`+`__sub` (erstatter custom verdict-pill på alle 18 rapport-
typer), og DS Tier 3 `form-progress` + `fp-step` i onboarding-wizard.
Wave 0 (Sesjon 1) slettet ~30 duplikat-CSS-deklarasjoner fra `<style>`-
blokken (DS vinner cascade) og harmoniserte page-shell på alle 4
overflater. 5 nye DS-helpers: `renderToxicFlow`, `renderMatLadder`,
`renderSuppressedGroup`, `renderCodepointReveal`, `renderTopRisks`.
2 nye normaliserings-helpers: `mapSeverityToCardLevel(input)` (severity
+ action-types til DS-konvensjoner) og `parseNarrativeAudit(md)`. 12
skjermdumper planlagt i `playground/screenshots/v7.6.0/`. A11Y-rapport
oppdatert (`playground/A11Y-RAPPORT.md`) — WCAG 2.1 AA bekreftet,
severity-soft fargepar verifisert, semantiske elementer (`<ol>`,
`<button>`, `<section>`) erstatter generic `<div>`. Filendring totalt
over 5 sesjoner: 10209 → 10677 linjer. Kjent begrensning: `parsed.findings`
er tom for `deep-scan`/`audit` demo-fixturer (parser-begrensning,
ikke fikset i v7.6.0 — sporet for v7.6.x patch).
**v7.6.1 — Playground visuell-patch (no scanner/hook behavior changes).**
Seks bugs fanget av maintainer ved manuell verifisering i nettleser
etter v7.6.0-release. Alle skyldtes mismatch mellom DS-klasser og
hvordan playground-rendrere brukte dem (eller manglende DS-
implementasjoner av klasser playground-rendrere antok eksisterte).
(1) `renderFindingsBlock` brukte `.findings` outer-class som DS har som
2-kolonners grid (`grid-template-columns: 360px 1fr`) for list+detail-
panel-layout — playground brukte den uten detail-panel, headeren havnet
i venstre 360px-kolonne, items i 1fr. Erstattet med
`<section class="report-meta">` + `<h4>` + korrekt `findings__list >
findings__group > findings__group-header + findings__items`-mønster.
(2) `.report-table` manglet helt i DS men brukes i 7+ rendrere (OWASP-
kategorier, Supply chain, Scanner Risk Matrix, Plugin-meta, Permission-
matrise, Live-meter, Siste runs, Godkjenninger, Mitigation roadmap) —
lagt lokal CSS-implementasjon i playground-HTML `<style>`-blokk
(border-collapse, zebra-hover, header-styling). (3) `renderPreDeploy`
traffic-lights brukte `.sm-card__grade` som er fast 28×28 px (designet
for én A-F-bokstav) — kuttet "PASS" til "AS" og "PASS-WITH-NOTES" til
"PASS-WITH-..." i alle traffic-light-cards. Erstattet med bredde-
tilpasset status-pill via inline styling (severity-soft + on tokens).
(4) Threat-model matrix-bobler ikke klikkbare — `<span>` uten event-
handler. Erstattet med `<button type="button" data-threat-id>` +
`aria-label`. Click-handler scroller til tilsvarende rad i Trusler-
tabellen og fremhever den i 1.6 sek. (5) Radar-labels overlappet ved 6+
akser — alle brukte `text-anchor="middle"` med samme offset. Økt SVG-
størrelse fra 280×280 til 380×380, radius fra 105 til 125, bytter
`text-anchor` fra `middle` til `start`/`end` basert på horisontal-
posisjon (`Math.cos(ang)` > 0.2 / < -0.2 / mellom). (6)
`recommendation-card__body` tekstoverflyt på lange single-line tekster
(vilkår, owner-tags, dato) — lagt `overflow-wrap: anywhere; word-break:
break-word` i lokal `<style>`-blokk. 4/4 fix-spesifikke smoke-tester
passerer + 18/18 renderere produserer fortsatt komplett HTML mot
`dft-komplett-demo` (regresjons-test). Filendring 10677 → 10753 linjer
(+76 netto).
## Commands ## Commands
@ -20,7 +176,7 @@ Release notes for v7.0.0 → v7.7.1: see `docs/version-history.md` — read on d
| `/security mcp-audit [--live]` | MCP server config audit (add `--live` for runtime inspection) | | `/security mcp-audit [--live]` | MCP server config audit (add `--live` for runtime inspection) |
| `/security mcp-inspect` | Live MCP server inspection — connect via JSON-RPC 2.0, scan tool descriptions | | `/security mcp-inspect` | Live MCP server inspection — connect via JSON-RPC 2.0, scan tool descriptions |
| `/security mcp-baseline-reset` | Reset MCP description baseline cache (E14, v7.3.0) — after legitimate MCP server upgrade | | `/security mcp-baseline-reset` | Reset MCP description baseline cache (E14, v7.3.0) — after legitimate MCP server upgrade |
| `/security ide-scan [target\|url]` | Scan installed VS Code + JetBrains extensions/plugins, or fetch a remote VSIX/JetBrains plugin via URL. Details: `docs/scanner-reference.md` | | `/security ide-scan [target\|url]` | Scan installed VS Code + JetBrains extensions/plugins — OR fetch a remote VSIX from Marketplace, OpenVSX, or direct URL (v6.4.0), OR a JetBrains plugin from `plugins.jetbrains.com` (v6.6.0). 7 VS Code checks + 7 JetBrains-specific checks (theme-with-code, broad activation, Premain-Class instrumentation, native binaries, depends-chain, typosquat, shaded jars). Hardened ZIP extractor (zip-slip, symlink, bomb, ratio caps — no fuzz-testing results published to date). Orchestrates reused scanners (UNI/ENT/NET/TNT/MEM/SCR) per extension. Offline by default, `--online` opt-in |
| `/security posture` | Quick scorecard (13 categories) | | `/security posture` | Quick scorecard (13 categories) |
| `/security threat-model` | Interactive STRIDE/MAESTRO session | | `/security threat-model` | Interactive STRIDE/MAESTRO session |
| `/security diff [path]` | Compare scan against baseline — shows new/resolved/unchanged/moved | | `/security diff [path]` | Compare scan against baseline — shows new/resolved/unchanged/moved |
@ -30,7 +186,7 @@ Release notes for v7.0.0 → v7.7.1: see `docs/version-history.md` — read on d
| `/security clean [path]` | Scan + remediate (auto/semi-auto/manual) | | `/security clean [path]` | Scan + remediate (auto/semi-auto/manual) |
| `/security dashboard` | Cross-project security dashboard — machine-wide posture overview | | `/security dashboard` | Cross-project security dashboard — machine-wide posture overview |
| `/security harden [path]` | Generate Grade A config — settings.json, CLAUDE.md, .gitignore | | `/security harden [path]` | Generate Grade A config — settings.json, CLAUDE.md, .gitignore |
| `/security red-team [--category] [--adaptive]` | Attack simulation — 64 scenarios across 12 categories against plugin hooks | | `/security red-team [--category] [--adaptive]` | Attack simulation — 64 scenarios across 12 categories against plugin hooks. `--adaptive` for mutation-based evasion testing |
| `/security pre-deploy` | Pre-deployment checklist | | `/security pre-deploy` | Pre-deployment checklist |
## Agents ## Agents
@ -50,47 +206,185 @@ Release notes for v7.0.0 → v7.7.1: see `docs/version-history.md` — read on d
|--------|-------|---------|---------| |--------|-------|---------|---------|
| `pre-prompt-inject-scan.mjs` | UserPromptSubmit | — | Block prompt injection, warn on manipulation (incl. oversight evasion, HTML obfuscation, MEDIUM advisory for leetspeak/homoglyphs/zero-width/multi-lang). Unicode Tag steganography detection. Mode: `LLM_SECURITY_INJECTION_MODE=block\|warn\|off` | | `pre-prompt-inject-scan.mjs` | UserPromptSubmit | — | Block prompt injection, warn on manipulation (incl. oversight evasion, HTML obfuscation, MEDIUM advisory for leetspeak/homoglyphs/zero-width/multi-lang). Unicode Tag steganography detection. Mode: `LLM_SECURITY_INJECTION_MODE=block\|warn\|off` |
| `pre-edit-secrets.mjs` | PreToolUse | `Edit\|Write` | Block credentials in files | | `pre-edit-secrets.mjs` | PreToolUse | `Edit\|Write` | Block credentials in files |
| `pre-bash-destructive.mjs` | PreToolUse | `Bash` | Block rm -rf, curl\|sh, fork bombs, eval. Bash evasion normalization (T1-T6 via `bash-normalize.mjs`) — defense-in-depth | | `pre-bash-destructive.mjs` | PreToolUse | `Bash` | Block rm -rf, curl\|sh, fork bombs, eval. Bash evasion normalization (T1-T6 via `bash-normalize.mjs`: empty quotes, ${} expansion, backslash splitting, IFS, ANSI-C hex) — defense-in-depth mot T1-T6; Claude Code 2.1.98+ dekker harness-nivå |
| `pre-install-supply-chain.mjs` | PreToolUse | `Bash` | Block compromised packages across ALL ecosystems. Bash evasion normalization before gate matching | | `pre-install-supply-chain.mjs` | PreToolUse | `Bash` | Block compromised packages across ALL ecosystems. Bash evasion normalization before gate matching |
| `pre-write-pathguard.mjs` | PreToolUse | `Write` | Block writes to .env, .ssh/, .aws/, credentials, settings | | `pre-write-pathguard.mjs` | PreToolUse | `Write` | Block writes to .env, .ssh/, .aws/, credentials, settings |
| `post-mcp-verify.mjs` | PostToolUse | — (all) | Injection scan on ALL tool output. MCP per-update drift + cumulative drift vs sticky baseline (E14, v7.3.0). Per-tool volume tracking | | `post-mcp-verify.mjs` | PostToolUse | — (all) | Injection scan on ALL tool output (incl. MEDIUM patterns, HITL traps, sub-agent spawn, NL indirection, cognitive load, hybrid P2SQL/recursive/XSS). HTML content trap detection. Bash-specific: secrets/URLs/size. MCP: per-update description drift (MCP05) AND cumulative drift vs sticky baseline (E14, v7.3.0) — slow-burn rug-pulls that stay under the per-update threshold but diverge >=25% from baseline emit MEDIUM `mcp-cumulative-drift` advisory. Per-tool volume tracking |
| `post-session-guard.mjs` | PostToolUse | — (all) | Runtime trifecta detection (Rule of Two). Sliding window + long-horizon. Behavioral drift (Jensen-Shannon). Mode: `LLM_SECURITY_TRIFECTA_MODE=block\|warn\|off` (default: warn) | | `post-session-guard.mjs` | PostToolUse | — (all) | Runtime trifecta detection (Rule of Two). Sliding window (20 calls) + 100-call long-horizon. MCP-concentrated trifecta (same server = elevated severity). Sensitive path + exfil detection. Slow-burn trifecta (legs >50 calls apart = MEDIUM). Behavioral drift detection (Jensen-Shannon divergence). CaMeL-inspired data flow tagging (SHA-256 provenance tracking, output→input linking). Mode: `LLM_SECURITY_TRIFECTA_MODE=block\|warn\|off` (default: warn). Cumulative data volume tracking (100KB/500KB/1MB thresholds). Sub-agent delegation tracking (Task/Agent tools): escalation-after-input advisory when delegation occurs within `LLM_SECURITY_ESCALATION_WINDOW` calls (default 5) of untrusted input (DeepMind Agent Traps kat. 4); secondary 20-call MEDIUM advisory catches slow-burn variants outside the primary window (E17, v7.2.0) |
| `update-check.mjs` | UserPromptSubmit | — | Checks for newer versions (max 1x/24h, cached). Disable: `LLM_SECURITY_UPDATE_CHECK=off` | | `update-check.mjs` | UserPromptSubmit | — | Checks for newer versions (max 1x/24h, cached). Disable: `LLM_SECURITY_UPDATE_CHECK=off` |
| `pre-compact-scan.mjs` | PreCompact | — | Scan transcript for injection + credentials before context compaction. Reads at most last 512 KB. Mode: `LLM_SECURITY_PRECOMPACT_MODE=block\|warn\|off` (default: warn) | | `pre-compact-scan.mjs` | PreCompact | — | Scan transcript for injection patterns + credentials before context compaction; prevents poisoned content from surviving in compact form. Reads at most last 512 KB for <500ms latency. Mode: `LLM_SECURITY_PRECOMPACT_MODE=block\|warn\|off` (default: warn). Cap: `LLM_SECURITY_PRECOMPACT_MAX_BYTES` |
> `pre-install-supply-chain.mjs` covers 7 package managers: npm/yarn/pnpm, pip/pip3/uv, brew, docker, go, cargo, gem. Per-ecosystem blocklists, age gate (<72h), npm audit (critical=block, high=warn), PyPI API inspection, Levenshtein typosquat detection, Docker image verification. > `pre-install-supply-chain.mjs` covers 7 package managers: npm/yarn/pnpm, pip/pip3/uv, brew, docker, go, cargo, gem. Per-ecosystem blocklists, age gate (<72h), npm audit (critical=block, high=warn), PyPI API inspection, Levenshtein typosquat detection, Docker image verification.
Scanner internals, CLI surface, CI/CD templates, knowledge files, and runnable examples: see `docs/scanner-reference.md`.
Defense philosophy (v5.0), Opus 4.7 alignment, known limitations: see `docs/defense-philosophy.md`.
## Remote Repo Support ## Remote Repo Support
`scan` and `plugin-audit` accept GitHub URLs directly. The command clones to a temp dir via `scanners/lib/git-clone.mjs`, scans locally, then cleans up. Use `--branch <name>` for non-default branches. `scan` and `plugin-audit` accept GitHub URLs directly. The command clones to a temp dir via `scanners/lib/git-clone.mjs`, scans locally, then cleans up. Use `--branch <name>` for non-default branches.
**Clone sandboxing (v5.1):** Two layers of defense against `git clone` filter/smudge driver attacks: **Clone sandboxing (v5.1):** `git clone` executes code via `.gitattributes` filter/smudge drivers — this is a known attack vector. Two layers of defense:
1. **Git config flags (all platforms):** `core.hooksPath=/dev/null`, `core.symlinks=false`, `core.fsmonitor=false`, all LFS filter drivers disabled, `protocol.file.allow=never`, `transfer.fsckObjects=true`. Environment: `GIT_CONFIG_NOSYSTEM=1`, `GIT_CONFIG_GLOBAL=/dev/null`, `GIT_ATTR_NOSYSTEM=1`, `GIT_TERMINAL_PROMPT=0`. 1. **Git config flags (all platforms):** `core.hooksPath=/dev/null`, `core.symlinks=false`, `core.fsmonitor=false`, all LFS filter drivers disabled, `protocol.file.allow=never`, `transfer.fsckObjects=true`. Environment: `GIT_CONFIG_NOSYSTEM=1`, `GIT_CONFIG_GLOBAL=/dev/null`, `GIT_ATTR_NOSYSTEM=1`, `GIT_TERMINAL_PROMPT=0`.
2. **OS sandbox:** macOS `sandbox-exec` or Linux `bubblewrap` (bwrap) restricts file writes to only the specific temp directory. Fallback on Windows: git config flags only. 2. **OS sandbox:** macOS `sandbox-exec` or Linux `bubblewrap` (bwrap) restricts file writes to only the specific temp directory. Even if a filter driver bypasses git config, it cannot write outside the clone dir. Fallback on Windows or when neither sandbox is available: git config flags only, WARN logged.
Platform matrix: macOS (`sandbox-exec`) — always works. Linux (`bwrap`) — Fedora/Arch fine, may fail on Ubuntu 24.04+ without admin AppArmor config. Windows — no OS sandbox. Platform matrix: macOS (`sandbox-exec`) — always works. Linux (`bwrap`) — works on Fedora/Arch, may fail on Ubuntu 24.04+ without admin AppArmor config. Windows — no OS sandbox, git config flags only.
Post-clone: size check (100MB max), cleanup guarantee (temp dir + evidence file always removed, even on error). Post-clone: size check (100MB max), cleanup guarantee (temp dir + evidence file always removed, even on error).
**Prompt injection defense:** Remote scans use `scanners/content-extractor.mjs` to pre-extract structured evidence and strip injection patterns BEFORE LLM agents see the content. Agents analyze a JSON evidence package, never raw files from untrusted repos. **Prompt injection defense:** Remote scans use `scanners/content-extractor.mjs` to pre-extract structured evidence and strip injection patterns BEFORE LLM agents see the content. Agents analyze a JSON evidence package, never raw files from untrusted repos.
## Scanners
**Orchestrated (10):** Run via `node scanners/scan-orchestrator.mjs <target> [--fail-on <severity>] [--compact] [--output-file <path>] [--baseline] [--save-baseline]`.
`--fail-on <critical|high|medium|low>`: exit 1 if findings at/above severity, exit 0 otherwise. `--compact`: one-liner per finding format. Both configurable via `policy.json` `ci` section.
With `--output-file`: full JSON to file, compact aggregate to stdout. `--baseline` diffs against stored baseline. `--save-baseline` saves results for future diffs. Baselines stored in `reports/baselines/<target-hash>.json`.
10 scanners: unicode, entropy, permission, dep-audit, taint, git-forensics, network, memory-poisoning, supply-chain-recheck, toxic-flow.
Lib: `mcp-description-cache.mjs` — caches MCP tool descriptions in `~/.cache/llm-security/mcp-descriptions.json`, detects per-update drift via Levenshtein (>10% = alert), 7-day TTL. v7.3.0 (E14) adds a sticky baseline slot per tool plus a 10-event rolling history; cumulative drift = `levenshtein(current, baseline) / max(|current|,|baseline|)`. When ratio ≥ `mcp.cumulative_drift_threshold` (default 0.25), emits `mcp-cumulative-drift` advisory through `post-mcp-verify.mjs`. Baseline survives TTL purge so slow-burn drift is preserved across the 7-day window. `clearBaseline(tool?)` exposed for the `/security mcp-baseline-reset` command. `LLM_SECURITY_MCP_CACHE_FILE` env var overrides the cache path for testing.
Supply-chain-recheck (SCR) re-audits installed dependencies from lockfiles (package-lock.json, yarn.lock, requirements.txt, Pipfile.lock) against blocklists, OSV.dev batch API, and typosquat detection. Offline fallback available. Shared data module: `scanners/lib/supply-chain-data.mjs`.
Memory-poisoning (MEM) detects cognitive state poisoning in CLAUDE.md, memory files, and .claude/rules — injection patterns, shell commands, credential paths, permission expansion, suspicious URLs, encoded payloads.
Toxic-flow (TFA) is a post-processing correlator that runs LAST — detects "lethal trifecta" (untrusted input + sensitive data access + exfiltration sink) by correlating output from prior scanners.
Utility: `node scanners/lib/fs-utils.mjs <backup|restore|cleanup|tmppath> [args]`.
Lib: `sarif-formatter.mjs` — converts scan output to OASIS SARIF 2.1.0 format. Used by `--format sarif` flag.
Lib: `audit-trail.mjs` — writes structured JSONL audit events (ISO 8601, OWASP tags, SIEM-ready). Env: `LLM_SECURITY_AUDIT_*`.
Lib: `policy-loader.mjs` — reads `.llm-security/policy.json` for distributable hook configuration. Includes `ci` section (`failOn`, `compact`) for CI/CD defaults. Defaults match hardcoded values.
**Standalone (8):** `posture-scanner.mjs` — deterministic posture assessment, 16 categories (incl. EU AI Act, NIST AI RMF, ISO 42001), <50ms. NOT in scan-orchestrator (meta-level, not code-level).
Run: `node scanners/posture-scanner.mjs [path]` → JSON stdout. Scanner prefix: PST. Used by `/security posture` and `/security audit`.
`mcp-live-inspect.mjs` — NOT in scan-orchestrator. MCP servers are running processes, not files.
Run: `node scanners/mcp-live-inspect.mjs [target] [--timeout 10000] [--skip-global]`
Scanner prefix: MCI. OWASP: MCP03, MCP06, MCP09. Invoked by `mcp-inspect` and `mcp-audit --live`.
`watch-cron.mjs` — standalone cron wrapper. Reads `reports/watch/config.json`, scans all targets, writes `reports/watch/latest.json`. Run: `node scanners/watch-cron.mjs [--config <path>]`
`reference-config-generator.mjs` — generates Grade A reference config based on posture gaps. Detects project type (plugin/monorepo/standalone). Templates in `templates/reference-config/`. Run: `node scanners/reference-config-generator.mjs [path] [--apply]`
`dashboard-aggregator.mjs` — cross-project security dashboard. Discovers Claude Code projects under ~/ (depth 3) and ~/.claude/plugins/, runs posture-scanner on each, aggregates to machine-grade (weakest link). Cache in `~/.cache/llm-security/dashboard-latest.json` (24h staleness). Run: `node scanners/dashboard-aggregator.mjs [--no-cache] [--max-depth N]`
`attack-simulator.mjs` — red-team harness. Data-driven: 64 scenarios in 12 categories from `knowledge/attack-scenarios.json`. Payloads constructed at runtime (fragment assembly to avoid triggering hooks on source). Uses `runHook()` from test helper. Adaptive mode (`--adaptive`): 5 mutation rounds per passing scenario (homoglyph, encoding, zero-width, case alternation, synonym). Mutation rules in `knowledge/attack-mutations.json`. Benchmark mode (`--benchmark`): outputs structured pass/fail metrics. Run: `node scanners/attack-simulator.mjs [--category <name>] [--json] [--verbose] [--adaptive] [--benchmark]`
`ai-bom-generator.mjs` — AI Bill of Materials generator. Discovers AI components (models, MCP servers, plugins, knowledge, hooks) and outputs CycloneDX 1.6 JSON. Scanner prefix: BOM. Run: `node scanners/ai-bom-generator.mjs <target> [--output-file <path>]`
`ide-extension-scanner.mjs` — scans installed VS Code (and forks: Cursor, Windsurf, VSCodium, code-server, Insiders, Remote-SSH) extensions and JetBrains IDE plugins (IntelliJ IDEA, PyCharm, GoLand, WebStorm, RubyMine, PhpStorm, CLion, DataGrip, RustRover, Rider, Aqua, Writerside, Android Studio). Fleet + Toolbox excluded. OS-aware discovery via `lib/ide-extension-discovery.mjs` (`~/.vscode/extensions/` + `~/Library/Application Support/JetBrains/<IDE><version>/plugins/` on macOS, `%APPDATA%\JetBrains\...` on Windows, `~/.config/JetBrains/...` on Linux). Parses VS Code `package.json` via `lib/ide-extension-parser.mjs` and JetBrains `META-INF/plugin.xml` + `META-INF/MANIFEST.MF` (with nested-jar extraction) via `lib/ide-extension-parser-jb.mjs`. 7 VS Code checks: blocklist match, theme-with-code, sideload (vsix), broad activation (`*` / `onStartupFinished`), typosquat (Levenshtein ≤2 vs top-100), extension-pack expansion, dangerous `vscode:uninstall` hooks. 7 JetBrains checks: theme-with-code, broad activation (`application-components`), `Premain-Class` instrumentation (HIGH — javaagent retransform), native binaries (`.so`/`.dylib`/`.dll`/`.jnilib`), long `<depends>` chains, typosquat vs top JetBrains plugins, shaded-jar advisory. Both branches orchestrate reused scanners (UNI/ENT/NET/TNT/MEM/SCR) per extension with bounded concurrency (default 4). Scanner prefix: IDE. OWASP: LLM01, LLM02, LLM03, LLM06, ASI02, ASI04. Offline by default, `--online` opt-in for Marketplace/OSV.dev lookups. Knowledge: `knowledge/top-vscode-extensions.json`, `knowledge/top-jetbrains-plugins.json`, `knowledge/ide-extension-threat-patterns.md`, `knowledge/marketplace-api-notes.md`, `knowledge/jetbrains-marketplace-api-notes.md`.
**v6.4.0 — URL support.** Targets can be Marketplace, OpenVSX, or direct `.vsix` URLs. Pipeline: `lib/vsix-fetch.mjs` (HTTPS-only fetch with 50MB cap, 30s timeout, SHA-256, manual redirect host whitelist) → `lib/zip-extract.mjs` (zero-dep ZIP parser, rejects zip-slip/symlink/absolute/drive-letter/encrypted/ZIP64, caps: 10 000 entries, 500MB uncomp, 100x ratio, depth 20) → existing scan pipeline against extracted `extension/` subdir → temp dir always cleaned in `try/finally`. Envelope.meta.source = `{ type: "url", kind, url, finalUrl, sha256, size, publisher?, name?, version? }`.
**v6.5.0 — OS sandbox.** Fetch + extract for URL targets now spawns `lib/vsix-fetch-worker.mjs` in a sub-process wrapped by `sandbox-exec` (macOS) or `bwrap` (Linux) — same primitives reused from `git-clone.mjs`. Helper: `lib/vsix-sandbox.mjs` exports `buildSandboxProfile`, `buildBwrapArgs`, `buildSandboxedWorker`, `runVsixWorker`. Worker IPC: argv `--url <url> --tmpdir <dir>` → single JSON line on stdout (`{ok, sha256, size, finalUrl, source, extRoot}` or `{ok:false, error, code?}`). Defense-in-depth — if the in-process ZIP parser ever has a bypass, the kernel still refuses writes outside `<tmpdir>`. `scan(target, { useSandbox })` defaults to `true`; tests pass `false` since `globalThis.fetch` mocks do not cross process boundaries. Windows fallback: in-process with `meta.warnings` advisory. Envelope `meta.source.sandbox`: `'sandbox-exec' | 'bwrap' | 'none' | 'in-process'`.
**v6.6.0 — JetBrains Marketplace URL fetch + JetBrains branch.** URL targets can also be `https://plugins.jetbrains.com/plugin/<numericId>-<slug>` (metadata-resolved → xmlId download) or `https://plugins.jetbrains.com/plugin/download?pluginId=<xmlId>&version=<v>` (direct). `lib/vsix-fetch.mjs` gains `detectUrlType` JetBrains kinds, `fetchJetBrainsPlugin`, host allowlist `plugins.jetbrains.com`. `buildSandboxedWorker(dirs, workerPath)` now accepts a custom worker path — `lib/jetbrains-fetch-worker.mjs` reuses the same IPC contract. Envelope `meta.source.kind` can be `'jetbrains-marketplace' | 'jetbrains-download'`. Installed-plugin scan runs JB-specific checks (see scanner bullet above) and shares the UNI/ENT/NET/TNT/MEM/SCR orchestration. `.kt`, `.groovy`, `.scala` added to `taint-tracer` code extensions.
Run: `node scanners/ide-extension-scanner.mjs [target|url] [--vscode-only] [--intellij-only] [--include-builtin] [--online] [--format json|compact] [--fail-on <sev>] [--output-file <path>]`. Invoked by `/security ide-scan`.
## Token Budget (ENFORCED)
All commands total ~600 lines. All commands use registered subagent types.
- Commands are short dispatchers (~30-60 lines) — no inline report templates or format specs
- All agents use registered `subagent_type` — agent instructions are system prompt, never file reads
- Max 1-2 knowledge files per agent invocation (threat-patterns + secrets-patterns)
- OWASP files are NEVER passed by commands — agents reference them from their own system prompt
- Agents run sequentially to avoid burst rate limits
- `pre-install-supply-chain.mjs` queries OSV.dev for CVEs on every package install
## CLI
`bin/llm-security.mjs` — standalone CLI entry point. Works without Claude Code via `npx llm-security` or `node bin/llm-security.mjs`.
Subcommands: `scan`, `deep-scan`, `posture`, `audit-bom`, `benchmark`. Dispatches to scanner scripts via `child_process.spawn`.
`package.json` `bin` field: `"llm-security": "./bin/llm-security.mjs"`. `files` whitelist: only `bin/` + `scanners/` published to npm.
## CI/CD Integration
Pipeline templates in `ci/`: `github-action.yml`, `azure-pipelines.yml`, `gitlab-ci.yml`. Documentation: `docs/ci-cd-guide.md`.
All templates use `--fail-on high --format sarif --output-file results.sarif` with SARIF upload per platform.
Standalone CLI makes zero network calls in default mode. Schrems II compatible in default offline mode. Optional OSV.dev enrichment (`supply-chain-recheck --online`) transmits package identifiers to a Google-operated API and is a separate compliance consideration.
## Knowledge Files (20)
| File | Content |
|------|---------|
| `skill-threat-patterns.md` | 7 threat categories for skill/command scanning |
| `mcp-threat-patterns.md` | 9 MCP threat categories (MCP01-MCP10) |
| `secrets-patterns.md` | Regex patterns for 10+ secret types |
| `owasp-llm-top10.md` | OWASP LLM Top 10 (2025) with Claude Code mappings |
| `owasp-agentic-top10.md` | OWASP Agentic AI Top 10 (ASI01-ASI10) |
| `owasp-skills-top10.md` | OWASP Skills Top 10 (AST01-AST10) — skill-specific threats |
| `mitigation-matrix.md` | Threat-to-control mappings |
| `top-packages.json` | Known package lists for supply chain checks |
| `skill-registry.json` | Seed data for skill signature registry |
| `prompt-injection-research-2025-2026.md` | 7 research papers (2025-2026) with implications for hook defenses |
| `deepmind-agent-traps.md` | DeepMind AI Agent Traps — 6 categories, 43 techniques, coverage matrix |
| `attack-scenarios.json` | 64 red-team scenarios across 12 categories for attack simulation |
| `attack-mutations.json` | Synonym tables and mutation rules for adaptive red-team testing |
| `compliance-mapping.md` | EU AI Act, NIST AI RMF, ISO 42001, MITRE ATLAS mappings to plugin capabilities |
| `norwegian-context.md` | Norwegian regulatory landscape — Datatilsynet, NSM, Digitaliseringsdirektoratet |
| `ide-extension-threat-patterns.md` | 10 IDE-extension detection categories (VS Code + JetBrains) with 2024-2026 case studies |
| `top-vscode-extensions.json` | Top ~100 VS Code Marketplace extension IDs (typosquat seed) + blocklist entries |
| `top-jetbrains-plugins.json` | Top JetBrains plugin IDs (typosquat seed) + blocklist entries (v6.6.0) |
| `marketplace-api-notes.md` | VS Code Marketplace + OpenVSX API endpoints used by `lib/vsix-fetch.mjs` (v6.4.0) |
| `jetbrains-marketplace-api-notes.md` | JetBrains Marketplace API endpoints used by `fetchJetBrainsPlugin` (v6.6.0) |
## Reports
Scan reports are stored in `reports/` as `.docx` (for sharing) with `.md` source.
## Examples (runnable demonstrations)
Self-contained, deterministic threat-fixture mappes under `examples/`.
Each mappe har `README.md`, fixture/script/transcript, `run-*.{sh,mjs}`,
og `expected-findings.md`. Demonstrasjoner — ikke unit-tester.
| Mappe | Demonstrerer | Hooks/scanners | Sentinel |
|-------|--------------|----------------|----------|
| `malicious-skill-demo/` | Skill scanner end-to-end (UNI/ENT/PRM/DEP/TNT/NET + 7 LLM-kategorier) | `scan-orchestrator` + agents | BLOCK 100/100 |
| `prompt-injection-showcase/` | 61 payloads × 19 kategorier mot `pre-prompt-inject-scan`, `post-mcp-verify`, `pre-bash-destructive` | runtime hooks | per-kategori expected outcome |
| `lethal-trifecta-walkthrough/` | Rule-of-Two advisory på leg 3 (WebFetch → Read .env → Bash curl POST) + suppression | `post-session-guard` | advisory på stage 3 |
| `mcp-rug-pull/` | Cumulative drift-advisory (E14, v7.3.0) — 7 stadier under per-update-terskel, kumulativt over 25% baseline | `post-mcp-verify` + `mcp-description-cache.mjs` | advisory på stage 7 |
| `supply-chain-attack/` | PreToolUse-blokk på kompromittert pakke + scope-hop advisory + dep-auditor typosquats + postinstall curl-pipe | `pre-install-supply-chain` + `dep-auditor` + `supply-chain-data` | 6+ funn, 2 advisories, 1 BLOCK |
| `poisoned-claude-md/` | 6 detektorer (injection / shell / URL / credential paths / permission expansion / encoded payloads) inkl. E15 agent-fil-overflate | `memory-poisoning-scanner` | ≥18 funn fordelt på 2 filer |
| `bash-evasion-gallery/` | T1-T9 disguised destructive commands → normalisert + blokkert (defense-in-depth over Claude Code 2.1.98+) | `pre-bash-destructive` + `bash-normalize` | 10 BLOCK eksitkoder |
| `toxic-agent-demo/` | Single-component lethal trifecta — agent med [Bash, Read, WebFetch] uten hook-guards = CRITICAL TFA-finding | `toxic-flow-analyzer` (TFA) | 1 CRITICAL `Lethal trifecta:` |
| `pre-compact-poisoning/` | PreCompact-hook fanger injection + AWS-shaped credential i syntetisk transcript på tvers av off/warn/block-modus | `pre-compact-scan` | 9 pass: block exit 2 + reason; warn systemMessage; off skip; benign passes |
State-isolering: alle eksempler som muterer global state bruker run-script
PID (post-session-guard via `${ppid}.jsonl`) eller env-overrides
(`LLM_SECURITY_MCP_CACHE_FILE` for MCP-cache). Brukerens reelle
`/tmp/llm-security-session-*.jsonl` og `~/.cache/llm-security/` røres aldri.
## Distribution ## Distribution
This plugin lives in the `ktg-plugin-marketplace` monorepo at `https://git.fromaitochitta.com/open/ktg-plugin-marketplace` under `plugins/llm-security/`. It is not published as a standalone repo — users install it via the Claude Code marketplace mechanism: This plugin lives in the `ktg-plugin-marketplace` monorepo at
`https://git.fromaitochitta.com/open/ktg-plugin-marketplace` under
`plugins/llm-security/`. It is not published as a standalone repo —
users install it via the Claude Code marketplace mechanism:
```bash ```bash
claude plugin marketplace add https://git.fromaitochitta.com/open/ktg-plugin-marketplace.git claude plugin marketplace add https://git.fromaitochitta.com/open/ktg-plugin-marketplace.git
``` ```
Issues, bug reports, and security disclosures all route to the marketplace repo. Issues, bug reports, and security disclosures all route to the
marketplace repo.
## State ## State
Per-session JSONL in `/tmp/llm-security-session-${ppid}.jsonl` (auto-cleaned 24h). MCP description cache in `~/.cache/llm-security/mcp-descriptions.json` (7-day TTL). Update-check + dashboard caches in `~/.cache/llm-security/` (24h). Scan baselines under `reports/baselines/*.json`. Watch results in `reports/watch/latest.json`. Skill registry in `reports/skill-registry.json` (grows). All scan outputs fresh per invocation. No persistent state except `post-session-guard.mjs` which maintains a per-session JSONL file in `/tmp/llm-security-session-${ppid}.jsonl` (auto-cleaned after 24h), `post-mcp-verify.mjs` which tracks per-MCP-tool volume in `/tmp/llm-security-mcp-volume-${ppid}.json`, `mcp-description-cache.mjs` which caches MCP tool descriptions in `~/.cache/llm-security/mcp-descriptions.json` (7-day TTL), `update-check.mjs` which caches version info in `~/.cache/llm-security/update-check.json` (24h TTL), `dashboard-aggregator.mjs` which caches dashboard results in `~/.cache/llm-security/dashboard-latest.json` (24h staleness), `reports/baselines/*.json` for scan diff baselines, `reports/watch/latest.json` for cron scan results (overwritten on each run), and `reports/skill-registry.json` for the skill signature registry (grows as skills are scanned). All scan outputs fresh per invocation.
## Defense Philosophy (v5.0)
Prompt injection is **structurally unsolvable** with current architectures (joint paper, 14 researchers, 95-100% ASR against all 12 tested defenses). v5.0 does not claim to "prevent" injection. Instead, it implements **defense-in-depth**:
- **Broader detection** — MEDIUM advisory for obfuscation signals (leetspeak, homoglyphs, zero-width, multi-language), Unicode Tag steganography, bash expansion evasion
- **Increased attack cost** — Rule of Two detection (configurable block/warn/off for lethal trifecta; default `warn`, blocks on high-confidence trifectas in opt-in `block` mode; distributed trifectas across MCP servers are detected but not blocked by default), bash normalization before gate matching
- **Longer monitoring windows** — 100-call long-horizon alongside 20-call sliding window, slow-burn trifecta detection, behavioral drift via Jensen-Shannon divergence
- **Architectural constraints** — opportunistic byte-matching of truncated output fingerprints (first 200 bytes, SHA-256/16-hex tag; not semantic lineage; trivially bypassed by mutation or summarisation of tool output), sub-agent delegation tracking, HITL trap detection. Inspired by CaMeL (DeepMind, 2025), but this is a lightweight byte-fingerprint, not semantic capability tracking
- **Honest documentation** — Known Limitations section acknowledges what deterministic hooks cannot detect
**Bash evasion layers (T1-T6):** `bash-normalize.mjs` collapses six known obfuscation techniques before gate matching as a defense-in-depth layer. T1 empty quotes (`rm''-rf`), T2 `${}` parameter expansion, T3 backslash continuation, T4 tab/whitespace splitting, T5 `${IFS}` word-splitting, T6 ANSI-C hex quoting (`$'\x72\x6d'`). These layers complement — not replace — Claude Code 2.1.98+ harness-level protections. Full reference: `docs/security-hardening-guide.md`.
**Opus 4.7 system card alignment:**
- System card §5.2.1 (agentic safety evaluations) documents that multi-layer defenses outperform single-layer defenses against adaptive attacks. This plugin's posture (prompt-scan + pathguard + trifecta-guard + pre-compact-scan operating in depth) matches that guidance.
- System card §6.3.1.1 (instruction following and hierarchy) documents that Opus 4.7 interprets agent instructions more literally. Stacked imperatives (e.g., "MUST NOT do X") are therefore less useful than tool-level enforcement via `tools:` frontmatter. Agent files in this plugin have been updated accordingly.
- See `docs/security-hardening-guide.md` §5 for the full mapping.
**What v5.0 cannot do:**
- Prevent adaptive attacks from motivated human red-teamers (100% ASR per joint paper)
- Fix CLAUDE.md loading before hooks (platform limitation)
- Detect novel NL indirection without ML
- Prevent long-horizon attacks without detectable patterns
- Provide formal worst-case guarantees
## Security Boundaries ## Security Boundaries

View file

@ -6,7 +6,7 @@
*AI-generated: all code produced by Claude Code through dialog-driven development. [Full disclosure →](../../README.md#ai-generated-code-disclosure)* *AI-generated: all code produced by Claude Code through dialog-driven development. [Full disclosure →](../../README.md#ai-generated-code-disclosure)*
![Version](https://img.shields.io/badge/version-7.7.1-blue) ![Version](https://img.shields.io/badge/version-7.6.1-blue)
![Platform](https://img.shields.io/badge/platform-Claude_Code_Plugin-purple) ![Platform](https://img.shields.io/badge/platform-Claude_Code_Plugin-purple)
![Commands](https://img.shields.io/badge/commands-20-orange) ![Commands](https://img.shields.io/badge/commands-20-orange)
![Agents](https://img.shields.io/badge/agents-6-orange) ![Agents](https://img.shields.io/badge/agents-6-orange)
@ -626,8 +626,6 @@ demonstrations — each with `README.md`, fixture, run script, and
| Version | Date | Highlights | | Version | Date | Highlights |
|---------|------|------------| |---------|------|------------|
| **7.7.1** | 2026-05-18 | **Playground UX-strip.** Operatør-feedback umiddelbart etter v7.7.0: hjem-overflaten ledet med tre prosjekt-tracks (Re-onboard / Nytt prosjekt / Command-katalog) selv om katalog var det viktige. Minimum-strip levert som tre atomic commits (`b732eee` + `2a6f73f` + `81b7beb`): (1) router tvinger alltid `activeSurface = 'catalog'` (onboarding/home/project-render-funksjonene bevart men ikke rutbare); (2) topbar `Hjem` + `Re-onboard`-knapper fjernet, `Katalog` beholdt; (3) breadcrumb-orgname (`shared.organization.name` fra demo-state) erstattet med statisk `llm-security` som nøytralt scope-anker. Fix: hardkodet `'Plugin v7.6.1'` på linje 6933 i `renderHome` (template-litteral som v7.7.0-grep-en ikke fanget) synket. Onboarding-konseptet dokumentert som v7.8.0-kandidat (per-kommando kontekst-injeksjon) i `ROADMAP.md`. Ingen scanner- eller hook-atferdsendringer. |
| **7.7.0** | 2026-05-18 | **HTML-rapport for alle 18 skill-kommandoer.** Hver `/security <cmd>` som produserer rapport printer nå en klikkbar `file://`-lenke til en self-contained HTML-versjon. Levert over 5 sesjoner. (1) Playground katalog list-view + builder-pane med copy-knapp. (2) Playground prosjekt-surface opprydding (stub-screen-håndtering, topbar-splitt). (3) De 18 inline parserne + rendererne i playground-HTML flyttet til canonical ESM-modul `scripts/lib/report-renderers.mjs` (playground beholder bit-identisk inline-kopi siden ESM `import` ikke fungerer fra `file://`). (4) Ny zero-dep CLI `scripts/render-report.mjs` — stdin/file/stdout-modus, kebab→camel commandId-routing, inliner 6 DS-stylesheets + lokal `.report-table`-CSS, ~140 KB self-contained HTML, system-font-fallback, absolutte `file://`-paths for Ghostty cmd-click. (5) Alle 18 skills wired (4 i sesjon 4: scan/audit/posture/deep-scan, 14 i sesjon 5: plugin-audit/mcp-audit/mcp-inspect/ide-scan/supply-check/dashboard/pre-deploy/diff/watch/registry/clean/harden/threat-model/red-team). Output: `reports/<command>-<YYYYMMDD-HHmmss>.html` relativt til CWD. Ingen scanner- eller hook-atferdsendringer — purely additive. |
| **7.6.1** | 2026-05-06 | **Playground v7.6.0 visuell-patch.** Seks bugs fanget under maintainer-verifisering i nettleser. Alle skyldtes mismatch mellom DS-klasser og rendrer-bruk (eller manglende DS-implementasjoner playground antok eksisterte). (1) `renderFindingsBlock` brukte `.findings` outer som er DS' 2-kolonners list+detail-grid → erstattet med `<section class="report-meta">` + korrekt `findings__list > findings__group`-mønster. (2) `.report-table` manglet helt i DS men brukes i 7+ rendrere → lokal CSS-implementasjon i playground-HTML. (3) `renderPreDeploy` traffic-lights brukte `.sm-card__grade` (28×28 px for én A-F-bokstav) for "PASS"/"PASS-WITH-NOTES"/"FAIL" → erstattet med bredde-tilpasset status-pill. (4) Threat-model matrix-bobler ikke klikkbare → `<button>` med `data-threat-id` + click-handler som scroller til Trusler-tabellen. (5) Radar-labels overlappet ved 6+ akser → SVG 280→380, R 105→125, dynamisk `text-anchor` (start/end/middle) basert på horisontal-posisjon. (6) `recommendation-card__body` overflow på lange tekster → `overflow-wrap: anywhere`. 4/4 fix-spesifikke smoke-tester + 18/18 renderer-regresjon passerer. Ingen scanner- eller hook-atferdsendringer — purely additive surface. | | **7.6.1** | 2026-05-06 | **Playground v7.6.0 visuell-patch.** Seks bugs fanget under maintainer-verifisering i nettleser. Alle skyldtes mismatch mellom DS-klasser og rendrer-bruk (eller manglende DS-implementasjoner playground antok eksisterte). (1) `renderFindingsBlock` brukte `.findings` outer som er DS' 2-kolonners list+detail-grid → erstattet med `<section class="report-meta">` + korrekt `findings__list > findings__group`-mønster. (2) `.report-table` manglet helt i DS men brukes i 7+ rendrere → lokal CSS-implementasjon i playground-HTML. (3) `renderPreDeploy` traffic-lights brukte `.sm-card__grade` (28×28 px for én A-F-bokstav) for "PASS"/"PASS-WITH-NOTES"/"FAIL" → erstattet med bredde-tilpasset status-pill. (4) Threat-model matrix-bobler ikke klikkbare → `<button>` med `data-threat-id` + click-handler som scroller til Trusler-tabellen. (5) Radar-labels overlappet ved 6+ akser → SVG 280→380, R 105→125, dynamisk `text-anchor` (start/end/middle) basert på horisontal-posisjon. (6) `recommendation-card__body` overflow på lange tekster → `overflow-wrap: anywhere`. 4/4 fix-spesifikke smoke-tester + 18/18 renderer-regresjon passerer. Ingen scanner- eller hook-atferdsendringer — purely additive surface. |
| **7.6.0** | 2026-05-06 | **Playground Tier 3-referanse-case.** Playground (`playground/llm-security-playground.html`) hevet til visuelt og strukturelt fullført referanse for `shared/playground-design-system/` Tier 3-supplementet. 8 nye DS-komponenter integrert i de 18 rapport-rendererne: `tfa-flow` + `tfa-leg` + `tfa-arrow` (lethal trifecta-kjede med `<button>`-elementer + ARIA), `mat-ladder` + `mat-step` (5-trinns modenhets-stige med terskler 0/25/50/75/95% PASS), `suppressed-group` (narrative-audit fra `summary.narrative_audit.suppressed_findings`), `codepoint-reveal` + `cp-tag`/`cp-zw`/`cp-bidi` (Unicode-steganografi side-ved-side), `top-risks` + `top-risk[data-severity]` (rangert top-funn-listing, semantisk `<ol>`), `recommendation-card[data-severity]` (severity-tinted advisory på `clean`/`harden`/`audit`/`posture`/`pre-deploy`/`plugin-audit`), `risk-meter` (band-visualisering 0-100 på 5 archetypes), `card--severity-{level}` (severity-color modifier på findings-cards). Wave 1: `badge--scope-security` (identitets-chip), `verdict-pill-lg` (DS Tier 3-pill), `form-progress` + `fp-step` (onboarding-wizard). Slettet ~30 duplikat-CSS-deklarasjoner (DS vinner cascade). 5 nye DS-helpers + `mapSeverityToCardLevel` + `parseNarrativeAudit`. Filendring 10209 → 10677 linjer. Levert over 5 sesjoner, atomic commits. A11Y-rapport oppdatert. Ingen scanner- eller hook-behavior-changes — purely additive surface. | | **7.6.0** | 2026-05-06 | **Playground Tier 3-referanse-case.** Playground (`playground/llm-security-playground.html`) hevet til visuelt og strukturelt fullført referanse for `shared/playground-design-system/` Tier 3-supplementet. 8 nye DS-komponenter integrert i de 18 rapport-rendererne: `tfa-flow` + `tfa-leg` + `tfa-arrow` (lethal trifecta-kjede med `<button>`-elementer + ARIA), `mat-ladder` + `mat-step` (5-trinns modenhets-stige med terskler 0/25/50/75/95% PASS), `suppressed-group` (narrative-audit fra `summary.narrative_audit.suppressed_findings`), `codepoint-reveal` + `cp-tag`/`cp-zw`/`cp-bidi` (Unicode-steganografi side-ved-side), `top-risks` + `top-risk[data-severity]` (rangert top-funn-listing, semantisk `<ol>`), `recommendation-card[data-severity]` (severity-tinted advisory på `clean`/`harden`/`audit`/`posture`/`pre-deploy`/`plugin-audit`), `risk-meter` (band-visualisering 0-100 på 5 archetypes), `card--severity-{level}` (severity-color modifier på findings-cards). Wave 1: `badge--scope-security` (identitets-chip), `verdict-pill-lg` (DS Tier 3-pill), `form-progress` + `fp-step` (onboarding-wizard). Slettet ~30 duplikat-CSS-deklarasjoner (DS vinner cascade). 5 nye DS-helpers + `mapSeverityToCardLevel` + `parseNarrativeAudit`. Filendring 10209 → 10677 linjer. Levert over 5 sesjoner, atomic commits. A11Y-rapport oppdatert. Ingen scanner- eller hook-behavior-changes — purely additive surface. |
| **7.5.0** | 2026-05-05 | **Playground.** Single-file SPA at `playground/llm-security-playground.html` (~10 200 lines) for onboarding, demoer og workshop-bruk uten Claude Code-installasjon. Parsere + renderere for alle 18 `produces_report=true`-kommandoer (Fase 2: 10 høy-prio + Fase 3: 8 gjenstående: mcp-inspect, supply-check, pre-deploy, diff, watch, registry, clean, threat-model). 18 markdown test-fixtures under `playground/test-fixtures/` som kontrakt-anker. Komplett demo-prosjekt `dft-komplett-demo` har alle 18 rapporter ferdig parsed inline. Vendor-synket design-system under `playground/vendor/` (sjekksum-låst). 9 Playwright-genererte screenshots i `playground/screenshots/v7.5.0/`. 11 nye `window`-globaler for testing/automasjon. 2 nye `KEY_STATS_CONFIG`-archetypes (`kanban-buckets`, `matrix-risk`). Bug-fix: `normalizeVerdictText` regex-rekkefølge oppdatert så GO-WITH-CONDITIONS / CONDITIONAL / BETINGET ikke lenger kollapser til ALLOW. Ingen scanner- eller hook-behavior-changes — purely additive surface. | | **7.5.0** | 2026-05-05 | **Playground.** Single-file SPA at `playground/llm-security-playground.html` (~10 200 lines) for onboarding, demoer og workshop-bruk uten Claude Code-installasjon. Parsere + renderere for alle 18 `produces_report=true`-kommandoer (Fase 2: 10 høy-prio + Fase 3: 8 gjenstående: mcp-inspect, supply-check, pre-deploy, diff, watch, registry, clean, threat-model). 18 markdown test-fixtures under `playground/test-fixtures/` som kontrakt-anker. Komplett demo-prosjekt `dft-komplett-demo` har alle 18 rapporter ferdig parsed inline. Vendor-synket design-system under `playground/vendor/` (sjekksum-låst). 9 Playwright-genererte screenshots i `playground/screenshots/v7.5.0/`. 11 nye `window`-globaler for testing/automasjon. 2 nye `KEY_STATS_CONFIG`-archetypes (`kanban-buckets`, `matrix-risk`). Bug-fix: `normalizeVerdictText` regex-rekkefølge oppdatert så GO-WITH-CONDITIONS / CONDITIONAL / BETINGET ikke lenger kollapser til ALLOW. Ingen scanner- eller hook-behavior-changes — purely additive surface. |

View file

@ -48,23 +48,3 @@ Recalculate `risk_score = riskScore(counts)` (severity-dominated v2 model — se
Output: Risk Dashboard, Executive Summary, 10 Category Sections (use scanner evidence + agent narrative), Summary Table, Action Items (IMMEDIATE → HIGH → MEDIUM). Output: Risk Dashboard, Executive Summary, 10 Category Sections (use scanner evidence + agent narrative), Summary Table, Action Items (IMMEDIATE → HIGH → MEDIUM).
Close with top 2-3 action items. If grade C or lower: suggest `/security threat-model`. Close with top 2-3 action items. If grade C or lower: suggest `/security threat-model`.
## Step 6: HTML Report
After producing the markdown audit report above:
1. Compute a temp markdown path:
```bash
node -p "require('path').join(require('os').tmpdir(), 'sec-audit-' + Date.now() + '.md')"
```
2. Use the Write tool to save the **entire markdown report you just produced** (Risk Dashboard + Executive Summary + Category Sections + Summary Table + Action Items) to that temp path. Verbatim.
3. Run the renderer:
```bash
node <plugin-root>/scripts/render-report.mjs audit --in "<temp-md-path>"
```
The CLI writes `reports/audit-<YYYYMMDD-HHmmss>.html` relative to CWD and prints `file:///abs/path.html` on stdout.
4. Append to your response (markdown link, no bare URL):
> **HTML-rapport:** [Åpne i nettleser](file:///abs/path.html)
If the CLI exits non-zero, mention the error but do not block — the markdown audit above is the primary deliverable.

View file

@ -59,23 +59,3 @@ Validate modified files (JSON parse, frontmatter, `node --check`). Restore from
Output: Pre/post comparison, all fix summaries, remaining manual findings, rollback instructions. Output: Pre/post comparison, all fix summaries, remaining manual findings, rollback instructions.
- Dry-run: show "DRY-RUN" mode, list proposed changes without applying. - Dry-run: show "DRY-RUN" mode, list proposed changes without applying.
## Step 8: HTML Report
After producing the markdown clean report above:
1. Compute a temp markdown path:
```bash
node -p "require('path').join(require('os').tmpdir(), 'sec-clean-' + Date.now() + '.md')"
```
2. Use the Write tool to save the **entire markdown report you just produced** (pre/post comparison + applied/skipped/failed fix summaries + remaining manual findings + backup/rollback path) to that temp path. Verbatim.
3. Run the renderer:
```bash
node <plugin-root>/scripts/render-report.mjs clean --in "<temp-md-path>"
```
The CLI writes `reports/clean-<YYYYMMDD-HHmmss>.html` relative to CWD and prints `file:///abs/path.html` on stdout.
4. Append to your response (markdown link, no bare URL):
> **HTML-rapport:** [Åpne i nettleser](file:///abs/path.html)
If the CLI exits non-zero, mention the error but do not block — the markdown report above is the primary deliverable.

View file

@ -59,23 +59,3 @@ Sort the project table by grade (F first, A last), then by risk score descending
- If machine grade is C: "Some projects need attention. Run `/security posture` in the worst-graded project." - If machine grade is C: "Some projects need attention. Run `/security posture` in the worst-graded project."
- If machine grade is D/F: "Significant exposure. Run `/security audit` in projects graded D/F." - If machine grade is D/F: "Significant exposure. Run `/security audit` in projects graded D/F."
- If from_cache: "Results cached. Run `/security dashboard --fresh` for a live scan." - If from_cache: "Results cached. Run `/security dashboard --fresh` for a live scan."
## Step 4: HTML Report
After producing the markdown dashboard above:
1. Compute a temp markdown path:
```bash
node -p "require('path').join(require('os').tmpdir(), 'sec-dashboard-' + Date.now() + '.md')"
```
2. Use the Write tool to save the **entire markdown dashboard you just produced** (header table with Machine Grade + Project Overview table + Errors + Recommendations) to that temp path. Verbatim.
3. Run the renderer:
```bash
node <plugin-root>/scripts/render-report.mjs dashboard --in "<temp-md-path>"
```
The CLI writes `reports/dashboard-<YYYYMMDD-HHmmss>.html` relative to CWD and prints `file:///abs/path.html` on stdout.
4. Append to your response (markdown link, no bare URL):
> **HTML-rapport:** [Åpne i nettleser](file:///abs/path.html)
If the CLI exits non-zero, mention the error but do not block — the markdown dashboard above is the primary deliverable.

View file

@ -40,23 +40,3 @@ Spawn `subagent_type: "llm-security:deep-scan-synthesizer-agent"`, `model: "sonn
> Produce complete report with actionable insights. Don't pad. > Produce complete report with actionable insights. Don't pad.
Output the synthesizer's report. If it fails, show banner + CRITICAL/HIGH findings from JSON. Output the synthesizer's report. If it fails, show banner + CRITICAL/HIGH findings from JSON.
## Step 5: HTML Report
After producing the markdown deep-scan report (banner + synthesizer output or fallback):
1. Compute a temp markdown path:
```bash
node -p "require('path').join(require('os').tmpdir(), 'sec-deepscan-' + Date.now() + '.md')"
```
2. Use the Write tool to save the **entire markdown report you just produced** (banner + synthesizer narrative + scanner sections + findings) to that temp path. Verbatim.
3. Run the renderer:
```bash
node <plugin-root>/scripts/render-report.mjs deep-scan --in "<temp-md-path>"
```
The CLI writes `reports/deep-scan-<YYYYMMDD-HHmmss>.html` relative to CWD and prints `file:///abs/path.html` on stdout.
4. Append to your response (markdown link, no bare URL):
> **HTML-rapport:** [Åpne i nettleser](file:///abs/path.html)
If the CLI exits non-zero, mention the error but do not block — the markdown report above is the primary deliverable.

View file

@ -96,23 +96,3 @@ Omit Unchanged findings from the output — they add noise. Mention count in sum
- If resolved > new: "**Improving:** more findings resolved than introduced." - If resolved > new: "**Improving:** more findings resolved than introduced."
- If new > 0 and resolved == 0: "**Regression:** X new findings, none resolved." - If new > 0 and resolved == 0: "**Regression:** X new findings, none resolved."
- If new == 0 and resolved == 0: "**Stable:** no changes since baseline." - If new == 0 and resolved == 0: "**Stable:** no changes since baseline."
## Step 5: HTML Report
After producing the markdown diff report above:
1. Compute a temp markdown path:
```bash
node -p "require('path').join(require('os').tmpdir(), 'sec-diff-' + Date.now() + '.md')"
```
2. Use the Write tool to save the **entire markdown report you just produced** (banner with baseline+current timestamps + Summary table + New + Resolved + Moved sections + Advisory) to that temp path. Verbatim.
3. Run the renderer:
```bash
node <plugin-root>/scripts/render-report.mjs diff --in "<temp-md-path>"
```
The CLI writes `reports/diff-<YYYYMMDD-HHmmss>.html` relative to CWD and prints `file:///abs/path.html` on stdout.
4. Append to your response (markdown link, no bare URL):
> **HTML-rapport:** [Åpne i nettleser](file:///abs/path.html)
If the CLI exits non-zero, mention the error but do not block — the markdown report above is the primary deliverable.

View file

@ -70,23 +70,3 @@ If Grade A not achieved, explain remaining gaps (likely hook-related, which requ
- Grade A: "Configuration hardened. All posture checks pass." - Grade A: "Configuration hardened. All posture checks pass."
- Below A: "Configuration improved. Remaining gaps require [hooks/manual setup]. Run `/security posture` for details." - Below A: "Configuration improved. Remaining gaps require [hooks/manual setup]. Run `/security posture` for details."
## Step 6: HTML Report
After producing the markdown harden report above:
1. Compute a temp markdown path:
```bash
node -p "require('path').join(require('os').tmpdir(), 'sec-harden-' + Date.now() + '.md')"
```
2. Use the Write tool to save the **entire markdown report you just produced** (Security Harden header + project metadata + Recommendations + Apply summary + post-apply grade + closing) to that temp path. Verbatim.
3. Run the renderer:
```bash
node <plugin-root>/scripts/render-report.mjs harden --in "<temp-md-path>"
```
The CLI writes `reports/harden-<YYYYMMDD-HHmmss>.html` relative to CWD and prints `file:///abs/path.html` on stdout.
4. Append to your response (markdown link, no bare URL):
> **HTML-rapport:** [Åpne i nettleser](file:///abs/path.html)
If the CLI exits non-zero, mention the error but do not block — the markdown report above is the primary deliverable.

View file

@ -104,23 +104,3 @@ If the user has many sideloaded (`source=vsix`) extensions: suggest re-installin
- First run with no `--online` is fully offline. - First run with no `--online` is fully offline.
- Pass a single extracted extension directory to scan just one extension. - Pass a single extracted extension directory to scan just one extension.
- JetBrains plugins are additionally checked for `Premain-Class` javaagents, `application-components` lifecycle hooks, native binaries (`.so`/`.dylib`/`.dll`/`.jnilib`), long `<depends>` chains, typosquats vs top JetBrains plugins, and shaded-jar advisories (see `knowledge/ide-extension-threat-patterns.md`). - JetBrains plugins are additionally checked for `Premain-Class` javaagents, `application-components` lifecycle hooks, native binaries (`.so`/`.dylib`/`.dll`/`.jnilib`), long `<depends>` chains, typosquats vs top JetBrains plugins, and shaded-jar advisories (see `knowledge/ide-extension-threat-patterns.md`).
## Step 4: HTML Report
After producing the markdown IDE-scan report above:
1. Compute a temp markdown path:
```bash
node -p "require('path').join(require('os').tmpdir(), 'sec-ide-scan-' + Date.now() + '.md')"
```
2. Use the Write tool to save the **entire markdown report you just produced** (scanner header table + counts + Per-Extension Results table + Top Findings + Warnings + Recommendations + Notes) to that temp path. Verbatim.
3. Run the renderer:
```bash
node <plugin-root>/scripts/render-report.mjs ide-scan --in "<temp-md-path>"
```
The CLI writes `reports/ide-scan-<YYYYMMDD-HHmmss>.html` relative to CWD and prints `file:///abs/path.html` on stdout.
4. Append to your response (markdown link, no bare URL):
> **HTML-rapport:** [Åpne i nettleser](file:///abs/path.html)
If the CLI exits non-zero, mention the error but do not block — the markdown report above is the primary deliverable.

View file

@ -45,23 +45,3 @@ Parse JSON output. Append a **Live Inspection Results** section:
- Tool shadowing across servers - Tool shadowing across servers
**Cross-reference escalation:** If a server was rated "Untrusted" or "Dangerous" in Step 2 AND has live injection findings → escalate to CRITICAL priority in the final report and highlight as "Confirmed active threat (static + live)". **Cross-reference escalation:** If a server was rated "Untrusted" or "Dangerous" in Step 2 AND has live injection findings → escalate to CRITICAL priority in the final report and highlight as "Confirmed active threat (static + live)".
## Step 5: HTML Report
After producing the markdown MCP audit report (Step 3 + optional Step 4 Live Inspection):
1. Compute a temp markdown path:
```bash
node -p "require('path').join(require('os').tmpdir(), 'sec-mcp-audit-' + Date.now() + '.md')"
```
2. Use the Write tool to save the **entire markdown report you just produced** (MCP Landscape Summary + per-server analysis + Live Inspection Results section if `--live` + Keep/Review/Remove groupings + overall risk) to that temp path. Verbatim.
3. Run the renderer:
```bash
node <plugin-root>/scripts/render-report.mjs mcp-audit --in "<temp-md-path>"
```
The CLI writes `reports/mcp-audit-<YYYYMMDD-HHmmss>.html` relative to CWD and prints `file:///abs/path.html` on stdout.
4. Append to your response (markdown link, no bare URL):
> **HTML-rapport:** [Åpne i nettleser](file:///abs/path.html)
If the CLI exits non-zero, mention the error but do not block — the markdown report above is the primary deliverable.

View file

@ -52,23 +52,3 @@ If zero findings: "No injection, shadowing, or drift detected across N servers."
## Step 4: Combined Use ## Step 4: Combined Use
Mention: "For combined static + live analysis, use `/security mcp-audit --live`." Mention: "For combined static + live analysis, use `/security mcp-audit --live`."
## Step 5: HTML Report
After producing the markdown live-inspection report above:
1. Compute a temp markdown path:
```bash
node -p "require('path').join(require('os').tmpdir(), 'sec-mcp-inspect-' + Date.now() + '.md')"
```
2. Use the Write tool to save the **entire markdown report you just produced** (Live Inspection banner + Server Details table + Findings table + Advisory) to that temp path. Verbatim.
3. Run the renderer:
```bash
node <plugin-root>/scripts/render-report.mjs mcp-inspect --in "<temp-md-path>"
```
The CLI writes `reports/mcp-inspect-<YYYYMMDD-HHmmss>.html` relative to CWD and prints `file:///abs/path.html` on stdout.
4. Append to your response (markdown link, no bare URL):
> **HTML-rapport:** [Åpne i nettleser](file:///abs/path.html)
If the CLI exits non-zero, mention the error but do not block — the markdown report above is the primary deliverable.

View file

@ -72,23 +72,3 @@ If `clone_path != null`:
If `evidence_file != null`: If `evidence_file != null`:
Run: `node <plugin-root>/scanners/lib/fs-utils.mjs cleanup "<evidence_file>"` Run: `node <plugin-root>/scanners/lib/fs-utils.mjs cleanup "<evidence_file>"`
## Step 7: HTML Report
After producing the markdown plugin-audit report (Step 5) and any cleanup (Step 6):
1. Compute a temp markdown path:
```bash
node -p "require('path').join(require('os').tmpdir(), 'sec-plugin-audit-' + Date.now() + '.md')"
```
2. Use the Write tool to save the **entire markdown report you just produced** (plugin metadata + component inventory + permission matrix + hook analysis + security findings + trust verdict) to that temp path. Verbatim.
3. Run the renderer:
```bash
node <plugin-root>/scripts/render-report.mjs plugin-audit --in "<temp-md-path>"
```
The CLI writes `reports/plugin-audit-<YYYYMMDD-HHmmss>.html` relative to CWD and prints `file:///abs/path.html` on stdout.
4. Append to your response (markdown link, no bare URL):
> **HTML-rapport:** [Åpne i nettleser](file:///abs/path.html)
If the CLI exits non-zero, mention the error but do not block — the markdown report above is the primary deliverable.

View file

@ -58,23 +58,3 @@ Present the results as a scorecard:
- Grade A/B: "Posture solid. Re-run after major changes." - Grade A/B: "Posture solid. Re-run after major changes."
- Grade C: "Run `/security audit` for detailed findings." - Grade C: "Run `/security audit` for detailed findings."
- Grade D/F: "Significant exposure. Run `/security audit` before production use." - Grade D/F: "Significant exposure. Run `/security audit` before production use."
## Step 4: HTML Report
After producing the markdown scorecard above:
1. Compute a temp markdown path:
```bash
node -p "require('path').join(require('os').tmpdir(), 'sec-posture-' + Date.now() + '.md')"
```
2. Use the Write tool to save the **entire markdown scorecard you just produced** (header + Category Scorecard table + Top Findings + Quick Wins + closing) to that temp path. Verbatim.
3. Run the renderer:
```bash
node <plugin-root>/scripts/render-report.mjs posture --in "<temp-md-path>"
```
The CLI writes `reports/posture-<YYYYMMDD-HHmmss>.html` relative to CWD and prints `file:///abs/path.html` on stdout.
4. Append to your response (markdown link, no bare URL):
> **HTML-rapport:** [Åpne i nettleser](file:///abs/path.html)
If the CLI exits non-zero, mention the error but do not block — the markdown scorecard above is the primary deliverable.

View file

@ -99,23 +99,3 @@ Map the pass count to a risk band and verdict:
| 0-3/10 | Extreme | Critical risk — deployment blocked until fundamental controls are in place. | | 0-3/10 | Extreme | Critical risk — deployment blocked until fundamental controls are in place. |
State the verdict and risk band clearly at the end of the report. State the verdict and risk band clearly at the end of the report.
## HTML Report
After producing the markdown pre-deploy checklist + verdict above:
1. Compute a temp markdown path:
```bash
node -p "require('path').join(require('os').tmpdir(), 'sec-pre-deploy-' + Date.now() + '.md')"
```
2. Use the Write tool to save the **entire markdown report you just produced** (10-row checklist table + Manual Verification + Recommendations + Verdict + risk band) to that temp path. Verbatim.
3. Run the renderer:
```bash
node <plugin-root>/scripts/render-report.mjs pre-deploy --in "<temp-md-path>"
```
The CLI writes `reports/pre-deploy-<YYYYMMDD-HHmmss>.html` relative to CWD and prints `file:///abs/path.html` on stdout.
4. Append to your response (markdown link, no bare URL):
> **HTML-rapport:** [Åpne i nettleser](file:///abs/path.html)
If the CLI exits non-zero, mention the error but do not block — the markdown checklist above is the primary deliverable.

View file

@ -93,23 +93,3 @@ In adaptive mode, also explain:
- No network calls, no file modifications, no LLM invocations - No network calls, no file modifications, no LLM invocations
- Safe to run repeatedly — all state is cleaned up after each run - Safe to run repeatedly — all state is cleaned up after each run
- Adaptive mode bypasses are **expected** — they document evasion resistance limits - Adaptive mode bypasses are **expected** — they document evasion resistance limits
## HTML Report
After producing the markdown red-team narrative report above:
1. Compute a temp markdown path:
```bash
node -p "require('path').join(require('os').tmpdir(), 'sec-red-team-' + Date.now() + '.md')"
```
2. Use the Write tool to save the **entire markdown report you just produced** (per-category narrative + scenario pass/fail + defense score + adaptive-mode bypasses if `--adaptive`) to that temp path. Verbatim.
3. Run the renderer:
```bash
node <plugin-root>/scripts/render-report.mjs red-team --in "<temp-md-path>"
```
The CLI writes `reports/red-team-<YYYYMMDD-HHmmss>.html` relative to CWD and prints `file:///abs/path.html` on stdout.
4. Append to your response (markdown link, no bare URL):
> **HTML-rapport:** [Åpne i nettleser](file:///abs/path.html)
If the CLI exits non-zero, mention the error but do not block — the markdown report above is the primary deliverable.

View file

@ -119,23 +119,3 @@ Display results table:
``` ```
If no matches: "No entries matching '<pattern>'." If no matches: "No entries matching '<pattern>'."
## Step 3: HTML Report
After producing the markdown registry output above (stats / scan-result / search-result, whichever sub-command ran):
1. Compute a temp markdown path:
```bash
node -p "require('path').join(require('os').tmpdir(), 'sec-registry-' + Date.now() + '.md')"
```
2. Use the Write tool to save the **entire markdown output you just produced** (Skill Signature Registry header + metric table + Recent Entries, OR Registry Hit banner, OR Registry Search results) to that temp path. Verbatim.
3. Run the renderer:
```bash
node <plugin-root>/scripts/render-report.mjs registry --in "<temp-md-path>"
```
The CLI writes `reports/registry-<YYYYMMDD-HHmmss>.html` relative to CWD and prints `file:///abs/path.html` on stdout.
4. Append to your response (markdown link, no bare URL):
> **HTML-rapport:** [Åpne i nettleser](file:///abs/path.html)
If the CLI exits non-zero, mention the error but do not block — the markdown output above is the primary deliverable.

View file

@ -155,23 +155,3 @@ If `clone_path != null`:
If `evidence_file != null`: If `evidence_file != null`:
Run: `node <plugin-root>/scanners/lib/fs-utils.mjs cleanup "<evidence_file>"` Run: `node <plugin-root>/scanners/lib/fs-utils.mjs cleanup "<evidence_file>"`
## Step 8: HTML Report
After producing the markdown report (Step 5) and any cleanup (Step 7):
1. Compute a temp markdown path:
```bash
node -p "require('path').join(require('os').tmpdir(), 'sec-scan-' + Date.now() + '.md')"
```
2. Use the Write tool to save the **entire markdown report you just produced** (banner + all findings sections + any Deep Scan section) to that temp path. Do not summarize — write it verbatim.
3. Run the renderer:
```bash
node <plugin-root>/scripts/render-report.mjs scan --in "<temp-md-path>"
```
The CLI writes `reports/scan-<YYYYMMDD-HHmmss>.html` relative to CWD and prints `file:///abs/path.html` on stdout (one line).
4. Append this to your response (markdown link, no bare URL):
> **HTML-rapport:** [Åpne i nettleser](file:///abs/path.html)
If the CLI exits non-zero, mention the error but do not block — the markdown report above is the primary deliverable.

View file

@ -45,23 +45,3 @@ For each finding, show:
- Recommendation - Recommendation
Group by severity (CRITICAL first). If zero findings: "No supply chain issues detected in N lockfile(s)." Group by severity (CRITICAL first). If zero findings: "No supply chain issues detected in N lockfile(s)."
## Step 5: HTML Report
After producing the markdown supply-check report above:
1. Compute a temp markdown path:
```bash
node -p "require('path').join(require('os').tmpdir(), 'sec-supply-check-' + Date.now() + '.md')"
```
2. Use the Write tool to save the **entire markdown report you just produced** (banner + lockfile coverage + all findings grouped by severity) to that temp path. Verbatim.
3. Run the renderer:
```bash
node <plugin-root>/scripts/render-report.mjs supply-check --in "<temp-md-path>"
```
The CLI writes `reports/supply-check-<YYYYMMDD-HHmmss>.html` relative to CWD and prints `file:///abs/path.html` on stdout.
4. Append to your response (markdown link, no bare URL):
> **HTML-rapport:** [Åpne i nettleser](file:///abs/path.html)
If the CLI exits non-zero, mention the error but do not block — the markdown report above is the primary deliverable.

View file

@ -25,23 +25,3 @@ Spawn `subagent_type: "llm-security:threat-modeler-agent"`, `model: "opus"`:
- To save: ask user if they want it written to `threat-model.md` - To save: ask user if they want it written to `threat-model.md`
- To verify mitigations: `/security posture` - To verify mitigations: `/security posture`
- For production readiness: `/security pre-deploy` - For production readiness: `/security pre-deploy`
## HTML Report
After the threat-modeler agent has produced the complete threat-model markdown document:
1. Compute a temp markdown path:
```bash
node -p "require('path').join(require('os').tmpdir(), 'sec-threat-model-' + Date.now() + '.md')"
```
2. Use the Write tool to save the **entire threat-model markdown you just produced** (Architecture Discovery + Component Mapping + STRIDE × MAESTRO threat matrix + Risk Assessment + Mitigation Mapping) to that temp path. Verbatim.
3. Run the renderer:
```bash
node <plugin-root>/scripts/render-report.mjs threat-model --in "<temp-md-path>"
```
The CLI writes `reports/threat-model-<YYYYMMDD-HHmmss>.html` relative to CWD and prints `file:///abs/path.html` on stdout.
4. Append to your response (markdown link, no bare URL):
> **HTML-rapport:** [Åpne i nettleser](file:///abs/path.html)
If the CLI exits non-zero, mention the error but do not block — the markdown threat-model document above is the primary deliverable.

View file

@ -56,23 +56,3 @@ To run as a system cron job instead:
To stop watching: Escape or Ctrl+C To stop watching: Escape or Ctrl+C
``` ```
## Step 5: HTML Report
After producing the markdown watch banner above (before starting the loop):
1. Compute a temp markdown path:
```bash
node -p "require('path').join(require('os').tmpdir(), 'sec-watch-' + Date.now() + '.md')"
```
2. Use the Write tool to save the **entire markdown banner you just produced** (Security Watch header + baseline timestamp + findings counts + interval + advisory) to that temp path. Verbatim.
3. Run the renderer:
```bash
node <plugin-root>/scripts/render-report.mjs watch --in "<temp-md-path>"
```
The CLI writes `reports/watch-<YYYYMMDD-HHmmss>.html` relative to CWD and prints `file:///abs/path.html` on stdout.
4. Append to your response (markdown link, no bare URL):
> **HTML-rapport:** [Åpne i nettleser](file:///abs/path.html)
If the CLI exits non-zero, mention the error but do not block — the markdown banner above is the primary deliverable.

View file

@ -1,27 +0,0 @@
# LLM Security — Defense philosophy (v5.0)
Imported from `CLAUDE.md` via `@docs/defense-philosophy.md`.
Prompt injection is **structurally unsolvable** with current architectures (joint paper, 14 researchers, 95-100% ASR against all 12 tested defenses). v5.0 does not claim to "prevent" injection. Instead, it implements **defense-in-depth**:
- **Broader detection** — MEDIUM advisory for obfuscation signals (leetspeak, homoglyphs, zero-width, multi-language), Unicode Tag steganography, bash expansion evasion
- **Increased attack cost** — Rule of Two detection (configurable block/warn/off for lethal trifecta; default `warn`, blocks on high-confidence trifectas in opt-in `block` mode; distributed trifectas across MCP servers are detected but not blocked by default), bash normalization before gate matching
- **Longer monitoring windows** — 100-call long-horizon alongside 20-call sliding window, slow-burn trifecta detection, behavioral drift via Jensen-Shannon divergence
- **Architectural constraints** — opportunistic byte-matching of truncated output fingerprints (first 200 bytes, SHA-256/16-hex tag; not semantic lineage; trivially bypassed by mutation or summarisation of tool output), sub-agent delegation tracking, HITL trap detection. Inspired by CaMeL (DeepMind, 2025), but this is a lightweight byte-fingerprint, not semantic capability tracking
- **Honest documentation** — Known Limitations section acknowledges what deterministic hooks cannot detect
**Bash evasion layers (T1-T6):** `bash-normalize.mjs` collapses six known obfuscation techniques before gate matching as a defense-in-depth layer. T1 empty quotes (`rm''-rf`), T2 `${}` parameter expansion, T3 backslash continuation, T4 tab/whitespace splitting, T5 `${IFS}` word-splitting, T6 ANSI-C hex quoting (`$'\x72\x6d'`). These layers complement — not replace — Claude Code 2.1.98+ harness-level protections. Full reference: `docs/security-hardening-guide.md`.
**Opus 4.7 system card alignment:**
- System card §5.2.1 (agentic safety evaluations) documents that multi-layer defenses outperform single-layer defenses against adaptive attacks. This plugin's posture (prompt-scan + pathguard + trifecta-guard + pre-compact-scan operating in depth) matches that guidance.
- System card §6.3.1.1 (instruction following and hierarchy) documents that Opus 4.7 interprets agent instructions more literally. Stacked imperatives (e.g., "MUST NOT do X") are therefore less useful than tool-level enforcement via `tools:` frontmatter. Agent files in this plugin have been updated accordingly.
- See `docs/security-hardening-guide.md` §5 for the full mapping.
**What v5.0 cannot do:**
- Prevent adaptive attacks from motivated human red-teamers (100% ASR per joint paper)
- Fix CLAUDE.md loading before hooks (platform limitation)
- Detect novel NL indirection without ML
- Prevent long-horizon attacks without detectable patterns
- Provide formal worst-case guarantees

View file

@ -1,122 +0,0 @@
# LLM Security — Scanner reference
Detailed scanner, CLI, CI/CD, knowledge-file and example documentation. Imported from `CLAUDE.md` via `@docs/scanner-reference.md`.
## Scanners
**Orchestrated (10):** Run via `node scanners/scan-orchestrator.mjs <target> [--fail-on <severity>] [--compact] [--output-file <path>] [--baseline] [--save-baseline]`.
`--fail-on <critical|high|medium|low>`: exit 1 if findings at/above severity, exit 0 otherwise. `--compact`: one-liner per finding format. Both configurable via `policy.json` `ci` section.
With `--output-file`: full JSON to file, compact aggregate to stdout. `--baseline` diffs against stored baseline. `--save-baseline` saves results for future diffs. Baselines stored in `reports/baselines/<target-hash>.json`.
10 scanners: unicode, entropy, permission, dep-audit, taint, git-forensics, network, memory-poisoning, supply-chain-recheck, toxic-flow.
Lib: `mcp-description-cache.mjs` — caches MCP tool descriptions in `~/.cache/llm-security/mcp-descriptions.json`, detects per-update drift via Levenshtein (>10% = alert), 7-day TTL. v7.3.0 (E14) adds a sticky baseline slot per tool plus a 10-event rolling history; cumulative drift = `levenshtein(current, baseline) / max(|current|,|baseline|)`. When ratio ≥ `mcp.cumulative_drift_threshold` (default 0.25), emits `mcp-cumulative-drift` advisory through `post-mcp-verify.mjs`. Baseline survives TTL purge so slow-burn drift is preserved across the 7-day window. `clearBaseline(tool?)` exposed for the `/security mcp-baseline-reset` command. `LLM_SECURITY_MCP_CACHE_FILE` env var overrides the cache path for testing.
Supply-chain-recheck (SCR) re-audits installed dependencies from lockfiles (package-lock.json, yarn.lock, requirements.txt, Pipfile.lock) against blocklists, OSV.dev batch API, and typosquat detection. Offline fallback available. Shared data module: `scanners/lib/supply-chain-data.mjs`.
Memory-poisoning (MEM) detects cognitive state poisoning in CLAUDE.md, memory files, and .claude/rules — injection patterns, shell commands, credential paths, permission expansion, suspicious URLs, encoded payloads.
Toxic-flow (TFA) is a post-processing correlator that runs LAST — detects "lethal trifecta" (untrusted input + sensitive data access + exfiltration sink) by correlating output from prior scanners.
Utility: `node scanners/lib/fs-utils.mjs <backup|restore|cleanup|tmppath> [args]`.
Lib: `sarif-formatter.mjs` — converts scan output to OASIS SARIF 2.1.0 format. Used by `--format sarif` flag.
Lib: `audit-trail.mjs` — writes structured JSONL audit events (ISO 8601, OWASP tags, SIEM-ready). Env: `LLM_SECURITY_AUDIT_*`.
Lib: `policy-loader.mjs` — reads `.llm-security/policy.json` for distributable hook configuration. Includes `ci` section (`failOn`, `compact`) for CI/CD defaults. Defaults match hardcoded values.
**Standalone (8):** `posture-scanner.mjs` — deterministic posture assessment, 16 categories (incl. EU AI Act, NIST AI RMF, ISO 42001), <50ms. NOT in scan-orchestrator (meta-level, not code-level).
Run: `node scanners/posture-scanner.mjs [path]` → JSON stdout. Scanner prefix: PST. Used by `/security posture` and `/security audit`.
`mcp-live-inspect.mjs` — NOT in scan-orchestrator. MCP servers are running processes, not files.
Run: `node scanners/mcp-live-inspect.mjs [target] [--timeout 10000] [--skip-global]`
Scanner prefix: MCI. OWASP: MCP03, MCP06, MCP09. Invoked by `mcp-inspect` and `mcp-audit --live`.
`watch-cron.mjs` — standalone cron wrapper. Reads `reports/watch/config.json`, scans all targets, writes `reports/watch/latest.json`. Run: `node scanners/watch-cron.mjs [--config <path>]`
`reference-config-generator.mjs` — generates Grade A reference config based on posture gaps. Detects project type (plugin/monorepo/standalone). Templates in `templates/reference-config/`. Run: `node scanners/reference-config-generator.mjs [path] [--apply]`
`dashboard-aggregator.mjs` — cross-project security dashboard. Discovers Claude Code projects under ~/ (depth 3) and ~/.claude/plugins/, runs posture-scanner on each, aggregates to machine-grade (weakest link). Cache in `~/.cache/llm-security/dashboard-latest.json` (24h staleness). Run: `node scanners/dashboard-aggregator.mjs [--no-cache] [--max-depth N]`
`attack-simulator.mjs` — red-team harness. Data-driven: 64 scenarios in 12 categories from `knowledge/attack-scenarios.json`. Payloads constructed at runtime (fragment assembly to avoid triggering hooks on source). Uses `runHook()` from test helper. Adaptive mode (`--adaptive`): 5 mutation rounds per passing scenario (homoglyph, encoding, zero-width, case alternation, synonym). Mutation rules in `knowledge/attack-mutations.json`. Benchmark mode (`--benchmark`): outputs structured pass/fail metrics. Run: `node scanners/attack-simulator.mjs [--category <name>] [--json] [--verbose] [--adaptive] [--benchmark]`
`ai-bom-generator.mjs` — AI Bill of Materials generator. Discovers AI components (models, MCP servers, plugins, knowledge, hooks) and outputs CycloneDX 1.6 JSON. Scanner prefix: BOM. Run: `node scanners/ai-bom-generator.mjs <target> [--output-file <path>]`
`ide-extension-scanner.mjs` — scans installed VS Code (and forks: Cursor, Windsurf, VSCodium, code-server, Insiders, Remote-SSH) extensions and JetBrains IDE plugins (IntelliJ IDEA, PyCharm, GoLand, WebStorm, RubyMine, PhpStorm, CLion, DataGrip, RustRover, Rider, Aqua, Writerside, Android Studio). Fleet + Toolbox excluded. OS-aware discovery via `lib/ide-extension-discovery.mjs` (`~/.vscode/extensions/` + `~/Library/Application Support/JetBrains/<IDE><version>/plugins/` on macOS, `%APPDATA%\JetBrains\...` on Windows, `~/.config/JetBrains/...` on Linux). Parses VS Code `package.json` via `lib/ide-extension-parser.mjs` and JetBrains `META-INF/plugin.xml` + `META-INF/MANIFEST.MF` (with nested-jar extraction) via `lib/ide-extension-parser-jb.mjs`. 7 VS Code checks: blocklist match, theme-with-code, sideload (vsix), broad activation (`*` / `onStartupFinished`), typosquat (Levenshtein ≤2 vs top-100), extension-pack expansion, dangerous `vscode:uninstall` hooks. 7 JetBrains checks: theme-with-code, broad activation (`application-components`), `Premain-Class` instrumentation (HIGH — javaagent retransform), native binaries (`.so`/`.dylib`/`.dll`/`.jnilib`), long `<depends>` chains, typosquat vs top JetBrains plugins, shaded-jar advisory. Both branches orchestrate reused scanners (UNI/ENT/NET/TNT/MEM/SCR) per extension with bounded concurrency (default 4). Scanner prefix: IDE. OWASP: LLM01, LLM02, LLM03, LLM06, ASI02, ASI04. Offline by default, `--online` opt-in for Marketplace/OSV.dev lookups. Knowledge: `knowledge/top-vscode-extensions.json`, `knowledge/top-jetbrains-plugins.json`, `knowledge/ide-extension-threat-patterns.md`, `knowledge/marketplace-api-notes.md`, `knowledge/jetbrains-marketplace-api-notes.md`.
**v6.4.0 — URL support.** Targets can be Marketplace, OpenVSX, or direct `.vsix` URLs. Pipeline: `lib/vsix-fetch.mjs` (HTTPS-only fetch with 50MB cap, 30s timeout, SHA-256, manual redirect host whitelist) → `lib/zip-extract.mjs` (zero-dep ZIP parser, rejects zip-slip/symlink/absolute/drive-letter/encrypted/ZIP64, caps: 10 000 entries, 500MB uncomp, 100x ratio, depth 20) → existing scan pipeline against extracted `extension/` subdir → temp dir always cleaned in `try/finally`. Envelope.meta.source = `{ type: "url", kind, url, finalUrl, sha256, size, publisher?, name?, version? }`.
**v6.5.0 — OS sandbox.** Fetch + extract for URL targets now spawns `lib/vsix-fetch-worker.mjs` in a sub-process wrapped by `sandbox-exec` (macOS) or `bwrap` (Linux) — same primitives reused from `git-clone.mjs`. Helper: `lib/vsix-sandbox.mjs` exports `buildSandboxProfile`, `buildBwrapArgs`, `buildSandboxedWorker`, `runVsixWorker`. Worker IPC: argv `--url <url> --tmpdir <dir>` → single JSON line on stdout (`{ok, sha256, size, finalUrl, source, extRoot}` or `{ok:false, error, code?}`). Defense-in-depth — if the in-process ZIP parser ever has a bypass, the kernel still refuses writes outside `<tmpdir>`. `scan(target, { useSandbox })` defaults to `true`; tests pass `false` since `globalThis.fetch` mocks do not cross process boundaries. Windows fallback: in-process with `meta.warnings` advisory. Envelope `meta.source.sandbox`: `'sandbox-exec' | 'bwrap' | 'none' | 'in-process'`.
**v6.6.0 — JetBrains Marketplace URL fetch + JetBrains branch.** URL targets can also be `https://plugins.jetbrains.com/plugin/<numericId>-<slug>` (metadata-resolved → xmlId download) or `https://plugins.jetbrains.com/plugin/download?pluginId=<xmlId>&version=<v>` (direct). `lib/vsix-fetch.mjs` gains `detectUrlType` JetBrains kinds, `fetchJetBrainsPlugin`, host allowlist `plugins.jetbrains.com`. `buildSandboxedWorker(dirs, workerPath)` now accepts a custom worker path — `lib/jetbrains-fetch-worker.mjs` reuses the same IPC contract. Envelope `meta.source.kind` can be `'jetbrains-marketplace' | 'jetbrains-download'`. Installed-plugin scan runs JB-specific checks (see scanner bullet above) and shares the UNI/ENT/NET/TNT/MEM/SCR orchestration. `.kt`, `.groovy`, `.scala` added to `taint-tracer` code extensions.
Run: `node scanners/ide-extension-scanner.mjs [target|url] [--vscode-only] [--intellij-only] [--include-builtin] [--online] [--format json|compact] [--fail-on <sev>] [--output-file <path>]`. Invoked by `/security ide-scan`.
## Token Budget (ENFORCED)
All commands total ~600 lines. All commands use registered subagent types.
- Commands are short dispatchers (~30-60 lines) — no inline report templates or format specs
- All agents use registered `subagent_type` — agent instructions are system prompt, never file reads
- Max 1-2 knowledge files per agent invocation (threat-patterns + secrets-patterns)
- OWASP files are NEVER passed by commands — agents reference them from their own system prompt
- Agents run sequentially to avoid burst rate limits
- `pre-install-supply-chain.mjs` queries OSV.dev for CVEs on every package install
## CLI
`bin/llm-security.mjs` — standalone CLI entry point. Works without Claude Code via `npx llm-security` or `node bin/llm-security.mjs`.
Subcommands: `scan`, `deep-scan`, `posture`, `audit-bom`, `benchmark`. Dispatches to scanner scripts via `child_process.spawn`.
`package.json` `bin` field: `"llm-security": "./bin/llm-security.mjs"`. `files` whitelist: only `bin/` + `scanners/` published to npm.
## CI/CD Integration
Pipeline templates in `ci/`: `github-action.yml`, `azure-pipelines.yml`, `gitlab-ci.yml`. Documentation: `docs/ci-cd-guide.md`.
All templates use `--fail-on high --format sarif --output-file results.sarif` with SARIF upload per platform.
Standalone CLI makes zero network calls in default mode. Schrems II compatible in default offline mode. Optional OSV.dev enrichment (`supply-chain-recheck --online`) transmits package identifiers to a Google-operated API and is a separate compliance consideration.
## Knowledge Files (20)
| File | Content |
|------|---------|
| `skill-threat-patterns.md` | 7 threat categories for skill/command scanning |
| `mcp-threat-patterns.md` | 9 MCP threat categories (MCP01-MCP10) |
| `secrets-patterns.md` | Regex patterns for 10+ secret types |
| `owasp-llm-top10.md` | OWASP LLM Top 10 (2025) with Claude Code mappings |
| `owasp-agentic-top10.md` | OWASP Agentic AI Top 10 (ASI01-ASI10) |
| `owasp-skills-top10.md` | OWASP Skills Top 10 (AST01-AST10) — skill-specific threats |
| `mitigation-matrix.md` | Threat-to-control mappings |
| `top-packages.json` | Known package lists for supply chain checks |
| `skill-registry.json` | Seed data for skill signature registry |
| `prompt-injection-research-2025-2026.md` | 7 research papers (2025-2026) with implications for hook defenses |
| `deepmind-agent-traps.md` | DeepMind AI Agent Traps — 6 categories, 43 techniques, coverage matrix |
| `attack-scenarios.json` | 64 red-team scenarios across 12 categories for attack simulation |
| `attack-mutations.json` | Synonym tables and mutation rules for adaptive red-team testing |
| `compliance-mapping.md` | EU AI Act, NIST AI RMF, ISO 42001, MITRE ATLAS mappings to plugin capabilities |
| `norwegian-context.md` | Norwegian regulatory landscape — Datatilsynet, NSM, Digitaliseringsdirektoratet |
| `ide-extension-threat-patterns.md` | 10 IDE-extension detection categories (VS Code + JetBrains) with 2024-2026 case studies |
| `top-vscode-extensions.json` | Top ~100 VS Code Marketplace extension IDs (typosquat seed) + blocklist entries |
| `top-jetbrains-plugins.json` | Top JetBrains plugin IDs (typosquat seed) + blocklist entries (v6.6.0) |
| `marketplace-api-notes.md` | VS Code Marketplace + OpenVSX API endpoints used by `lib/vsix-fetch.mjs` (v6.4.0) |
| `jetbrains-marketplace-api-notes.md` | JetBrains Marketplace API endpoints used by `fetchJetBrainsPlugin` (v6.6.0) |
## Reports
Scan reports are stored in `reports/` as `.docx` (for sharing) with `.md` source.
## Examples (runnable demonstrations)
Self-contained, deterministic threat-fixture mappes under `examples/`. Each mappe har `README.md`, fixture/script/transcript, `run-*.{sh,mjs}`, og `expected-findings.md`. Demonstrasjoner — ikke unit-tester.
| Mappe | Demonstrerer | Hooks/scanners | Sentinel |
|-------|--------------|----------------|----------|
| `malicious-skill-demo/` | Skill scanner end-to-end (UNI/ENT/PRM/DEP/TNT/NET + 7 LLM-kategorier) | `scan-orchestrator` + agents | BLOCK 100/100 |
| `prompt-injection-showcase/` | 61 payloads × 19 kategorier mot `pre-prompt-inject-scan`, `post-mcp-verify`, `pre-bash-destructive` | runtime hooks | per-kategori expected outcome |
| `lethal-trifecta-walkthrough/` | Rule-of-Two advisory på leg 3 (WebFetch → Read .env → Bash curl POST) + suppression | `post-session-guard` | advisory på stage 3 |
| `mcp-rug-pull/` | Cumulative drift-advisory (E14, v7.3.0) — 7 stadier under per-update-terskel, kumulativt over 25% baseline | `post-mcp-verify` + `mcp-description-cache.mjs` | advisory på stage 7 |
| `supply-chain-attack/` | PreToolUse-blokk på kompromittert pakke + scope-hop advisory + dep-auditor typosquats + postinstall curl-pipe | `pre-install-supply-chain` + `dep-auditor` + `supply-chain-data` | 6+ funn, 2 advisories, 1 BLOCK |
| `poisoned-claude-md/` | 6 detektorer (injection / shell / URL / credential paths / permission expansion / encoded payloads) inkl. E15 agent-fil-overflate | `memory-poisoning-scanner` | ≥18 funn fordelt på 2 filer |
| `bash-evasion-gallery/` | T1-T9 disguised destructive commands → normalisert + blokkert (defense-in-depth over Claude Code 2.1.98+) | `pre-bash-destructive` + `bash-normalize` | 10 BLOCK eksitkoder |
| `toxic-agent-demo/` | Single-component lethal trifecta — agent med [Bash, Read, WebFetch] uten hook-guards = CRITICAL TFA-finding | `toxic-flow-analyzer` (TFA) | 1 CRITICAL `Lethal trifecta:` |
| `pre-compact-poisoning/` | PreCompact-hook fanger injection + AWS-shaped credential i syntetisk transcript på tvers av off/warn/block-modus | `pre-compact-scan` | 9 pass: block exit 2 + reason; warn systemMessage; off skip; benign passes |
State-isolering: alle eksempler som muterer global state bruker run-script PID (post-session-guard via `${ppid}.jsonl`) eller env-overrides (`LLM_SECURITY_MCP_CACHE_FILE` for MCP-cache). Brukerens reelle `/tmp/llm-security-session-*.jsonl` og `~/.cache/llm-security/` røres aldri.

View file

@ -1,97 +0,0 @@
# LLM Security — Version history
Per-release notes for v7.0.0 onward. Imported from `CLAUDE.md` via `@docs/version-history.md`.
## v7.0.0 — Severity-dominated risk scoring (v2 model, BREAKING)
Three changes target the false-positive cascade on real codebases (hyperframes.com gave `BLOCK / Extreme / 100`, ~70% noise):
1. **Risk-score v2 formula** (`scanners/lib/severity.mjs`) — severity-dominated, log-scaled within tier. Replaces v1 sum-and-cap that collapsed every non-trivial scan to 100/Extreme. Tiers: critical → 7095, high only → 4065, medium only → 1535, low only → 111. Verdict cutoffs realigned to new bands (BLOCK ≥65, WARNING ≥15). `info` findings are observability-only — counted in OWASP aggregates but contribute zero to risk_score, verdict, and riskBand (B3, v7.2.0 — was undocumented pre-7.2.0). See `severity.mjs` JSDoc for full contract.
2. **Rule-based entropy scanner with file-extension skip, 8 line-level suppression rules, and configurable policy** — extensions skipped (`.glsl/.frag/.vert/.shader/.wgsl/.css/.scss/.sass/.less/.svg/.min.*/.map`); line-suppression rules (GLSL keywords, CSS-in-JS, inline SVG, ffmpeg `filter_complex`, User-Agent strings, SQL DDL, `throw new Error(\`...\`)`, markdown image URLs). Configurable via `.llm-security/policy.json` `entropy` section (thresholds, `suppress_extensions`, `suppress_line_patterns`, `suppress_paths`). Envelope `calibration` block reports skip counters + effective thresholds + policy source.
3. **DEP typosquat allowlist expansion** — 22 npm + 5 PyPI entries for short-name tools that tripped Levenshtein detection on every modern codebase (`knip`, `oxlint`, `tsx`, `nx`, `rimraf`, `uv`, `ruff`, etc.).
See `docs/security-hardening-guide.md` §6 for the calibration story.
## v7.1.1 — Scan-rapport narrative coherence (patch)
Three coordinated edits address the whiplash symptom that survived v7.0.0 (numbers fixed, narrative still walked findings back as "false positive" in prose):
(a) `agents/skill-scanner-agent.md` Step 2.5 mandates context-first severity assignment — every signal has exactly one disposition (suppressed OR reported), no per-finding walk-back; (b) `templates/unified-report.md` gains a `### Narrative Audit` block in Executive Summary surfacing `summary.narrative_audit.suppressed_findings.{count, by_category}` from the agent's trailing JSON; (c) both files updated from stale v1 risk-formula constants to the v2 model that has been authoritative in `severity.mjs` since v7.0.0. Counter is distinct from the existing top-level `output.suppressed` (`.llm-security-ignore` rule integer). Out-of-scope but flagged: `commands/scan.md:113-114` retains the v1 formula; resolution deferred to Batch B.
## v7.3.0 — MCP cumulative-drift baseline (Wave C of Batch C)
Closes E14 from `docs/critical-review-2026-04-20.md`. The `mcp-description-cache.mjs` schema gains a sticky `baseline` slot per tool plus a 10-event rolling `history` array (FIFO). Cumulative drift = `levenshtein(current, baseline) / max(|current|, |baseline|)`; when the ratio crosses `mcp.cumulative_drift_threshold` (default 0.25), `post-mcp-verify.mjs` emits a separate MEDIUM `mcp-cumulative-drift` advisory. The existing per-update >10% drift signal is unchanged — both fire independently. Slow-burn rug-pulls that keep each update under the per-update threshold but cumulatively diverge from baseline are now caught. Baseline survives the 7-day TTL purge so detection persists across the full window. New `/security mcp-baseline-reset` slash command (plus `scanners/mcp-baseline-reset.mjs` CLI: `--list`, `--target <tool>`, or no-args clear-all) lets the user acknowledge a legitimate MCP server upgrade — clearing the baseline causes the next call to seed a fresh one from the incoming description; description, firstSeen, lastSeen, and history are preserved for audit. `LLM_SECURITY_MCP_CACHE_FILE` env var overrides the cache path for end-to-end testing without polluting the user's real `~/.cache/llm-security/mcp-descriptions.json`.
## v7.3.0 — Env-var deprecation warnings (D3 of Batch C, Wave D)
Closes 8.7 from `.claude/projects/2026-04-29-batch-c-scope-finalize/plan.md`. `scanners/lib/policy-loader.mjs` exports a new helper `getPolicyValueWithEnvWarn(section, key, envVarName, defaultValue)` — env still wins per Preferences (existing behaviour), but when both the env-var AND the `policy.json` key are explicitly set, the helper emits a single per-process stderr line: `[llm-security] Deprecation: env-var ${ENVVAR} will be removed in v8.0.0; policy.json key ${section}.${key} also set — env wins for now. Suppress with LLM_SECURITY_DEPRECATION_QUIET=1.` Module-scoped `Set` dedupes per env-var name across call-sites. Four overlapping vars are wired through the helper: `LLM_SECURITY_INJECTION_MODE``injection.mode` (in `pre-prompt-inject-scan.mjs`), `LLM_SECURITY_TRIFECTA_MODE``trifecta.mode` and `LLM_SECURITY_ESCALATION_WINDOW``trifecta.escalation_window` (in `post-session-guard.mjs`), `LLM_SECURITY_AUDIT_LOG``audit.log_path` (in `scanners/lib/audit-trail.mjs`). `DEFAULT_POLICY` gains `trifecta.escalation_window: 5` to close the gap noted in the plan revisions table (M10). Env-only vars without policy.json equivalents (`LLM_SECURITY_UPDATE_CHECK`, `LLM_SECURITY_PRECOMPACT_MODE`, `LLM_SECURITY_PRECOMPACT_MAX_BYTES`, `LLM_SECURITY_IDE_ROOTS`, `LLM_SECURITY_MCP_CACHE_FILE`) are unchanged — they emit no deprecation signal because there is nothing to deprecate yet.
## v7.5.0 — Playground (additive surface, no scanner/hook behavior changes)
Single-file SPA at `playground/llm-security-playground.html` (~10 200 lines) for onboarding, demo og workshop-bruk uten Claude Code-installasjon. Parser + renderer for alle 18 `produces_report=true`-kommandoer i `CATALOG`. State i IndexedDB primær (`llm-security-playground-v1`) med localStorage-fallback, sirkelfri Proxy + EventTarget store, microtask-batchet render. Theme-bootstrap med FOUC-prevention. 4 overflater: onboarding (5 grupper) → home (3 tracks) → catalog (20 kommandoer) ⇄ project (rapporter / oversikt / kontekst / eksport). Demo-state har tre prosjekter inline; `dft-komplett-demo` har alle 18 rapporter ferdig parsed for klikk-gjennom. Vendor-synket design-system under `playground/vendor/playground-design-system/` (sjekksum-låst via `MANIFEST.json`, redigeres aldri direkte). Test-fixtures under `playground/test-fixtures/` (én markdown-fil per kommando) er kontrakt-anker for parser-utvikling. Skjermdumper i `playground/screenshots/v7.5.0/`. Eksponerte vinduer-globaler for testing/automasjon: `__store`, `__navigate`, `__loadDemoState`, `__scheduleRender`, `__PARSERS`, `__RENDERERS`, `__CATALOG`, `__inferVerdict`, `__inferKeyStats`, `__renderPageShell`, `__handlePasteImport`. Inkluderer fix av `normalizeVerdictText` regex-rekkefølge: GO-WITH-CONDITIONS sjekkes før GO så betinget verdict ikke kollapser til ALLOW.
## v7.6.0 — Playground Tier 3-referanse-case (additive surface, no scanner/hook behavior changes)
Playgroundet er nå en visuelt og strukturelt fullført referanse-implementasjon for `shared/playground-design-system/` Tier 3-supplementet. 8 nye Tier 3-komponenter integrert i de 18 rapport-rendererne: `tfa-flow` + `tfa-leg` + `tfa-arrow` (lethal trifecta-kjede med `<button>`-elementer + ARIA-group/aria-label) i `renderScan` + `renderDeepScan`; `mat-ladder` + `mat-step` (5-trinns modenhets-stige med terskler 0/25/50/75/95% PASS) i `renderPosture`; `suppressed-group` (narrative-audit fra `summary.narrative_audit.suppressed_findings`) i `renderScan` + `renderDeepScan`; `codepoint-reveal` + `cp-tag`/`cp-zw`/`cp-bidi` (Unicode-steganografi side-ved-side reveal med U+200B-D|FEFF|2060|180E → `cp-zw`, U+202A-E|2066-9 → `cp-bidi`-detection) i `renderMcpInspect`; `top-risks` + `top-risk[data-severity]` (rangert top-funn-listing, semantisk `<ol>`, ekskluderer info-funn) i `renderScan`/`renderDeepScan`/`renderPluginAudit`/`renderPosture`/`renderAudit`; utvidet `recommendation-card[data-severity]` (severity-tinted advisory) på alle inline-bruk + nye per-bucket advisory-cards i `renderClean` + intro snapshot + diff-rows i `renderHarden` (action-mapping CREATE→positive / APPEND→medium / MERGE→low / SKIP→low); `risk-meter` (band-visualisering 0-100 med Low/Medium/High/Critical/Extreme bands) på 5 archetypes (scan, deep-scan, plugin-audit, audit, red-team); `card--severity-{level}` modifier på `findings__item`-cards. Wave 1 (Sesjon 2) la til `badge--scope-security` (identitets-chip), `verdict-pill-lg` med `__verdict`+`__sub` (erstatter custom verdict-pill på alle 18 rapport-typer), og DS Tier 3 `form-progress` + `fp-step` i onboarding-wizard. Wave 0 (Sesjon 1) slettet ~30 duplikat-CSS-deklarasjoner fra `<style>`-blokken (DS vinner cascade) og harmoniserte page-shell på alle 4 overflater. 5 nye DS-helpers: `renderToxicFlow`, `renderMatLadder`, `renderSuppressedGroup`, `renderCodepointReveal`, `renderTopRisks`. 2 nye normaliserings-helpers: `mapSeverityToCardLevel(input)` (severity + action-types til DS-konvensjoner) og `parseNarrativeAudit(md)`. 12 skjermdumper planlagt i `playground/screenshots/v7.6.0/`. A11Y-rapport oppdatert (`playground/A11Y-RAPPORT.md`) — WCAG 2.1 AA bekreftet, severity-soft fargepar verifisert, semantiske elementer (`<ol>`, `<button>`, `<section>`) erstatter generic `<div>`. Filendring totalt over 5 sesjoner: 10209 → 10677 linjer. Kjent begrensning: `parsed.findings` er tom for `deep-scan`/`audit` demo-fixturer (parser-begrensning, ikke fikset i v7.6.0 — sporet for v7.6.x patch).
## v7.6.1 — Playground visuell-patch (no scanner/hook behavior changes)
Seks bugs fanget av maintainer ved manuell verifisering i nettleser etter v7.6.0-release. Alle skyldtes mismatch mellom DS-klasser og hvordan playground-rendrere brukte dem (eller manglende DS-implementasjoner av klasser playground-rendrere antok eksisterte).
(1) `renderFindingsBlock` brukte `.findings` outer-class som DS har som 2-kolonners grid (`grid-template-columns: 360px 1fr`) for list+detail-panel-layout — playground brukte den uten detail-panel, headeren havnet i venstre 360px-kolonne, items i 1fr. Erstattet med `<section class="report-meta">` + `<h4>` + korrekt `findings__list > findings__group > findings__group-header + findings__items`-mønster.
(2) `.report-table` manglet helt i DS men brukes i 7+ rendrere (OWASP-kategorier, Supply chain, Scanner Risk Matrix, Plugin-meta, Permission-matrise, Live-meter, Siste runs, Godkjenninger, Mitigation roadmap) — lagt lokal CSS-implementasjon i playground-HTML `<style>`-blokk (border-collapse, zebra-hover, header-styling).
(3) `renderPreDeploy` traffic-lights brukte `.sm-card__grade` som er fast 28×28 px (designet for én A-F-bokstav) — kuttet "PASS" til "AS" og "PASS-WITH-NOTES" til "PASS-WITH-..." i alle traffic-light-cards. Erstattet med bredde-tilpasset status-pill via inline styling (severity-soft + on tokens).
(4) Threat-model matrix-bobler ikke klikkbare — `<span>` uten event-handler. Erstattet med `<button type="button" data-threat-id>` + `aria-label`. Click-handler scroller til tilsvarende rad i Trusler-tabellen og fremhever den i 1.6 sek.
(5) Radar-labels overlappet ved 6+ akser — alle brukte `text-anchor="middle"` med samme offset. Økt SVG-størrelse fra 280×280 til 380×380, radius fra 105 til 125, bytter `text-anchor` fra `middle` til `start`/`end` basert på horisontal-posisjon (`Math.cos(ang)` > 0.2 / < -0.2 / mellom).
(6) `recommendation-card__body` tekstoverflyt på lange single-line tekster (vilkår, owner-tags, dato) — lagt `overflow-wrap: anywhere; word-break: break-word` i lokal `<style>`-blokk.
4/4 fix-spesifikke smoke-tester passerer + 18/18 renderere produserer fortsatt komplett HTML mot `dft-komplett-demo` (regresjons-test). Filendring 10677 → 10753 linjer (+76 netto).
## v7.7.0 — HTML-rapport for alle 18 skill-kommandoer
Alle 18 `/security`-kommandoer som produserer rapport får nå en klikkbar `file://`-lenke til en self-contained HTML-versjon. Levert over 5 sesjoner (UX-arbeid + extract + CLI + wiring). Ingen scanner- eller hook-atferdsendringer — purely additive.
**Sesjon 1 (`0dc7ff4`) — Playground katalog list-view + builder-pane.** Katalog-overflaten fikk list-view (grid-toggle) + builder-pane med copy-knapp på alle 18 rapporter, så onboarding-flytene blir bredere/dypere uten å forlate playground-modusen.
**Sesjon 2 (`86d6ecd`) — Playground prosjekt-surface opprydding.** Stub-screen-håndtering (rapport ikke ferdig parsed → tydelig placeholder i stedet for tom panel), topbar-splitt (navigasjons-trinn vs. eksport-handlinger), generell DS-justering for projekt-overflate.
**Sesjon 3 (`fa5fb48`) — `scripts/lib/report-renderers.mjs` extract.** De 18 inline parserne + 18 inline rendererne i playground-HTML-fila flyttet til canonical ESM-modul (`scripts/lib/report-renderers.mjs`) med ren `import { PARSERS, RENDERERS } from './...'`-overflate. Playground beholder en inline-kopi (bit-identisk) fordi ESM `import` ikke fungerer fra `file://` uten Chrome/Firefox-flags. Canonical kilden + playground inline = to overflater, samme atferd.
**Sesjon 4 (`db80854`) — `scripts/render-report.mjs` CLI + 4 skills wired.** Ny zero-dep Node-CLI tar `commandId` + `--in`/`--out` (stdin/file/stdout-modus), bruker kebab→camel-konvertering så alle 18 commandIds fungerer automatisk. Output er self-contained HTML (~140 KB): inlines 6 DS-stylesheets (`tokens`, `base`, `components`, `tier2`, `tier3`, `tier3-supplement`) + lokal `.report-table`-implementasjon. Fonter ikke inlined (ville blåst opp HTML 7x til ~1 MB) — `tokens.css` har `-apple-system, BlinkMacSystemFont, system-ui` som fallback. Absolutte `file://`-paths i stdout for Ghostty cmd-click. Default output `reports/<command>-<YYYYMMDD-HHmmss>.html` relativt til CWD. 4 skills wired: `scan`, `audit`, `posture`, `deep-scan`.
**Sesjon 5 — 14 resterende skills wired + release.** `plugin-audit`, `mcp-audit`, `mcp-inspect`, `ide-scan`, `supply-check`, `dashboard`, `pre-deploy`, `diff`, `watch`, `registry`, `clean`, `harden`, `threat-model`, `red-team` — alle har nå en avsluttende "HTML Report"-step i sin skill-fil som instruerer Claude å (1) compute temp md-path, (2) Write hele markdown-rapporten verbatim, (3) kjøre CLI, (4) appende `> **HTML-rapport:** [Åpne i nettleser](file:///abs/sti.html)` til respons. v7.7.0 release (versjonsbump på tvers av `package.json`, `.claude-plugin/plugin.json`, README badge + state, CLAUDE.md header + state-seksjon, marketplace-rot-README).
Pre-existing `pre-compact-scan`-perf-flake (1000ms terskel under last) gjenstår — defer til v7.7.x patch.
## v7.7.1 — Playground UX-strip (no scanner/hook behavior changes)
Operatør-feedback umiddelbart etter v7.7.0-release: hjem-overflaten viste
fortsatt tre prosjekt-tracks (Re-onboard / Nytt prosjekt / Command-katalog)
selv om katalog-funksjonen var det operatøren ønsket å fremheve. Minimum-
strip levert som tre atomic commits (`b732eee` + `2a6f73f` + `81b7beb`):
(1) `renderActive()`-router tvinger alltid `activeSurface` til `'catalog'`.
Onboarding/home/project-render-funksjonene + state-strukturen er bevart
i kildekoden, men ikke rutbare før funksjonalitet legges til igjen.
Init-default endret fra `'home'` til `'catalog'`. Konsekvens: playgrounden
lander direkte i Command-katalog (alle 20 kommandoer i list-view med
builder-pane + copy-knapp fra sesjon 1).
(2) Topbar `Hjem` og `Re-onboard`-knapper fjernet fra primær navigasjon.
`Katalog`-knappen + Eksporter/Importer/tema-toggle beholdt. Project-state
forblir i IndexedDB men ingen UI-vei dit.
(3) Topbar breadcrumb erstattet `shared.organization.name` (demo-state-
orgnavn) med statisk `llm-security` som nøytralt scope-anker. Crumb-
parameter (f.eks. `Katalog`) beholdt som suffix.
Fix: hardkodet versjons-streng `'Plugin v7.6.1'` på linje 6933 i
`renderHome` (template-string-litteral som v7.7.0-grep-en ikke fanget)
synket til v7.7.1.
Versjonsbump i 9 filer (`package.json`, `.claude-plugin/plugin.json`,
plugin `README.md` badge + Recent versions-tabell, plugin `CLAUDE.md`
header + state-seksjon, `docs/version-history.md`,
`playground/llm-security-playground.html`, rot `README.md` plugin-entry,
rot `CLAUDE.md` plugin-katalog, `CHANGELOG.md` `[7.7.1]`-seksjon).
Onboarding-konseptet dokumentert som v7.8.0-kandidat (per-kommando
kontekst-injeksjon) i `ROADMAP.md`.

View file

@ -1,6 +1,6 @@
{ {
"name": "llm-security", "name": "llm-security",
"version": "7.7.1", "version": "7.6.1",
"description": "Security scanning, auditing, and threat modeling for Claude Code projects", "description": "Security scanning, auditing, and threat modeling for Claude Code projects",
"type": "module", "type": "module",
"bin": { "bin": {

View file

@ -78,55 +78,6 @@
.command-cards { display: flex; flex-direction: column; gap: var(--space-4); } .command-cards { display: flex; flex-direction: column; gap: var(--space-4); }
.sub-zone { border-top: 1px solid var(--color-border-subtle); padding-top: var(--space-3); } .sub-zone { border-top: 1px solid var(--color-border-subtle); padding-top: var(--space-3); }
.sub-zone__heading { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-tertiary); margin: 0 0 var(--space-2); } .sub-zone__heading { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-tertiary); margin: 0 0 var(--space-2); }
/* Collapsible command sub-cards (Rapporter-tab) */
.command-subcard { padding: 0; overflow: hidden; }
.command-subcard .card__head--toggle {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-3);
width: 100%;
margin: 0;
padding: var(--space-4) var(--space-5);
background: transparent;
border: 0;
cursor: pointer;
text-align: left;
font-family: inherit;
color: inherit;
}
.command-subcard .card__head--toggle:hover { background: var(--color-bg-soft); }
.command-subcard .card__head--toggle:focus-visible { outline: 2px solid var(--color-primary-500); outline-offset: -2px; }
.command-subcard .card__head-text { flex: 1; min-width: 0; }
.command-subcard .card__head-meta { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; flex-shrink: 0; }
.command-subcard .subcard-chev {
display: inline-block;
font-size: 0.875rem;
color: var(--color-text-tertiary);
transform: rotate(-90deg);
transition: transform 0.15s ease;
align-self: center;
flex-shrink: 0;
width: 1em;
text-align: center;
}
.command-subcard .card__head--toggle[aria-expanded="true"] .subcard-chev { transform: rotate(0deg); }
.command-subcard .subcard-body {
padding: 0 var(--space-5) var(--space-5);
display: flex;
flex-direction: column;
gap: var(--space-3);
}
/* App header — split nav groups */
.app-header__nav-group { display: flex; align-items: center; gap: var(--space-2); }
.app-header__nav-sep {
width: 1px;
align-self: stretch;
background: var(--color-border-subtle);
margin: 0 var(--space-2);
}
.paste-import-row { display: flex; flex-direction: column; gap: var(--space-2); } .paste-import-row { display: flex; flex-direction: column; gap: var(--space-2); }
.paste-import-row__actions { display: flex; gap: var(--space-2); align-items: center; } .paste-import-row__actions { display: flex; gap: var(--space-2); align-items: center; }
.form-zone-placeholder { padding: var(--space-3); background: var(--color-bg-soft); border-radius: var(--radius-sm); font-size: var(--font-size-sm); color: var(--color-text-tertiary); font-style: italic; } .form-zone-placeholder { padding: var(--space-3); background: var(--color-bg-soft); border-radius: var(--radius-sm); font-size: var(--font-size-sm); color: var(--color-text-tertiary); font-style: italic; }
@ -161,7 +112,7 @@
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* Catalog */ /* Catalog */
.catalog-search { width: 100%; max-width: 480px; margin-bottom: 0; } .catalog-search { width: 100%; max-width: 480px; margin-bottom: var(--space-5); }
.catalog-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-3); margin-top: var(--space-3); } .catalog-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-3); margin-top: var(--space-3); }
.catalog-tool-notice { padding: 8px 12px; background: var(--color-bg-soft); border-left: 3px solid var(--color-state-info, var(--color-primary-300)); font-size: var(--font-size-xs); color: var(--color-text-secondary); border-radius: var(--radius-sm); } .catalog-tool-notice { padding: 8px 12px; background: var(--color-bg-soft); border-left: 3px solid var(--color-state-info, var(--color-primary-300)); font-size: var(--font-size-xs); color: var(--color-text-secondary); border-radius: var(--radius-sm); }
/* Expansion-body: playground-markup mangler .expansion__body-inner-wrapping /* Expansion-body: playground-markup mangler .expansion__body-inner-wrapping
@ -170,42 +121,6 @@
.expansion__body { padding: 0 var(--space-4) var(--space-4); border-top: 1px solid var(--color-border-subtle); } .expansion__body { padding: 0 var(--space-4) var(--space-4); border-top: 1px solid var(--color-border-subtle); }
.expansion[aria-expanded="false"] .expansion__body { display: none; } .expansion[aria-expanded="false"] .expansion__body { display: none; }
/* Catalog v7.6.2: filter-chips + list-view + builder-pane */
.catalog-filter-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; }
.catalog-chip { font-family: inherit; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); padding: 6px 12px; border-radius: var(--radius-pill); border: 1px solid var(--color-border-moderate); background: var(--color-surface); color: var(--color-text-secondary); cursor: pointer; transition: background 120ms ease, border-color 120ms ease, color 120ms ease; display: inline-flex; align-items: center; gap: 6px; }
.catalog-chip:hover { border-color: var(--color-border-strong); color: var(--color-text-primary); }
.catalog-chip:focus-visible { outline: 2px solid var(--color-scope-security, var(--color-primary-500)); outline-offset: 2px; }
.catalog-chip--active { background: var(--color-scope-security, var(--color-primary-500)); border-color: var(--color-scope-security, var(--color-primary-500)); color: var(--color-text-on-primary, #fff); }
.catalog-chip--active:hover { color: var(--color-text-on-primary, #fff); }
.catalog-chip__count { font-size: 10px; opacity: 0.85; padding: 1px 6px; border-radius: var(--radius-pill); background: rgba(0,0,0,0.08); }
.catalog-chip--active .catalog-chip__count { background: rgba(255,255,255,0.18); }
.catalog-list { display: flex; flex-direction: column; gap: 1px; background: var(--color-border-subtle); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); overflow: hidden; }
.catalog-row { display: flex; align-items: stretch; gap: var(--space-4); padding: var(--space-3) var(--space-4); background: var(--color-surface); border: 0; text-align: left; font-family: inherit; cursor: pointer; transition: background 120ms ease; width: 100%; }
.catalog-row:hover { background: var(--color-bg-soft); }
.catalog-row:focus-visible { outline: 2px solid var(--color-scope-security, var(--color-primary-500)); outline-offset: -2px; }
.catalog-row__main { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.catalog-row__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.catalog-row__id { font-family: var(--font-family-mono); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
.catalog-row__label { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.catalog-row__desc { font-size: var(--font-size-xs); color: var(--color-text-tertiary); line-height: var(--line-height-snug); }
.catalog-row__hint { font-family: var(--font-family-mono); font-size: 11px; color: var(--color-text-tertiary); background: var(--color-bg-soft); padding: 1px 6px; border-radius: var(--radius-sm); }
.catalog-row__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; font-size: var(--font-size-xs); }
.catalog-row__category { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-tertiary); font-weight: var(--font-weight-semibold); }
.catalog-row__fields { color: var(--color-text-tertiary); }
.catalog-empty { padding: var(--space-5); text-align: center; color: var(--color-text-tertiary); border: 1px dashed var(--color-border-subtle); border-radius: var(--radius-md); }
/* Builder-pane: bigger modal, layout-tuned for live-preview workflow */
.builder-modal { max-width: 880px; }
.builder-modal__lede { color: var(--color-text-secondary); margin: 0; font-size: var(--font-size-sm); }
.builder-modal .form-preview { background: var(--color-bg-soft); border: 1px solid var(--color-border-subtle); }
.builder-modal__hint { font-size: var(--font-size-xs); color: var(--color-text-tertiary); margin: 0; }
@media (max-width: 720px) {
.catalog-row { flex-direction: column; gap: var(--space-2); }
.catalog-row__meta { flex-direction: row; align-items: center; }
}
/* Modal (playground-only — DS har ikke modal-pattern enda) */ /* Modal (playground-only — DS har ikke modal-pattern enda) */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 100; padding: var(--space-5); } .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 100; padding: var(--space-5); }
.modal { background: var(--color-surface); border-radius: var(--radius-md); max-width: 720px; width: 100%; max-height: 90vh; overflow: auto; padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); } .modal { background: var(--color-surface); border-radius: var(--radius-md); max-width: 720px; width: 100%; max-height: 90vh; overflow: auto; padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
@ -5779,10 +5694,10 @@
window.__store = store; window.__store = store;
window.__persistence = persistence; window.__persistence = persistence;
// v7.7.1: Førstegangsbesøk + alle påfølgende besøk lander på catalog. // Initial-surface heuristikk
// Home/onboarding/project-overflatene er bevart i kildekoden men ikke const orgName = store.state.shared && store.state.shared.organization && store.state.shared.organization.name;
// rutbare før funksjonalitet legges til igjen. if (!orgName) store.state.activeSurface = 'onboarding';
store.state.activeSurface = 'catalog'; else if (!store.state.activeSurface) store.state.activeSurface = 'home';
scheduleRender(); scheduleRender();
} }
@ -6544,14 +6459,12 @@
function renderActive() { function renderActive() {
if (!store) return; if (!store) return;
// v7.7.1: katalog er eneste levende overflate. Onboarding/home/project const active = store.state.activeSurface || 'home';
// er bevart i kildekoden, men routeren tvinger alltid til catalog inntil showSurface(active);
// funksjonalitet legges til igjen. if (active === 'onboarding') renderOnboardingSurface();
if (store.state.activeSurface !== 'catalog') { else if (active === 'home') renderHomeSurface();
store.state.activeSurface = 'catalog'; else if (active === 'project') renderProjectSurface();
} else if (active === 'catalog') renderCatalogSurface();
showSurface('catalog');
renderCatalogSurface();
} }
function navigate(surface) { function navigate(surface) {
@ -6567,12 +6480,11 @@
// TOPBAR (felles for home/catalog/project) // TOPBAR (felles for home/catalog/project)
// ============================================================ // ============================================================
function renderTopbar(crumb) { function renderTopbar(crumb) {
// v7.7.1: onboarding er fjernet, så orgName fra shared.organization const orgName = (store.state.shared.organization && store.state.shared.organization.name) || '';
// er ikke lenger meningsfullt i breadcrumb. Bruker statisk const breadcrumbInner = (orgName ? escapeHtml(orgName) : '') + (orgName && crumb ? ' · ' : '') + (crumb || '');
// "llm-security" som scope-anker pluss valgfri crumb. const breadcrumbHtml = breadcrumbInner
const breadcrumbInner = 'llm-security' + (crumb ? ' · ' + crumb : ''); ? '<nav class="app-header__breadcrumb" aria-label="Brødsmuler">' + breadcrumbInner + '</nav>'
const breadcrumbHtml = : '';
'<nav class="app-header__breadcrumb" aria-label="Brødsmuler">' + breadcrumbInner + '</nav>';
const currentTheme = document.documentElement.getAttribute('data-theme') === 'light' ? 'light' : 'dark'; const currentTheme = document.documentElement.getAttribute('data-theme') === 'light' ? 'light' : 'dark';
const themeLabel = currentTheme === 'light' ? 'Lys' : 'Mørk'; const themeLabel = currentTheme === 'light' ? 'Lys' : 'Mørk';
const themeNext = currentTheme === 'light' ? 'mørk' : 'lys'; const themeNext = currentTheme === 'light' ? 'mørk' : 'lys';
@ -6585,11 +6497,9 @@
breadcrumbHtml + breadcrumbHtml +
'<div class="app-header__spacer"></div>' + '<div class="app-header__spacer"></div>' +
'<div class="app-header__actions" role="group" aria-label="Hovednavigasjon">' + '<div class="app-header__actions" role="group" aria-label="Hovednavigasjon">' +
'<div class="app-header__nav-group" role="group" aria-label="Primær navigasjon">' + '<button type="button" class="btn btn--ghost btn--sm" data-action="goto-home">Hjem</button>' +
'<button type="button" class="btn btn--ghost btn--sm" data-action="goto-catalog">Katalog</button>' + '<button type="button" class="btn btn--ghost btn--sm" data-action="goto-catalog">Katalog</button>' +
'</div>' + '<button type="button" class="btn btn--ghost btn--sm" data-action="goto-onboarding">Re-onboard</button>' +
'<span class="app-header__nav-sep" aria-hidden="true"></span>' +
'<div class="app-header__nav-group" role="group" aria-label="State og tema">' +
'<button type="button" class="btn btn--secondary btn--sm" data-action="export-state" aria-label="Eksporter state til JSON">Eksporter</button>' + '<button type="button" class="btn btn--secondary btn--sm" data-action="export-state" aria-label="Eksporter state til JSON">Eksporter</button>' +
'<button type="button" class="btn btn--secondary btn--sm" data-action="import-state" aria-label="Importer state fra JSON">Importer</button>' + '<button type="button" class="btn btn--secondary btn--sm" data-action="import-state" aria-label="Importer state fra JSON">Importer</button>' +
'<input type="file" accept="application/json,.json" data-import-input hidden>' + '<input type="file" accept="application/json,.json" data-import-input hidden>' +
@ -6597,7 +6507,6 @@
'<span data-theme-label>' + themeLabel + '</span>' + '<span data-theme-label>' + themeLabel + '</span>' +
'</button>' + '</button>' +
'</div>' + '</div>' +
'</div>' +
'</header>' '</header>'
); );
} }
@ -6932,7 +6841,7 @@
verdict: 'n-a', verdict: 'n-a',
hero: true, hero: true,
meta: [ meta: [
'Plugin v7.7.1', 'Plugin v7.6.1',
projects.length + ' prosjekt' + (projects.length === 1 ? '' : 'er'), projects.length + ' prosjekt' + (projects.length === 1 ? '' : 'er'),
CATALOG.commands.length + ' kommandoer' CATALOG.commands.length + ' kommandoer'
], ],
@ -6966,7 +6875,6 @@
// CATALOG SURFACE // CATALOG SURFACE
// ============================================================ // ============================================================
let catalogSearchQuery = ''; let catalogSearchQuery = '';
let catalogFilter = 'all'; // 'all' | 'report' | 'tool' | <category-id>
function catalogMatches(cmd, q) { function catalogMatches(cmd, q) {
if (!q) return true; if (!q) return true;
@ -6974,88 +6882,68 @@
return hay.indexOf(q) >= 0; return hay.indexOf(q) >= 0;
} }
function categoryLabelById(id) { function renderCatalogCardHtml(cmd) {
const c = (CATALOG.categories || []).find(function (x) { return x.id === id; });
return c ? c.label : id;
}
function filteredCatalogCommands() {
const q = catalogSearchQuery.toLowerCase().trim();
return (CATALOG.commands || []).filter(function (c) {
if (!catalogMatches(c, q)) return false;
if (catalogFilter === 'all') return true;
if (catalogFilter === 'report') return !!c.produces_report;
if (catalogFilter === 'tool') return !c.produces_report;
return c.category === catalogFilter;
});
}
function renderCatalogRowHtml(cmd) {
const isVerktoy = !cmd.produces_report; const isVerktoy = !cmd.produces_report;
const pill = isVerktoy ? '<span class="card__pill">Verktøy</span>' : '<span class="card__pill">Rapport</span>'; const pill = isVerktoy ? '<span class="card__pill">Verktøy</span>' : '<span class="card__pill">Rapport</span>';
const hintHtml = cmd.argument_hint ? ' <code class="catalog-row__hint">' + escapeHtml(cmd.argument_hint) + '</code>' : ''; const hintHtml = cmd.argument_hint ? '<span class="card__hint">' + escapeHtml(cmd.argument_hint) + '</span>' : '';
const fieldCount = (cmd.input_fields || []).length; const verktoyNotice = isVerktoy ? '<div class="catalog-tool-notice">Verktøy — ingen rapport-import. Skjema bygger pipeline-streng som kjøres i terminalen.</div>' : '';
const fieldLabel = fieldCount + ' felt' + (fieldCount === 1 ? '' : 'er');
return ( return (
'<button type="button" class="catalog-row" data-action="catalog-open-form" data-command="' + escapeAttr(cmd.id) + '" aria-label="Åpne builder for ' + escapeAttr(cmd.label) + '">' + '<article class="card" data-command-card data-command-id="' + escapeAttr(cmd.id) + '">' +
'<span class="catalog-row__main">' + '<div class="card__head">' +
'<span class="catalog-row__head">' + '<div>' +
'<span class="catalog-row__id">/security:' + escapeHtml(cmd.id) + '</span>' + '<h3 class="card__title">' + escapeHtml(cmd.label) + '</h3>' +
'<span class="catalog-row__label">' + escapeHtml(cmd.label) + '</span>' + '<p class="card__desc">' + escapeHtml(cmd.description) + '</p>' +
hintHtml + hintHtml +
'</span>' + '</div>' +
'<span class="catalog-row__desc">' + escapeHtml(cmd.description) + '</span>' + '<div style="display:flex; flex-direction:column; gap:6px; align-items:flex-end;">' +
'</span>' + '<span class="badge badge--scope-security">llm-security</span>' +
'<span class="catalog-row__meta">' +
'<span class="catalog-row__category">' + escapeHtml(categoryLabelById(cmd.category)) + '</span>' +
pill + pill +
'<span class="catalog-row__fields">' + fieldLabel + '</span>' + '</div>' +
'</span>' + '</div>' +
'</button>' verktoyNotice +
'<div class="card__actions">' +
'<button type="button" class="btn btn--primary btn--sm" data-action="catalog-open-form" data-command="' + escapeAttr(cmd.id) + '">Åpne skjema</button>' +
'<span style="font-size: var(--font-size-xs); color: var(--color-text-tertiary);">' + (cmd.input_fields || []).length + ' felter</span>' +
'</div>' +
'</article>'
); );
} }
function renderCatalogChipsHtml() { function renderCatalogGroupsHtml() {
const total = (CATALOG.commands || []).length; const q = catalogSearchQuery.toLowerCase().trim();
const reportCount = (CATALOG.commands || []).filter(function (c) { return c.produces_report; }).length; return CATALOG.categories.map(function (cat) {
const toolCount = total - reportCount; const cmds = CATALOG.commands.filter(function (c) { return c.category === cat.id && catalogMatches(c, q); });
const baseChips = [ if (cmds.length === 0 && q) return ''; // skjul tomme grupper ved aktiv søk
{ id: 'all', label: 'Alle', count: total }, const isOpen = q !== '' || cat.id === 'discover'; // discover åpen som default
{ id: 'report', label: 'Rapport-produserende', count: reportCount }, const cardsHtml = cmds.length > 0
{ id: 'tool', label: 'Verktøy', count: toolCount } ? '<div class="catalog-cards-grid">' + cmds.map(renderCatalogCardHtml).join('') + '</div>'
]; : '<p style="color: var(--color-text-tertiary); margin: var(--space-3) 0;">Ingen kommandoer i denne kategorien.</p>';
const categoryChips = (CATALOG.categories || []).map(function (cat) {
return { id: cat.id, label: cat.label, count: cat.count };
});
return baseChips.concat(categoryChips).map(function (chip) {
const active = catalogFilter === chip.id;
return ( return (
'<button type="button" class="catalog-chip' + (active ? ' catalog-chip--active' : '') + '" data-action="catalog-filter" data-filter="' + escapeAttr(chip.id) + '" aria-pressed="' + (active ? 'true' : 'false') + '">' + '<div class="expansion" aria-expanded="' + (isOpen ? 'true' : 'false') + '">' +
escapeHtml(chip.label) + ' <span class="catalog-chip__count">' + chip.count + '</span>' + '<button type="button" class="expansion__head" data-action="catalog-toggle-group" data-group="' + escapeAttr(cat.id) + '">' +
'</button>' '<span class="expansion__title">' +
'<span class="expansion__title-main">' + escapeHtml(cat.label) + '</span>' +
'<span class="expansion__title-sub">' + cmds.length + ' av ' + cat.count + ' kommandoer' + (q ? ' (filtrert)' : '') + '</span>' +
'</span>' +
'<span class="expansion__chev" aria-hidden="true"></span>' +
'</button>' +
'<div class="expansion__body">' + cardsHtml + '</div>' +
'</div>'
); );
}).join(''); }).join('');
} }
function renderCatalogListBodyHtml() {
const cmds = filteredCatalogCommands();
if (cmds.length === 0) {
return '<div class="catalog-empty">Ingen treff. Prøv et annet søk eller filter.</div>';
}
return '<div class="catalog-list">' + cmds.map(renderCatalogRowHtml).join('') + '</div>';
}
function renderCatalogSurface() { function renderCatalogSurface() {
const root = getSurfaceEl('catalog'); const root = getSurfaceEl('catalog');
if (!root) return; if (!root) return;
const total = (CATALOG.commands || []).length; const total = CATALOG.commands.length;
const reportCount = (CATALOG.commands || []).filter(function (c) { return c.produces_report; }).length; const reportCount = CATALOG.commands.filter(function (c) { return c.produces_report; }).length;
const toolCount = total - reportCount; const toolCount = total - reportCount;
const catalogShell = renderPageShell({ const catalogShell = renderPageShell({
eyebrow: 'KATALOG', eyebrow: 'KATALOG',
title: 'Command-katalog', title: 'Command-katalog',
lede: 'Alle ' + total + ' kommandoer. Søk, filtrer, klikk en rad for å bygge kommandostrengen.', lede: 'Alle ' + total + ' kommandoer gruppert på kategori. Bygg pipeline-strenger uten et aktivt prosjekt.',
verdict: 'n-a', verdict: 'n-a',
meta: [ meta: [
total + ' kommandoer', total + ' kommandoer',
@ -7070,8 +6958,7 @@
}, },
'<div class="stack-lg">' + '<div class="stack-lg">' +
'<input type="search" class="input catalog-search" placeholder="Søk i kommandoer (id, label, beskrivelse, argument-hint) …" data-catalog-search value="' + escapeAttr(catalogSearchQuery) + '" aria-label="Søk i kommando-katalogen">' + '<input type="search" class="input catalog-search" placeholder="Søk i kommandoer (id, label, beskrivelse, argument-hint) …" data-catalog-search value="' + escapeAttr(catalogSearchQuery) + '" aria-label="Søk i kommando-katalogen">' +
'<div class="catalog-filter-chips" role="group" aria-label="Filtre">' + renderCatalogChipsHtml() + '</div>' + '<div data-catalog-groups>' + renderCatalogGroupsHtml() + '</div>' +
'<div data-catalog-list>' + renderCatalogListBodyHtml() + '</div>' +
'</div>' '</div>'
); );
@ -7079,25 +6966,24 @@
renderTopbar('Katalog') + renderTopbar('Katalog') +
'<div class="app-shell">' + catalogShell + '</div>' '<div class="app-shell">' + catalogShell + '</div>'
); );
// Bevarer fokus i søkefeltet under re-render
const searchEl = root.querySelector('[data-catalog-search]');
if (searchEl && document.activeElement !== searchEl && catalogSearchQuery) {
// Ikke stjel fokus med mindre brukeren akkurat skrev — håndteres i action handler
}
} }
// ============================================================ // ============================================================
// PROJECT SURFACE (stub i Fase 1 — full report-render i Fase 2/3) // PROJECT SURFACE (stub i Fase 1 — full report-render i Fase 2/3)
// ============================================================ // ============================================================
let currentProjectTab = 'discover'; let currentProjectTab = 'discover';
let currentProjectScreen = 'rapporter';
// Tracks which sub-cards are expanded — key: projectId + '::' + cmdId.
// Persists across re-renders so paste-import etc. doesn't collapse them.
const expandedSubcards = new Set();
function subcardKey(projectId, cmdId) { return projectId + '::' + cmdId; }
function renderCommandSubCard(cmd, projectId) { function renderCommandSubCard(cmd, projectId) {
const project = findProject(projectId); const project = findProject(projectId);
const report = project && project.reports && project.reports[cmd.id]; const report = project && project.reports && project.reports[cmd.id];
const hasReport = !!(report && report.parsed); const hasReport = !!(report && report.parsed);
const isExpanded = expandedSubcards.has(subcardKey(projectId, cmd.id));
const bodyId = 'subcard-body-' + cmd.id.replace(/[^a-zA-Z0-9_-]/g, '_');
const formZone = ( const formZone = (
'<div class="sub-zone">' + '<div class="sub-zone">' +
@ -7138,26 +7024,23 @@
} }
return ( return (
'<article class="card command-subcard" data-command-subcard data-command-id="' + escapeAttr(cmd.id) + '">' + '<article class="card" data-command-subcard data-command-id="' + escapeAttr(cmd.id) + '">' +
'<button type="button" class="card__head card__head--toggle" data-action="toggle-subcard" data-command="' + escapeAttr(cmd.id) + '" data-project-id="' + escapeAttr(projectId) + '" aria-expanded="' + (isExpanded ? 'true' : 'false') + '" aria-controls="' + escapeAttr(bodyId) + '">' + '<div class="card__head">' +
'<div class="card__head-text">' + '<div>' +
'<h3 class="card__title">' + escapeHtml(cmd.label) + '</h3>' + '<h3 class="card__title">' + escapeHtml(cmd.label) + '</h3>' +
'<p class="card__desc">' + escapeHtml(cmd.description) + '</p>' + '<p class="card__desc">' + escapeHtml(cmd.description) + '</p>' +
'</div>' + '</div>' +
'<div class="card__head-meta">' + '<div style="display:flex; flex-direction:column; gap:6px; align-items:flex-end;">' +
'<span class="badge badge--scope-security">llm-security</span>' + '<span class="badge badge--scope-security">llm-security</span>' +
(cmd.produces_report (cmd.produces_report
? '<span class="card__pill">' + (hasReport ? '✓ Rapport' : 'Rapport') + '</span>' ? '<span class="card__pill">' + (hasReport ? '✓ Rapport' : 'Rapport') + '</span>'
: '<span class="card__pill">Verktøy</span>' : '<span class="card__pill">Verktøy</span>'
) + ) +
'</div>' + '</div>' +
'<span class="subcard-chev" aria-hidden="true"></span>' + '</div>' +
'</button>' +
'<div class="subcard-body" id="' + escapeAttr(bodyId) + '"' + (isExpanded ? '' : ' hidden') + '>' +
formZone + formZone +
pasteZone + pasteZone +
reportZone + reportZone +
'</div>' +
'</article>' '</article>'
); );
} }
@ -7178,6 +7061,17 @@
'</div>' '</div>'
); );
const SCREENS = [
{ id: 'oversikt', label: 'Oversikt' },
{ id: 'rapporter', label: 'Rapporter' },
{ id: 'kontekst', label: 'Kontekst' },
{ id: 'eksport', label: 'Eksport' }
];
const screenTabsHtml = '<nav class="tab-list" role="tablist" aria-label="Prosjekt-skjermer">' + SCREENS.map(function (s) {
const isActive = currentProjectScreen === s.id;
return '<button type="button" class="tab" role="tab" aria-current="' + (isActive ? 'true' : 'false') + '" data-action="project-screen" data-screen="' + escapeAttr(s.id) + '">' + escapeHtml(s.label) + '</button>';
}).join('') + '</nav>';
const tabsHtml = '<div class="project-tabs" role="tablist">' + CATALOG.categories.map(function (cat) { const tabsHtml = '<div class="project-tabs" role="tablist">' + CATALOG.categories.map(function (cat) {
const isActive = currentProjectTab === cat.id; const isActive = currentProjectTab === cat.id;
return '<button type="button" class="project-tab" role="tab"' + (isActive ? ' aria-current="true"' : '') + ' data-action="project-tab" data-tab="' + escapeAttr(cat.id) + '">' + escapeHtml(cat.label) + '<span class="project-tab__count">' + cat.count + '</span></button>'; return '<button type="button" class="project-tab" role="tab"' + (isActive ? ' aria-current="true"' : '') + ' data-action="project-tab" data-tab="' + escapeAttr(cat.id) + '">' + escapeHtml(cat.label) + '<span class="project-tab__count">' + cat.count + '</span></button>';
@ -7189,6 +7083,53 @@
return '<div class="command-cards" role="tabpanel" data-tab-panel="' + escapeAttr(cat.id) + '"' + (isActive ? '' : ' hidden') + '>' + cards + '</div>'; return '<div class="command-cards" role="tabpanel" data-tab-panel="' + escapeAttr(cat.id) + '"' + (isActive ? '' : ' hidden') + '>' + cards + '</div>';
}).join(''); }).join('');
const scenarioChipsList = (project.scenarios || []).map(function (sid) {
const s = SCENARIOS.find(function (x) { return x.id === sid; });
return '<li>' + escapeHtml(s ? s.name : sid) + '</li>';
}).join('');
const oversiktHtml = (
'<div class="tab-panel" data-screen-id="oversikt"' + (currentProjectScreen === 'oversikt' ? '' : ' hidden') + '>' +
'<div class="guide-panel guide-panel--info">' +
'<div class="guide-panel__icon" aria-hidden="true">i</div>' +
'<div class="guide-panel__body">' +
'<h3 class="guide-panel__title">Oversikt</h3>' +
'<p class="guide-panel__text">Opprettet ' + escapeHtml((project.createdAt || '').slice(0, 10)) + '. ' + reportFilled + ' av ' + reportTotal + ' rapporter generert.</p>' +
'<p class="guide-panel__text" style="margin-top: var(--space-2);">Target: <code>' + escapeHtml(project.target_path || '—') + '</code> (<em>' + escapeHtml(project.target_type || 'codebase') + '</em>)</p>' +
(scenarioChipsList ? '<p class="guide-panel__text" style="margin-top: var(--space-2);"><strong>Scenarioer:</strong></p><ul style="margin: 0; padding-left: var(--space-4); color: var(--color-text-secondary);">' + scenarioChipsList + '</ul>' : '') +
'<p class="guide-panel__text" style="margin-top: var(--space-3);"><em>Fase 2-3: aggregert verdict-pille, top-funn på tvers av rapporter, og recommended-next-actions vises her.</em></p>' +
'</div>' +
'</div>' +
'</div>'
);
const rapporterHtml = '<div class="tab-panel" data-screen-id="rapporter"' + (currentProjectScreen === 'rapporter' ? '' : ' hidden') + '>' + tabsHtml + panelsHtml + '</div>';
const kontekstHtml = (
'<div class="tab-panel" data-screen-id="kontekst"' + (currentProjectScreen === 'kontekst' ? '' : ' hidden') + '>' +
'<div class="guide-panel guide-panel--info">' +
'<div class="guide-panel__icon" aria-hidden="true">i</div>' +
'<div class="guide-panel__body">' +
'<h3 class="guide-panel__title">Kontekst</h3>' +
'<p class="guide-panel__text">Fellesfeltene fra onboarding gjenbrukes automatisk i alle command-skjemaer. Bruk <button type="button" class="btn btn--ghost btn--sm" data-action="goto-onboarding" style="display:inline;">Re-onboard</button> for å oppdatere.</p>' +
'<p class="guide-panel__text" style="margin-top: var(--space-2);"><em>Fase 2-3: snapshot av de 5 fellesgruppene og hvilke felt som prefilles per kommando vises her.</em></p>' +
'</div>' +
'</div>' +
'</div>'
);
const eksportHtml = (
'<div class="tab-panel" data-screen-id="eksport"' + (currentProjectScreen === 'eksport' ? '' : ' hidden') + '>' +
'<div class="guide-panel guide-panel--info">' +
'<div class="guide-panel__icon" aria-hidden="true">i</div>' +
'<div class="guide-panel__body">' +
'<h3 class="guide-panel__title">Eksport</h3>' +
'<p class="guide-panel__text">Bruk <strong>Eksporter</strong> i toppmenyen for hele state. Per-prosjekt PDF/Markdown-eksport kommer i Fase 3.</p>' +
'</div>' +
'</div>' +
'</div>'
);
const projectShell = renderPageShell({ const projectShell = renderPageShell({
eyebrow: 'PROSJEKT · ' + escapeHtml((project.target_type || 'codebase').toUpperCase()), eyebrow: 'PROSJEKT · ' + escapeHtml((project.target_type || 'codebase').toUpperCase()),
title: project.name, title: project.name,
@ -7205,7 +7146,7 @@
{ label: 'TARGET', value: (project.target_type || 'codebase') } { label: 'TARGET', value: (project.target_type || 'codebase') }
] ]
}, },
'<div class="stack-lg">' + actionBar + tabsHtml + panelsHtml + '</div>' '<div class="stack-lg">' + actionBar + screenTabsHtml + oversiktHtml + rapporterHtml + kontekstHtml + eksportHtml + '</div>'
); );
root.innerHTML = renderTopbar('Prosjekt: ' + escapeHtml(project.name)) + root.innerHTML = renderTopbar('Prosjekt: ' + escapeHtml(project.name)) +
@ -10465,20 +10406,13 @@
function renderCatalogFormModal(cmd) { function renderCatalogFormModal(cmd) {
const formHtml = renderCommandForm(cmd.id, { scope: 'cat' }); const formHtml = renderCommandForm(cmd.id, { scope: 'cat' });
const sharedCount = (cmd.input_fields || []).filter(function (f) { return f.from === 'shared'; }).length;
const sharedHint = sharedCount > 0
? '<p class="builder-modal__hint">Felt merket <span class="field-from-tag" style="cursor:default;">felles</span> er forhåndsutfylt fra onboarding (' + sharedCount + ' av ' + (cmd.input_fields || []).length + '). Endringer her påvirker ikke onboarding-state.</p>'
: '<p class="builder-modal__hint">Fyll ut argumenter — pipeline-strengen oppdateres mens du skriver.</p>';
return ( return (
'<div class="modal builder-modal" role="dialog" aria-labelledby="cf-title" data-builder-pane>' + '<div class="modal" role="dialog" aria-labelledby="cf-title">' +
'<div class="modal__head">' + '<div class="modal__head">' +
'<div>' + '<h2 id="cf-title" class="modal__title">' + escapeHtml(cmd.label) + '</h2>' +
'<h2 id="cf-title" class="modal__title">' + escapeHtml(cmd.label) + ' <span style="font-family: var(--font-family-mono); font-size: var(--font-size-md); color: var(--color-text-tertiary); font-weight: var(--font-weight-regular);">/security:' + escapeHtml(cmd.id) + '</span></h2>' +
'</div>' +
'<button type="button" class="modal__close" data-action="close-modal" aria-label="Lukk">×</button>' + '<button type="button" class="modal__close" data-action="close-modal" aria-label="Lukk">×</button>' +
'</div>' + '</div>' +
'<p class="builder-modal__lede">' + escapeHtml(cmd.description) + '</p>' + '<p style="color: var(--color-text-secondary); margin: 0;">' + escapeHtml(cmd.description) + '</p>' +
sharedHint +
formHtml + formHtml +
'</div>' '</div>'
); );
@ -10580,30 +10514,14 @@
} }
// Project tabs // Project tabs
if (action === 'project-tab') { if (action === 'project-screen') {
currentProjectTab = target.dataset.tab; currentProjectScreen = target.dataset.screen;
scheduleRender(); scheduleRender();
return; return;
} }
if (action === 'project-tab') {
// Sub-card toggle (Rapporter-tab) — direct DOM manipulation to preserve form-field state currentProjectTab = target.dataset.tab;
if (action === 'toggle-subcard') { scheduleRender();
const cmdId = target.dataset.command;
const projectId = target.dataset.projectId;
const article = target.closest('[data-command-subcard]');
const body = article ? article.querySelector('.subcard-body') : null;
if (!body) return;
const key = projectId + '::' + cmdId;
const willExpand = body.hasAttribute('hidden');
if (willExpand) {
expandedSubcards.add(key);
body.removeAttribute('hidden');
target.setAttribute('aria-expanded', 'true');
} else {
expandedSubcards.delete(key);
body.setAttribute('hidden', '');
target.setAttribute('aria-expanded', 'false');
}
return; return;
} }
@ -10611,6 +10529,7 @@
if (action === 'open-project') { if (action === 'open-project') {
const pid = target.dataset.projectId; const pid = target.dataset.projectId;
store.state.activeProjectId = pid; store.state.activeProjectId = pid;
currentProjectScreen = 'rapporter';
currentProjectTab = 'discover'; currentProjectTab = 'discover';
navigate('project'); navigate('project');
return; return;
@ -10656,6 +10575,7 @@
}; };
store.state.projects.push(project); store.state.projects.push(project);
store.state.activeProjectId = project.id; store.state.activeProjectId = project.id;
currentProjectScreen = 'rapporter';
currentProjectTab = 'discover'; currentProjectTab = 'discover';
closeModal(); closeModal();
navigate('project'); navigate('project');
@ -10669,36 +10589,18 @@
} }
// Catalog // Catalog
if (action === 'catalog-filter') { if (action === 'catalog-toggle-group') {
const f = target.dataset.filter || 'all'; const grp = target.dataset.group;
if (catalogFilter === f) return; const exp = target.closest('.expansion');
catalogFilter = f; if (exp) {
// Re-render in-place: chips (active state) + list body const open = exp.getAttribute('aria-expanded') === 'true';
const root = getSurfaceEl('catalog'); exp.setAttribute('aria-expanded', open ? 'false' : 'true');
if (root) {
const chipsEl = root.querySelector('.catalog-filter-chips');
if (chipsEl) chipsEl.innerHTML = renderCatalogChipsHtml();
const listEl = root.querySelector('[data-catalog-list]');
if (listEl) listEl.innerHTML = renderCatalogListBodyHtml();
} }
return; return;
} }
if (action === 'catalog-open-form') { if (action === 'catalog-open-form') {
const cmd = (CATALOG.commands || []).find(function (c) { return c.id === cmdId; }); const cmd = (CATALOG.commands || []).find(function (c) { return c.id === cmdId; });
if (!cmd) return; if (cmd) openModal(renderCatalogFormModal(cmd));
openModal(renderCatalogFormModal(cmd));
// Initial live-preview: vis pipeline-streng med shared-prefill
const formEl = document.querySelector('[data-builder-pane] form.command-form[data-command-form="' + CSS.escape(cmd.id) + '"]');
if (formEl) {
const data = readCommandFormValues(formEl);
const str = buildCommand(cmd.id, data);
showCommandPreview(formEl, str);
// Auto-fokus første input for keyboard-flow
const firstInput = formEl.querySelector('input:not([type="hidden"]), select, textarea');
if (firstInput) {
try { firstInput.focus(); } catch (e) { /* ignore */ }
}
}
return; return;
} }
@ -10775,24 +10677,14 @@
if (ev.key === 'Escape') closeModal(); if (ev.key === 'Escape') closeModal();
}); });
// Catalog search + live builder-pane preview // Catalog search
document.addEventListener('input', function (ev) { document.addEventListener('input', function (ev) {
if (ev.target && ev.target.matches && ev.target.matches('[data-catalog-search]')) { if (ev.target && ev.target.matches && ev.target.matches('[data-catalog-search]')) {
catalogSearchQuery = ev.target.value; catalogSearchQuery = ev.target.value;
const listEl = document.querySelector('[data-catalog-list]'); const groupsEl = document.querySelector('[data-catalog-groups]');
if (listEl) listEl.innerHTML = renderCatalogListBodyHtml(); if (groupsEl) groupsEl.innerHTML = renderCatalogGroupsHtml();
return; return;
} }
// Live preview inside builder-pane (catalog modal)
if (ev.target && ev.target.matches && ev.target.matches('[data-builder-pane] [data-cf-field]')) {
const formEl = ev.target.closest('form.command-form');
if (formEl) {
const data = readCommandFormValues(formEl);
const str = buildCommand(formEl.dataset.commandForm, data);
showCommandPreview(formEl, str);
}
// Fall through to onboarding handling below in case selector overlaps
}
// Onboarding fields persist on input (debounced via throttledWriter) // Onboarding fields persist on input (debounced via throttledWriter)
if (ev.target && ev.target.matches && ev.target.matches('[data-onboarding-field]')) { if (ev.target && ev.target.matches && ev.target.matches('[data-onboarding-field]')) {
const path = ev.target.dataset.cfField; const path = ev.target.dataset.cfField;
@ -10824,15 +10716,6 @@
scheduleRender(); scheduleRender();
} }
} }
// Builder-pane: select/checkbox change → live preview
if (ev.target && ev.target.matches && ev.target.matches('[data-builder-pane] [data-cf-field]')) {
const formEl = ev.target.closest('form.command-form');
if (formEl) {
const data = readCommandFormValues(formEl);
const str = buildCommand(formEl.dataset.commandForm, data);
showCommandPreview(formEl, str);
}
}
}); });
// Import file picker // Import file picker

View file

@ -1,88 +1,5 @@
# playground-design-system — CHANGELOG # playground-design-system — CHANGELOG
## 0.6.0 — 2026-05-15
### Added — Project-view archetype (Tier 4)
Generic "project as artifact-collection" archetype for plugins where a project owns 0-N read-only report artifacts grouped by category. Default view is an aggregated dashboard; clicking a sidebar item swaps the main panel to the per-artifact render. Edit-mode is paste-import only (no inline editor).
- **New file `components-tier4-project-view.css`** — 11 sections covering:
- `.project-view` + `.project-view__layout` (grid: nav 280px + main 1fr, responsive collapse at 1280 / 960px)
- `.project-view__header` (CSS Grid with eyebrow/title/lede/verdict/key-stats/actions areas)
- `.verdict-pill` (small pill variant — companion to existing `.verdict-pill-lg` in tier2)
- `.project-view__nav` + `.project-view__nav-search` (sticky sidebar with search)
- `.artifact-list` + `__group` / `__group-label` / `__group-count` / `__group-items` / `__item` / `__item-marker` / `__item-body` / `__item-name` / `__item-meta` (grouped, severity-coded sidebar)
- `.artifact-status[data-severity]` (mini-pill: positive | medium | critical)
- `.project-view__main` (main column container)
- `.project-overview` + `__intro` / `__verdict-grid` / `__verdict-tile[data-severity]` / `__section` / `__top-risks` / `__next-actions` / `__missing-reports` (aggregated dashboard)
- `.project-view__artifact` + `__artifact-header` / `__artifact-title` / `__artifact-meta` / `__artifact-actions` / `__artifact-body` (single-rapport viewer wrapper)
- `.empty-artifact-prompt` + `__icon` / `__title` / `__text` / `__actions` (empty-state)
- `.import-modal` + `__backdrop` / `__panel` / `__head` / `__title` / `__close` / `__form` / `__detect` / `__preview` / `__preview-label` / `__footer` (overlay modal for paste-import)
- **6 new tokens in `tokens.css`:**
- `--project-view-nav-width: 280px` — sidebar width at full layout
- `--project-view-collapse-bp: 960px` — doc-only token referenced by responsive breakpoints
- `--artifact-list-item-pad-y: var(--space-2)` — sidebar row vertical padding
- `--artifact-list-item-pad-x: var(--space-3)` — sidebar row horizontal padding
- `--artifact-marker-size: 14px` — sidebar status marker diameter
- `--artifact-marker-border: 1.5px` — sidebar status marker border thickness
### Påvirkning
Endringen er **additiv**: ny komponent-fil + 6 nye tokens, ingen eksisterende selectors eller verdier endres. Plugin-konsumenter (`ms-ai-architect`, `llm-security`, `okr`, `config-audit`, `voyage`) får silent drift mot ny source-commit, men kan re-sync på eget tempo. Bare `ms-ai-architect` og `llm-security` re-syncer i samme commit som denne DS-bumpen (forberedelse til koordinert v1.15.0 / v7.7.0-release etter ~8 sesjoner med JS-implementasjon).
Førsteadoptere: `ms-ai-architect` v1.15.0 (17 artefakter, 5 kategorier) + `llm-security` v7.7.0 (≥18 artefakter, 6 kategorier). State-driven visibility håndteres i plugin-JS, ikke i denne CSS-en — kun aktiv state rendres per pass.
### Plugins som må laste den nye filen
Etter `<link>` til `components-tier3-supplement.css`, legg til:
```html
<link rel="stylesheet" href="vendor/playground-design-system/components-tier4-project-view.css">
```
### For å adoptere v0.6.0
```bash
node scripts/sync-design-system.mjs <plugin-name>
# --force hvis drift detected
```
## 0.5.0 — 2026-05-10
### Added
- **voyage scope tokens (B-DS-4):** `--color-scope-voyage` (aqua-blue `#1B5FB8`), `--color-scope-voyage-soft` (`#E5EFFA`), `--color-scope-voyage-strong` (`#143E78`) appended to scope-color group in `tokens.css`. Matches the existing `--color-scope-{architect,okr,security,ultraplan,config}` family so voyage-playground can use the canonical badge convention.
- **`.badge--scope-voyage`** in `base.css`: white-on-aqua-blue badge variant matching the existing scope-badge family.
### Påvirkning
Endringen er **additiv**: legger TIL voyage-scope-tokens og en ny badge-modifier. Ingen eksisterende selectors eller token-verdier endres. Plugin-konsumenter (llm-security, ms-ai-architect, okr, config-audit) får stale vendor-state mot ny source-commit, men det er silent drift — re-sync skjer på eget tempo neste playground-touch. Bare `voyage` re-syncer i denne commit-en.
Førsteadopter: `voyage` v4.3.0 (multi-sesjons-løp 2026-05-10, sesjon 1 = Wave 0+1 Foundation).
## 0.4.0 — 2026-05-08
### Bug fixes
- **`.kanban-card__name`** (components-tier3-supplement.css): bytt `word-break: break-all` til `word-break: break-word` + `overflow-wrap: anywhere`. `break-all` knekker midt i ord ("Tekn isk dokumen tasjon"); ny verdi respekterer ordskjøt og brytter kun lange tokens (B-DS-1).
- **`.expansion__title-main`, `.expansion__title-sub`** (components-tier3-supplement.css): legg til `display: block`. Begge er `<span>`-elementer som flyter inline by default, noe som gir "dokumentertKilde: Art. 9" på samme linje. `display: block` sikrer vertikal stacking (B-DS-2).
- **`.matrix__bubble`** (components.css): legg til `cursor: pointer`, `transition`, `:hover { transform: scale(1.15) }` og `:focus-visible { outline + offset }`. Antar at consumer rendrer bobler som `<button>` for click-handlers — gir visuell + keyboard-fokus-feedback (B-DS-3).
### Påvirkning
Bugfixene er **backward-compatible** — alle eksisterende selectors og verdier som er endret, var bugfixes. Plugin-konsumenter som har lokal-overrides for disse mønstrene bør re-syncer og slette overridene:
- **ms-ai-architect:** re-sync i samme commit, sletter linje 191-193 (matrix-bubble), 208-211 (expansion-title), 213-216 (kanban-card-name) i `playground/ms-ai-architect-playground.html`.
- **llm-security, voyage, okr, config-audit:** re-sync på eget tempo (ikke breaking — gammel vendored DS fungerer fortsatt med eksisterende lokal-overrides).
### For å adoptere v0.4
```bash
node scripts/sync-design-system.mjs <plugin-name>
# --force hvis drift detected
```
Førsteadopter: `ms-ai-architect` v1.14.0 (planlagt 2026-05-08, multi-sesjons-løp som starter med DS-bump i sesjon 2).
## 0.3.0 — 2026-05-04 ## 0.3.0 — 2026-05-04
### Added — Playground/report-page foundation primitives (sections 13-25 in tier3-supplement) ### Added — Playground/report-page foundation primitives (sections 13-25 in tier3-supplement)

View file

@ -2,18 +2,17 @@
"generated_by": "scripts/sync-design-system.mjs", "generated_by": "scripts/sync-design-system.mjs",
"do_not_edit": true, "do_not_edit": true,
"source": "shared/playground-design-system/", "source": "shared/playground-design-system/",
"source_commit": "c1b7bad3899c5cfe9ff90663003609b018aa79a0", "source_commit": "487f7ae746aeb1c0f19bb0f4b8d0ffcf0a59a677",
"sync_date": "2026-05-15T14:11:15.296Z", "sync_date": "2026-05-05T16:33:38.829Z",
"file_count": 27, "file_count": 26,
"files": { "files": {
"CHANGELOG.md": "b5018b46cd0830334109e915d23b5554c060412c2b7e132f97f2933e5dd5d79c", "CHANGELOG.md": "e293a911701e0ae8e95f8d30e2b583d1c578d0c2af4fd2abfbee3a7d65d5f7ba",
"README.md": "83de0e29b207c979b7b2a3327b7a4ec0c2e1b4d3705ee2677f26c28c3a3ee643", "README.md": "83de0e29b207c979b7b2a3327b7a4ec0c2e1b4d3705ee2677f26c28c3a3ee643",
"base.css": "df0db874473412eb771b7355b589f7478042987756898f0921584286bd5ba70a", "base.css": "604fe6839e2ed304bc0ba112a4e045f208b4b3f084f449a1abdb94ce0a1e5263",
"components-tier2.css": "c2cb7e9d76d6af28d50db654030413777feb2f2f2b93213e598de8b686b14523", "components-tier2.css": "c2cb7e9d76d6af28d50db654030413777feb2f2f2b93213e598de8b686b14523",
"components-tier3-supplement.css": "51fab10377d80029d6552613069d46fd14ce66af77fe6705b1c6bdf5c9e6481e", "components-tier3-supplement.css": "b78664275948f05b9cb4e577921695bd39d15b34c671809d8c8465cac4e1739b",
"components-tier3.css": "c391ea387298ce864bc35078e7e044b2cdd4187e3130456347d91876599ff4b1", "components-tier3.css": "c391ea387298ce864bc35078e7e044b2cdd4187e3130456347d91876599ff4b1",
"components-tier4-project-view.css": "f8f784df70044ecc9bdc862a327b1ee58b201d056581316808a9b60632c5a993", "components.css": "f76b22ba9fd64c2e806b4467536174347105f3e5ccca8a6349a919287d864b86",
"components.css": "56fa7392b8b20b567a46f72a8fe9e0205d78ce475eae6b22fc3f50b39b235545",
"fonts.css": "e3c3df581c6e4d66e25c555f125c745f6512a33038401089d2519a94ea63ee3d", "fonts.css": "e3c3df581c6e4d66e25c555f125c745f6512a33038401089d2519a94ea63ee3d",
"fonts/Inter-Bold.woff2": "220976705fbec109f43c5cfdceca639e99ace7e51f3eb67292b105d3575eb39b", "fonts/Inter-Bold.woff2": "220976705fbec109f43c5cfdceca639e99ace7e51f3eb67292b105d3575eb39b",
"fonts/Inter-Medium.woff2": "8458f8afa67b5691c1fcbe51607a2dafb53a9839e48131c608a186b65415d96d", "fonts/Inter-Medium.woff2": "8458f8afa67b5691c1fcbe51607a2dafb53a9839e48131c608a186b65415d96d",
@ -32,6 +31,6 @@
"schemas/finding.schema.json": "0b24797373650582bac232d31a4dd9260593375a0d17259e18f1141a20de8d0c", "schemas/finding.schema.json": "0b24797373650582bac232d31a4dd9260593375a0d17259e18f1141a20de8d0c",
"schemas/okr-set.schema.json": "aa27347fb232a956ec9dcee1775115710e2715a665c8d729ac50b90c6884de26", "schemas/okr-set.schema.json": "aa27347fb232a956ec9dcee1775115710e2715a665c8d729ac50b90c6884de26",
"schemas/ros-threat.schema.json": "e16497c1a6b79d6e78149d6cf1c28ac9df1e93234627a0c546814fb24d6c96d9", "schemas/ros-threat.schema.json": "e16497c1a6b79d6e78149d6cf1c28ac9df1e93234627a0c546814fb24d6c96d9",
"tokens.css": "63dca13f8341937169fc8e84d3f37ae0c714901fa006c865ea377bd448f87644" "tokens.css": "1499bc2eea0178e35935413c79a10bbee7d49fdfa91bd33eeba3bb9e9acab809"
} }
} }

View file

@ -146,7 +146,6 @@ button { font-family: inherit; }
.badge--scope-security { background: var(--color-scope-security); color: #fff; border-color: transparent; } .badge--scope-security { background: var(--color-scope-security); color: #fff; border-color: transparent; }
.badge--scope-ultraplan { background: var(--color-scope-ultraplan); color: #fff; border-color: transparent; } .badge--scope-ultraplan { background: var(--color-scope-ultraplan); color: #fff; border-color: transparent; }
.badge--scope-config { background: var(--color-scope-config); color: #fff; border-color: transparent; } .badge--scope-config { background: var(--color-scope-config); color: #fff; border-color: transparent; }
.badge--scope-voyage { background: var(--color-scope-voyage); color: #fff; border-color: transparent; }
/* ---------- Cards / surfaces ---------- */ /* ---------- Cards / surfaces ---------- */
.card { .card {

View file

@ -280,7 +280,7 @@
.kanban-card[data-verdict="trusted"] { border-left: 4px solid var(--color-state-success); } .kanban-card[data-verdict="trusted"] { border-left: 4px solid var(--color-state-success); }
.kanban-card[data-verdict="unknown"] { border-left: 4px solid var(--color-state-warning); } .kanban-card[data-verdict="unknown"] { border-left: 4px solid var(--color-state-warning); }
.kanban-card__name { font-family: var(--font-family-mono); font-size: 13px; color: var(--color-text-primary); word-break: break-word; overflow-wrap: anywhere; } .kanban-card__name { font-family: var(--font-family-mono); font-size: 13px; color: var(--color-text-primary); word-break: break-all; }
.kanban-card__meta { font-size: 11px; color: var(--color-text-tertiary); } .kanban-card__meta { font-size: 11px; color: var(--color-text-tertiary); }
.kanban-card__reason { font-size: 12px; color: var(--color-text-secondary); } .kanban-card__reason { font-size: 12px; color: var(--color-text-secondary); }
@ -696,8 +696,8 @@
.expansion__head:hover { background: var(--color-bg-soft); } .expansion__head:hover { background: var(--color-bg-soft); }
.expansion__head:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .expansion__head:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.expansion__title { flex: 1; } .expansion__title { flex: 1; }
.expansion__title-main { display: block; font-size: var(--font-size-md); color: var(--color-text-primary); font-weight: var(--font-weight-medium); } .expansion__title-main { font-size: var(--font-size-md); color: var(--color-text-primary); font-weight: var(--font-weight-medium); }
.expansion__title-sub { display: block; font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-top: 2px; } .expansion__title-sub { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-top: 2px; }
.expansion__chev { .expansion__chev {
color: var(--color-text-tertiary); color: var(--color-text-tertiary);
transition: transform var(--duration-normal) var(--ease-default); transition: transform var(--duration-normal) var(--ease-default);

View file

@ -1,666 +0,0 @@
/* Code generated by sync-design-system.mjs; DO NOT EDIT. */
/* =============================================================================
Playground Design System components-tier4-project-view.css
v0.6.0 Tier 4 project-view archetype
============================================================================
Generic "project as artifact-collection" archetype. Default-view is an
aggregated overview dashboard; clicking a sidebar item swaps main to a
per-artifact render. Tracks 0-N read-only artifacts; edit-mode is paste-
import only (markdown from terminal parser store).
First adopters: ms-ai-architect v1.15.0 (17 artifacts, 5 categories) +
llm-security v7.7.0 (18 artifacts, 6 categories). Each plugin injects a
PROJECT_VIEW_CONFIG object that maps commands renderers, categories,
verdict-aggregators, missing-report heuristics.
The CSS in this file is plugin-agnostic. Plugin-specific shape (category
names, artifact ordering, custom severity-mappings) lives in JS config.
State-driven visibility is NOT handled here production playgrounds emit
only the active state (overview | artifact | empty | import) per render
pass. The mockup uses body[data-state="..."] for prototyping; production
renders one branch at a time.
============================================================================= */
/* === 1. Project-view top-level layout ===================================== */
.project-view {
display: flex;
flex-direction: column;
gap: var(--space-6);
}
.project-view__layout {
display: grid;
grid-template-columns: var(--project-view-nav-width) 1fr;
gap: var(--space-6);
align-items: start;
}
@media (max-width: 1279px) {
.project-view__layout { grid-template-columns: 240px 1fr; }
}
@media (max-width: 959px) {
.project-view__layout { grid-template-columns: 1fr; }
}
/* === 2. Project-view header =============================================== */
.project-view__header {
background: var(--color-surface);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-md);
padding: var(--space-5) var(--space-6);
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas:
"title verdict"
"title keystats"
"actions actions";
gap: var(--space-4) var(--space-6);
align-items: start;
}
.project-view__title-block { grid-area: title; }
.project-view__verdict { grid-area: verdict; justify-self: end; }
.project-view__key-stats { grid-area: keystats; justify-self: end; }
.project-view__actions { grid-area: actions; display: flex; gap: var(--space-2); justify-content: flex-end; }
.project-view__eyebrow {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-text-tertiary);
font-weight: var(--font-weight-semibold);
margin: 0 0 var(--space-2) 0;
}
.project-view__title {
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-bold);
color: var(--color-text-primary);
margin: 0 0 var(--space-2) 0;
}
.project-view__lede {
color: var(--color-text-secondary);
margin: 0;
max-width: 60ch;
}
.project-view__key-stats {
display: flex;
gap: var(--space-5);
}
.project-view__key-stat-label {
font-size: 10px;
text-transform: uppercase;
color: var(--color-text-tertiary);
letter-spacing: 0.06em;
}
.project-view__key-stat-value {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
font-variant-numeric: tabular-nums;
}
/* === 3. Verdict-pill (small) ==============================================
Companion to .verdict-pill-lg (Tier 2). Inline-flex pill used in project
header + sidebar status badges. The larger -lg variant lives in
components-tier2.css; both share the same severity-band semantics. */
.verdict-pill {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: 4px 12px;
border-radius: 999px;
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-sm);
}
.verdict-pill--positive { background: var(--color-state-success); color: #fff; }
.verdict-pill--medium { background: var(--color-severity-medium); color: var(--color-severity-medium-on); }
.verdict-pill--critical { background: var(--color-severity-critical); color: #fff; }
.verdict-pill--in-progress {
background: var(--color-bg-soft);
color: var(--color-text-secondary);
border: 1px dashed var(--color-border-moderate);
}
/* === 4. Sidebar nav ======================================================= */
.project-view__nav {
position: sticky;
top: var(--space-6);
background: var(--color-surface);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-md);
padding: var(--space-4);
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.project-view__nav-search input {
width: 100%;
box-sizing: border-box;
padding: 6px 10px;
font-size: var(--font-size-sm);
background: var(--color-bg);
color: var(--color-text-primary);
border: 1px solid var(--color-border-moderate);
border-radius: var(--radius-sm);
}
/* === 5. Artifact-list ===================================================== */
.artifact-list {
display: flex;
flex-direction: column;
gap: var(--space-4);
margin: 0;
padding: 0;
list-style: none;
}
.artifact-list__group {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.artifact-list__group-label {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-text-tertiary);
font-weight: var(--font-weight-semibold);
padding: 0 var(--space-2);
}
.artifact-list__group-count {
background: var(--color-bg-soft);
color: var(--color-text-tertiary);
font-family: var(--font-family-mono);
font-size: 10px;
padding: 1px 6px;
border-radius: 999px;
}
.artifact-list__group-items {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.artifact-list__item {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: var(--space-2);
padding: var(--artifact-list-item-pad-y) var(--artifact-list-item-pad-x);
border-radius: var(--radius-sm);
cursor: pointer;
background: transparent;
border: 1px solid transparent;
transition: background 120ms ease, border-color 120ms ease;
}
.artifact-list__item:hover { background: var(--color-bg-soft); }
.artifact-list__item[data-state="active"] {
background: var(--color-bg-soft);
border-color: var(--color-primary-500);
box-shadow: inset 3px 0 0 var(--color-primary-500);
padding-left: calc(var(--artifact-list-item-pad-x) - 3px);
}
.artifact-list__item-marker {
width: var(--artifact-marker-size);
height: var(--artifact-marker-size);
border-radius: 50%;
border: var(--artifact-marker-border) solid var(--color-border-moderate);
background: transparent;
flex-shrink: 0;
}
.artifact-list__item[data-state="filled"][data-severity="positive"] .artifact-list__item-marker {
background: var(--color-state-success);
border-color: var(--color-state-success);
}
.artifact-list__item[data-state="filled"][data-severity="medium"] .artifact-list__item-marker {
background: var(--color-severity-medium);
border-color: var(--color-severity-medium);
}
.artifact-list__item[data-state="filled"][data-severity="critical"] .artifact-list__item-marker {
background: var(--color-severity-critical);
border-color: var(--color-severity-critical);
}
.artifact-list__item-body { min-width: 0; }
.artifact-list__item-name {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.artifact-list__item[data-state="empty"] .artifact-list__item-name {
color: var(--color-text-tertiary);
font-weight: var(--font-weight-regular);
}
.artifact-list__item-meta {
font-size: 11px;
color: var(--color-text-tertiary);
}
/* === 6. Artifact-status (mini pill in sidebar) =========================== */
.artifact-status {
font-family: var(--font-family-mono);
font-size: 10px;
font-weight: var(--font-weight-semibold);
padding: 1px 5px;
border-radius: var(--radius-sm);
letter-spacing: 0.04em;
}
.artifact-status[data-severity="positive"] { background: var(--color-severity-low-soft); color: var(--color-severity-low-on); }
.artifact-status[data-severity="medium"] { background: var(--color-severity-medium-soft); color: var(--color-severity-medium-on); }
.artifact-status[data-severity="critical"] { background: var(--color-severity-critical-soft); color: var(--color-severity-critical-on); }
/* === 7. Project-view main panel ========================================== */
.project-view__main {
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--space-5);
}
/* === 8. Project-overview (default dashboard) ============================= */
.project-overview {
display: flex;
flex-direction: column;
gap: var(--space-6);
}
.project-overview__intro {
background: var(--color-surface);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-md);
padding: var(--space-5);
}
.project-overview__intro h2 {
font-size: var(--font-size-lg);
margin: 0 0 var(--space-2) 0;
}
.project-overview__intro p {
color: var(--color-text-secondary);
margin: 0;
}
.project-overview__verdict-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--space-3);
}
.project-overview__verdict-tile {
background: var(--color-surface);
border: 1px solid var(--color-border-subtle);
border-left: 4px solid var(--color-border-moderate);
border-radius: var(--radius-md);
padding: var(--space-4);
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.project-overview__verdict-tile[data-severity="positive"] { border-left-color: var(--color-state-success); }
.project-overview__verdict-tile[data-severity="medium"] { border-left-color: var(--color-severity-medium); }
.project-overview__verdict-tile[data-severity="critical"] { border-left-color: var(--color-severity-critical); }
.project-overview__verdict-tile[data-severity="empty"] { border-left-style: dashed; }
.project-overview__verdict-tile-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-text-tertiary);
font-weight: var(--font-weight-semibold);
}
.project-overview__verdict-tile-value {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
}
.project-overview__verdict-tile-meta {
font-size: var(--font-size-xs);
color: var(--color-text-secondary);
}
.project-overview__section h3 {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-text-tertiary);
font-weight: var(--font-weight-semibold);
margin: 0 0 var(--space-3) 0;
}
.project-overview__top-risks,
.project-overview__next-actions {
background: var(--color-surface);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-md);
padding: var(--space-5);
}
.project-overview__top-risks ol,
.project-overview__next-actions ol {
list-style: none;
counter-reset: rank;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.project-overview__top-risks li,
.project-overview__next-actions li {
counter-increment: rank;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: var(--space-3);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-sm);
background: var(--color-bg-soft);
}
.project-overview__top-risks li::before,
.project-overview__next-actions li::before {
content: counter(rank);
font-family: var(--font-family-mono);
font-weight: var(--font-weight-bold);
color: var(--color-text-tertiary);
font-size: var(--font-size-sm);
min-width: 20px;
}
.project-overview__missing-reports {
background: var(--color-surface);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-md);
padding: var(--space-5);
}
.project-overview__missing-reports ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.project-overview__missing-reports li {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-3);
padding: var(--space-2) var(--space-3);
background: var(--color-bg-soft);
border-radius: var(--radius-sm);
border-left: 3px dashed var(--color-border-moderate);
}
/* === 9. Artifact-view (one report rendered) ============================== */
.project-view__artifact {
background: var(--color-surface);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-md);
padding: var(--space-6);
display: flex;
flex-direction: column;
gap: var(--space-5);
}
.project-view__artifact-header {
display: flex;
justify-content: space-between;
align-items: start;
gap: var(--space-4);
padding-bottom: var(--space-4);
border-bottom: 1px solid var(--color-border-subtle);
}
.project-view__artifact-title {
font-size: var(--font-size-xl);
margin: 0 0 var(--space-1) 0;
}
.project-view__artifact-meta {
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
margin: 0;
}
.project-view__artifact-actions {
display: flex;
gap: var(--space-2);
flex-shrink: 0;
}
.project-view__artifact-body {
display: flex;
flex-direction: column;
gap: var(--space-5);
}
/* === 10. Empty-artifact-prompt (no report imported yet) ================== */
.empty-artifact-prompt {
background: var(--color-surface);
border: 2px dashed var(--color-border-moderate);
border-radius: var(--radius-md);
padding: var(--space-8);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
text-align: center;
}
.empty-artifact-prompt__icon {
font-size: 48px;
opacity: 0.5;
}
.empty-artifact-prompt__title {
font-size: var(--font-size-lg);
margin: 0;
}
.empty-artifact-prompt__text {
color: var(--color-text-secondary);
margin: 0;
max-width: 50ch;
}
.empty-artifact-prompt__actions {
display: flex;
gap: var(--space-2);
margin-top: var(--space-2);
}
/* === 11. Import-modal (overlay) ========================================== */
.import-modal {
position: fixed;
inset: 0;
z-index: 200;
display: none;
}
.import-modal[data-open="true"] {
display: flex;
align-items: center;
justify-content: center;
}
.import-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.55);
}
.import-modal__panel {
position: relative;
width: min(720px, 92vw);
max-height: 90vh;
overflow: auto;
background: var(--color-surface);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
display: flex;
flex-direction: column;
}
.import-modal__head {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-3);
padding: var(--space-4) var(--space-5);
border-bottom: 1px solid var(--color-border-subtle);
}
.import-modal__title {
margin: 0;
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
}
.import-modal__close {
background: transparent;
border: none;
cursor: pointer;
padding: 4px 10px;
color: var(--color-text-tertiary);
font-size: 20px;
line-height: 1;
border-radius: var(--radius-sm);
}
.import-modal__close:hover {
background: var(--color-bg-soft);
color: var(--color-text-primary);
}
.import-modal__form {
padding: var(--space-5);
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.import-modal__form .field {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.import-modal__form label {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
color: var(--color-text-secondary);
}
.import-modal__form select,
.import-modal__form textarea {
width: 100%;
box-sizing: border-box;
padding: var(--space-2) var(--space-3);
background: var(--color-bg);
color: var(--color-text-primary);
border: 1px solid var(--color-border-moderate);
border-radius: var(--radius-sm);
font-family: var(--font-family-mono);
font-size: var(--font-size-sm);
}
.import-modal__form textarea {
resize: vertical;
min-height: 180px;
}
.import-modal__detect {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-sm);
background: var(--color-severity-low-soft);
color: var(--color-severity-low-on);
font-size: var(--font-size-sm);
}
.import-modal__preview {
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-sm);
padding: var(--space-3);
background: var(--color-bg);
max-height: 200px;
overflow: auto;
}
.import-modal__preview-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-text-tertiary);
margin-bottom: var(--space-2);
}
.import-modal__footer {
display: flex;
justify-content: flex-end;
gap: var(--space-2);
padding: var(--space-3) var(--space-5);
border-top: 1px solid var(--color-border-subtle);
background: var(--color-bg-soft);
}

View file

@ -191,15 +191,6 @@
color: var(--color-bg); color: var(--color-bg);
border: none; border: none;
} }
/* B-DS-3 (v0.4.0): bobler rendres som <button> i renderMatrixHtml gi
visuell + keyboard-fokus-feedback. Antar at consumer bruker
<button class="matrix__bubble">, ellers bare-virkning ufarlig <span>. */
.matrix__bubble {
cursor: pointer;
transition: transform var(--duration-fast) var(--ease-default);
}
.matrix__bubble:hover { transform: scale(1.15); }
.matrix__bubble:focus-visible { outline: 2px solid var(--color-primary-500); outline-offset: 2px; }
[data-theme="dark"] .matrix__bubble { background: rgba(0,0,0,0.45); color: var(--color-text-primary); border-color: rgba(255,255,255,0.15); } [data-theme="dark"] .matrix__bubble { background: rgba(0,0,0,0.45); color: var(--color-text-primary); border-color: rgba(255,255,255,0.15); }
.matrix__x-label { .matrix__x-label {

View file

@ -102,9 +102,6 @@
--color-scope-security: #A40E26; /* llm-security — crimson */ --color-scope-security: #A40E26; /* llm-security — crimson */
--color-scope-ultraplan: #4338CA; /* ultraplan-local — indigo */ --color-scope-ultraplan: #4338CA; /* ultraplan-local — indigo */
--color-scope-config: #3F5963; /* config-audit — slate */ --color-scope-config: #3F5963; /* config-audit — slate */
--color-scope-voyage: #1B5FB8; /* voyage — aqua-blue */
--color-scope-voyage-soft: #E5EFFA; /* voyage — light tint */
--color-scope-voyage-strong: #143E78; /* voyage — dark strong */
/* ---------- Spacing -------------------------------------------------- */ /* ---------- Spacing -------------------------------------------------- */
--space-1: 4px; --space-1: 4px;
@ -143,14 +140,6 @@
--container-default: 1080px; --container-default: 1080px;
--container-wide: 1280px; --container-wide: 1280px;
--sidebar-width: 280px; --sidebar-width: 280px;
/* ---------- Project-view (Tier 4 — v0.6.0) --------------------------- */
--project-view-nav-width: 280px;
--project-view-collapse-bp: 960px; /* doc-only — referenced by media queries */
--artifact-list-item-pad-y: var(--space-2);
--artifact-list-item-pad-x: var(--space-3);
--artifact-marker-size: 14px;
--artifact-marker-border: 1.5px;
} }
:root { color-scheme: light; } :root { color-scheme: light; }

File diff suppressed because it is too large Load diff

View file

@ -1,192 +0,0 @@
#!/usr/bin/env node
/*
* render-report.mjs convert llm-security markdown reports into self-contained
* HTML files. Zero npm deps. Reads markdown from stdin or a file, parses via
* PARSERS, renders via RENDERERS, wraps the output in a standalone HTML doc
* with inlined Playground Design System CSS.
*
* Usage:
* node render-report.mjs <commandId> --in <md-file> (file reports/<command>-<ts>.html)
* node render-report.mjs <commandId> --in <md-file> --out <html>
* node render-report.mjs <commandId> --in - (stdin reports/<command>-<ts>.html)
* node render-report.mjs <commandId> --in <md> --out - (file stdout)
* node render-report.mjs <commandId> --in - --out - (stdin stdout)
*
* Exit codes:
* 0 success · 1 parser error or empty input · 2 renderer threw · 3 file I/O failed
*
* Standalone HTML wraps in <main class="page"> so DS Tier 3 page-shell styling
* matches the playground render exactly. Output uses absolute file:// URLs to
* stdout (Ghostty cmd-click requires absolute paths).
*/
import { readFileSync, writeFileSync, mkdirSync, existsSync } from 'node:fs';
import { resolve, dirname, isAbsolute, join } from 'node:path';
import { fileURLToPath } from 'node:url';
import { PARSERS, RENDERERS } from './lib/report-renderers.mjs';
const SCRIPT_DIR = dirname(fileURLToPath(import.meta.url));
const PLUGIN_ROOT = resolve(SCRIPT_DIR, '..');
const VENDOR_CSS_DIR = join(PLUGIN_ROOT, 'playground', 'vendor', 'playground-design-system');
// DS stylesheets to inline. Skip fonts.css — tokens.css has system-ui
// fallbacks (-apple-system, BlinkMacSystemFont, system-ui, sans-serif),
// so reports stay self-contained without bundling ~940 KB of woff2.
const CSS_FILES = [
'tokens.css',
'base.css',
'components.css',
'components-tier2.css',
'components-tier3.css',
'components-tier3-supplement.css'
];
// .report-table is a playground-local DS supplement (DS doesn't ship it). Same
// styling lives in playground inline <style> block. Keep in sync with playground
// llm-security-playground.html (search for "v7.6.1 fix: .report-table").
const REPORT_TABLE_CSS = `
.report-table { width: 100%; border-collapse: collapse; margin: var(--space-3) 0; font-size: var(--font-size-sm); }
.report-table th { text-align: left; padding: 8px 12px; border-bottom: 2px solid var(--color-border-moderate); background: var(--color-bg-soft); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); text-transform: uppercase; font-size: 11px; letter-spacing: 0.04em; }
.report-table td { padding: 8px 12px; border-bottom: 1px solid var(--color-border-subtle); vertical-align: top; color: var(--color-text-primary); }
.report-table tr:last-child td { border-bottom: none; }
.report-table tbody tr:hover { background: var(--color-bg-soft); }
.report-table code { font-family: var(--font-family-mono); font-size: 12px; background: var(--color-surface-sunken); padding: 1px 6px; border-radius: var(--radius-sm); }
.recommendation-card__body { overflow-wrap: anywhere; word-break: break-word; }
main.page { max-width: 1100px; margin: 0 auto; padding: var(--space-6) var(--space-5); }
@media (max-width: 720px) { main.page { padding: var(--space-4) var(--space-3); } }
`;
function parseArgs(argv) {
const args = { commandId: null, in: null, out: null };
for (let i = 0; i < argv.length; i++) {
const a = argv[i];
if (a === '--in') args.in = argv[++i];
else if (a === '--out') args.out = argv[++i];
else if (!a.startsWith('--') && !args.commandId) args.commandId = a;
}
return args;
}
function commandToRendererName(commandId) {
return 'render' + commandId.split('-').map(s => s[0].toUpperCase() + s.slice(1)).join('');
}
function readStdinSync() {
try {
return readFileSync(0, 'utf8');
} catch {
return '';
}
}
function timestamp() {
const d = new Date();
const pad = n => String(n).padStart(2, '0');
return `${d.getFullYear()}${pad(d.getMonth() + 1)}${pad(d.getDate())}-${pad(d.getHours())}${pad(d.getMinutes())}${pad(d.getSeconds())}`;
}
function loadDsCss() {
return CSS_FILES.map(name => {
const path = join(VENDOR_CSS_DIR, name);
if (!existsSync(path)) return `/* missing: ${name} */`;
return `/* === ${name} === */\n` + readFileSync(path, 'utf8');
}).join('\n');
}
function wrapHtml(commandId, bodyHtml, dsCss) {
return `<!DOCTYPE html>
<html lang="nb" data-theme="dark">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>llm-security · ${commandId}</title>
<script>
(function(){var t=null;try{var s=localStorage.getItem('llm-security-theme');if(s==='light'||s==='dark')t=s;}catch(e){}if(!t&&window.matchMedia)t=window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light';if(!t)t=document.documentElement.getAttribute('data-theme')||'dark';document.documentElement.setAttribute('data-theme',t);document.documentElement.style.colorScheme=t;})();
</script>
<style>
${dsCss}
${REPORT_TABLE_CSS}
</style>
</head>
<body>
<main class="page">
${bodyHtml}
</main>
</body>
</html>
`;
}
function fail(code, msg) {
process.stderr.write(`render-report: ${msg}\n`);
process.exit(code);
}
function main() {
const args = parseArgs(process.argv.slice(2));
if (!args.commandId) fail(1, 'missing <commandId> (e.g. scan, audit, posture, deep-scan)');
if (!args.in) fail(1, 'missing --in <path|->');
const parser = PARSERS[args.commandId];
if (!parser) fail(1, `unknown commandId "${args.commandId}". Valid: ${Object.keys(PARSERS).join(', ')}`);
const rendererName = commandToRendererName(args.commandId);
const renderer = RENDERERS[rendererName];
if (typeof renderer !== 'function') fail(1, `no renderer found for "${args.commandId}" (looked up ${rendererName})`);
let md;
try {
md = args.in === '-' ? readStdinSync() : readFileSync(resolve(args.in), 'utf8');
} catch (e) {
fail(1, `cannot read input: ${e.message}`);
}
if (!md || !md.trim()) fail(1, 'input markdown is empty');
let data;
try {
data = parser(md);
} catch (e) {
fail(1, `parser threw: ${e.message}`);
}
if (!data || typeof data !== 'object') fail(1, 'parser returned non-object');
const slot = { innerHTML: '' };
try {
renderer(data, slot);
} catch (e) {
fail(2, `renderer threw: ${e.message}`);
}
if (!slot.innerHTML) fail(2, 'renderer produced empty HTML');
const dsCss = loadDsCss();
const html = wrapHtml(args.commandId, slot.innerHTML, dsCss);
if (args.out === '-') {
process.stdout.write(html);
return;
}
let outPath;
if (args.out) {
outPath = isAbsolute(args.out) ? args.out : resolve(args.out);
} else {
const reportsDir = resolve('reports');
try {
mkdirSync(reportsDir, { recursive: true });
} catch (e) {
fail(3, `cannot create reports dir: ${e.message}`);
}
outPath = join(reportsDir, `${args.commandId}-${timestamp()}.html`);
}
try {
mkdirSync(dirname(outPath), { recursive: true });
writeFileSync(outPath, html, 'utf8');
} catch (e) {
fail(3, `cannot write ${outPath}: ${e.message}`);
}
process.stdout.write(`file://${outPath}\n`);
}
main();

View file

@ -1,6 +1,6 @@
{ {
"name": "ms-ai-architect", "name": "ms-ai-architect",
"version": "1.15.0", "version": "1.14.0",
"description": "Microsoft AI Solution Architect - structured architecture guidance for the full Microsoft AI stack", "description": "Microsoft AI Solution Architect - structured architecture guidance for the full Microsoft AI stack",
"author": { "author": {
"name": "Kjell Tore Guttormsen" "name": "Kjell Tore Guttormsen"

View file

@ -1,6 +1,4 @@
*.local.md *.local.md
*.local.html
*.local.json
.mcp.json .mcp.json
.DS_Store .DS_Store
.claude/ .claude/

View file

@ -5,67 +5,6 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
## [1.15.0] - 2026-05-16
### Changed — playground v3 project-view integration
V2 project-surface (screen-tabs + category-tabs + per-command paste-cards) erstattet av v3 project-view (sidebar + main + import-modal). Sluttproduktet av 5 sesjoner: V2-PROJECT-VIEW-SPEC, JS-foundation, renderProjectView/renderProjectArtifact/renderArtifactNav, testing (97 nye assertions), og nå integration + ship.
#### Sesjon 5: integration + ship
- `renderActive()` ruter `project`-surface til ny `renderProjectSurfaceV3()` som wrapper renderProjectView + topbar + app-shell.
- `renderProjectSurface` (152 linjer), `renderCommandSubCard` (87 linjer), `rehydratePasteImports` (15 linjer) slettet.
- `currentProjectScreen` modul-var slettet; `currentProjectTab` beholdt som zombie for `ACTIONS['project-tab']`/`ACTIONS['parse']`/`handlePasteImport` (test-back-compat).
- `ACTIONS['project-screen']` slettet.
- 5 v2-CSS-klasser slettet: `.project-tabs`, `.project-tab`, `.project-tab__count`, `.sub-zone`, `.paste-import-row`, `.project-header__*`, `.command-cards`.
#### Fingerprint-gap lukket
- `requirements.headers`: utvidet til `/^\s*#\s*(EU\s*AI\s*Act\s*[—-]\s*Krav|AI\s*Act-?krav|Krav per|Requirements)/im` (matcher "EU AI Act — Krav for høyrisiko provider+deployer").
- `license.headers`: utvidet til `/^\s*#\s*(Lisens(kart|kapabilitets|-kapabilitets)?(legging|matrise)?|License\s*Mapping)/im` (matcher "Lisens-kapabilitetsmatrise").
- `KNOWN_GAP_FIXTURES = {}` i `tests/test-playground-fingerprints.sh` (var `{ requirements: true, license: true }`).
#### Migrasjon utvidet (v2→v3) med parserFor
- `migrateDataVersion(state, archetypeFor, parserFor)` tredje arg lagt til.
- Hvis `reports[cid].parsed` mangler men `raw_markdown` finnes, kjøres `parserFor(cid)` automatisk.
- `defaultParserFor(cmdId)` resolverer `PARSERS[archetypeFor(cmdId)]`.
- Tre callsites oppdatert: cold-load, import-state, load-demo.
#### Browser-fixes funnet via dogfood
- `components-tier4-project-view.css` lagt til i `<link>`-chain (filen var vendored, men ikke loaded → modal-overlay og two-column layout virket ikke).
- `renderImportModal` setter `data-open="true"``.import-modal`-div (DS-kontrakt: `display: flex` aktiveres kun ved `[data-open="true"]`).
#### Tester
- `bash tests/run-e2e.sh --playground`**386 PASS**, 0 FAIL, 2 WARN (pre-eksisterende: `.cmd-pipeline` reservert; multiselect form-felt).
- v3-static: 219 PASS (var 202 — la til 17 nye renderer-routing-asserts)
- parsers: 70 PASS
- migrations: 16 PASS
- fingerprints: 32 PASS (var 30, 2 WARN → 32, 0 WARN)
- project-view: 30 PASS
- actions: 19 PASS
- `bash tests/validate-plugin.sh` → 219 PASS.
#### Screenshots regenerert til v1.15.0/
24 PNG-er (12 surfaces × 2 tema, retina, fullPage der applicable). Nye surfaces: project-overview, project-artifact-{classify, security, ros, cost, summary}, project-import-modal (viewport-only), project-search.
#### Demo-flyt verifisert i nettleser
- "Last inn demo-data" → 17 artifacts loaded + migrasjonen v2→v3 fyller `parsed`/`verdict`/`keyStats`.
- Sidebar viser alle 17 grupperte commands med severity-badges.
- Aggregate verdict (BLOKKERT) + key stats (17/17, 5/5, 2026-05-04) i header.
- Importer/Re-importer-modal åpner som overlay med backdrop.
- Per-artifact navigasjon (klikk i sidebar) → mounter riktig renderer i main-area.
### Notes on 1.15.0
- Sesjon 5 fullført i én pass — token-budsjettet (~80-100k) holdt.
- v2-mockup.local.html + V2-PROJECT-VIEW-SPEC.local.md beholdt inntil sesjon 8 ship (per scope grenser).
- Pre-eksisterende kosmetiske issues (duplisert artifact-title, "Manglende rapporter"-heading-feil) ikke fikset — utenfor scope for sesjon 5 (integration), planlagt v1.16.0.
## [1.14.0] - 2026-05-08 ## [1.14.0] - 2026-05-08
### Changed — playground root-cause refaktor (6 sesjoner) ### Changed — playground root-cause refaktor (6 sesjoner)

View file

@ -96,6 +96,173 @@ Agenter leser navngitte kjernefiler, ikke hele kataloger:
Se `references/architecture/recommended-mcp-servers.md` for detaljer. Se `references/architecture/recommended-mcp-servers.md` for detaljer.
## Utvikling
### Legge til ny kunnskapsbase
1. Opprett `.md`-fil i riktig undermappe under den relevante skillens `references/`-mappe (f.eks. `skills/ms-ai-engineering/references/`)
2. Følg format fra eksisterende filer (header, dato, seksjoner, "For Cosmo"-seksjon)
3. Oppdater relevant SKILL.md med referanse
### Legge til ny kommando
1. Opprett `commands/navn.md` med frontmatter (`description`, `argument-hint`)
2. Følg mønster fra eksisterende kommandoer
3. Oppdater `commands/help.md` med ny kommando
4. Oppdater denne CLAUDE.md
### Legge til ny agent
1. Opprett `agents/navn-agent.md` med frontmatter (`name`, `description`, `model`, `color`, `tools`)
2. Inkluder tydelig "triggers on" i description
3. Oppdater denne CLAUDE.md
### Testing
#### Statisk validering
```bash
# Kjør plugin-validering (frontmatter, encoding, KB-referanser)
bash tests/validate-plugin.sh
```
#### KB-ferskhet (sitemap-basert, manuell drift)
**Apply-fasen kjøres via slash-kommandoen** (krever aktiv Claude Code-sesjon, holder oss innenfor Anthropic Consumer Terms § 3):
```text
/architect:kb-update # default: critical + high
/architect:kb-update --priorities critical # bare critical
/architect:kb-update --skip-discover # hopp over new-URL discovery
/architect:kb-update --dry-run # rapport uten apply
```
**Endringsrapport-fasen kan kjøres som rent Node-script (ingen LLM-kostnad):**
```bash
# Poll sitemaps → endringsrapport (ingen filendringer)
node scripts/kb-update/run-weekly-update.mjs --force
# Med discovery av nye relevante sider
node scripts/kb-update/run-weekly-update.mjs --force --discover
# Vis rapport på nytt etter polling
node scripts/kb-update/report-changes.mjs
# Bygg/oppdater URL-registry fra referansefiler
node scripts/kb-update/build-registry.mjs [--merge]
```
Systemet sammenligner Microsoft Learn sitemap-`<lastmod>` med filenes `Last updated:` header, og genererer en prioritert endringsrapport (critical/high/medium/low).
**Match rate:** ~69% av 1342 URLer matche mot sitemaps. ~31% (mest `azure/ai-foundry/openai/`-stier) finnes ikke i sitemaps pga. Microsofts URL-restrukturering.
**Schedulering:** Pluginen schedulerer ingenting. Bruker som vil ha periodisk varsling kan sette opp egen cron / launchd / systemd / GitHub Actions som kjører `node scripts/kb-update/run-weekly-update.mjs --force --discover` (rapport-fasen, ikke apply). Apply-fasen er bevisst manuell — den krever LLM-resonnering på diff og kjører fra en åpen Claude Code-sesjon.
Legacy (deprecated):
```bash
bash scripts/kb-staleness-check.sh # mtime-basert, upålitelig etter git clone
```
#### E2E-regresjonstester
```bash
# Kjør alle E2E-suiter
bash tests/run-e2e.sh
# Kjør enkeltsuiter
bash tests/run-e2e.sh --security
bash tests/run-e2e.sh --cost
bash tests/run-e2e.sh --summary
bash tests/run-e2e.sh --ai-act
```
Fixture-basert validering av agent-output (sikkerhet, kostnad, sammendrag). Tester struktur, encoding, og domene-spesifikke krav uten å invokere Claude.
#### Manuell test
```bash
# Test at plugin registreres
cd <plugin-root>
claude --plugin ./plugins/ms-ai-architect
# Kjør hovedcommand
/architect
# Vis alle kommandoer
/architect:help
```
## Playground (v3 / v1.14.0)
Interaktiv decision-builder + rapport-viewer for Microsoft AI-beslutninger. Erstatter v2 5-stegs-pipelinen med en multi-surface-app som persisterer state og visualiserer importerte rapporter inline. Spec: v3-arkitektur dokumentert under `.claude/projects/2026-05-03-playground-v3-architecture/`. v1.10.0-utvidelser dokumentert under `.claude/projects/2026-05-03-ms-ai-architect-v1-10-playground/`. v1.11.0 leverer design-system 100%-adoption (PARALLEL-CSS-migrasjon til DS-konvensjon, inline `<style>`-trim 37%, severity-coded card borders, app-header-restruktur, `.stack-lg` body spacing, AI Act-pyramide bredde-fix). v1.13.0/.1 patchet 10+ symptomatiske visuelle bugs. v1.14.0 leverer root-cause refaktor over 6 sesjoner: B-DS-1/2/3 fikset i shared/ DS v0.4.0 (kanban-card word-break, expansion title-block, matrix-bubble cursor); 3 risk-renderere (renderDpia/Security/Ros) til DS-summary-grid + ros-layout; 6 compliance/govern-renderere bytter lokal `.report-meta`-wrapper mot DS-konvensjon; renderMigrate + renderPoc til expansion-list per fase (slett `.phase-detail`-CSS); 5b-fixes: renderCost p50/p90-objekter ekstrahert via `.monthly` (var "[object Object]"), renderCompare distinctive-token-matching erstatter firstWord-heuristikk, renderUtredning droppet misvisende `role="tab"`. Lokal `<style>`-blokk: 191 → 122 effektive linjer (~36% reduksjon). Alle 17 renderere PASS visuell QA.
- **Fil:** `playground/ms-ai-architect-playground.html` (~3870+ linjer, single-file v3-arkitektur)
- **4 surfaces:** Onboarding (18 felles felt — 4 strukturerte / 14 fritekst etter v1.10.0) → Home (prosjekt-liste + 3 entry-tracks) → Catalog (25 commands gruppert i 5 expansion-grupper med søk) → Project (per-prosjekt tabs, command-form-prefill fra felles state, paste-back-import med rapport-visualisering)
- **Persistens:** IndexedDB-primær med localStorage-fallback. Schema-versjonert (`STATE_KEY = 'ms-ai-architect-state-v1'`) med eager `MIGRATIONS`-pipeline. v1.10.0 introduserer `dataVersion v1→v2`-migrasjon (idempotent) som backfill-er `verdict`+`keyStats`.
- **17 rapport-renderers (felles grunnskjelett):** Alle wrapper output via `renderPageShell()` med eyebrow + h1 + valgfri verdict-pill + valgfri key-stats-grid + arketype-spesifikk body. Parser → struktur → HTML rutet via kanonisk archetype-routing-tabell.
- **Foundation-helpers:** `renderPageShell`, `renderVerdictPill`, `renderKeyStatsGrid`, `inferVerdict`, `inferKeyStats`, `KEY_STATS_CONFIG`.
- **Tier 3-adopsjon:** kanban (conformity, review), mat-ladder (migrate, poc), screen-tabs (utredning, project surface), scenario-card-grid (license, compare), residual-pair (dpia, ros), top-risks (ros), recommendation-card (security, ros), suppressed-panel (review), critique-card (adr), read-more (utredning, summary), traffic-light (poc).
- **Theme:** Mørk default + lys theme-toggle med Aksel-tokens i begge moduser (lagt til i v1.10.0). Persistert i `localStorage('ms-ai-architect-theme')`. Theme-bootstrap-script i `<head>` unngår FOUC.
- **Eksport/import:** JSON Decision Record-envelope (Blob + FileReader), schema-versjon-bevisst på import.
### Validering (v1.14.0-tall)
| Test | Kommando | Dekning |
|------|----------|---------|
| Statisk struktur | `bash tests/test-playground-v3.sh` | 202 PASS — vendored CSS, surfaces, 25 commands, 14 parsere, 17 renderers (felles grunnskjelett), design-system-klasser, action-handlers, Tier 3-bruk, onboarding field-distribution |
| Parser-fixtures | `bash tests/test-playground-parsers.sh` | 70 PASS — 17 fixtures × parser-routing |
| Migrasjon | `bash tests/test-playground-migrations.sh` | 7 PASS — v1→v2 idempotent migrasjon |
| Kombinert (E2E) | `bash tests/run-e2e.sh --playground` | 272 PASS — statisk + parser-suiter |
| Plugin-validering | `bash tests/validate-plugin.sh` | 219 PASS |
| Manuell A11Y QA | Se `playground/MANUAL-CHECKLIST.md` | 10 seksjoner inkl. axe-core-kjøring per surface |
| A11Y-rapport | `playground/A11Y-RAPPORT.md` | Statisk vurdering klar — browser-axe-kjøring pending |
### Demo system (v1.11.0)
`scripts/build-demo-state.mjs` leser alle 17 fixture-filer fra `playground/test-fixtures/` og injiserer dem som en `<script type="application/json" id="demo-state-v1">`-blokk i playground HTML (idempotent — erstatter eksisterende blokk). "Last inn demo-data"-knappen på onboarding-overflaten kaller `ACTIONS['load-demo']` som leser blokken, erstatter alle state-grener via Proxy-mutasjon, og navigerer til project-surface med 17 pre-importerte rapporter. `rehydratePasteImports()` kjøres via `queueMicrotask` etter project-surface render — fyller textareas fra `project.reports[id].raw_markdown` og kaller `handlePasteImport` for hver. `handlePasteImport` har equal-value-guard for å unngå render-loop.
`tests/screenshot/` inneholder en frittstående Playwright-runner med egen `package.json` (gitignored `node_modules`). `node run.mjs` produserer 24 PNG-er (12 surfaces × 2 tema, retina, fullPage) under `playground/screenshots/v1.14.0/` (v1.10.0 + v1.11.0 beholdt som historisk referanse). Disse committes så forkere ser pluginen uten å installere noe. Demo-org er "Acme Kommune" og demo-prosjekt er "Acme: Kunde-chatbot" — konsistente navn på tvers av alle 17 fixtures (etter v1.11.0 rename fra "Acme AS" / "Demosystem").
### Design-system 100%-adoption (v1.11.0 → v1.14.0)
Sesjon 3-5 la til inline CSS i `playground/ms-ai-architect-playground.html`. v1.11.0 hoisted alle generiske komponenter til `shared/playground-design-system/components-tier3-supplement.css` (DS v0.3.0):
- `.pyramide-desc` / `.pyramide-desc__item`
- `.scenario-card-grid` / `.scenario-card`
- `.residual-pair` / `__cell` / `__cell-label/__cell-value/__cell-meta` / `__arrow`
- `.read-more` / `.read-more__trigger` / `.read-more__chev` / `.read-more__body`
- `.top-risks` / `.top-risk[data-severity]`
- `.recommendation-card`
- `.suppressed-panel`
- `.screen-tabs` / `.screen-tab` / `.screen[data-active]`
v1.14.0 (DS v0.4.0): root-cause fix for tre DS-bugs som tidligere ble symptomatisk patchet i lokal CSS — `.kanban-card__name` (break-word + overflow-wrap; var break-all), `.expansion__title-main/sub` (display: block), `.matrix__bubble` (cursor + hover/focus). Fix-en re-syncet til vendored DS, og tilsvarende lokal-overrides slettet. Plus: 14 renderere refaktorert til DS-konvensjon (3 risk-renderere → DS-summary-grid + ros-layout, 6 compliance/govern-renderere → DS-konvensjon, renderMigrate + renderPoc → expansion-list per fase). Lokal `<style>`-blokk: 191 → 122 effektive linjer (~36% reduksjon siden v1.13.1).
Alle PARALLEL-CSS-navngrupper migrert til DS-konvensjon. `renderPageShell` + `renderKeyStatsGrid` refaktorert til DS markup. Severity-coded card-borders på rapport-cards, app-header-restruktur, `.stack-lg` body spacing på home/project/catalog, AI Act-pyramide bredde-fix, eyebrow-label på home-projects.
Ved videre hoisting: re-sync via `node scripts/sync-design-system.mjs ms-ai-architect`. Dette er endringer i delt asset — krever drift-deteksjon-handling per `MANIFEST.json`.
### Vendored design-system
Playground laster CSS fra `playground/vendor/playground-design-system/` — en vendored
kopi av marketplace-rotens `shared/playground-design-system/`. Dette holder pluginen
**standalone**: HTML-filen kan åpnes fra `file://` uavhengig av marketplace-roten.
- **Sync-skript:** `node scripts/sync-design-system.mjs ms-ai-architect` (ved marketplace-rot)
- **Drift-deteksjon:** `MANIFEST.json` lagrer SHA-256 per fil. Re-sync feiler hvis
vendored fil er endret lokalt — `--force` overstyrer.
- **Lastes i HTML:** `<link>`-tags til `fonts.css`, `tokens.css`, `base.css`,
`components.css`, `components-tier2.css`, `components-tier3.css`,
`components-tier3-supplement.css` (i den rekkefølgen).
- **Aldri rediger** filer under `vendor/playground-design-system/` direkte —
endringer går i `shared/`, deretter re-sync.
> v2-spec under `docs/playground-v2-spec.md` er beholdt som historisk
> referanse, men er IKKE gjeldende kontrakt. v3-arkitekturen er
> dokumentert i `.claude/projects/2026-05-03-playground-v3-architecture/`.
## Relaterte plugins (fremtidig)
- `ms-rag-architect` — RAG-spesialist (egen plugin)
- `ms-power-automate-architect` — Power Automate deep-dive
- `ms-azure-ai-architect` — Azure AI Services deep-dive
- `ms-foundry-architect` — Azure AI Foundry spesialist
- `ms-copilot-studio-architect` — Copilot Studio spesialist
## Hooks (2) ## Hooks (2)
| Event | Script | Formål | | Event | Script | Formål |
@ -105,12 +272,6 @@ Se `references/architecture/recommended-mcp-servers.md` for detaljer.
> Secrets scanning consolidated to llm-security plugin. > Secrets scanning consolidated to llm-security plugin.
## Reference docs (read on demand)
- **Utvikling, testing, KB-refresh-workflow:** `docs/development.md`
- **Playground v3 (decision-builder + rapport-viewer):** `docs/playground.md`
- **Recommended MCP servers (detail):** `references/architecture/recommended-mcp-servers.md`
## Viktige frister (EU AI Act) ## Viktige frister (EU AI Act)
| Frist | Krav | Status | | Frist | Krav | Status |
@ -122,10 +283,3 @@ Se `references/architecture/recommended-mcp-servers.md` for detaljer.
**Tilsynsmyndigheter:** Datatilsynet (personvern), nasjonal AI-tilsynsmyndighet (under etablering), sektortilsyn. **Tilsynsmyndigheter:** Datatilsynet (personvern), nasjonal AI-tilsynsmyndighet (under etablering), sektortilsyn.
## Relaterte plugins (fremtidig)
- `ms-rag-architect` — RAG-spesialist (egen plugin)
- `ms-power-automate-architect` — Power Automate deep-dive
- `ms-azure-ai-architect` — Azure AI Services deep-dive
- `ms-foundry-architect` — Azure AI Foundry spesialist
- `ms-copilot-studio-architect` — Copilot Studio spesialist

View file

@ -6,7 +6,7 @@
*AI-generated: all code produced by Claude Code through dialog-driven development. [Full disclosure →](../../README.md#ai-generated-code-disclosure)* *AI-generated: all code produced by Claude Code through dialog-driven development. [Full disclosure →](../../README.md#ai-generated-code-disclosure)*
![Version](https://img.shields.io/badge/version-1.15.0-blue) ![Version](https://img.shields.io/badge/version-1.14.0-blue)
![Platform](https://img.shields.io/badge/platform-Claude_Code_Plugin-purple) ![Platform](https://img.shields.io/badge/platform-Claude_Code_Plugin-purple)
![Docs](https://img.shields.io/badge/reference_docs-387-green) ![Docs](https://img.shields.io/badge/reference_docs-387-green)
![Agents](https://img.shields.io/badge/agents-12-orange) ![Agents](https://img.shields.io/badge/agents-12-orange)
@ -638,7 +638,6 @@ Category-to-skill routing is defined in `scripts/skill-gen/category-skill-map.js
| Version | Date | Highlights | | Version | Date | Highlights |
|---------|------|-----------| |---------|------|-----------|
| **1.15.0** | 2026-05-16 | Playground v3 project-view integration — `renderProjectSurface` (v2 screen-tabs + category-tabs + per-command paste-cards) erstattet av `renderProjectView` (sidebar med 17 artifacts + main-area + import-modal overlay). `renderActive()` delegerer nå til `renderProjectSurfaceV3()`. Dead code fjernet: `renderCommandSubCard`, `rehydratePasteImports`, `currentProjectScreen`, `ACTIONS['project-screen']`, 5 v2-CSS-klasser (`.project-tabs`, `.project-tab`, `.project-tab__count`, `.sub-zone`, `.paste-import-row`, `.project-header__*`, `.command-cards`). 2 fingerprint-gap lukket: `requirements.headers` matcher nå "EU AI Act — Krav for høyrisiko..."; `license.headers` matcher "Lisens-kapabilitetsmatrise...". v2→v3 migrasjon utvidet med `parserFor` slik at demo-state med kun `raw_markdown` auto-parses inn i `project.artifacts[cid]`. `components-tier4-project-view.css` wired inn (var ikke loaded — modal-overlay og two-column layout virket ikke). `renderImportModal` setter `data-open="true"` (DS-kontrakt). 219 plugin-validering, 386 E2E playground (32 fingerprints, 219 v3-static, 70 parsers, 16 migrations, 30 project-view, 19 actions), 0 FAIL, 2 WARN (pre-eksisterende). 24 screenshots regenerert til `playground/screenshots/v1.15.0/`. Demo viser nå 17 artifacts navigerbare i sidebar, aggregate verdict (BLOKKERT), top-risks-liste, og fungerende re-importer/slett-knapper per artifact. |
| **1.14.0** | 2026-05-08 | Playground root-cause refaktor — DS-konvensjon-adopsjon på tvers av 14 renderere over 6 sesjoner. Sesjon 2: B-DS-1/2/3 fikset i shared/ DS v0.4.0 (kanban-card word-break, expansion title-block, matrix-bubble cursor). Sesjon 3: renderDpia/Security/Ros til DS-summary-grid + ros-layout. Sesjon 4: 6 compliance/govern-renderere bytter `.report-meta`-wrapper mot DS-konvensjon (renderAiActPyramid, renderRequirements, renderConformity, renderTransparency, renderFria, renderReview). Sesjon 5: renderMigrate + renderPoc → expansion-list per fase (slett `.phase-detail`-CSS). Sesjon 5b: renderCost key-stats viste "[object Object]" (parser-output har p50/p90 = {monthly,yearly}-objekter — nå ekstrahert via `.monthly`); renderCompare distinctive-token-matching erstatter firstWord-heuristikk; renderUtredning droppet misvisende `role="tab"`-attributter. Lokal `<style>`-blokk: 191 → 122 effektive linjer (~36% reduksjon). 17 renderere PASS visuell QA mot demo-data. 219 plugin-validering, 272 E2E playground, 7 migrations PASS. 24 screenshots regenerert. | | **1.14.0** | 2026-05-08 | Playground root-cause refaktor — DS-konvensjon-adopsjon på tvers av 14 renderere over 6 sesjoner. Sesjon 2: B-DS-1/2/3 fikset i shared/ DS v0.4.0 (kanban-card word-break, expansion title-block, matrix-bubble cursor). Sesjon 3: renderDpia/Security/Ros til DS-summary-grid + ros-layout. Sesjon 4: 6 compliance/govern-renderere bytter `.report-meta`-wrapper mot DS-konvensjon (renderAiActPyramid, renderRequirements, renderConformity, renderTransparency, renderFria, renderReview). Sesjon 5: renderMigrate + renderPoc → expansion-list per fase (slett `.phase-detail`-CSS). Sesjon 5b: renderCost key-stats viste "[object Object]" (parser-output har p50/p90 = {monthly,yearly}-objekter — nå ekstrahert via `.monthly`); renderCompare distinctive-token-matching erstatter firstWord-heuristikk; renderUtredning droppet misvisende `role="tab"`-attributter. Lokal `<style>`-blokk: 191 → 122 effektive linjer (~36% reduksjon). 17 renderere PASS visuell QA mot demo-data. 219 plugin-validering, 272 E2E playground, 7 migrations PASS. 24 screenshots regenerert. |
| **1.13.1** | 2026-05-06 | Playground visual bugs patch — 10 bugs identifisert post-v1.13.0 av maintainer i nettleser. Fixet: (B7) classify Forpliktelser indent via `.report-meta` CSS-reset; (B8a) `requirement-expand` ACTIONS-handler manglet — R-01..R-09-rader i AI Act-krav var ikke klikkbare; (B8b) expansion title-main + title-sub display:block så de stables; (B10) kanban-card `word-break:break-word` override DS' break-all; (B11) DPIA matrix-bobler match by description (Pass 1 first-cell exact + Pass 2 any-cell substring); (B12, B13, B15) defensive `display:block; clear:both; width:100%` på top-risks/suppressed-panel/phase-detail/aiact-timeline; (B14) Migrate/POC phases-summary-tabell over phase-detail-seksjoner. 23/23 smoke + 271 E2E + 219 plugin-validering. | | **1.13.1** | 2026-05-06 | Playground visual bugs patch — 10 bugs identifisert post-v1.13.0 av maintainer i nettleser. Fixet: (B7) classify Forpliktelser indent via `.report-meta` CSS-reset; (B8a) `requirement-expand` ACTIONS-handler manglet — R-01..R-09-rader i AI Act-krav var ikke klikkbare; (B8b) expansion title-main + title-sub display:block så de stables; (B10) kanban-card `word-break:break-word` override DS' break-all; (B11) DPIA matrix-bobler match by description (Pass 1 first-cell exact + Pass 2 any-cell substring); (B12, B13, B15) defensive `display:block; clear:both; width:100%` på top-risks/suppressed-panel/phase-detail/aiact-timeline; (B14) Migrate/POC phases-summary-tabell over phase-detail-seksjoner. 23/23 smoke + 271 E2E + 219 plugin-validering. |
| **1.13.0** | 2026-05-06 | Playground visual DS-fixes — 5 bugs identifisert og fikset i fix-pakke som speiler llm-security v7.6.1: (B1) `renderFindingsBlock` + `renderRequirements` outer-wrapper byttet fra `<div class="findings">` (DS grid 360px+1fr klemte indre struktur) til `<section class="report-meta">`; (B2) lokal `.report-table` CSS for 6+ rapporter (Trusler, Kostnadsoversikt, TCO, Risiko, Key Metrics) som manglet styling; (B3) ROS-matrise-bobler byttet `<span>``<button>` med `data-threat-id` + click-handler som scroller til Trusler-tabell-rad og highlighter; (B4) `renderRadarSvg` bumpet 300×300→380×380, R=125, dynamisk `text-anchor` for å unngå label-overlap ved 6+ akser; (B5) `recommendation-card__body` overflow-wrap. 22/22 smoke-test PASS. 219 plugin-validering. 272 E2E. | | **1.13.0** | 2026-05-06 | Playground visual DS-fixes — 5 bugs identifisert og fikset i fix-pakke som speiler llm-security v7.6.1: (B1) `renderFindingsBlock` + `renderRequirements` outer-wrapper byttet fra `<div class="findings">` (DS grid 360px+1fr klemte indre struktur) til `<section class="report-meta">`; (B2) lokal `.report-table` CSS for 6+ rapporter (Trusler, Kostnadsoversikt, TCO, Risiko, Key Metrics) som manglet styling; (B3) ROS-matrise-bobler byttet `<span>``<button>` med `data-threat-id` + click-handler som scroller til Trusler-tabell-rad og highlighter; (B4) `renderRadarSvg` bumpet 300×300→380×380, R=125, dynamisk `text-anchor` for å unngå label-overlap ved 6+ akser; (B5) `recommendation-card__body` overflow-wrap. 22/22 smoke-test PASS. 219 plugin-validering. 272 E2E. |

View file

@ -1,92 +0,0 @@
# ms-ai-architect — Development
Plugin development, testing, KB-refresh. Imported from `CLAUDE.md` via pointer.
## Legge til ny kunnskapsbase
1. Opprett `.md`-fil i riktig undermappe under den relevante skillens `references/`-mappe (f.eks. `skills/ms-ai-engineering/references/`)
2. Følg format fra eksisterende filer (header, dato, seksjoner, "For Cosmo"-seksjon)
3. Oppdater relevant SKILL.md med referanse
## Legge til ny kommando
1. Opprett `commands/navn.md` med frontmatter (`description`, `argument-hint`)
2. Følg mønster fra eksisterende kommandoer
3. Oppdater `commands/help.md` med ny kommando
4. Oppdater `CLAUDE.md`
## Legge til ny agent
1. Opprett `agents/navn-agent.md` med frontmatter (`name`, `description`, `model`, `color`, `tools`)
2. Inkluder tydelig "triggers on" i description
3. Oppdater `CLAUDE.md`
## Testing
### Statisk validering
```bash
# Kjør plugin-validering (frontmatter, encoding, KB-referanser)
bash tests/validate-plugin.sh
```
### KB-ferskhet (sitemap-basert, manuell drift)
**Apply-fasen kjøres via slash-kommandoen** (krever aktiv Claude Code-sesjon, holder oss innenfor Anthropic Consumer Terms § 3):
```text
/architect:kb-update # default: critical + high
/architect:kb-update --priorities critical # bare critical
/architect:kb-update --skip-discover # hopp over new-URL discovery
/architect:kb-update --dry-run # rapport uten apply
```
**Endringsrapport-fasen kan kjøres som rent Node-script (ingen LLM-kostnad):**
```bash
# Poll sitemaps → endringsrapport (ingen filendringer)
node scripts/kb-update/run-weekly-update.mjs --force
# Med discovery av nye relevante sider
node scripts/kb-update/run-weekly-update.mjs --force --discover
# Vis rapport på nytt etter polling
node scripts/kb-update/report-changes.mjs
# Bygg/oppdater URL-registry fra referansefiler
node scripts/kb-update/build-registry.mjs [--merge]
```
Systemet sammenligner Microsoft Learn sitemap-`<lastmod>` med filenes `Last updated:` header, og genererer en prioritert endringsrapport (critical/high/medium/low).
**Match rate:** ~69% av 1342 URLer matche mot sitemaps. ~31% (mest `azure/ai-foundry/openai/`-stier) finnes ikke i sitemaps pga. Microsofts URL-restrukturering.
**Schedulering:** Pluginen schedulerer ingenting. Bruker som vil ha periodisk varsling kan sette opp egen cron / launchd / systemd / GitHub Actions som kjører `node scripts/kb-update/run-weekly-update.mjs --force --discover` (rapport-fasen, ikke apply). Apply-fasen er bevisst manuell — den krever LLM-resonnering på diff og kjører fra en åpen Claude Code-sesjon.
Legacy (deprecated):
```bash
bash scripts/kb-staleness-check.sh # mtime-basert, upålitelig etter git clone
```
### E2E-regresjonstester
```bash
# Kjør alle E2E-suiter
bash tests/run-e2e.sh
# Kjør enkeltsuiter
bash tests/run-e2e.sh --security
bash tests/run-e2e.sh --cost
bash tests/run-e2e.sh --summary
bash tests/run-e2e.sh --ai-act
```
Fixture-basert validering av agent-output (sikkerhet, kostnad, sammendrag). Tester struktur, encoding, og domene-spesifikke krav uten å invokere Claude.
### Manuell test
```bash
# Test at plugin registreres
cd <plugin-root>
claude --plugin ./plugins/ms-ai-architect
# Kjør hovedcommand
/architect
# Vis alle kommandoer
/architect:help
```

View file

@ -1,66 +0,0 @@
# ms-ai-architect — Playground (v3 / v1.15.0)
Interaktiv decision-builder + rapport-viewer for Microsoft AI-beslutninger. Imported from `CLAUDE.md` via pointer.
Erstatter v2 5-stegs-pipelinen med en multi-surface-app som persisterer state og visualiserer importerte rapporter inline. Spec: v3-arkitektur dokumentert under `.claude/projects/2026-05-03-playground-v3-architecture/`. v1.10.0-utvidelser dokumentert under `.claude/projects/2026-05-03-ms-ai-architect-v1-10-playground/`. v1.11.0 leverer design-system 100%-adoption. v1.13.0/.1 patchet 10+ symptomatiske visuelle bugs. v1.14.0 leverer root-cause refaktor over 6 sesjoner (DS-konvensjon-adopsjon på 14 renderere, lokal CSS halvert).
**v1.15.0 (sesjon 5 av ~8 i v2-prosjektet):** Project-surface byttet fra v2 `renderProjectSurface` (screen-tabs + category-tabs + per-command paste-cards) til v3 `renderProjectView` (sidebar med 17 artifacts + main-area + import-modal overlay). `renderActive()` ruter `project`-surface til `renderProjectSurfaceV3()` som wrapper renderProjectView + topbar + app-shell. V2-surface helt fjernet: `renderProjectSurface` (152 linjer), `renderCommandSubCard` (87 linjer), `rehydratePasteImports` (15 linjer), `currentProjectScreen`, `ACTIONS['project-screen']`, 5 v2-CSS-klasser. Zombie-handlers beholdt for test-back-compat: `currentProjectTab`, `ACTIONS['project-tab']`, `ACTIONS['parse']`, `handlePasteImport`, `window.__handlePasteImport`. 2 fingerprint-gap lukket: requirements.headers + license.headers. `migrateDataVersion` utvidet med `parserFor` → demo-state (kun `raw_markdown`) auto-parses til `project.artifacts[cid]`. Ship-QA-bugfixes: `components-tier4-project-view.css` lagt til i `<link>`-kjeden (manglet → modal-overlay og two-column layout virket ikke); `renderImportModal` setter `data-open="true"` (DS-kontrakt).
- **Fil:** `playground/ms-ai-architect-playground.html` (~3870+ linjer, single-file v3-arkitektur)
- **4 surfaces:** Onboarding (18 felles felt — 4 strukturerte / 14 fritekst etter v1.10.0) → Home (prosjekt-liste + 3 entry-tracks) → Catalog (25 commands gruppert i 5 expansion-grupper med søk) → **Project v3** (sidebar med 17 artifacts gruppert i 4 kategorier + søk + main-area med per-artifact view eller overview med top-risks/next-actions + import-modal som DS-overlay)
- **Persistens:** IndexedDB-primær med localStorage-fallback. Schema-versjonert (`STATE_KEY = 'ms-ai-architect-state-v1'`) med eager `MIGRATIONS`-pipeline. v1.10.0 introduserer `dataVersion v1→v2`-migrasjon (idempotent) som backfill-er `verdict`+`keyStats`.
- **17 rapport-renderers (felles grunnskjelett):** Alle wrapper output via `renderPageShell()` med eyebrow + h1 + valgfri verdict-pill + valgfri key-stats-grid + arketype-spesifikk body. Parser → struktur → HTML rutet via kanonisk archetype-routing-tabell.
- **Foundation-helpers:** `renderPageShell`, `renderVerdictPill`, `renderKeyStatsGrid`, `inferVerdict`, `inferKeyStats`, `KEY_STATS_CONFIG`.
- **Tier 3-adopsjon:** kanban (conformity, review), mat-ladder (migrate, poc), screen-tabs (utredning, project surface), scenario-card-grid (license, compare), residual-pair (dpia, ros), top-risks (ros), recommendation-card (security, ros), suppressed-panel (review), critique-card (adr), read-more (utredning, summary), traffic-light (poc).
- **Theme:** Mørk default + lys theme-toggle med Aksel-tokens i begge moduser (lagt til i v1.10.0). Persistert i `localStorage('ms-ai-architect-theme')`. Theme-bootstrap-script i `<head>` unngår FOUC.
- **Eksport/import:** JSON Decision Record-envelope (Blob + FileReader), schema-versjon-bevisst på import.
## Validering (v1.15.0-tall)
| Test | Kommando | Dekning |
|------|----------|---------|
| Statisk struktur | `bash tests/test-playground-v3.sh` | 219 PASS, 2 WARN (pre-eks.) — vendored CSS, surfaces, 25 commands, 14 parsere, 17 renderers via PROJECT_VIEW_CONFIG.renderers-routing, action-handlers |
| Parser-fixtures | `bash tests/test-playground-parsers.sh` | 70 PASS — 17 fixtures × parser-routing |
| Migrasjon | `bash tests/test-playground-migrations.sh` | 16 PASS — v1→v2 + v2→v3 idempotent migrasjon |
| Fingerprints | `bash tests/test-playground-fingerprints.sh` | 32 PASS — 17-fixture true-positive + 4 anti-match + API-sanity |
| Project-view | `bash tests/test-playground-projectview.sh` | 30 PASS — 4 view-states + nav-søk + null-guard |
| ACTIONS | `bash tests/test-playground-actions.sh` | 19 PASS — 6 pure-state-handlers + projectViewUiState |
| Kombinert (E2E) | `bash tests/run-e2e.sh --playground` | 386 PASS, 0 FAIL, 2 WARN |
| Plugin-validering | `bash tests/validate-plugin.sh` | 219 PASS |
| Manuell A11Y QA | Se `playground/MANUAL-CHECKLIST.md` | 10 seksjoner inkl. axe-core-kjøring per surface |
| A11Y-rapport | `playground/A11Y-RAPPORT.md` | Statisk vurdering klar — browser-axe-kjøring pending |
## Demo system (v1.11.0 → v1.15.0)
`scripts/build-demo-state.mjs` leser alle 17 fixture-filer fra `playground/test-fixtures/` og injiserer dem som en `<script type="application/json" id="demo-state-v1">`-blokk i playground HTML (idempotent — erstatter eksisterende blokk). "Last inn demo-data"-knappen på onboarding-overflaten kaller `ACTIONS['load-demo']` som leser blokken, erstatter alle state-grener via Proxy-mutasjon, kjører `migrateDataVersion` (v2→v3 auto-parser raw_markdown til artifacts), og navigerer til project-surface. Demo viser 17 artifacts gruppert i sidebar med severity-badges, aggregate verdict (BLOKKERT), top-risks-liste, og fungerende re-importer/slett-knapper per artifact.
`tests/screenshot/` inneholder en frittstående Playwright-runner med egen `package.json` (gitignored `node_modules`). `node run.mjs` produserer 24 PNG-er (12 surfaces × 2 tema) under `playground/screenshots/v1.15.0/`. v1.15.0-surfaces: onboarding-empty, project-overview, project-artifact-{classify,security,ros,cost,summary}, project-import-modal (viewport-only — modal er position:fixed overlay), project-search, home, catalog, onboarding-prefilled. v1.10.0/v1.11.0/v1.14.0 beholdt som historisk referanse. Disse committes så forkere ser pluginen uten å installere noe. Demo-org er "Acme Kommune" og demo-prosjekt er "Acme: Kunde-chatbot".
## Design-system 100%-adoption (v1.11.0 → v1.14.0)
Sesjon 3-5 la til inline CSS i `playground/ms-ai-architect-playground.html`. v1.11.0 hoisted alle generiske komponenter til `shared/playground-design-system/components-tier3-supplement.css` (DS v0.3.0):
- `.pyramide-desc` / `.pyramide-desc__item`
- `.scenario-card-grid` / `.scenario-card`
- `.residual-pair` / `__cell` / `__cell-label/__cell-value/__cell-meta` / `__arrow`
- `.read-more` / `.read-more__trigger` / `.read-more__chev` / `.read-more__body`
- `.top-risks` / `.top-risk[data-severity]`
- `.recommendation-card`
- `.suppressed-panel`
- `.screen-tabs` / `.screen-tab` / `.screen[data-active]`
v1.14.0 (DS v0.4.0): root-cause fix for tre DS-bugs som tidligere ble symptomatisk patchet i lokal CSS — `.kanban-card__name` (break-word + overflow-wrap; var break-all), `.expansion__title-main/sub` (display: block), `.matrix__bubble` (cursor + hover/focus). Fix-en re-syncet til vendored DS, og tilsvarende lokal-overrides slettet. Plus: 14 renderere refaktorert til DS-konvensjon (3 risk-renderere → DS-summary-grid + ros-layout, 6 compliance/govern-renderere → DS-konvensjon, renderMigrate + renderPoc → expansion-list per fase). Lokal `<style>`-blokk: 191 → 122 effektive linjer (~36% reduksjon siden v1.13.1).
Alle PARALLEL-CSS-navngrupper migrert til DS-konvensjon. `renderPageShell` + `renderKeyStatsGrid` refaktorert til DS markup. Severity-coded card-borders på rapport-cards, app-header-restruktur, `.stack-lg` body spacing på home/project/catalog, AI Act-pyramide bredde-fix, eyebrow-label på home-projects.
Ved videre hoisting: re-sync via `node scripts/sync-design-system.mjs ms-ai-architect`. Dette er endringer i delt asset — krever drift-deteksjon-handling per `MANIFEST.json`.
## Vendored design-system
Playground laster CSS fra `playground/vendor/playground-design-system/` — en vendored kopi av marketplace-rotens `shared/playground-design-system/`. Dette holder pluginen **standalone**: HTML-filen kan åpnes fra `file://` uavhengig av marketplace-roten.
- **Sync-skript:** `node scripts/sync-design-system.mjs ms-ai-architect` (ved marketplace-rot)
- **Drift-deteksjon:** `MANIFEST.json` lagrer SHA-256 per fil. Re-sync feiler hvis vendored fil er endret lokalt — `--force` overstyrer.
- **Lastes i HTML:** `<link>`-tags til `fonts.css`, `tokens.css`, `base.css`, `components.css`, `components-tier2.css`, `components-tier3.css`, `components-tier3-supplement.css` (i den rekkefølgen).
- **Aldri rediger** filer under `vendor/playground-design-system/` direkte — endringer går i `shared/`, deretter re-sync.
> v2-spec under `docs/playground-v2-spec.md` er beholdt som historisk referanse, men er IKKE gjeldende kontrakt. v3-arkitekturen er dokumentert i `.claude/projects/2026-05-03-playground-v3-architecture/`.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 718 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 245 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 620 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 616 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 879 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 872 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 960 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 954 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 863 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 857 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 744 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 739 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 816 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 809 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 265 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 262 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 594 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 588 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 216 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 214 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 415 KiB

Some files were not shown because too many files have changed in this diff Show more