@hegemonart/get-design-done 1.35.3 → 1.36.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.claude-plugin/marketplace.json +2 -2
- package/.claude-plugin/plugin.json +1 -1
- package/CHANGELOG.md +45 -0
- package/README.md +8 -0
- package/SKILL.md +1 -0
- package/agents/design-auditor.md +15 -0
- package/agents/design-context-builder.md +30 -0
- package/connections/connections.md +10 -1
- package/connections/notion.md +57 -0
- package/package.json +1 -1
- package/reference/domains/civic-patterns.md +101 -0
- package/reference/domains/finance-patterns.md +123 -0
- package/reference/domains/gaming-patterns.md +111 -0
- package/reference/domains/healthcare-patterns.md +103 -0
- package/reference/export-formats.md +31 -0
- package/reference/registry.json +35 -0
- package/scripts/lib/export/build-html.cjs +112 -0
- package/skills/connections/SKILL.md +4 -4
- package/skills/connections/connections-onboarding.md +13 -4
- package/skills/export/SKILL.md +30 -0
|
@@ -5,14 +5,14 @@
|
|
|
5
5
|
},
|
|
6
6
|
"metadata": {
|
|
7
7
|
"description": "Get Design Done — 5-stage agent-orchestrated design pipeline with 9 connections, handoff-first workflow, bidirectional Figma write-back, 22+ specialized agents, queryable knowledge layer (intel store, dependency analysis, learnings extraction), and a self-improvement loop (reflector, frontmatter + budget feedback, global-skills layer). v1.20.0 ships the SDK foundation: gdd-state MCP server (11 typed tools), lockfile-safe STATE.md mutations, event stream, and resilience primitives (jittered-backoff, rate-guard, error-classifier, iteration-budget) for rate-limit + 429 + context-overflow recovery. Full CI/CD pipeline (Node 22/24 × Linux/macOS/Windows) and release automation (auto-tag + GitHub Release + release-time smoke test).",
|
|
8
|
-
"version": "1.
|
|
8
|
+
"version": "1.36.1"
|
|
9
9
|
},
|
|
10
10
|
"plugins": [
|
|
11
11
|
{
|
|
12
12
|
"name": "get-design-done",
|
|
13
13
|
"source": "./",
|
|
14
14
|
"description": "Agent-orchestrated 5-stage design pipeline: Brief → Explore → Plan → Design → Verify. 22+ specialized agents, 9 connections (Figma, Refero, Preview, Storybook, Chromatic, Figma Writer, Graphify, Pinterest, Claude Design), Claude Design handoff, bidirectional Figma write-back, and a queryable intel store (.design/intel/) for dependency and learnings queries. Standalone commands: style, darkmode, compare, figma-write, graphify, handoff, analyze-dependencies, skill-manifest, extract-learnings. Embeds NNG heuristics, WCAG thresholds, typographic systems, motion framework, and anti-pattern catalog. Ships with a full CI/CD pipeline (Node 22/24 × Linux/macOS/Windows) and release automation. Optimization layer (v1.0.4.1, retroactive): gdd-router + gdd-cache-manager skills, PreToolUse budget-enforcer hook, tier-aware agent frontmatter, lazy checker gates, streaming synthesizer, /gdd:warm-cache + /gdd:optimize commands, and cost telemetry at .design/telemetry/costs.jsonl — targeting 50-70% per-task token-cost reduction with no quality-floor regression. v1.20.0 SDK foundation: gdd-state MCP server (11 typed tools), lockfile-safe STATE.md mutations, event stream at .design/telemetry/events.jsonl, resilience primitives (jittered-backoff, rate-guard, error-classifier, iteration-budget) with rate-limit + 429 + context-overflow recovery, and TypeScript toolchain.",
|
|
15
|
-
"version": "1.
|
|
15
|
+
"version": "1.36.1",
|
|
16
16
|
"author": {
|
|
17
17
|
"name": "hegemonart"
|
|
18
18
|
},
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "get-design-done",
|
|
3
3
|
"short_name": "gdd",
|
|
4
|
-
"version": "1.
|
|
4
|
+
"version": "1.36.1",
|
|
5
5
|
"description": "Agent-orchestrated 5-stage design pipeline: Brief → Explore → Plan → Design → Verify. 22+ specialized agents, 9 connections (Figma, Refero, Preview, Storybook, Chromatic, Figma Writer, Graphify, Pinterest, Claude Design), handoff-first workflow via Claude Design bundles, bidirectional Figma write-back (annotations, Code Connect), queryable intel store (`.design/intel/`) for O(1) design surface lookups, and self-improvement loop (reflector agent, frontmatter + budget feedback, global-skills layer at `~/.claude/gdd/global-skills/`). Standalone commands: style, darkmode, compare, figma-write, graphify, handoff, analyze-dependencies, skill-manifest, extract-learnings, reflect, apply-reflections. Embeds NNG heuristics, WCAG thresholds, typographic systems, motion framework, and anti-pattern catalog. Ships with a full CI/CD pipeline (Node 22/24 × Linux/macOS/Windows, lint + schema + frontmatter + stale-ref + shellcheck + gitleaks + injection-scan + blocking size-budget) and release automation (auto-tag + GitHub Release + release-time smoke test). Optimization layer (v1.0.4.1, retroactive): gdd-router + gdd-cache-manager skills, PreToolUse budget-enforcer hook, tier-aware agent frontmatter, lazy checker gates, streaming synthesizer, /gdd:warm-cache + /gdd:optimize commands, and cost telemetry at .design/telemetry/costs.jsonl — targeting 50-70% per-task token-cost reduction with no quality-floor regression. v1.20.0 SDK foundation: gdd-state MCP server (11 typed tools), lockfile-safe STATE.md mutations, event stream at .design/telemetry/events.jsonl, resilience primitives (jittered-backoff, rate-guard, error-classifier, iteration-budget) with rate-limit + 429 + context-overflow recovery, and TypeScript toolchain. v1.27.7 ships gdd-mcp (Phase 27.7): 12 read-only MCP tools for sub-3s priming. v1.28.0 (Phase 28): Foundational References Tier 2 — 5 new reference files (color-theory, composition, proportion-systems, i18n, contrast-advanced), 2 verifier i18n probes + 1 explore i18n-readiness probe, 12 additive cross-link insertions across 10 existing references, 2 orthogonal audit-scoring lens-tags (composition_alignment + i18n_readiness).",
|
|
6
6
|
"author": {
|
|
7
7
|
"name": "hegemonart",
|
package/CHANGELOG.md
CHANGED
|
@@ -4,6 +4,51 @@ All notable changes to get-design-done are documented here. Versions follow [sem
|
|
|
4
4
|
|
|
5
5
|
---
|
|
6
6
|
|
|
7
|
+
## [1.36.1] - 2026-06-01
|
|
8
|
+
|
|
9
|
+
### Phase 36.1 — Knowledge Tier-3: Domain Packs (finance + healthcare + gaming + civic)
|
|
10
|
+
|
|
11
|
+
First sub-phase of the split **Phase 36 (Knowledge Tier 3)**. Adds four industry-specific design-pattern reference packs and wires **domain detection** into the pipeline — closing the industry-lens gap (GDD shipped 18 generic design systems + foundational Tier-2, but no domain-specific patterns). Finance and healthcare especially carry regulatory constraints (PCI-DSS, MiFID II, HIPAA, Section 508) that bleed into UI. **No new pillar, no breaking scoring change, no new runtime dependency, no new egress** — pure reference markdown + agent-prompt edits; detection is keyword/dep matching done by the agent.
|
|
12
|
+
|
|
13
|
+
### Added
|
|
14
|
+
|
|
15
|
+
- **`reference/domains/finance-patterns.md`** — data-table density (tabular-nums, right-aligned numerics), trading-interface conventions (gain/loss never color-alone), regulatory disclosure placement (Reg-T, MiFID II cost & charges), PCI-DSS PAN masking, number-formatting precision, real-time data states.
|
|
16
|
+
- **`reference/domains/healthcare-patterns.md`** — HIPAA-aware PHI isolation (no PHI in URLs/logs/analytics), idle auto-logout, audit-trail-as-UI, MyChart-class flows, WCAG 2.1 AAA, medical-data visualization. Surfaces risk; does **not** certify compliance.
|
|
17
|
+
- **`reference/domains/gaming-patterns.md`** — HUD/diegetic UI taxonomy, vestibular + photosensitive safety (≤3 flashes/sec, reduced-motion + in-game toggles), ESRB/PEGI age-gates, input-model adaptation (controller/touch/KBM), TV-safe area.
|
|
18
|
+
- **`reference/domains/civic-patterns.md`** — Section 508 + WCAG 2.1 AA hard floor, multi-language gov forms (EN/ES/zh-Hans), Plain Writing Act (grade 6-8), USWDS, session-timeout warnings, one-thing-per-page forms.
|
|
19
|
+
- **`agents/design-context-builder.md`** — new **Step 0F (Domain Detection)**: a dispatcher table (keywords + `package.json` deps → pack) + the confidence rule (≥2 signals or any dep match → auto-apply; 1 weak keyword → suggest; none → skip) + a `<domain>` line in DESIGN-CONTEXT.md. Orthogonal to project-type.
|
|
20
|
+
- **`agents/design-auditor.md`** — **domain checklist addendum**: when a `<domain>` is active, also run that pack's `## Audit checklist` and fold findings into the relevant pillar (additive — never replaces the 7-pillar scoring).
|
|
21
|
+
- All four packs **registered** in `reference/registry.json` (`type: heuristic`, `phase: 36.1`); 145 → 149 entries.
|
|
22
|
+
|
|
23
|
+
### Notes
|
|
24
|
+
|
|
25
|
+
- **No new runtime dependency, no new egress.** Detection is the agent matching a small embedded signal table — no code, no network.
|
|
26
|
+
- 6-manifest lockstep at **v1.36.1** + `OFF_CADENCE_VERSIONS.add('1.36.1')` + the 23 live-pinned `manifests-version.txt` baselines forward-propagated 1.35.5 → 1.36.1 (opens the v1.36.x arc).
|
|
27
|
+
- The 31.5 tarball golden was regenerated as a reviewed delta: **+4** (the four domain packs), zero removals (661 → 665).
|
|
28
|
+
|
|
29
|
+
---
|
|
30
|
+
|
|
31
|
+
## [1.35.5] - 2026-06-01
|
|
32
|
+
|
|
33
|
+
### Phase 35.5 — Design-Artifact Export (`/gdd:export`)
|
|
34
|
+
|
|
35
|
+
Closes the gap that a completed cycle's design output (`EXPERIENCE.md`, `DESIGN.md`, `DESIGN-VERIFICATION.md`, the decision log, screenshots) lives only in the repo — stakeholders not in code can't consume it. `/gdd:export <cycle> --format html|pdf|notion` packages it into a shareable artifact. **No new runtime dependency** (D-02): `build-html.cjs` is a pure, dep-free assembler; the PDF format is the same HTML plus Paged.js-compatible `@page` print CSS that the user renders (GDD ships **no** PDF runtime); Notion is written via the Notion MCP. Every artifact is **redacted** (mandatory `scripts/lib/redact.cjs`); `--pseudonymize` masks git identity / paths / hostname for external sharing; `--pr` posts the HTML preview as a PR comment via `pr-commenter`.
|
|
36
|
+
|
|
37
|
+
### Added
|
|
38
|
+
|
|
39
|
+
- **`scripts/lib/export/build-html.cjs`** — a pure, dependency-free self-contained HTML assembler: inline `<style>`, base64-embedded screenshots, **zero external resource references**, a minimal deterministic markdown→HTML subset. `print: true` adds the Paged.js `@page` print CSS for the PDF format. Same input → byte-identical output.
|
|
40
|
+
- **`skills/export/SKILL.md`** (`/gdd:export`) — resolves the cycle, reads the design source set, redacts always (+ pseudonymizes on `--pseudonymize`), renders html/pdf via `build-html` or a Notion page via the MCP, and hands the HTML to `pr-commenter` on `--pr`.
|
|
41
|
+
- **`connections/notion.md`** — Notion MCP write-path (`mcp__notion__*`, ToolSearch probe, redact, `GDD_DISABLE_NOTION` kill-switch, degrade-to-HTML). Onboarded 18 → 19 — **export-only** (not a pipeline stage; no capability-matrix column).
|
|
42
|
+
- **`reference/export-formats.md`** — the `/gdd:export` contract (source set, the three formats, redact + `--pseudonymize`, the `--pr` hand-off, the self-contained guarantee); registered in `reference/registry.json`.
|
|
43
|
+
|
|
44
|
+
### Notes
|
|
45
|
+
|
|
46
|
+
- **No new runtime dependency** (D-02) and **no new egress** (`scan:outbound` unchanged — Notion is written via MCP tools, not raw HTTP).
|
|
47
|
+
- 6-manifest lockstep at **v1.35.5** + `OFF_CADENCE_VERSIONS.add('1.35.5')` + the 22 live-pinned `manifests-version.txt` baselines forward-propagated 1.35.3 → 1.35.5 (1.35.4 not used).
|
|
48
|
+
- The 31.5 tarball golden was regenerated as a reviewed delta: **+4** (`scripts/lib/export/build-html.cjs`, `skills/export/SKILL.md`, `connections/notion.md`, `reference/export-formats.md`), zero removals (657 → 661).
|
|
49
|
+
|
|
50
|
+
---
|
|
51
|
+
|
|
7
52
|
## [1.35.3] - 2026-06-01
|
|
8
53
|
|
|
9
54
|
### Phase 35.3 — Team Surfaces: Ticket Sync (Linear + Jira) — completes Phase 35
|
package/README.md
CHANGED
|
@@ -146,6 +146,14 @@ Routes pipeline events (verify-fail / audit-pass / ship) to **Slack** + **Discor
|
|
|
146
146
|
|
|
147
147
|
Links a design cycle to a **Linear** or **Jira** ticket and keeps them in sync ([`connections/linear.md`](connections/linear.md) / [`connections/jira.md`](connections/jira.md), MCP-based). [`agents/ticket-sync-agent.md`](agents/ticket-sync-agent.md) surfaces the linked ticket's comments as context when a design file opens (via the decision-injector) and, on `/gdd:complete-cycle`, transitions the ticket + posts a **redacted** summary. Per-system kill-switches (`GDD_DISABLE_LINEAR` / `GDD_DISABLE_JIRA`); degrade-to-noop (never gates the cycle). **No new runtime dependency, no new egress** (MCP tools only). Contract: [`reference/ticket-sync.md`](reference/ticket-sync.md). **Completes the Team Surfaces layer** (PR inline + notifications + ticket sync).
|
|
148
148
|
|
|
149
|
+
### Design-artifact export (v1.35.5)
|
|
150
|
+
|
|
151
|
+
`/gdd:export <cycle> --format html|pdf|notion` packages a finished cycle's design output (`EXPERIENCE.md`, `DESIGN.md`, `DESIGN-VERIFICATION.md`, the decision log, screenshots) into a stakeholder-shareable artifact — for PMs/execs/brand who aren't in the repo. The [`build-html`](scripts/lib/export/build-html.cjs) assembler emits a **self-contained** HTML (inline CSS, base64-embedded screenshots, **zero external references**); `pdf` is the same HTML plus Paged.js-compatible `@page` print CSS you render yourself; `notion` writes a page via the Notion MCP ([`connections/notion.md`](connections/notion.md), degrade-to-HTML). Every artifact is **redacted**; `--pseudonymize` masks identity/paths/hostname for external sharing; `--pr` posts the HTML preview as a PR comment via `pr-commenter`. **No new runtime dependency** (D-02: pure assembler, no PDF/markdown library). Contract: [`reference/export-formats.md`](reference/export-formats.md).
|
|
152
|
+
|
|
153
|
+
### Domain packs — Knowledge Tier 3 (v1.36.1)
|
|
154
|
+
|
|
155
|
+
Four industry-specific design-pattern packs at [`reference/domains/`](reference/domains/) — **finance** (data-table density, trading-UI color semantics, Reg-T/MiFID II disclosure, PCI-DSS masking, number-formatting precision), **healthcare** (HIPAA PHI isolation, audit-trail-as-UI, WCAG 2.1 AAA, medical-data viz), **gaming** (HUD/diegetic taxonomy, vestibular + photosensitive safety, ESRB/PEGI age-gates, controller/touch input adaptation), and **civic** (Section 508 + WCAG 2.1 AA floor, multi-language gov forms, Plain Writing Act, USWDS). The [`design-context-builder`](agents/design-context-builder.md) auto-detects the domain from brief keywords + `package.json` dependencies (`@stripe/`, `fhir`, `@react-three/fiber`, `@uswds/uswds`, …) and loads the matching pack into downstream context; [`design-auditor`](agents/design-auditor.md) folds each pack's audit checklist into the relevant pillar. Additive knowledge — no new pillar, no new runtime dependency. First sub-phase of Phase 36 (Motion-tool verification + Conversational UI follow).
|
|
156
|
+
|
|
149
157
|
### Previous releases
|
|
150
158
|
|
|
151
159
|
- **v1.26.0** — Headless Model Resolver (per-runtime tier→model map, `resolved_models` router field, per-runtime price tables, `reasoning-class` runtime-neutral alias).
|
package/SKILL.md
CHANGED
|
@@ -99,6 +99,7 @@ Each stage produces artifacts in `.design/` inside the current project.
|
|
|
99
99
|
| `watch-authorities [--refresh] [--since <date>] [--feed <name>] [--schedule <cadence>]` | `get-design-done:gdd-watch-authorities` | Run design-authority-watcher — fetch curated feeds, diff snapshot, classify new entries → `.design/authority-report.md` (consumed by `/gdd:reflect`) |
|
|
100
100
|
| `benchmark <component\|--wave N\|--list\|--refresh component>` | `get-design-done:gdd-benchmark` | Harvest + synthesize per-component design specs from 18 design systems → `reference/components/<name>.md` |
|
|
101
101
|
| `benchmark <component\|--wave N\|--list\|--refresh component>` | `get-design-done:gdd-benchmark` | Harvest + synthesize per-component design specs from 18 design systems → `reference/components/<name>.md` |
|
|
102
|
+
| `export <cycle> --format html\|pdf\|notion [--pseudonymize] [--pr]` | `get-design-done:gdd-export` | Phase 35.5 — package a finished cycle's design output into a stakeholder-shareable artifact (self-contained HTML / Paged.js-print PDF / Notion page); redacts always, `--pseudonymize` masks identity for external sharing, `--pr` posts the HTML preview via pr-commenter |
|
|
102
103
|
|
|
103
104
|
## Handoff Routing
|
|
104
105
|
|
package/agents/design-auditor.md
CHANGED
|
@@ -311,6 +311,21 @@ grep -rEn "w-4 h-4|w-5 h-5|w-6 h-6" src/ --include="*.tsx" --include="*.jsx" 2>/
|
|
|
311
311
|
|
|
312
312
|
---
|
|
313
313
|
|
|
314
|
+
## Domain checklist addendum (Tier-3)
|
|
315
|
+
|
|
316
|
+
If DESIGN-CONTEXT.md carries a `<domain>` line (set by `design-context-builder` Step 0F — `finance` / `healthcare` / `gaming` / `civic`), **also** run that pack's `## Audit checklist` from `reference/domains/<domain>-patterns.md` and fold its findings into the relevant pillar:
|
|
317
|
+
|
|
318
|
+
| Domain | Pack | Folds into pillar(s) |
|
|
319
|
+
|--------|------|----------------------|
|
|
320
|
+
| finance | `reference/domains/finance-patterns.md` | Typography (tabular-nums / number formatting), Color (gain/loss never color-only), Copy (regulatory disclosure placement), Experience (destructive-action guards) |
|
|
321
|
+
| healthcare | `reference/domains/healthcare-patterns.md` | Experience (PHI isolation, idle auto-logout), Copy (plain medical language), Color (critical-value flags not color-only), Visual Hierarchy (audit-trail surfacing) |
|
|
322
|
+
| gaming | `reference/domains/gaming-patterns.md` | Micro-Polish + Experience (reduced-motion / vestibular, flash thresholds), Layout (TV-safe area), Experience (input-model adaptation, no hover-only) |
|
|
323
|
+
| civic | `reference/domains/civic-patterns.md` | Copy (plain language, grade 6-8), Color (WCAG AA contrast floor), Experience (session-timeout warnings, keyboard operability), Typography (reading level) |
|
|
324
|
+
|
|
325
|
+
A failed domain check is a **finding in its pillar** (it lowers that pillar's score and appears in DESIGN-AUDIT.md), not a separate score. When no `<domain>` is set, skip this addendum. This is **additive** — it never replaces the 7-pillar scoring (per "Supplement, Not Replace" above).
|
|
326
|
+
|
|
327
|
+
---
|
|
328
|
+
|
|
314
329
|
## Execution Steps
|
|
315
330
|
|
|
316
331
|
### Step 1: Load Context
|
|
@@ -250,6 +250,36 @@ Record the detected type in DESIGN-CONTEXT.md as a `<project_type>` line (e.g. `
|
|
|
250
250
|
|
|
251
251
|
Proceed to Step 1 regardless of outcome.
|
|
252
252
|
|
|
253
|
+
## Step 0F — Domain Detection (Tier-3 packs)
|
|
254
|
+
|
|
255
|
+
Detect the **industry domain** — orthogonal to project type (a finance app can be `web` or `native-ios`). When a domain matches, load its Tier-3 pattern pack so downstream stages (interview, executor, auditor) inherit industry-specific patterns + regulatory constraints. Reuse the file-read grep/glob idiom (< 1 second, no skip).
|
|
256
|
+
|
|
257
|
+
**Domains + packs** (each pack's own `## Detection signals` section is canonical; this table is the dispatcher):
|
|
258
|
+
|
|
259
|
+
| Domain | Pack | Keyword signals | `package.json` dependency signals |
|
|
260
|
+
|--------|------|-----------------|-----------------------------------|
|
|
261
|
+
| finance | `reference/domains/finance-patterns.md` | trading, portfolio, brokerage, ledger, invoice, banking, fintech, payments, KYC | `stripe`, `@stripe/*`, `plaid`, `@plaid/*`, `dwolla-v2`, `finnhub`, `@alpacahq/*`, `ccxt`, `lightweight-charts`, `react-financial-charts`, `highcharts` |
|
|
262
|
+
| healthcare | `reference/domains/healthcare-patterns.md` | patient, clinical, EHR, EMR, telehealth, HIPAA, PHI, provider, diagnosis | `fhir`, `fhirclient`, `fhir-kit-client`, `@medplum/*`, `medplum`, `hl7`, `redox` |
|
|
263
|
+
| gaming | `reference/domains/gaming-patterns.md` | game, HUD, player, level, multiplayer, leaderboard, inventory, quest | `phaser`, `three`, `@react-three/*`, `pixi.js`, `babylonjs`, `@babylonjs/*`, `colyseus`, `playcanvas`, `excalibur`, `matter-js` |
|
|
264
|
+
| civic | `reference/domains/civic-patterns.md` | gov, government, public, citizen, benefits, permit, tax, election, municipal | `@uswds/uswds`, `uswds`, `@trussworks/react-uswds`, `govuk-frontend`, `@18f/*` |
|
|
265
|
+
|
|
266
|
+
```bash
|
|
267
|
+
grep -iE "trading|portfolio|brokerage|fintech|patient|clinical|EHR|HIPAA|HUD|multiplayer|leaderboard|gov|citizen|benefits|permit" -r . --include="*.md" --include="*.tsx" 2>/dev/null | head
|
|
268
|
+
node -e "const p=require('./package.json');const d={...p.dependencies,...p.devDependencies};console.log(Object.keys(d).join(' '))" 2>/dev/null # match against the dependency column
|
|
269
|
+
```
|
|
270
|
+
|
|
271
|
+
**Confidence rule (D-02):**
|
|
272
|
+
|
|
273
|
+
- **≥2 distinct signals, OR any dependency match → auto-apply** the pack. Record it + note it in the brief ("Detected finance domain — loaded finance-patterns.md").
|
|
274
|
+
- **Exactly 1 weak keyword signal → suggest**, don't impose ("This looks like a healthcare project — load healthcare-patterns.md? [y/N]").
|
|
275
|
+
- **No signal → skip** (most projects have no domain pack; that's fine).
|
|
276
|
+
|
|
277
|
+
Domain packs are **additive context, never a hard gate**. Multiple domains can co-apply (rare). A brief override wins (if the user says "it's a fintech dashboard", honor it).
|
|
278
|
+
|
|
279
|
+
Record the result in DESIGN-CONTEXT.md as a `<domain>` line (e.g. `<domain>finance</domain>`, or omit when none). Do not inline the pack content here — the executor + `design-auditor` read `reference/domains/<domain>-patterns.md` directly.
|
|
280
|
+
|
|
281
|
+
Proceed to Step 1 regardless of outcome.
|
|
282
|
+
|
|
253
283
|
## Step 1 — Auto-Detect Design System State
|
|
254
284
|
|
|
255
285
|
Run all detection commands before asking any questions. Record what is found — this pre-populates the interview and reduces questions to only genuine unknowns.
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
This directory contains connection specifications for external tools and MCPs that the get-design-done pipeline integrates with. Each connection has its own spec file. This file is the index.
|
|
4
4
|
|
|
5
|
-
**Getting started:** run `/gdd:connections` for the interactive onboarding wizard — it probes all
|
|
5
|
+
**Getting started:** run `/gdd:connections` for the interactive onboarding wizard — it probes all 19 connections, recommends setup based on your project type, and walks you through installing each one (auto-run for reversible MCP adds, copy-command for everything else). You can also run `/gdd:connections list` for a read-only status check or `/gdd:connections <name>` to jump to a single connection's setup.
|
|
6
6
|
|
|
7
7
|
---
|
|
8
8
|
|
|
@@ -34,6 +34,7 @@ This directory contains connection specifications for external tools and MCPs th
|
|
|
34
34
|
| Discord | Active | [`connections/discord.md`](connections/discord.md) | **Notify** (Team Surfaces) — `DISCORD_WEBHOOK_URL` channel webhook; parity with Slack; `GDD_DISABLE_DISCORD` kill-switch; degrade-to-noop |
|
|
35
35
|
| Linear | Active | [`connections/linear.md`](connections/linear.md) | **Ticket-sync** (Team Surfaces) — `mcp__linear__*` (ToolSearch probe); bidirectional cycle↔issue; redact + `GDD_DISABLE_LINEAR` kill-switch; degrade-to-noop |
|
|
36
36
|
| Jira | Active | [`connections/jira.md`](connections/jira.md) | **Ticket-sync** (Team Surfaces) — Atlassian MCP `mcp__atlassian__*` (ToolSearch probe); parity with Linear; `GDD_DISABLE_JIRA` kill-switch; degrade-to-noop |
|
|
37
|
+
| Notion | Active | [`connections/notion.md`](connections/notion.md) | **Export** write-path (not a pipeline stage) — `mcp__notion__*` (ToolSearch probe); `/gdd:export --format notion`; redact + `GDD_DISABLE_NOTION` kill-switch; degrade-to-HTML |
|
|
37
38
|
|
|
38
39
|
---
|
|
39
40
|
|
|
@@ -172,6 +173,14 @@ Step E1 — ToolSearch check:
|
|
|
172
173
|
Write mobbin status to STATE.md <connections>.
|
|
173
174
|
```
|
|
174
175
|
|
|
176
|
+
**Notion probe (ToolSearch-only — export write-path, 35.5):**
|
|
177
|
+
|
|
178
|
+
```
|
|
179
|
+
Step J1 — ToolSearch({ query: "notion", max_results: 5 })
|
|
180
|
+
→ Empty / GDD_DISABLE_NOTION=1 → notion: not_configured (export degrades to the HTML format)
|
|
181
|
+
→ Non-empty → notion: available
|
|
182
|
+
```
|
|
183
|
+
|
|
175
184
|
**Linear probe (ToolSearch-only — ticket-sync):**
|
|
176
185
|
|
|
177
186
|
```
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
# Notion — Connection Specification
|
|
2
|
+
|
|
3
|
+
This file is the connection specification for Notion within the get-design-done pipeline. See `connections/connections.md` for the index + capability matrix (the notion row is added at the 35.5 closeout).
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
Notion is the **export write-path** for `/gdd:export --format notion` (Phase 35.5). GDD generates a Notion page from a completed cycle's design artifacts — a stakeholder-shareable design-review packet. MCP-based (`mcp__notion__*`) — GDD calls MCP tools, not raw HTTP; no bundled Notion SDK, no new outbound egress. Outbound content is redacted; degrades to the self-contained HTML format when Notion is absent or disabled.
|
|
8
|
+
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
## Setup
|
|
12
|
+
|
|
13
|
+
**Prerequisites:** the Notion MCP server connected to your workspace (OAuth on first use). No GDD-held token.
|
|
14
|
+
|
|
15
|
+
```
|
|
16
|
+
# register the Notion MCP per Notion's MCP docs, then restart the session
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
**Verification:**
|
|
20
|
+
|
|
21
|
+
```
|
|
22
|
+
ToolSearch({ query: "notion", max_results: 10 })
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
Expect Notion page/block tools (`mcp__notion__*`). If empty → `notion: not_configured`. Verify exact tool names via ToolSearch; do not hardcode.
|
|
26
|
+
|
|
27
|
+
---
|
|
28
|
+
|
|
29
|
+
## What GDD does
|
|
30
|
+
|
|
31
|
+
On `/gdd:export --format notion`, GDD creates a page from the export source set (EXPERIENCE.md + DESIGN.md + DESIGN-VERIFICATION.md + decisions + screenshots): headings → toggle/section blocks, screenshots → image-upload blocks. Every text block is **redacted** (`scripts/lib/redact.cjs`); `--pseudonymize` additionally masks identity. Write-only (export); GDD does not read/sync Notion content.
|
|
32
|
+
|
|
33
|
+
## Redaction + kill-switch + degrade
|
|
34
|
+
|
|
35
|
+
- Every block body passes through `scripts/lib/redact.cjs` (the single chokepoint).
|
|
36
|
+
- Kill-switch: `GDD_DISABLE_NOTION=1` (env) or `.design/config.json` `"export": { "notion": { "enabled": false } }`. `gsd-health` surfaces it.
|
|
37
|
+
- **Degrade:** `notion: not_configured` / disabled / an MCP error → `/gdd:export` falls back to the self-contained `html` format + a note (the export never fails on Notion absence — D-03/D-07).
|
|
38
|
+
|
|
39
|
+
## STATE.md integration + probe
|
|
40
|
+
|
|
41
|
+
```xml
|
|
42
|
+
<connections>
|
|
43
|
+
notion: not_configured
|
|
44
|
+
</connections>
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
| Value | Meaning |
|
|
48
|
+
|---|---|
|
|
49
|
+
| `available` | ToolSearch returned `mcp__notion__*` tools AND not disabled |
|
|
50
|
+
| `unavailable` | tools present but a call errored (auth/rate) |
|
|
51
|
+
| `not_configured` | ToolSearch empty — Notion MCP not registered |
|
|
52
|
+
|
|
53
|
+
**Probe (ToolSearch-only):** `ToolSearch({ query: "notion", max_results: 5 })` → empty → `not_configured`, non-empty → `available`. Which stages probe: the export skill only (Notion is an export target, not a pipeline-stage connection).
|
|
54
|
+
|
|
55
|
+
## Anti-pattern
|
|
56
|
+
|
|
57
|
+
Don't post un-redacted artifacts; don't treat Notion as a read/sync source (export write-path only — bidirectional sync is out of scope); don't hard-require Notion (always degrade to the HTML file). Confluence is explicitly out of scope this phase (Notion-only).
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hegemonart/get-design-done",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.36.1",
|
|
4
4
|
"description": "A design-quality pipeline for AI coding agents: brief, plan, implement, and verify UI work against your design system.",
|
|
5
5
|
"author": "Hegemon",
|
|
6
6
|
"homepage": "https://github.com/hegemonart/get-design-done",
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
# Civic & Government Design Patterns
|
|
2
|
+
|
|
3
|
+
This pack collects the design patterns, legal floors, and review heuristics that apply when building public-sector interfaces — benefits portals, permit and licensing flows, tax filing, election information, and municipal services. GDD loads it automatically when it detects a government / public-sector / civic project (see Detection signals). The legal citations below assume a US context, but the underlying patterns — accessibility floors, plain language, multilingual access, and high-trust defaults — generalize to public services anywhere.
|
|
4
|
+
|
|
5
|
+
## Why civic is different
|
|
6
|
+
|
|
7
|
+
In the private sector, accessibility, plain language, and translation are often framed as "nice to have" optimizations weighed against conversion. In government, they are obligations. The audience is non-self-selecting: a citizen cannot choose a competitor when a benefits form is unusable. People arrive under stress, on old hardware, on metered or slow connections, across many languages and literacy levels, often with a disability. The patterns here treat the hardest case as the design center, not the edge.
|
|
8
|
+
|
|
9
|
+
## Accessibility legal floor
|
|
10
|
+
|
|
11
|
+
Section 508 of the Rehabilitation Act incorporates **WCAG 2.1 Level AA** as the binding technical standard for US federal ICT. The Americans with Disabilities Act (ADA) extends comparable obligations to state and local government (Title II) and many public accommodations. Treat **WCAG 2.1 AA as a hard floor** — not optional, not an AAA-aspirational stretch goal. You do not "prioritize" it against other work; you cannot ship below it.
|
|
12
|
+
|
|
13
|
+
Concretely, every civic UI must satisfy at least:
|
|
14
|
+
|
|
15
|
+
| Requirement | WCAG SC | What it means in practice |
|
|
16
|
+
|---|---|---|
|
|
17
|
+
| Keyboard operable | 2.1.1 | Every interactive element works without a mouse; no keyboard traps (2.1.2). |
|
|
18
|
+
| Visible focus | 2.4.7 | A clear, non-removed focus indicator on every focusable control. |
|
|
19
|
+
| Landmarks & headings | 1.3.1, 2.4.6 | Real `main`/`nav`/`header`/`footer` regions; a logical, non-skipping heading outline. |
|
|
20
|
+
| Error identification | 3.3.1 | Errors are described in text, programmatically associated with their field. |
|
|
21
|
+
| Labels & instructions | 3.3.2 | Every input has a persistent, programmatic label — placeholder is not a label. |
|
|
22
|
+
| Not color alone | 1.4.1 | Status, required fields, and errors never rely on color as the only cue. |
|
|
23
|
+
| Text contrast | 1.4.3 | 4.5:1 for body text, 3:1 for large text and meaningful UI/graphics (1.4.11). |
|
|
24
|
+
| Reflow | 1.4.10 | Usable at 400% zoom / 320 CSS px with no loss of content or horizontal scroll. |
|
|
25
|
+
| Captions & transcripts | 1.2.2, 1.2.4 | Captions for video; transcripts/audio descriptions for time-based media. |
|
|
26
|
+
| Name, role, value | 4.1.2 | Custom widgets expose correct accessible name, role, and state to assistive tech. |
|
|
27
|
+
|
|
28
|
+
WCAG 2.2 AA adds obligations worth meeting now: **Focus Not Obscured (2.4.11)**, **Target Size (Minimum) 2.5.8** (24×24 CSS px floor; aim for ~44×44 for primary touch targets), and **Accessible Authentication (3.3.8)** (no cognitive-function test like solving a puzzle or transcribing characters as the only way in). Authoritative references: https://www.section508.gov and https://www.w3.org/WAI/WCAG21/quickref/.
|
|
29
|
+
|
|
30
|
+
## Multi-language government forms
|
|
31
|
+
|
|
32
|
+
A practical US minimum is **English + Spanish + Simplified Chinese (`zh-Hans`)**; agencies under Executive Order 13166 / Title VI must provide meaningful access to limited-English-proficient (LEP) users, and the right language set is driven by the served population (Vietnamese, Tagalog, Korean, Haitian Creole, Arabic, and others are common).
|
|
33
|
+
|
|
34
|
+
Patterns:
|
|
35
|
+
|
|
36
|
+
- **Persistent language toggle** in a predictable location (top of every page), not buried in a footer or settings panel. Selection persists across the whole session and survives navigation.
|
|
37
|
+
- **Translate the content, not just the chrome.** Field labels, help text, **validation/error messages**, confirmation screens, emails, and PDFs must all be localized — a form that switches its buttons to Spanish but throws English errors has failed.
|
|
38
|
+
- Set `lang` on the document and on any in-page language switches so assistive tech pronounces content correctly.
|
|
39
|
+
- **Right-to-left readiness**: build layouts with logical properties / `dir="rtl"` support so Arabic, Farsi, Urdu, and Hebrew mirror correctly. Don't hard-code left/right.
|
|
40
|
+
- **Avoid machine-only translation for legal text.** Eligibility rules, consent, rights notices, and binding terms need human translation and review; raw MT can be a compliance and liability problem.
|
|
41
|
+
- Offer an **"I Speak" language-identification card** (a list of "I speak ___" statements in each language) so a user can self-identify their language and request an interpreter.
|
|
42
|
+
|
|
43
|
+
## Plain language
|
|
44
|
+
|
|
45
|
+
The **Plain Writing Act of 2010** requires US federal agencies to write public-facing material clearly. Target a **reading level of grade 6–8** (many benefits and health programs aim for grade 6 or lower).
|
|
46
|
+
|
|
47
|
+
- **Active voice and short sentences.** Prefer "We denied your application" over "Your application has been denied." Keep most sentences under ~20 words; one idea per sentence.
|
|
48
|
+
- **Define or avoid jargon and acronyms.** Spell out acronyms on first use; better, replace agency jargon with the everyday word ("proof of income," not "income documentation substantiation").
|
|
49
|
+
- **Question-style labels.** "What is your date of birth?" reads more clearly than "DOB" or "Birthdate field."
|
|
50
|
+
- **Clear next-step CTAs.** Buttons name the action and outcome ("Submit my application," "Check my status") rather than generic "OK"/"Continue" where ambiguous.
|
|
51
|
+
- **Front-load the point.** Lead with what the user must do or what happened, then the detail. Use headings, short paragraphs, and lists.
|
|
52
|
+
- Guidance: https://www.plainlanguage.gov. The **US Web Design System (USWDS)** encodes much of this in components and content guidance: https://designsystem.digital.gov.
|
|
53
|
+
|
|
54
|
+
## Trust & accessibility-first defaults
|
|
55
|
+
|
|
56
|
+
- **Generous session timeouts with warning + extend.** Per **WCAG 2.2.1 (Timing Adjustable)**, warn before a session expires and let the user extend or turn off the limit; never silently discard a half-finished benefits application. Pair with save-and-resume.
|
|
57
|
+
- **No dark patterns.** No pre-checked consent, no confirm-shaming, no buried opt-outs, no fake urgency. Government must not manipulate; defaults should favor the user.
|
|
58
|
+
- **Save-and-resume for long forms.** Let users leave and return without losing data — assume interruptions, shared/library computers, and multi-session completion.
|
|
59
|
+
- **Print-friendliness.** Provide clean print styles and downloadable/printable confirmations and records; many users keep paper copies or mail documents.
|
|
60
|
+
- **Low-bandwidth / older-device tolerance.** Server-render core content, keep payloads small, avoid blocking on heavy JS, and ensure the form is usable without the latest browser. Test on slow connections and old devices.
|
|
61
|
+
- **Clear `.gov` identity & PII handling.** Show the official agency identity (the USWDS gov banner pattern), a plain-language privacy notice, and explain what personal information is collected, why, and how it is protected. Minimize PII collected; never expose SSNs or case numbers in URLs.
|
|
62
|
+
|
|
63
|
+
## Forms at scale
|
|
64
|
+
|
|
65
|
+
- **One-thing-per-page** (GOV.UK Design System style): ask a single question (or one tight group) per screen. It lowers cognitive load, simplifies validation and error messaging, and is far easier to make accessible and translatable. See https://design-system.service.gov.uk.
|
|
66
|
+
- **Progressive disclosure.** Reveal follow-up questions only when relevant (conditional reveals), and keep the default path short for the common case.
|
|
67
|
+
- **Inline validation that doesn't punish.** Validate on blur / on submit, not on every keystroke; never block typing. Allow flexible input formats (phone, dates) and normalize server-side rather than rejecting.
|
|
68
|
+
- **Accessible error summary.** On a failed submit, render an error summary at the top of the form that lists each problem as a link jumping focus to the offending field, and move focus to the summary. Each field error is also shown inline and programmatically tied to its input (3.3.1).
|
|
69
|
+
- **Helpful, specific errors.** Say what's wrong and how to fix it ("Enter your ZIP code as 5 digits"), in plain language and in the user's chosen language.
|
|
70
|
+
- **Preserve user input on error.** Re-display everything the user entered; never make them re-key a long form because one field failed.
|
|
71
|
+
|
|
72
|
+
## Detection signals
|
|
73
|
+
|
|
74
|
+
GDD should auto-detect the civic/government domain from any combination of:
|
|
75
|
+
|
|
76
|
+
- **Content / naming keywords:** `gov`, `government`, `public`, `citizen`, `benefits`, `permit`, `license`, `tax`, `election`, `voter`, `municipal`, `county`, `agency`, `eligibility`, `enrollment`, `public service`.
|
|
77
|
+
- **`package.json` dependencies (strong signal):**
|
|
78
|
+
- `@uswds/uswds`, `uswds` — US Web Design System
|
|
79
|
+
- `@trussworks/react-uswds` — React USWDS components
|
|
80
|
+
- `govuk-frontend` — GOV.UK Design System
|
|
81
|
+
- `@18f/...` — 18F / TTS tooling and components
|
|
82
|
+
- **Domain / config signals:** a `.gov`, `.mil`, or `.gov.<cc>` domain in config or deploy targets; accessibility-first project config (axe-core, `pa11y`, `jest-axe`, `eslint-plugin-jsx-a11y`, Lighthouse a11y budgets) wired into CI.
|
|
83
|
+
|
|
84
|
+
Any one strong dependency match, or several keyword + domain matches together, should trigger loading this pack.
|
|
85
|
+
|
|
86
|
+
## Audit checklist
|
|
87
|
+
|
|
88
|
+
The auditor agent runs these against a civic UI. Each item is concrete and verifiable.
|
|
89
|
+
|
|
90
|
+
1. Every interactive control is fully keyboard-operable with a visible focus ring, and there are no keyboard traps (WCAG 2.1.1, 2.1.2, 2.4.7).
|
|
91
|
+
2. The page exposes correct landmarks and a logical, non-skipping heading outline; custom widgets expose correct name/role/value (WCAG 1.3.1, 2.4.6, 4.1.2).
|
|
92
|
+
3. Text contrast meets 4.5:1 (body) / 3:1 (large text and meaningful UI), and no information is conveyed by color alone (WCAG 1.4.1, 1.4.3, 1.4.11).
|
|
93
|
+
4. Content reflows and remains fully usable at 400% zoom / 320 CSS px with no horizontal scrolling or lost content (WCAG 1.4.10).
|
|
94
|
+
5. Interactive targets meet the 24×24 CSS px minimum (primary touch targets ~44×44), and focus is never obscured (WCAG 2.5.8, 2.4.11).
|
|
95
|
+
6. Every input has a persistent programmatic label (not placeholder-only); errors are described in text and tied to their field (WCAG 3.3.1, 3.3.2).
|
|
96
|
+
7. On submit failure, an error summary lists each problem, links to and moves focus to the field, and user input is preserved.
|
|
97
|
+
8. Reading level is grade 6–8: active voice, short sentences, no undefined jargon/acronyms, question-style labels (Plain Writing Act of 2010).
|
|
98
|
+
9. A persistent language toggle covers content, help text, and **errors** — not just UI chrome — for at least EN + ES + zh-Hans, with correct `lang` and RTL readiness; legal/eligibility text is human-translated, not machine-only.
|
|
99
|
+
10. Session timeout warns before expiry and offers an extend/disable option, and the form supports save-and-resume (WCAG 2.2.1).
|
|
100
|
+
11. No dark patterns: no pre-checked consent, confirm-shaming, or buried opt-outs; defaults favor the user.
|
|
101
|
+
12. Official `.gov` identity, a plain-language privacy/PII notice, print-friendly confirmations, and graceful behavior on low bandwidth / older devices are all present; no PII (SSN, case IDs) exposed in URLs.
|
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
# Finance & Fintech Design Patterns
|
|
2
|
+
|
|
3
|
+
This pack documents the data-display, trading-UI, compliance, and payment-security conventions that distinguish finance products from generic SaaS. GDD loads it automatically when it detects a trading, brokerage, banking, ledger, or payments project (see Detection signals below). The auditor agent runs the Audit checklist at the end of this file against any finance UI.
|
|
4
|
+
|
|
5
|
+
## Data-table density
|
|
6
|
+
|
|
7
|
+
Financial UIs are table-first: positions, orders, ledgers, transaction histories. The table is the product, so its legibility budget is non-negotiable.
|
|
8
|
+
|
|
9
|
+
| Property | Convention |
|
|
10
|
+
|---|---|
|
|
11
|
+
| Comfortable row height | 44-52px (touch-reachable, default for retail) |
|
|
12
|
+
| Compact row height | 28-36px (pro/desktop blotters, high row counts) |
|
|
13
|
+
| Density toggle | Offer comfortable/compact (and sometimes a 24px "ultra") as a persistent user setting |
|
|
14
|
+
| Numeric font | `font-variant-numeric: tabular-nums` (or a font with lining + tabular figures) so digits occupy equal width |
|
|
15
|
+
| Numeric alignment | Right-align all numbers; align on the decimal point so magnitudes stack visually |
|
|
16
|
+
| Text columns | Left-align labels/symbols; never right-align prose |
|
|
17
|
+
| Row separation | Prefer 1px hairline rules (or subtle zebra) for dense data; avoid heavy zebra that fights the numbers |
|
|
18
|
+
| Header | Sticky/frozen header row; freeze the first identifier column (symbol/account) on horizontal scroll |
|
|
19
|
+
| Column min-width | Size to the widest plausible value (e.g. a 12-digit notional), not the average |
|
|
20
|
+
|
|
21
|
+
- Tabular numerals matter most where values change in place (live P&L): non-tabular figures cause horizontal jitter on every tick.
|
|
22
|
+
- Right-aligning currency columns lets the eye compare orders of magnitude at a glance; decimal alignment is what makes `1,234.50` and `9.05` line up.
|
|
23
|
+
- Keep currency symbols and unit suffixes out of the number cell when possible (put `USD`/`%` in the header) so the digits align cleanly.
|
|
24
|
+
|
|
25
|
+
## Trading-interface conventions
|
|
26
|
+
|
|
27
|
+
### Direction & semantics (never color alone)
|
|
28
|
+
- Red = down/loss/sell, green = up/gain/buy is the Western default; some markets (e.g. parts of East Asia) invert this — make the mapping a setting, not a hard-coded assumption.
|
|
29
|
+
- Roughly 1 in 12 men have red-green color vision deficiency. Never encode gain/loss with color only. Always pair color with a non-color cue: a `+`/`-` sign, an up/down arrow (▲/▼), or parentheses for negatives.
|
|
30
|
+
- Use a colorblind-safe palette (e.g. teal/orange or blue/orange instead of pure red/green) or let users opt into one.
|
|
31
|
+
|
|
32
|
+
### Real-time updates
|
|
33
|
+
- Flash the cell background briefly (~150-300ms) on value change — green tint up, red tint down — then fade back. This draws the eye without permanent clutter.
|
|
34
|
+
- Throttle/coalesce updates: batch ticks to ~4-10 fps (every 100-250ms) rather than rendering every websocket message; high-frequency feeds will otherwise pin the CPU and make text unreadable.
|
|
35
|
+
- Show a stale/latency indicator: timestamp of last update, a "delayed 15 min" badge for non-real-time quotes (a regulatory requirement for many retail feeds), and grey the data when the feed is stale.
|
|
36
|
+
|
|
37
|
+
### Order entry & destructive actions
|
|
38
|
+
- Add deliberate friction to order submission: an explicit review/confirm step that restates side, symbol, quantity, order type, limit price, and estimated cost before the order is live.
|
|
39
|
+
- Distinguish market vs limit orders clearly; warn on market orders in illiquid or fast-moving instruments.
|
|
40
|
+
- Guard destructive/irreversible actions (cancel-all, close-all, liquidate, withdraw): require a confirmation that names the consequence, and consider type-to-confirm for account-level actions.
|
|
41
|
+
- Disable the submit button while a submission is in flight; never allow accidental double-submission of an order.
|
|
42
|
+
|
|
43
|
+
## Regulatory disclaimer placement
|
|
44
|
+
|
|
45
|
+
The governing principle from advertising rules (SEC, FINRA) is proximity: a disclosure must sit next to the claim it qualifies, not buried in a global footer or behind a tooltip.
|
|
46
|
+
|
|
47
|
+
| Context | Disclosure |
|
|
48
|
+
|---|---|
|
|
49
|
+
| Margin trading / leverage | Reg-T margin risk disclosure and current margin requirements, shown in the margin/borrow flow |
|
|
50
|
+
| Performance / returns figures | "Past performance does not guarantee future results"; show net-of-fees and the period, adjacent to the number |
|
|
51
|
+
| EU cost transparency | MiFID II ex-ante (pre-trade) cost & charges estimate at order entry; ex-post (annual) statement of aggregated costs |
|
|
52
|
+
| Quotes & data | Delayed-data badge; real-time entitlement notice |
|
|
53
|
+
| Projections / hypotheticals | Label clearly as hypothetical and state assumptions inline |
|
|
54
|
+
|
|
55
|
+
- Ex-ante cost disclosure (MiFID II) belongs in the order ticket before confirmation, expressed in both percentage and cash terms, including the effect of costs on return.
|
|
56
|
+
- FINRA Rule 2210 and SEC marketing rules require communications to be fair, balanced, and not misleading — risk disclosures must be presented with at least equal prominence to the benefit/claim, not in 8px grey fine print.
|
|
57
|
+
- Authorities: https://www.sec.gov/ , https://www.finra.org/ , and the EU MiFID II framework.
|
|
58
|
+
|
|
59
|
+
## Card & payment data (PCI-DSS)
|
|
60
|
+
|
|
61
|
+
PCI-DSS governs how cardholder data is handled in the UI and beyond. Design must assume the front end is in scope.
|
|
62
|
+
|
|
63
|
+
- Mask the PAN: display only the last 4 digits (e.g. `•••• •••• •••• 4242`). The first 6 (BIN) may be shown only where genuinely needed.
|
|
64
|
+
- Never display, log, or store the CVV/CVC2/CID after authorization — not in state, not in logs, not in analytics. It is the one value that must never persist.
|
|
65
|
+
- Never put PAN, CVV, or full account numbers in URLs, query strings, `localStorage`, analytics events, error reports, or screenshots.
|
|
66
|
+
- Use tokenization: send card details directly to the processor (Stripe Elements, Plaid Link, etc.) so raw PAN never touches your servers; store the returned token, not the card.
|
|
67
|
+
- Mask card entry inputs and disable autocomplete logging of the CVV field; clear sensitive fields from memory after submit.
|
|
68
|
+
- Authority: https://www.pcisecuritystandards.org/
|
|
69
|
+
|
|
70
|
+
## Number formatting precision
|
|
71
|
+
|
|
72
|
+
Honest, locale-correct number formatting is a trust signal in finance. Use the platform's locale APIs (e.g. `Intl.NumberFormat`) rather than hand-rolled formatting.
|
|
73
|
+
|
|
74
|
+
- Currency minor units: respect each currency's decimal places — USD/EUR use 2, JPY/KRW use 0, and several (BHD, KWD, TND) use 3. Do not hard-code 2.
|
|
75
|
+
- Percentages: pick a precision and keep it consistent per context (2 decimals for yields/rates is common); show a trailing zero rather than dropping it (`5.00%`, not `5%`).
|
|
76
|
+
- Basis points (bps): 1 bp = 0.01% = 0.0001. Use bps for small rate moves and spreads; label the unit explicitly.
|
|
77
|
+
- Locale grouping/decimals: respect locale separators (`1,234.56` en-US vs `1.234,56` de-DE vs `1 234,56` fr-FR). Never assume `.` is the decimal mark.
|
|
78
|
+
- Negatives: in accounting contexts, show negatives in parentheses `(1,234.50)` (often with red); elsewhere a leading minus is fine. Pick one convention per surface and apply it everywhere.
|
|
79
|
+
- Rounding honesty: state whether a figure is rounded or truncated; never round a fee/cost down in a way that understates what the user pays. Carry full precision internally and round only at display.
|
|
80
|
+
|
|
81
|
+
## Real-time data UI
|
|
82
|
+
|
|
83
|
+
- Websocket cadence: subscribe to streams, but render on a throttled tick (100-250ms) and coalesce intermediate updates; full-snapshot on (re)connect, deltas thereafter.
|
|
84
|
+
- Optimistic vs confirmed: clearly distinguish an order/transfer that is *pending* (optimistic, locally echoed) from one *confirmed* by the venue/backend. Use a distinct state — never let a pending action look settled.
|
|
85
|
+
- Connection loss: show a persistent "Reconnecting…" banner the moment the socket drops; auto-reconnect with backoff.
|
|
86
|
+
- Stale-data greying: when the feed is stale or disconnected, grey out live values and freeze the last-known number with its timestamp, so users never act on data that looks live but is not.
|
|
87
|
+
|
|
88
|
+
## Detection signals
|
|
89
|
+
|
|
90
|
+
GDD treats a project as finance/fintech when it sees these signals. Keywords (in product copy, route names, schema, or component names) plus payment/market data dependencies in `package.json` are the strongest indicators.
|
|
91
|
+
|
|
92
|
+
**Keywords:** trading, trade, order, blotter, portfolio, position, P&L, brokerage, ledger, journal entry, invoice, banking, account balance, fintech, payments, payout, wallet, KYC, AML, custody, settlement.
|
|
93
|
+
|
|
94
|
+
**`package.json` dependencies:**
|
|
95
|
+
|
|
96
|
+
| Dependency | Signals |
|
|
97
|
+
|---|---|
|
|
98
|
+
| `stripe`, `@stripe/stripe-js`, `@stripe/react-stripe-js` | Card payments / billing |
|
|
99
|
+
| `plaid`, `@plaid/...`, `react-plaid-link` | Bank account linking / ACH |
|
|
100
|
+
| `dwolla-v2` | ACH transfers / payouts |
|
|
101
|
+
| `finnhub`, `@alpacahq/alpaca-trade-api` | Market data / brokerage trading |
|
|
102
|
+
| `ccxt` | Crypto exchange connectivity |
|
|
103
|
+
| `lightweight-charts`, `react-financial-charts` | Financial / candlestick charting |
|
|
104
|
+
| `highcharts` / `highstock` | Stock charting |
|
|
105
|
+
|
|
106
|
+
Any one payment/market dependency, or a cluster of the keywords, should trigger this domain pack.
|
|
107
|
+
|
|
108
|
+
## Audit checklist
|
|
109
|
+
|
|
110
|
+
A finance UI should pass every item below.
|
|
111
|
+
|
|
112
|
+
1. Numeric columns use `tabular-nums` (or tabular lining figures), are right-aligned, and align on the decimal point.
|
|
113
|
+
2. The data table offers a density mode (comfortable/compact) and uses appropriate row heights; headers (and key identifier columns) stay frozen on scroll.
|
|
114
|
+
3. Gain/loss and up/down are never conveyed by color alone — each carries a sign, arrow, or parentheses, and a colorblind-safe palette is available.
|
|
115
|
+
4. Live values flash on change and updates are throttled/coalesced (no per-message re-render); a stale/delayed indicator and last-update timestamp are present.
|
|
116
|
+
5. Order entry has an explicit confirmation step restating side, symbol, quantity, type, and estimated cost; submit is disabled while a request is in flight.
|
|
117
|
+
6. Destructive/irreversible actions (cancel-all, liquidate, withdraw) are guarded by a consequence-naming confirmation.
|
|
118
|
+
7. Cost and risk disclosures sit adjacent to the figure they qualify (e.g. ex-ante costs in the order ticket), not in a global footer, and are at least as prominent as the claim.
|
|
119
|
+
8. Margin/leverage flows show the Reg-T margin risk disclosure; performance figures carry a past-performance disclaimer with period and net-of-fees basis.
|
|
120
|
+
9. PAN is masked to last-4; CVV is never displayed, logged, persisted, or stored after authorization.
|
|
121
|
+
10. No PAN, CVV, or account number appears in URLs, query strings, `localStorage`, analytics events, or error reports; card data is tokenized via the processor.
|
|
122
|
+
11. Currency, percentage, and basis-point values respect the correct minor units, locale separators, and a consistent negative convention; rounding/truncation is honest and applied only at display.
|
|
123
|
+
12. Real-time UI distinguishes pending (optimistic) from confirmed states and greys/freezes stale data on connection loss with a visible reconnect indicator.
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
# Game UI & HUD Design Patterns
|
|
2
|
+
|
|
3
|
+
This pack covers UI, HUD, and interaction patterns specific to games and interactive entertainment: the diegetic-UI taxonomy, high-motion accessibility, age-rating gates, multi-input (controller / touch / keyboard-mouse) interaction models, and game-feel feedback. GDD loads this domain automatically when it detects a game, HUD, or interactive-entertainment project (see Detection signals). The auditor agent runs the Audit checklist against the project's UI.
|
|
4
|
+
|
|
5
|
+
## HUD / diegetic UI taxonomy
|
|
6
|
+
|
|
7
|
+
The canonical model is the four-quadrant scheme from Fagerholt & Lorentzon ("Beyond the HUD", 2009), classified on two axes: whether the element exists in the game's **story (fiction)** and whether it exists in the **3D geometry of the game space**.
|
|
8
|
+
|
|
9
|
+
| Type | In the fiction? | In 3D space? | Example | Use when |
|
|
10
|
+
|------|-----------------|--------------|---------|----------|
|
|
11
|
+
| **Non-diegetic** | No | No | Classic flat overlay: health bar, minimap, ammo counter | Information must be instantly legible regardless of camera; competitive or fast-twitch genres |
|
|
12
|
+
| **Diegetic** | Yes | Yes | Dead Space health spine, Metro 2033 wrist watch, in-world ammo on the gun | Immersion-first single-player; the readout can plausibly belong to a character/object |
|
|
13
|
+
| **Spatial** | No | Yes | Floating waypoint markers, enemy outlines, footstep VFX rendered in-world | Guidance anchored to a location/entity but not justified by the story |
|
|
14
|
+
| **Meta** | Yes | No | Blood/cracked-glass screen splatter, rain on the "lens", damage-direction vignette | Conveying character state via the presentation layer / 4th-wall surface |
|
|
15
|
+
|
|
16
|
+
Guidance:
|
|
17
|
+
|
|
18
|
+
- Default competitive and twitch genres (shooters, MOBAs, fighting) to **non-diegetic** for raw readability; reserve diegetic/meta for ambience.
|
|
19
|
+
- Diegetic elements must degrade gracefully — if the player can't see the gun, they can't see the ammo, so pair with an accessibility fallback (toggleable non-diegetic readout).
|
|
20
|
+
- **Minimalist / no-HUD trends**: contextual fade (show on change, fade when idle), HUD-on-demand (hold a button to reveal), and full no-HUD modes (Journey, photo modes). Always make HUD density a player setting rather than a hard removal.
|
|
21
|
+
- Never encode critical state in a single channel that a player may have disabled (color, a diegetic-only readout, an audio-only cue).
|
|
22
|
+
|
|
23
|
+
## High-motion accessibility
|
|
24
|
+
|
|
25
|
+
### Vestibular / motion triggers
|
|
26
|
+
|
|
27
|
+
Provide **in-game toggles** for each of the following AND honor the OS / platform "reduce motion" signal (`prefers-reduced-motion` on web, the equivalent OS accessibility flag on console/mobile). The in-game control overrides, but reduced-motion should set the safe default.
|
|
28
|
+
|
|
29
|
+
- Camera shake (combat, explosions, footsteps) — slider 0–100%, not just on/off.
|
|
30
|
+
- Parallax and large background motion in menus and HUD.
|
|
31
|
+
- Head-bob / weapon-sway / view-bob during locomotion.
|
|
32
|
+
- Screen-wide motion: speed lines, motion blur, chromatic aberration, full-screen zoom/punch.
|
|
33
|
+
- Field-of-view (FOV) slider; narrow FOV is a common nausea trigger in first-person.
|
|
34
|
+
|
|
35
|
+
### Photosensitive epilepsy (PSE)
|
|
36
|
+
|
|
37
|
+
- No more than **three general flashes per second** over any one-second window (WCAG 2.3.1 *Three Flashes or Below Threshold*; aligns with the Harding/ITU broadcast limit).
|
|
38
|
+
- Apply extra caution to **saturated red** flashes — red flashing is disproportionately provocative and has a stricter threshold than general luminance flashes.
|
|
39
|
+
- Avoid large high-contrast rapidly-alternating patterns (stripes, checkerboards) covering a large area of the screen.
|
|
40
|
+
- Surface a PSE warning at first launch and document risky effects; offer a "reduce flashing" toggle that caps strobe effects.
|
|
41
|
+
|
|
42
|
+
### Motion-sickness comfort (esp. VR)
|
|
43
|
+
|
|
44
|
+
- Comfort vignette / tunneling that narrows peripheral vision during fast movement or turns.
|
|
45
|
+
- **Snap-turn** (discrete angular increments) as an alternative to smooth turning; teleport locomotion as an alternative to smooth movement.
|
|
46
|
+
- Fixed visual reference (cockpit, nose, horizon line) and a static-world option.
|
|
47
|
+
|
|
48
|
+
## ESRB / PEGI age-gates & content disclosure
|
|
49
|
+
|
|
50
|
+
- **Neutral date-of-birth gate**: collect day/month/year with **no pre-filled default** and no shortcut. Do **not** use a "Are you 18?" yes/no toggle or any single-tap affirmation — these are non-compliant gates. The gate should not telegraph the passing answer.
|
|
51
|
+
- Display the **correct regional rating**: ESRB (North America, esrb.org), PEGI (Europe, pegi.info), plus regional bodies where shipped (USK in Germany, CERO in Japan, ACB in Australia, GRAC in Korea, ClassInd in Brazil).
|
|
52
|
+
- Show **content descriptors** alongside the rating mark (e.g., Violence, Blood, Strong Language, Sexual Content, Use of Drugs) and **interactive elements** notices.
|
|
53
|
+
- Disclose **in-game purchases** and the **"Includes Random Items"** / loot-box descriptor when paid randomized rewards exist; honor regional loot-box and odds-disclosure rules (e.g., published drop-rate odds where required).
|
|
54
|
+
- See ESRB ratings guide: https://www.esrb.org/ratings-guide/ and PEGI: https://pegi.info/.
|
|
55
|
+
|
|
56
|
+
## Input model — controller-first vs touch-first vs KB/M
|
|
57
|
+
|
|
58
|
+
Detect the **active** input device and adapt; never assume mouse hover exists.
|
|
59
|
+
|
|
60
|
+
- **Spatial focus navigation**: every interactive element must be reachable and selectable via D-pad / left-stick with a clearly visible focus highlight. Maintain a sane focus order and wrap/clamp logic; nothing should be reachable by pointer only.
|
|
61
|
+
- **Adaptive button-prompt glyphs**: on-screen prompts must swap to match the detected device (Xbox A/B/X/Y, PlayStation cross/circle/square/triangle, Nintendo A/B/X/Y, or KB/M key caps). Re-detect on device switch mid-session.
|
|
62
|
+
- **No hover-only affordances**: tooltips, reveals, and actions that only appear on mouse hover are invisible to controller and touch. Provide a focus/press equivalent.
|
|
63
|
+
- **Dead-zone & cursor-vs-stick**: expose stick dead-zone and sensitivity; if a virtual cursor is driven by a stick, tune acceleration; distinguish analog cursor from discrete focus navigation.
|
|
64
|
+
- **TV-safe area / overscan**: keep critical HUD and text inside a safe margin (target ~5% inset, the action-safe region) so nothing is clipped on overscanning TVs; offer a HUD-bounds/safe-area adjustment screen.
|
|
65
|
+
- **Touch-first**: minimum touch target ~44–48 px; thumb-reach zones; avoid placing controls under resting thumbs; provide on-screen stick/buttons that can be repositioned and resized.
|
|
66
|
+
- **Remappable controls as accessibility**: full rebinding for every action (including toggle-vs-hold options and the ability to remap sprint/crouch/aim) is an accessibility requirement, not a luxury.
|
|
67
|
+
|
|
68
|
+
## Feedback & game-feel
|
|
69
|
+
|
|
70
|
+
- **Juice, used deliberately**: hit-stop (brief freeze on impact), screen-shake, particle bursts, and squash/stretch sell impact — but screen-shake and heavy effects must be **sparing and toggleable** (ties into the vestibular sliders above).
|
|
71
|
+
- **Readable damage / state feedback without color alone**: pair damage-direction indicators with shape/position, low-health with a non-color cue (audio heartbeat, vignette + icon), and status effects with distinct icons + text, not just a tint. This satisfies the color-independence requirement (WCAG 1.4.1 *Use of Color* as a design north star).
|
|
72
|
+
- **Latency budgets**: target end-to-end input-to-photon responsiveness — roughly under ~100 ms feels responsive, under ~50 ms feels tight; competitive/rhythm titles need the tightest budgets. Never debounce or animation-gate a core action input so heavily that it adds perceptible lag.
|
|
73
|
+
- **Multi-channel confirmation**: important events (pickup, hit-confirm, objective complete) should land on at least two of {visual, audio, haptic} so a player with one channel disabled still gets feedback.
|
|
74
|
+
|
|
75
|
+
## Detection signals
|
|
76
|
+
|
|
77
|
+
GDD activates this domain when it sees these signals in the repo or brief.
|
|
78
|
+
|
|
79
|
+
**Keywords** (prose, file names, route/scene names): `game`, `HUD`, `player`, `level`, `multiplayer`, `leaderboard`, `inventory`, `quest`, `sprite`, `gamepad`, `controller`, `respawn`, `loot`.
|
|
80
|
+
|
|
81
|
+
**`package.json` dependencies** (any one is a strong signal):
|
|
82
|
+
|
|
83
|
+
| Dependency | Engine / role |
|
|
84
|
+
|------------|---------------|
|
|
85
|
+
| `phaser` | 2D HTML5 game framework |
|
|
86
|
+
| `three` | WebGL 3D renderer |
|
|
87
|
+
| `@react-three/fiber` | React renderer for three.js |
|
|
88
|
+
| `@react-three/drei` | Helpers for react-three-fiber |
|
|
89
|
+
| `pixi.js` | 2D WebGL rendering |
|
|
90
|
+
| `babylonjs` / `@babylonjs/core` | 3D game engine |
|
|
91
|
+
| `colyseus` | Authoritative multiplayer server |
|
|
92
|
+
| `playcanvas` | 3D/WebGL game engine |
|
|
93
|
+
| `excalibur` | TypeScript 2D game engine |
|
|
94
|
+
| `matter-js` | 2D physics engine |
|
|
95
|
+
|
|
96
|
+
The presence of a game engine dep plus any HUD/player keyword should auto-route the project into this domain.
|
|
97
|
+
|
|
98
|
+
## Audit checklist
|
|
99
|
+
|
|
100
|
+
1. Every motion effect (camera shake, parallax, head-bob, motion blur, screen-wide zoom) respects the OS reduced-motion setting AND exposes an in-game slider (not just on/off).
|
|
101
|
+
2. No visual effect flashes more than **three times per second**, and saturated-red flashing is specifically avoided (WCAG 2.3.1); a PSE warning is shown at first launch.
|
|
102
|
+
3. An FOV slider and a motion-sickness comfort option (vignette/tunneling; snap-turn or teleport in VR) are present where the camera is first/close-third person.
|
|
103
|
+
4. The age gate is a **neutral date-of-birth entry** with no pre-filled default — not an "Are you 18?" yes/no toggle.
|
|
104
|
+
5. The correct regional rating mark, content descriptors, and an in-game-purchase / loot-box ("Includes Random Items") disclosure are displayed.
|
|
105
|
+
6. Every interactive element is reachable via D-pad / stick focus navigation with a visible focus highlight; nothing is pointer-only.
|
|
106
|
+
7. On-screen button prompts adapt to the active input device (Xbox / PlayStation / Nintendo / KB-M) and re-detect on device switch; nothing relies on mouse hover.
|
|
107
|
+
8. Critical HUD and text sit inside a TV-safe / action-safe margin (~5% inset) and survive overscan; a HUD-bounds adjustment exists where relevant.
|
|
108
|
+
9. All gameplay controls are fully remappable (with toggle-vs-hold options) as an accessibility provision.
|
|
109
|
+
10. No critical state is encoded by color alone — damage, low-health, and status effects use shape, position, icon+text, or audio in addition to color.
|
|
110
|
+
11. Screen-shake and other "juice" are sparing and toggleable; core action inputs are not animation-gated into perceptible lag (input-to-response budget honored).
|
|
111
|
+
12. Important events (hit-confirm, pickup, objective) are confirmed on at least two of visual / audio / haptic channels.
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
# Healthcare & Clinical Design Patterns
|
|
2
|
+
|
|
3
|
+
This pack covers domain-specific UI/UX patterns for healthcare, clinical, and EHR/EMR software: HIPAA-aware forms, audit-trail surfaces, patient-portal flows, accessibility for vulnerable populations, and safe medical-data visualization. GDD loads it automatically when it detects a healthcare/clinical/EHR project from the signals below. GDD surfaces these patterns and flags likely risks; it does **not** certify HIPAA compliance — that is a legal and organizational process (Business Associate Agreements, Security Risk Analysis, counsel sign-off) that no design tool can perform.
|
|
4
|
+
|
|
5
|
+
## HIPAA-aware form patterns
|
|
6
|
+
|
|
7
|
+
Protected Health Information (PHI) is any individually identifiable health data — the 18 HIPAA identifiers include name, dates (DOB, admission), MRN, account numbers, biometric IDs, full-face photos, and any of the geographic/contact fields. Design forms so PHI is contained, intentional, and minimal.
|
|
8
|
+
|
|
9
|
+
- **PHI isolation.** Keep PHI fields in clearly bounded form sections, visually and structurally separate from non-PHI (preferences, UI settings, marketing opt-ins). This makes the data classification obvious to engineers and supports field-level encryption/access scoping downstream.
|
|
10
|
+
- **Minimum-necessary principle.** The HIPAA Privacy Rule requires using/disclosing only the PHI needed for the task. Do not collect a field "just in case." Every PHI input should map to a stated purpose; prefer progressive disclosure over one giant intake form.
|
|
11
|
+
- **Never leak PHI into ambient surfaces.** No PHI in URLs, path segments, or query strings (`/patient/12345?ssn=...` is a breach vector — it lands in browser history, server logs, and `Referer` headers). No PHI in page `<title>`, no PHI in client analytics events (Google Analytics, Segment, Mixpanel, session-replay tools like FullStory/Hotjar — these are notorious for inadvertent capture), and no PHI written to console or client logs.
|
|
12
|
+
- **Session auto-logout + idle timeout.** Auto-terminate or lock the session after **10-15 minutes** of inactivity (shorter on shared/kiosk workstations). Show a countdown warning ~60s before logout with an "I'm still here" extend action. Clear in-memory PHI on logout; never persist PHI to `localStorage`.
|
|
13
|
+
- **Break-the-glass emergency access.** When a clinician needs records outside their normal authorization (e.g., a patient in the ED who isn't theirs), allow override but **capture justification at the moment of access** (free-text reason + structured reason code), warn that the access is logged and reviewed, and flag the event for compliance audit. The friction is intentional.
|
|
14
|
+
- **Auto-fill / autocomplete.** Disable browser autofill on sensitive fields (`autocomplete="off"` where appropriate) and never pre-fill another patient's data into a shared form.
|
|
15
|
+
|
|
16
|
+
## Audit trails as UI
|
|
17
|
+
|
|
18
|
+
Access logging is mandated by the HIPAA Security Rule (audit controls, §164.312(b)). Treat the audit log as a first-class, user-visible feature — not just a backend table.
|
|
19
|
+
|
|
20
|
+
- **Who-accessed-what.** Surface access events with actor identity, role, timestamp, the specific record/section viewed, and the action (view/edit/export/print).
|
|
21
|
+
- **Access reason.** Where access requires justification (break-the-glass, sensitive segments), display the captured reason inline with the event.
|
|
22
|
+
- **Immutability.** Audit entries are append-only. The UI must never offer edit/delete on a log row; show it as a read-only, chronological ledger. Surface tamper-evidence (e.g., sequence numbers) if the backend provides it.
|
|
23
|
+
- **Patient-facing "who saw my record."** Patient portals should let patients review an access history of their own chart and report suspected inappropriate access. This supports the patient's right to an accounting of disclosures.
|
|
24
|
+
|
|
25
|
+
## Patient-portal flows (MyChart-class)
|
|
26
|
+
|
|
27
|
+
Patient portals (MyChart, Athenahealth, Healow-style) share a recognizable set of flows. Design each with the safety/consent rules below.
|
|
28
|
+
|
|
29
|
+
| Flow | Key design considerations |
|
|
30
|
+
|------|---------------------------|
|
|
31
|
+
| Appointment scheduling | Real-time slot availability, visit-type/reason capture, pre-visit forms, reminders, easy reschedule/cancel with cancellation-window rules. |
|
|
32
|
+
| Lab / result release | Respect **provider hold windows** — sensitive results (oncology, genetics, HIV, pathology) may be embargoed so the provider can contact the patient first. Note: the ONC Information Blocking rule (21st Century Cures Act) generally requires *prompt* release, so holds must be narrow and policy-driven. Always show units + reference ranges (see visualization). |
|
|
33
|
+
| Proxy / caregiver access | Distinct, scoped access for parents of minors, caregivers, and guardians. Handle the **adolescent-confidentiality transition** (access often narrows at age 12-18 per state law). Show proxies clearly whose record they are viewing. |
|
|
34
|
+
| Secure messaging | Encrypted in-app messaging with care team, not email/SMS. Set expectations (not for emergencies — direct to 911/ED), show response-time SLAs, and capture message threads in the chart. |
|
|
35
|
+
| After-visit summary (AVS) | Plain-language recap of the visit: diagnoses, meds, instructions, follow-ups. Printable/downloadable, reading-level controlled. |
|
|
36
|
+
| Prescription / refills | Refill requests, pharmacy selection, and medication lists with names, doses, and clear active/discontinued status. |
|
|
37
|
+
|
|
38
|
+
## Accessibility-first
|
|
39
|
+
|
|
40
|
+
Healthcare reaches the broadest, most impaired population of any domain: elderly users, low vision, motor and cognitive impairment, low health literacy, limited English proficiency, and people in pain or distress. Target **WCAG 2.1 Level AAA** where feasible (not just AA) and design for stress cases.
|
|
41
|
+
|
|
42
|
+
- **Touch targets.** Minimum **44x44 px** (Apple HIG / WCAG 2.5.5 AAA recommends 44pt; Material recommends 48dp). Generous spacing between targets to prevent mis-taps.
|
|
43
|
+
- **Contrast.** AAA text contrast is **7:1** for normal text and **4.5:1** for large text (vs. AA's 4.5:1 / 3:1). Do not rely on hairline gray-on-gray.
|
|
44
|
+
- **Plain medical language + reading level.** Default to plain language (CDC guidance targets roughly a 6th-8th grade reading level for patient materials). Offer a reading-level / "explain this" control, expand acronyms (BP, A1C), and pair clinical terms with lay equivalents ("hypertension (high blood pressure)").
|
|
45
|
+
- **Error messages that explain.** Say what is wrong, why, and how to fix it ("Date of birth must be in the past — use MM/DD/YYYY"). Never error-by-color-only; include text + icon and associate the message programmatically with the field (`aria-describedby`).
|
|
46
|
+
- **Scalable type & zoom.** Support 200% zoom and OS text-scaling without loss of content (WCAG 1.4.4 / 1.4.10 reflow). Respect `prefers-reduced-motion`.
|
|
47
|
+
- **Language access.** Support translation/interpreter pathways; civil-rights rules (ACA Section 1557) expect meaningful access for limited-English-proficiency patients.
|
|
48
|
+
|
|
49
|
+
## Medical-data visualization
|
|
50
|
+
|
|
51
|
+
Lab and vitals visualization is safety-critical. The goal is accurate interpretation without implying a diagnosis the data does not support.
|
|
52
|
+
|
|
53
|
+
- **Values with reference ranges + units.** Every result shows the value, the **unit** (mg/dL, mmol/L, mEq/L — unit ambiguity causes real harm), and the lab's reference range. Ranges can be age/sex-specific; show the applicable range.
|
|
54
|
+
- **Normal / abnormal / critical flags.** Mark results as within-range, abnormal (H/L), or critical (HH/LL / panic value). Critical values warrant the strongest treatment.
|
|
55
|
+
- **Never color-only for critical values.** Encode status with **icon + text + position**, not hue alone (8% of men have color-vision deficiency). A red dot is invisible to many users and to grayscale printouts; pair it with an explicit "Critical — High" label and an icon.
|
|
56
|
+
- **Trends over time.** Plot longitudinal values with the reference band shaded behind the line so abnormality is visible at a glance. Label axes with units; keep consistent scales when comparing.
|
|
57
|
+
- **Avoid implying diagnosis.** Present data and flags, not conclusions. Don't auto-label a value as a disease; surface it as a flagged result for clinician interpretation. Show result status (preliminary vs. final), collection time, and the ordering provider.
|
|
58
|
+
|
|
59
|
+
## Detection signals
|
|
60
|
+
|
|
61
|
+
GDD auto-detects this domain from project keywords and dependencies.
|
|
62
|
+
|
|
63
|
+
**Keywords (code, copy, file/route names):** `patient`, `clinical`, `EHR`, `EMR`, `telehealth`, `HIPAA`, `PHI`, `provider`, `diagnosis`, `prescription`, plus supporting terms like `MRN`, `chart`, `encounter`, `appointment`, `lab result`.
|
|
64
|
+
|
|
65
|
+
**`package.json` dependencies (strong signal):**
|
|
66
|
+
|
|
67
|
+
| Package | Indicates |
|
|
68
|
+
|---------|-----------|
|
|
69
|
+
| `fhir` | FHIR resource models/parsing |
|
|
70
|
+
| `fhirclient` | SMART on FHIR client (EHR launch) |
|
|
71
|
+
| `fhir-kit-client` | FHIR REST client |
|
|
72
|
+
| `@medplum/core` / `medplum` | Medplum healthcare platform SDK |
|
|
73
|
+
| `hl7` | HL7 v2 messaging |
|
|
74
|
+
| `@types/fhir` | FHIR TypeScript types |
|
|
75
|
+
| `redox` | Redox EHR integration engine |
|
|
76
|
+
|
|
77
|
+
Any FHIR/HL7/Medplum/Redox dependency, or a cluster of the keywords above, should trigger loading this pack.
|
|
78
|
+
|
|
79
|
+
## Audit checklist
|
|
80
|
+
|
|
81
|
+
Concrete, verifiable items for reviewing a healthcare UI:
|
|
82
|
+
|
|
83
|
+
1. **No PHI in URLs, path params, query strings, page titles, or client analytics/session-replay events.** Inspect routes and analytics payloads for identifiers.
|
|
84
|
+
2. **Forms collect only minimum-necessary PHI** — each PHI field maps to a stated purpose; no speculative "just in case" fields.
|
|
85
|
+
3. **PHI fields are isolated** from non-PHI (preferences, marketing) in clearly bounded sections.
|
|
86
|
+
4. **Session auto-logs-out after a 10-15 min idle timeout**, with a countdown warning and an extend action; in-memory PHI is cleared and never stored in `localStorage`.
|
|
87
|
+
5. **Break-the-glass / emergency access captures a justification** (reason code + free text), warns the user it is logged, and flags the event for review.
|
|
88
|
+
6. **An immutable, append-only access log is surfaced in the UI** (actor, role, timestamp, record, action) with no edit/delete affordance.
|
|
89
|
+
7. **Patients can view who accessed their own record** and report suspected inappropriate access.
|
|
90
|
+
8. **Sensitive lab/result release honors provider hold windows** and proxy/adolescent-confidentiality rules.
|
|
91
|
+
9. **Lab results show value + unit + reference range**, with normal/abnormal/critical flags.
|
|
92
|
+
10. **Lab criticals are flagged by icon + text (and position), not color alone**, and remain legible in grayscale.
|
|
93
|
+
11. **Visualizations present flagged data, not diagnoses** — no auto-labeling of results as a disease.
|
|
94
|
+
12. **Accessibility meets the AAA bar where feasible:** touch targets >= 44x44 px, 7:1 text contrast, plain-language/reading-level control, and error messages that explain what's wrong and how to fix it.
|
|
95
|
+
|
|
96
|
+
## Canonical references
|
|
97
|
+
|
|
98
|
+
- HIPAA Privacy & Security Rules (HHS): https://www.hhs.gov/hipaa/for-professionals/index.html
|
|
99
|
+
- HHS guidance on tracking technologies and PHI: https://www.hhs.gov/hipaa/for-professionals/privacy/guidance/index.html
|
|
100
|
+
- WCAG 2.1 (W3C/WAI): https://www.w3.org/TR/WCAG21/
|
|
101
|
+
- WAI accessibility guidance: https://www.w3.org/WAI/
|
|
102
|
+
- HL7 FHIR specification: https://hl7.org/fhir/
|
|
103
|
+
- ONC Cures Act / information blocking (HealthIT.gov): https://www.healthit.gov/topic/information-blocking
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
# Export Formats — the `/gdd:export` contract
|
|
2
|
+
|
|
3
|
+
How `/gdd:export <cycle> --format html|pdf|notion [--pseudonymize] [--pr]` turns a completed cycle's in-repo design output into a stakeholder-shareable artifact. Dep-free: the HTML/PDF assembler is pure (`scripts/lib/export/build-html.cjs`); Notion is MCP-based; no `paged`/`puppeteer`/`pdfkit`/markdown-lib runtime.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## Source set (what gets packaged)
|
|
8
|
+
|
|
9
|
+
In cycle order: `EXPERIENCE.md` (Phase 19.5 cross-cycle memory) · `.design/DESIGN.md` · `.design/DESIGN-VERIFICATION.md` · `.design/DESIGN-AUDIT.md` (if present) · the decision log (`D-XX`) · Preview/Chromatic screenshots (base64-embedded for html/pdf).
|
|
10
|
+
|
|
11
|
+
## Formats
|
|
12
|
+
|
|
13
|
+
- **`html`** (default) — `buildHtml({ title, subtitle, sections, images })` → a **single self-contained HTML** file: inline `<style>`, base64-embedded images, **zero external references** (safe to email / drop in Drive). Written to `.design/export/<cycle>.html`.
|
|
14
|
+
- **`pdf`** — the same `buildHtml({ ..., print: true })` (adds a Paged.js-compatible `@page` print stylesheet). Written to `.design/export/<cycle>.print.html`; **the user renders it** via Paged.js / headless-Chrome. GDD ships **no** PDF runtime (the print-executor precedent, D-02).
|
|
15
|
+
- **`notion`** — a Notion page via the Notion MCP (`connections/notion.md`): headings → section/toggle blocks, screenshots → image-upload blocks. Degrades to the `html` file when the Notion MCP is `not_configured`/disabled.
|
|
16
|
+
|
|
17
|
+
## Privacy (redact always; pseudonymize opt-in)
|
|
18
|
+
|
|
19
|
+
Every section is passed through `scripts/lib/redact.cjs` (secrets — the floor). `--pseudonymize` additionally applies `scripts/lib/pseudonymize.cjs` (git identity / paths / hostname / repo origin) — use it when sharing externally. Default (no flag) = redact only.
|
|
20
|
+
|
|
21
|
+
## PR integration (`--pr`)
|
|
22
|
+
|
|
23
|
+
`--pr` hands the generated self-contained HTML preview to `agents/pr-commenter.md` (Phase 35.1) to post as a PR comment — degrade-to-noop when there's no PR or pr-commenter is unavailable (never blocks the export).
|
|
24
|
+
|
|
25
|
+
## Self-contained guarantee (html/pdf)
|
|
26
|
+
|
|
27
|
+
`build-html.cjs` emits no external `src=`/`<link>`/`<script>` — CSS is inline, images are base64 `data:` URIs. Content links (`<a href="https://…">`) are preserved (they're references, not load-bearing resources). Deterministic: same input → byte-identical output (the regression baseline freezes a fixture render).
|
|
28
|
+
|
|
29
|
+
## Out of scope
|
|
30
|
+
|
|
31
|
+
Confluence (Notion-only this phase); Figma export (Phase 31); video walkthroughs; collaborative editing (read-only handoff); bidirectional Notion sync (export write-path only); a bundled PDF/markdown runtime (D-02).
|
package/reference/registry.json
CHANGED
|
@@ -930,6 +930,41 @@
|
|
|
930
930
|
"type": "heuristic",
|
|
931
931
|
"phase": 35.3,
|
|
932
932
|
"description": "Phase 35.3 ticket-sync contract — the STATE <ticket_links> cycle→ticket map, the bidirectional read (decision-injector surfaces linked-ticket comments on .design open) + write (transition + redacted summary on cycle completion) flow via MCP tools (mcp__linear__* / mcp__atlassian__*; no SDK, no raw HTTP), the default status-transition map, tracker-wins conflict resolution, the mandatory scripts/lib/redact.cjs chokepoint, and the GDD_DISABLE_LINEAR/GDD_DISABLE_JIRA kill-switches. Consumed by agents/ticket-sync-agent.md."
|
|
933
|
+
},
|
|
934
|
+
{
|
|
935
|
+
"name": "export-formats",
|
|
936
|
+
"path": "reference/export-formats.md",
|
|
937
|
+
"type": "heuristic",
|
|
938
|
+
"phase": 35.5,
|
|
939
|
+
"description": "Phase 35.5 /gdd:export contract — the source set (EXPERIENCE.md + DESIGN.md + DESIGN-VERIFICATION.md + decisions + screenshots), the three formats (self-contained HTML via scripts/lib/export/build-html.cjs, Paged.js-compatible print PDF rendered by the user, Notion page via the Notion MCP), mandatory scripts/lib/redact.cjs + the --pseudonymize opt-in (scripts/lib/pseudonymize.cjs), and the --pr hand-off to pr-commenter. No bundled PDF/markdown runtime (D-02)."
|
|
940
|
+
},
|
|
941
|
+
{
|
|
942
|
+
"name": "finance",
|
|
943
|
+
"path": "reference/domains/finance-patterns.md",
|
|
944
|
+
"type": "heuristic",
|
|
945
|
+
"phase": 36.1,
|
|
946
|
+
"description": "Phase 36.1 Tier-3 domain pack — finance/fintech UI patterns: data-table density (tabular-nums), trading-interface conventions (colorblind-safe gain/loss), regulatory disclosure placement (Reg-T, MiFID II), PCI-DSS PAN masking, number-formatting precision, real-time data states. Carries Detection signals (keywords + deps) + an Audit checklist consumed by design-context-builder Step 0F + design-auditor."
|
|
947
|
+
},
|
|
948
|
+
{
|
|
949
|
+
"name": "healthcare",
|
|
950
|
+
"path": "reference/domains/healthcare-patterns.md",
|
|
951
|
+
"type": "heuristic",
|
|
952
|
+
"phase": 36.1,
|
|
953
|
+
"description": "Phase 36.1 Tier-3 domain pack — healthcare/clinical UI patterns: HIPAA-aware PHI isolation (no PHI in URLs/logs/analytics), idle auto-logout, audit-trail-as-UI, MyChart-class flows, WCAG 2.1 AAA, medical-data visualization. Surfaces risk, does not certify compliance. Detection signals + Audit checklist for Step 0F + design-auditor."
|
|
954
|
+
},
|
|
955
|
+
{
|
|
956
|
+
"name": "gaming",
|
|
957
|
+
"path": "reference/domains/gaming-patterns.md",
|
|
958
|
+
"type": "heuristic",
|
|
959
|
+
"phase": 36.1,
|
|
960
|
+
"description": "Phase 36.1 Tier-3 domain pack — game UI/HUD patterns: diegetic/non-diegetic/spatial/meta HUD taxonomy, vestibular + photosensitive safety (3 flashes/sec, reduced-motion + in-game toggles), ESRB/PEGI age-gates, input-model adaptation (controller/touch/KBM), TV-safe area. Detection signals + Audit checklist for Step 0F + design-auditor."
|
|
961
|
+
},
|
|
962
|
+
{
|
|
963
|
+
"name": "civic",
|
|
964
|
+
"path": "reference/domains/civic-patterns.md",
|
|
965
|
+
"type": "heuristic",
|
|
966
|
+
"phase": 36.1,
|
|
967
|
+
"description": "Phase 36.1 Tier-3 domain pack — civic/government UI patterns: Section 508 + WCAG 2.1 AA hard floor, multi-language gov forms (EN/ES/zh-Hans), Plain Writing Act (grade 6-8), USWDS, session-timeout warnings, one-thing-per-page forms. Detection signals + Audit checklist for Step 0F + design-auditor."
|
|
933
968
|
}
|
|
934
969
|
]
|
|
935
970
|
}
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
/**
|
|
3
|
+
* scripts/lib/export/build-html.cjs — Phase 35.5 self-contained HTML assembler.
|
|
4
|
+
*
|
|
5
|
+
* Pure + dep-free (D-02): no markdown library, no `paged`/`puppeteer`/`pdfkit`. Produces a
|
|
6
|
+
* SINGLE self-contained HTML string — inline <style>, base64-embedded images, ZERO external
|
|
7
|
+
* references — for the /gdd:export html + pdf formats (pdf = the same HTML + Paged.js-compatible
|
|
8
|
+
* @page print CSS the user renders, never a bundled PDF runtime). Deterministic: same input →
|
|
9
|
+
* byte-identical output (hermetic tests, D-07).
|
|
10
|
+
*/
|
|
11
|
+
|
|
12
|
+
// Escapes the 5 HTML-significant characters so the result is safe in BOTH element
|
|
13
|
+
// content AND double/single-quoted attribute values (e.g. <img alt="...">). Escaping
|
|
14
|
+
// the quotes is what makes attribute interpolation injection-safe (js/incomplete-html-
|
|
15
|
+
// attribute-sanitization). Order matters: & first so the entity ampersands aren't re-escaped.
|
|
16
|
+
function esc(s) {
|
|
17
|
+
return String(s)
|
|
18
|
+
.replace(/&/g, '&')
|
|
19
|
+
.replace(/</g, '<')
|
|
20
|
+
.replace(/>/g, '>')
|
|
21
|
+
.replace(/"/g, '"')
|
|
22
|
+
.replace(/'/g, ''');
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
// Minimal, deterministic inline-markdown → HTML (escapes first, then re-introduces tags for
|
|
26
|
+
// the constructs GDD's .design markdown uses): `code`, **bold**, *italic*, [text](url).
|
|
27
|
+
function inline(text) {
|
|
28
|
+
let s = esc(text);
|
|
29
|
+
s = s.replace(/`([^`]+)`/g, (_, c) => `<code>${c}</code>`);
|
|
30
|
+
s = s.replace(/\*\*([^*]+)\*\*/g, (_, b) => `<strong>${b}</strong>`);
|
|
31
|
+
s = s.replace(/(^|[^*])\*([^*\n]+)\*/g, (_, p, i) => `${p}<em>${i}</em>`);
|
|
32
|
+
s = s.replace(/\[([^\]]+)\]\((https?:\/\/[^)\s]+|#[^)\s]*)\)/g, (_, t, u) => `<a href="${u}">${t}</a>`);
|
|
33
|
+
return s;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
// Block-level markdown → HTML. Handles headings, fenced code, ul/ol, blockquote, hr, images
|
|
37
|
+
// (resolved to base64 data URIs from the images map), and paragraphs.
|
|
38
|
+
function mdToHtml(md, images) {
|
|
39
|
+
const lines = String(md).replace(/\r\n/g, '\n').split('\n');
|
|
40
|
+
const out = [];
|
|
41
|
+
let i = 0;
|
|
42
|
+
const imgByName = new Map((images || []).map((im) => [im.name, im.dataUri]));
|
|
43
|
+
while (i < lines.length) {
|
|
44
|
+
const line = lines[i];
|
|
45
|
+
if (/^```/.test(line)) { // fenced code
|
|
46
|
+
const buf = []; i++;
|
|
47
|
+
while (i < lines.length && !/^```/.test(lines[i])) { buf.push(esc(lines[i])); i++; }
|
|
48
|
+
i++; out.push(`<pre><code>${buf.join('\n')}</code></pre>`); continue;
|
|
49
|
+
}
|
|
50
|
+
const h = line.match(/^(#{1,4})\s+(.*)$/);
|
|
51
|
+
if (h) { const n = h[1].length; out.push(`<h${n}>${inline(h[2])}</h${n}>`); i++; continue; }
|
|
52
|
+
if (/^\s*([-*])\s+/.test(line)) { // unordered list
|
|
53
|
+
const items = [];
|
|
54
|
+
while (i < lines.length && /^\s*([-*])\s+/.test(lines[i])) { items.push(`<li>${inline(lines[i].replace(/^\s*[-*]\s+/, ''))}</li>`); i++; }
|
|
55
|
+
out.push(`<ul>${items.join('')}</ul>`); continue;
|
|
56
|
+
}
|
|
57
|
+
if (/^\s*\d+\.\s+/.test(line)) { // ordered list
|
|
58
|
+
const items = [];
|
|
59
|
+
while (i < lines.length && /^\s*\d+\.\s+/.test(lines[i])) { items.push(`<li>${inline(lines[i].replace(/^\s*\d+\.\s+/, ''))}</li>`); i++; }
|
|
60
|
+
out.push(`<ol>${items.join('')}</ol>`); continue;
|
|
61
|
+
}
|
|
62
|
+
if (/^>\s?/.test(line)) { out.push(`<blockquote>${inline(line.replace(/^>\s?/, ''))}</blockquote>`); i++; continue; }
|
|
63
|
+
if (/^(---+|\*\*\*+)\s*$/.test(line)) { out.push('<hr>'); i++; continue; }
|
|
64
|
+
const img = line.match(/^!\[([^\]]*)\]\(([^)\s]+)\)\s*$/); // image — resolve to base64
|
|
65
|
+
if (img) {
|
|
66
|
+
const src = imgByName.get(img[2]) || (img[2].startsWith('data:') ? img[2] : '');
|
|
67
|
+
if (src) out.push(`<figure><img alt="${esc(img[1])}" src="${src}"><figcaption>${esc(img[1])}</figcaption></figure>`);
|
|
68
|
+
i++; continue;
|
|
69
|
+
}
|
|
70
|
+
if (line.trim() === '') { i++; continue; }
|
|
71
|
+
// paragraph — gather consecutive non-blank, non-block lines
|
|
72
|
+
const para = [line]; i++;
|
|
73
|
+
while (i < lines.length && lines[i].trim() !== '' && !/^(#{1,4}\s|```|>\s?|\s*[-*]\s|\s*\d+\.\s|!\[)/.test(lines[i])) { para.push(lines[i]); i++; }
|
|
74
|
+
out.push(`<p>${inline(para.join(' '))}</p>`);
|
|
75
|
+
}
|
|
76
|
+
return out.join('\n');
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
const SCREEN_CSS = `:root{--ink:#1a1a1a;--muted:#6b7280;--rule:#e5e7eb;--accent:#2563eb}*{box-sizing:border-box}body{margin:0;font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:#fff}main{max-width:820px;margin:0 auto;padding:48px 24px}h1{font-size:2rem;line-height:1.2;margin:0 0 .5rem}h2{font-size:1.4rem;margin:2rem 0 .5rem;padding-top:1rem;border-top:1px solid var(--rule)}h3{font-size:1.1rem;margin:1.5rem 0 .4rem}p{margin:.6rem 0}code{background:#f3f4f6;padding:.1em .35em;border-radius:4px;font-size:.9em}pre{background:#f8f9fb;border:1px solid var(--rule);border-radius:8px;padding:14px;overflow:auto}pre code{background:none;padding:0}a{color:var(--accent)}blockquote{margin:.8rem 0;padding:.4rem 1rem;border-left:3px solid var(--accent);color:var(--muted)}figure{margin:1rem 0}img{max-width:100%;height:auto;border:1px solid var(--rule);border-radius:8px}figcaption{font-size:.85rem;color:var(--muted);margin-top:.3rem}hr{border:none;border-top:1px solid var(--rule);margin:2rem 0}.gdd-meta{color:var(--muted);font-size:.9rem;margin-bottom:2rem}`;
|
|
80
|
+
const PRINT_CSS = `@page{size:A4;margin:18mm 16mm}@media print{h2{break-before:auto}figure,pre,blockquote{break-inside:avoid}main{max-width:none;padding:0}a{color:var(--ink);text-decoration:underline}}`;
|
|
81
|
+
|
|
82
|
+
/**
|
|
83
|
+
* buildHtml({ title, subtitle?, sections:[{heading, markdown}], images?:[{name, dataUri}], print? })
|
|
84
|
+
* → a single self-contained HTML document string (inline CSS, base64 images, no external refs).
|
|
85
|
+
*/
|
|
86
|
+
function buildHtml(opts = {}) {
|
|
87
|
+
const title = esc(opts.title || 'GDD Design Export');
|
|
88
|
+
const css = SCREEN_CSS + (opts.print ? PRINT_CSS : '');
|
|
89
|
+
const body = (opts.sections || [])
|
|
90
|
+
.map((sec) => `<section>\n<h2>${esc(sec.heading)}</h2>\n${mdToHtml(sec.markdown || '', opts.images)}\n</section>`)
|
|
91
|
+
.join('\n');
|
|
92
|
+
const subtitle = opts.subtitle ? `<p class="gdd-meta">${esc(opts.subtitle)}</p>` : '';
|
|
93
|
+
return `<!DOCTYPE html>
|
|
94
|
+
<html lang="en">
|
|
95
|
+
<head>
|
|
96
|
+
<meta charset="utf-8">
|
|
97
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
98
|
+
<title>${title}</title>
|
|
99
|
+
<style>${css}</style>
|
|
100
|
+
</head>
|
|
101
|
+
<body>
|
|
102
|
+
<main>
|
|
103
|
+
<h1>${title}</h1>
|
|
104
|
+
${subtitle}
|
|
105
|
+
${body}
|
|
106
|
+
</main>
|
|
107
|
+
</body>
|
|
108
|
+
</html>
|
|
109
|
+
`;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
module.exports = { buildHtml, mdToHtml, inline, esc };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: gdd-connections
|
|
3
|
-
description: "Interactive onboarding wizard for the
|
|
3
|
+
description: "Interactive onboarding wizard for the 19 external integrations the pipeline supports — probes all (`figma`, `refero`, `preview`, `storybook`, `chromatic`, `graphify`, `pinterest`, `claude-design`, `paper-design`, `pencil-dev`, `21st-dev`, `magic-patterns`, `lazyweb`, `mobbin`, `slack`, `discord`, `linear`, `jira`, `notion`), recommends based on project type, walks the user through setup (auto-run MCP install or copy-command fallback), writes results to `STATE.md <connections>`. Use after `/gdd:new-project` or whenever the user wants to add, inspect, or skip a connection. Re-runnable anytime."
|
|
4
4
|
argument-hint: "[list | <connection-name> | --auto]"
|
|
5
5
|
user-invocable: true
|
|
6
6
|
tools: Read, Write, Bash, Glob, Grep, AskUserQuestion, ToolSearch
|
|
@@ -8,11 +8,11 @@ tools: Read, Write, Bash, Glob, Grep, AskUserQuestion, ToolSearch
|
|
|
8
8
|
|
|
9
9
|
# /gdd:connections
|
|
10
10
|
|
|
11
|
-
Interactive onboarding for the
|
|
11
|
+
Interactive onboarding for the 19 external integrations the pipeline supports. Replaces "probe silently at scan entry and hope the user noticed" with an explicit "here is what can plug in, here is how."
|
|
12
12
|
|
|
13
13
|
Canonical per-connection specs live in `../../connections/<name>.md` (one file per integration). The capability matrix + probe-pattern spec live in `../../connections/connections.md`. This skill is the **user-facing front end** for those specs.
|
|
14
14
|
|
|
15
|
-
For the
|
|
15
|
+
For the 19 probe scripts (MCP + HTTP + CLI + file probes), bucket categorization, per-connection setup screen, auto-run eligibility matrix, value-prop one-liners, and STATE.md / config.json write contracts, see `./connections-onboarding.md`. For the cross-skill probe pattern + connection-handshake summary, see `../../reference/shared-preamble.md#connection-handshake-summary`. For the cross-skill output discipline, see `../../reference/shared-preamble.md#output-contract-reminders`.
|
|
16
16
|
|
|
17
17
|
---
|
|
18
18
|
|
|
@@ -38,7 +38,7 @@ For the 18 probe scripts (MCP + HTTP + CLI + file probes), bucket categorization
|
|
|
38
38
|
|
|
39
39
|
## Workflow
|
|
40
40
|
|
|
41
|
-
1. **Probe all
|
|
41
|
+
1. **Probe all 19 connections** — run every probe script per `./connections-onboarding.md#step-1--probe-all-19-connections`. MCP probes use `ToolSearch` first; HTTP / CLI / file probes follow non-MCP patterns. Merge results into `STATE.md <connections>` with the three-value schema (`available | unavailable | not_configured`) — never add new values.
|
|
42
42
|
2. **Categorize + build summary** — bucket each probe result (available / recommended / optional / skipped / unavailable) using project-hint detection. Detail + recommendation mapping: `./connections-onboarding.md#step-2--bucket-categorization`.
|
|
43
43
|
3. **Print summary table** — show buckets + value-prop one-liners (verbatim from `./connections-onboarding.md#step-3--summary-table`).
|
|
44
44
|
4. **Route by mode** — `list` / `--auto` exits after summary; `<name>` jumps straight to Step 5; default mode opens an AskUserQuestion (configure recommended / pick one by one / configure all optional / re-check specific / exit). Routing detail: `./connections-onboarding.md#step-4--route-by-mode`.
|
|
@@ -9,7 +9,7 @@ last_updated: 2026-05-18
|
|
|
9
9
|
|
|
10
10
|
Source: extracted from `skills/connections/SKILL.md` (Phase 28.5 rework — D-10 extract-then-link).
|
|
11
11
|
The skill's load-bearing routing + invocation-mode dispatch stays in `../skills/connections/SKILL.md`;
|
|
12
|
-
this file holds the
|
|
12
|
+
this file holds the 19 probe scripts, bucket categorization, per-connection setup screen,
|
|
13
13
|
auto-run eligibility matrix, value-prop one-liners, and STATE.md / config.json write contracts.
|
|
14
14
|
|
|
15
15
|
# Connections Onboarding Procedure
|
|
@@ -27,7 +27,7 @@ this file does NOT duplicate them; it points at them by name.
|
|
|
27
27
|
|
|
28
28
|
---
|
|
29
29
|
|
|
30
|
-
## Step 1 — Probe all
|
|
30
|
+
## Step 1 — Probe all 19 connections
|
|
31
31
|
|
|
32
32
|
Run every probe below in order. MCP probes call `ToolSearch` first (deferred tools fail silently without it). Write every result to `STATE.md <connections>` when done.
|
|
33
33
|
|
|
@@ -128,6 +128,13 @@ ToolSearch({ query: "atlassian jira", max_results: 5 })
|
|
|
128
128
|
→ Non-empty → jira: available
|
|
129
129
|
```
|
|
130
130
|
|
|
131
|
+
**notion:** (export write-path — MCP)
|
|
132
|
+
```
|
|
133
|
+
ToolSearch({ query: "notion", max_results: 5 })
|
|
134
|
+
→ Empty / GDD_DISABLE_NOTION=1 → notion: not_configured
|
|
135
|
+
→ Non-empty → notion: available
|
|
136
|
+
```
|
|
137
|
+
|
|
131
138
|
### Non-MCP probes
|
|
132
139
|
|
|
133
140
|
**storybook** (HTTP):
|
|
@@ -173,7 +180,7 @@ Bash: ls .design/handoff/ 2>/dev/null || find . -maxdepth 3 \
|
|
|
173
180
|
→ Non-empty → claude_design: available
|
|
174
181
|
```
|
|
175
182
|
|
|
176
|
-
After all
|
|
183
|
+
After all 19 probes complete, merge results into `STATE.md <connections>`. Preserve the three-value schema verbatim (`available | unavailable | not_configured`). Do not add new values.
|
|
177
184
|
|
|
178
185
|
---
|
|
179
186
|
|
|
@@ -260,6 +267,7 @@ One-line value props (use verbatim):
|
|
|
260
267
|
| discord | notify — route pipeline events to a Discord channel (redacted) |
|
|
261
268
|
| linear | ticket-sync — link a cycle to a Linear issue; read comments + transition on completion |
|
|
262
269
|
| jira | ticket-sync — parity with Linear via the Atlassian MCP |
|
|
270
|
+
| notion | export — `/gdd:export --format notion` writes a stakeholder page (degrade-to-HTML) |
|
|
263
271
|
|
|
264
272
|
---
|
|
265
273
|
|
|
@@ -287,7 +295,7 @@ options:
|
|
|
287
295
|
- "Exit" → emit ## CONNECTIONS COMPLETE, exit
|
|
288
296
|
```
|
|
289
297
|
|
|
290
|
-
If recommended bucket is empty, swap that option for "Show all
|
|
298
|
+
If recommended bucket is empty, swap that option for "Show all 19 and pick."
|
|
291
299
|
|
|
292
300
|
---
|
|
293
301
|
|
|
@@ -350,6 +358,7 @@ options:
|
|
|
350
358
|
| discord | set `DISCORD_WEBHOOK_URL` env (Discord channel Webhook URL) | ✗ no | Env credential — user sets it; no install command (degrade-to-noop when unset) |
|
|
351
359
|
| linear | `claude mcp add linear ...` (Linear MCP) | ✓ yes | Reversible MCP add; OAuth on first call, no credential filesystem-write |
|
|
352
360
|
| jira | `claude mcp add atlassian ...` (Atlassian MCP) | ✓ yes | Reversible MCP add; OAuth on first call |
|
|
361
|
+
| notion | `claude mcp add notion ...` (Notion MCP) | ✓ yes | Reversible MCP add; OAuth on first call |
|
|
353
362
|
|
|
354
363
|
For non-auto-run connections, hide the "Run install command now" option entirely in 5.3.
|
|
355
364
|
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: gdd-export
|
|
3
|
+
description: "Packages a completed design cycle (.design artifacts + decisions + screenshots) into a stakeholder-shareable artifact — self-contained HTML, print-styled PDF (Paged.js-compatible), or a Notion page. Redacts secrets; --pseudonymize masks identity for external sharing; --pr posts the HTML preview as a PR comment. Use to hand a design-review packet to PMs/execs/brand who aren't in the repo."
|
|
4
|
+
argument-hint: "<cycle-id> --format html|pdf|notion [--pseudonymize] [--pr]"
|
|
5
|
+
user-invocable: true
|
|
6
|
+
tools: Read, Write, Bash, Glob, Grep, ToolSearch, Task
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
# /gdd:export
|
|
10
|
+
|
|
11
|
+
Turns a completed cycle's in-repo design output into a shareable artifact. Closes the gap that `.design/*.md` lives only in the repo — stakeholders not in code can't consume it. The format contract + source set live in `../../reference/export-formats.md`; the Notion write-path in `../../connections/notion.md`.
|
|
12
|
+
|
|
13
|
+
## Steps
|
|
14
|
+
|
|
15
|
+
1. **Resolve the cycle.** `<cycle-id>` (or the current cycle from `.design/STATE.md`). Read the **source set**: `EXPERIENCE.md` (Phase 19.5), `.design/DESIGN.md`, `.design/DESIGN-VERIFICATION.md`, `.design/DESIGN-AUDIT.md` (if present), the decision log, and any Preview/Chromatic screenshots.
|
|
16
|
+
2. **Redact (always) + pseudonymize (opt-in).** Pass every section through `scripts/lib/redact.cjs` (secrets). If `--pseudonymize`, additionally apply `scripts/lib/pseudonymize.cjs` (git identity / paths / hostname) for external sharing. Honor `GDD_DISABLE_NOTION` for the notion format.
|
|
17
|
+
3. **Assemble per `--format`:**
|
|
18
|
+
- **`html`** (default) — `node -e "require('scripts/lib/export/build-html.cjs').buildHtml({...})"` → a **self-contained** HTML (inline CSS, base64-embedded screenshots, no external refs). Write to `.design/export/<cycle>.html`.
|
|
19
|
+
- **`pdf`** — the same `buildHtml({ ..., print: true })` (Paged.js-compatible `@page` print CSS). Write `.design/export/<cycle>.print.html`; instruct the user to render it via Paged.js / headless-Chrome (GDD ships **no** PDF runtime — D-02).
|
|
20
|
+
- **`notion`** — probe the Notion MCP (`ToolSearch({query:"notion"})`); if `available`, create a page from the same source (nested toggles + image upload) per `connections/notion.md`; if `not_configured`/disabled → degrade to the `html` format + a note.
|
|
21
|
+
4. **`--pr`** — hand the generated HTML preview to `agents/pr-commenter.md` (via `Task`) to post as a PR comment (degrade-to-noop if no PR / pr-commenter unavailable).
|
|
22
|
+
5. **Print the artifact path** (and the Notion URL / PR comment status when applicable).
|
|
23
|
+
|
|
24
|
+
## Do Not
|
|
25
|
+
|
|
26
|
+
- Do not add a PDF/markdown runtime dependency (`paged`/`puppeteer`/`pdfkit`/a markdown lib) — `build-html.cjs` is pure and the PDF is render-it-yourself print HTML (D-02).
|
|
27
|
+
- Do not emit an un-redacted artifact — redact is mandatory; pseudonymize is the external-sharing opt-in.
|
|
28
|
+
- Do not block on Notion/PR — both degrade to a noop / the html file.
|
|
29
|
+
|
|
30
|
+
## EXPORT COMPLETE
|