/design-compliance

description: "Audit or generate regulation-specific UI patterns for HIPAA, PCI DSS, or ADA compliance. Use --regulation <hipaa|pci|ada> to target a specific standard."
argument-hint: "--regulation <hipaa|pci|ada> [file to audit OR brief to generate from]"
allowed-tools: ["Read", "Write", "Glob", "Grep", "mcp__*"]

/design-compliance

You are performing a targeted compliance audit or generating regulation-specific UI patterns. Your output is scoped to a single regulation — HIPAA, PCI DSS, or ADA/Section 508 — based on the `--regulation` flag. You do not output all three branches; you output only the branch matching the requested regulation.

Input

Arguments: **$ARGUMENTS**

Parse the following from `$ARGUMENTS`:

• **Required flag**: `--regulation <hipaa|pci|ada>`
• **Mode**: if a file path is provided after the flag, run in **audit mode** (read and scan that file). If a text brief is provided, run in **generate mode** (produce a compliant UI spec from the brief).

**If `--regulation` is missing or the value is not one of `hipaa`, `pci`, or `ada`:**

Output the following error and stop:

Error: --regulation flag is required.

Usage: /design-compliance --regulation <hipaa|pci|ada> [file path or brief]

Valid values:
  --regulation hipaa   Audit or generate HIPAA-compliant PHI UI patterns
  --regulation pci     Audit or generate PCI DSS-compliant payment form patterns
  --regulation ada     Audit or generate ADA/Section 508 accessible component patterns

Examples:
  /design-compliance --regulation hipaa src/components/PatientRecord.tsx
  /design-compliance --regulation pci "Design a checkout form for a SaaS subscription product"
  /design-compliance --regulation ada src/pages/onboarding.html

---

Step 1: Load Knowledge Base

Read `${CLAUDE_PLUGIN_ROOT}/skills/design/references/compliance-designer.md` to apply the full Compliance Designer knowledge base to the active regulation branch.

**MCP Fallback**: If the file cannot be read, proceed using inline knowledge. Inline knowledge for this command covers:

• **HIPAA**: PHI field ★ indicator (gold #B8860B, tooltip "This is Protected Health Information (PHI). Access is logged."), session timeout (warning at T−2 min, forced logout at T=0, no "remember me" bypass), audit log required columns (user ID, timestamp, resource type, action, outcome, IP), role badges (Attending/Resident/Nurse/Admin/Auditor/BTG), break-the-glass flow (6 steps, free-text justification min 20 chars, supervisor alert within 15 min, persistent red banner), 45 CFR §164.312.
• **PCI**: card fields must be in processor iframe (never merchant DOM), SAQ-A scope reduction, masked PAN display (first 6 / last 4 shown as `•••• •••• •••• XXXX`), CVV never stored or masked for saved cards (field absent until re-entry), 3DS v2 challenge modal spec, error message standards (never expose internal codes, processor error categories, always include user-actionable next step), PCI DSS v4.0 Req 3.3.1 and 4.2.1.
• **ADA / Section 508**: skip-nav link (visually hidden, visible on focus, `href="#main-content"`), form inputs need programmatic label + hint text + error state (all announced by screen reader), modal focus trap + return focus on close, data table `scope` attributes, WCAG 2.1 AA (4.5:1 text contrast, 3:1 UI component contrast), `aria-live` regions, keyboard trap audit protocol (Tab, Shift+Tab, Esc, Arrow keys), `outline: none` prohibition.

---

Step 2: Execute the Active Regulation Branch

Based on `--regulation`, execute exactly one of the three branches below. Do not output the other two branches.

---

Branch: HIPAA

Audit Mode (file path provided)

Read the provided file. Scan for the following HIPAA UI violations. Report each finding with: file location (line number if possible), violation description, the specific HIPAA requirement violated, and a recommended fix.

**Scan checklist:**

| Check | Violation Pattern | HIPAA Requirement | |---|---|---| | PHI fields without ★ indicator | Input labels or field wrappers containing PHI categories (name, DOB, SSN, MRN, address, phone, email, health plan number, device ID) without a ★ marker or `data-phi` attribute | 45 CFR §164.312 — PHI must be visually identified | | Session timeout > 15 minutes or absent | `sessionTimeout`, `SESSION_TIMEOUT`, `inactivityTimeout` values > 900000ms (15 min), or no timeout configured | 45 CFR §164.312(a)(2)(iii) — automatic logoff required | | Audit log missing required columns | Audit log table or log object missing any of: user ID, timestamp, resource type, action, outcome, IP address | 45 CFR §164.312(b) — audit controls required | | Access control missing role indicators | Header or nav components lacking role badge or role display; user context object lacking `role` property rendered in UI | 45 CFR §164.312(a)(1) — access control required | | "Remember me" bypassing timeout | `rememberMe`, `stayLoggedIn`, `keepMeSignedIn` options that extend session beyond 15-min inactivity rule | 45 CFR §164.312(a)(2)(iii) | | Break-the-glass missing justification | BTG flows lacking a free-text justification field or minimum character validation | 45 CFR §164.312(b) — audit controls |

Output a findings table followed by a prioritized remediation list (Critical → High → Medium).

---

Generate Mode (brief provided)

Generate a complete HIPAA-compliant UI spec covering all components below. Apply the Compliance Designer knowledge base throughout.

1. PHI Field Component Spec

Every field displaying or collecting Protected Health Information must carry the ★ indicator.

**Implementation spec:**

Label row:
  ★  Date of Birth                        ← ★ is gold (#B8860B)
  [MM]  /  [DD]  /  [YYYY]               ← field inputs
  ℹ  "This field contains Protected Health Information. Access is logged."
     (tooltip on ★ hover/focus; also readable by screen reader via aria-describedby)

| Token | Value | |---|---| | ★ color | #B8860B (DarkGoldenrod) — verify 4.5:1 again