Prompt file imported from E-G-C/dude (.github/prompts/dude-pack-strata-apply-visual-system.prompt.md). Copyright stays with the author.

Apply the Strata Visual System

Name: dude-pack-strata-apply-visual-system
Author: E-G-C

Apply Strata to the file or selection the user provides, then self-check the result before handing back.

Inputs to gather (if not obvious)

Which file(s) / component(s), and what kind of surface: application chrome, web page, graphic/SVG, data visualization, or long-form document.
Palette: pigment (default) or spectrum. Theme: light (default) or dark.
How tokens are consumed: plain CSS, SCSS, Tailwind, or design-tokens-as-JSON.

There is no logo question — Strata ships no logo. There is no site-generator question — none is assumed.

Steps

Read the references you need:
Wire up tokens for the build system:
- Plain CSS / HTML → <link rel="stylesheet" href="<path>/tokens/strata.css"> and class="strata" on a root element. Set data-strata-palette / data-strata-theme on <html> if not using the defaults.
- SCSS → @use "<path>/tokens/strata.scss" as strata; then strata.strata-role("primary").
- Tailwind → add tokens/tailwind.preset.js to presets and import tokens/strata.css; the preset holds var() references and the stylesheet does the switching.
- Other → consume ../skills/dude-pack-strata-visual/tokens/strata-tokens.json.
Typography — --strata-font-sans on the root, --strata-font-mono for code and metadata, the --strata-fs-* / --strata-lh-* pairings, body ≥ 14px, at most two weights per surface.
Planes — replace every box-shadow with a plane change plus var(--strata-rule-hairline). Nothing floats, blurs, or glows.
Shape — every interactive element and panel to --strata-radius-md (4px); nothing above 8px.
Colour — role tokens only, never a palette colour name. One accent per surface. Text on a light plane uses a -deep or -text form, never a vivid slot.
Fields — every meaning-bearing fill and every tint badge gets a 1px border.
Layout — --strata-space-* everywhere.
Motion — --strata-dur-* and --strata-ease-*, plus a prefers-reduced-motion block for anything animated.
Charts (if any) — --strata-series-1..7 in order, a non-colour encoding for any series beyond two, and --strata-rule on every mark.
Run the self-check below and fix every Fail and Warn before handing back.

Final self-check

Produce a markdown table of Pass / Warn / Fail per item, with file:line references.

Colour and palette portability

Planes and shape

Zero box-shadow declarations. Depth is plane + 1px rule.
Every plane change is accompanied by a rule — the light plane scale spans about 1.15:1, so tone alone is not perceivable.
No backdrop-filter, blur, glow, or gradient mesh.
Interactive elements at 4px; nothing above 8px. No pills.
No warm-cream ground, no oversized editorial headline, no monospace manifesto banner.

Typography

Font stacks reference --strata-font-sans / --strata-font-mono.
No @font-face, no remote font import, no font files added.
Long-form prose constrained to --strata-reading-measure; tables, code, and figures may use --strata-reading-wide.
Headings 600 with line-height ≤ 1.3. Body ≥ 14px. At most two weights per surface.
Uppercase appears only on .strata-meta metadata, never on headings.

Motion and focus

Durations and easings come from tokens; no CSS easing keyword is used as a token value.
Every animated property is covered by prefers-reduced-motion: reduce.
Focus is outline + outline-offset ≥ 2px on every interactive element, never painted with box-shadow.

Data visualization

Series use --strata-series-1..7 in the documented order.
Any series beyond two carries a non-colour encoding (labels, markers, patterns).
The categorical ramp is not used for sequential or diverging data.
Every mark is stroked with --strata-rule.
Axis and legend labels use .strata-meta, not the series colour.

Iconography and misc

One icon family per surface; icons inherit currentColor.
No emoji as functional UI iconography.
No logo, wordmark, or product mark introduced.

Output format

| Area | Item | Status | Location | Notes |
|---|---|---|---|---|
| Colour | Hardcoded #1348E8 in primary button | Fail | src/Header.tsx:42 | Use var(--strata-primary) |
| Colour | Vivid series-4 used as text | Fail | src/Chart.tsx:88 | Use --strata-series-4-deep (vivid is under 2:1) |
| Planes | box-shadow on card | Fail | styles.css:120 | Plane change + var(--strata-rule-hairline) |
| Shape | border-radius: 16px on card | Warn | styles.css:124 | Ceiling is 8px; default is 4px |

Then offer the user "Want me to fix the Fail and Warn items?" and proceed if confirmed.

Also run the validator

The self-check covers the surface you edited. The pack's own validator covers the token files:

bash <path>/skills/dude-pack-strata-visual/scripts/strata-check.sh
# or
pwsh <path>/skills/dude-pack-strata-visual/scripts/strata-check.ps1

It asserts cross-palette id parity, that palette blocks carry colour only, the no-shadow rule, the radius ceiling, keyword easings, reduced motion, and local-only fonts.

Output

Return:

The edited file(s).
A short bulleted list of what changed (tokens wired, planes, shape, colour roles, spacing, motion).
The self-check table.

# Apply the Strata Visual System Apply Strata to the file or selection the user provides, then self-check the result before handing back. ## Inputs to gather (if not obvious) - Which file(s) / component(s), and what kind of surface: application chrome, web page, graphic/SVG, data visualization, or long-form document. - Palette: `pigment` (default) or `spectrum`. Theme: light (default) or dark. - How tokens are consumed: plain CSS, SCSS, Tailwind, or design-tokens-as-JSON. There is no logo question — Strata ships no logo. There is no site-generator question — none is assumed. ## Steps 1. **Read the references** you need: - [../skills/dude-pack-strata-visual/reference/colors.md](../skills/dude-pack-strata-visual/reference/colors.md) - [../skills/dude-pack-strata-visual/reference/typography.md](../skills/dude-pack-strata-visual/reference/typography.md) - [../skills/dude-pack-strata-visual/reference/layout-and-iconography.md](../skills/dude-pack-strata-visual/reference/layout-and-iconography.md) 2. **Wire up tokens** for the build system: - Plain CSS / HTML → `<link rel="stylesheet" href="<path>/tokens/strata.css">` and `class="strata"` on a root element. Set `data-strata-palette` / `data-strata-theme` on `<html>` if not using the defaults. - SCSS → `@use "<path>/tokens/strata.scss" as strata;` then `strata.strata-role("primary")`. - Tailwind → add `tokens/tailwind.preset.js` to `presets` **and** import `tokens/strata.css`; the preset holds `var()` references and the stylesheet does the switching. - Other → consume [../skills/dude-pack-strata-visual/tokens/strata-tokens.json](../skills/dude-pack-strata-visual/tokens/strata-tokens.json). 3. **Typography** — `--strata-font-sans` on the root, `--strata-font-mono` for code and metadata, the `--strata-fs-*` / `--strata-lh-*` pairings, body ≥ 14px, at most two weights per surface. 4. **Planes** — replace every `box-shadow` with a plane change plus `var(--strata-rule-hairline)`. Nothing floats, blurs, or glows. 5. **Shape** — every interactive element and panel to `--strata-radius-md` (4px); nothing above 8px. 6. **Colour** — role tokens only, never a palette colour name. One accent per surface. Text on a light plane uses a `-deep` or `-text` form, never a vivid slot. 7. **Fields** — every meaning-bearing fill and every tint badge gets a 1px border. 8. **Layout** — `--strata-space-*` everywhere. 9. **Motion** — `--strata-dur-*` and `--strata-ease-*`, plus a `prefers-reduced-motion` block for anything animated. 10. **Charts (if any)** — `--strata-series-1..7` in order, a non-colour encoding for any series beyond two, and `--strata-rule` on every mark. 11. **Run the self-check below** and fix every Fail and Warn before handing back. ## Final self-check Produce a markdown table of **Pass / Warn / Fail** per item, with file:line references. ### Colour and palette portability - [ ] No component references a palette-specific colour name, or a raw hex, `rgb()`, `rgba()`, or `hsl()` literal that a `--strata-*` token expresses. - [ ] Role tokens are used in preference to `series-N` slots wherever a role exists. - [ ] The surface renders correctly under **all four** palette/theme combinations. - [ ] Vivid slots are never used as text on a light plane — use `-deep` or the `-text` role token. - [ ] White text sits only on a `-deep` form, or on a vivid slot measured ≥ 4.5:1. Amber fills use `--strata-on-warning`. - [ ] Destructive fill is `--strata-danger-text`, not the vivid danger slot. - [ ] Every meaning-bearing fill has a 1px border; every tint badge is bordered with its `-tint-ink`. - [ ] `--strata-hair` is not used as a control boundary, plane edge, or field border. - [ ] `--strata-muted` is not used on `--strata-code-bg`; use `--strata-code-muted`. - [ ] Body text ≥ 4.5:1; large text and non-text UI ≥ 3:1. - [ ] State is never communicated by colour alone. ### Planes and shape - [ ] **Zero** `box-shadow` declarations. Depth is plane + 1px rule. - [ ] Every plane change is accompanied by a rule — the light plane scale spans about 1.15:1, so tone alone is not perceivable. - [ ] No `backdrop-filter`, blur, glow, or gradient mesh. - [ ] Interactive elements at 4px; nothing above 8px. No pills. - [ ] No warm-cream ground, no oversized editorial headline, no monospace manifesto banner. ### Typography - [ ] Font stacks reference `--strata-font-sans` / `--strata-font-mono`. - [ ] No `@font-face`, no remote font import, no font files added. - [ ] Long-form prose constrained to `--strata-reading-measure`; tables, code, and figures may use `--strata-reading-wide`. - [ ] Headings 600 with line-height ≤ 1.3. Body ≥ 14px. At most two weights per surface. - [ ] Uppercase appears **only** on `.strata-meta` metadata, never on headings. ### Motion and focus - [ ] Durations and easings come from tokens; no CSS easing keyword is used as a token value. - [ ] Every animated property is covered by `prefers-reduced-motion: reduce`. - [ ] Focus is `outline` + `outline-offset` ≥ 2px on every interactive element, never painted with `box-shadow`. ### Data visualization - [ ] Series use `--strata-series-1..7` in the documented order. - [ ] Any series beyond two carries a non-colour encoding (labels, markers, patterns). - [ ] The categorical ramp is not used for sequential or diverging data. - [ ] Every mark is stroked with `--strata-rule`. - [ ] Axis and legend labels use `.strata-meta`, not the series colour. ### Iconography and misc - [ ] One icon family per surface; icons inherit `currentColor`. - [ ] No emoji as functional UI iconography. - [ ] No logo, wordmark, or product mark introduced. ### Output format ``` | Area | Item | Status | Location | Notes | |---|---|---|---|---| | Colour | Hardcoded #1348E8 in primary button | Fail | src/Header.tsx:42 | Use var(--strata-primary) | | Colour | Vivid series-4 used as text | Fail | src/Chart.tsx:88 | Use --strata-series-4-deep (vivid is under 2:1) | | Planes | box-shadow on card | Fail | styles.css:120 | Plane change + var(--strata-rule-hairline) | | Shape | border-radius: 16px on card | Warn | styles.css:124 | Ceiling is 8px; default is 4px | ``` Then offer the user **"Want me to fix the Fail and Warn items?"** and proceed if confirmed. ## Also run the validator The self-check covers the surface you edited. The pack's own validator covers the token files: ```bash bash <path>/skills/dude-pack-strata-visual/scripts/strata-check.sh # or pwsh <path>/skills/dude-pack-strata-visual/scripts/strata-check.ps1 ``` It asserts cross-palette id parity, that palette blocks carry colour only, the no-shadow rule, the radius ceiling, keyword easings, reduced motion, and local-only fonts. ## Output Return: - The edited file(s). - A short bulleted list of what changed (tokens wired, planes, shape, colour roles, spacing, motion). - The self-check table.

{ "prompt": "# Apply the Strata Visual System\n\nApply Strata to the file or selection the user provides, then self-check the\nresult before handing back.\n\n## Inputs to gather (if not obvious)\n\n- Which file(s) / component(s), and what kind of surface: application chrome,\n web page, graphic/SVG, data visualization, or long-form document.\n- Palette: `pigment` (default) or `spectrum`. Theme: light (default) or dark.\n- How tokens are consumed: plain CSS, SCSS, Tailwind, or design-tokens-as-JSON.\n\nThere is no logo question — Strata ships no logo. There is no site-generator\nquestion — none is assumed.\n\n## Steps\n\n1. **Read the references** you need:\n - [../skills/dude-pack-strata-visual/reference/colors.md](../skills/dude-pack-strata-visual/reference/colors.md)\n - [../skills/dude-pack-strata-visual/reference/typography.md](../skills/dude-pack-strata-visual/reference/typography.md)\n - [../skills/dude-pack-strata-visual/reference/layout-and-iconography.md](../skills/dude-pack-strata-visual/reference/layout-and-iconography.md)\n\n2. **Wire up tokens** for the build system:\n - Plain CSS / HTML → `<link rel=\"stylesheet\" href=\"<path>/tokens/strata.css\">`\n and `class=\"strata\"` on a root element. Set\n `data-strata-palette` / `data-strata-theme` on `<html>` if not using the\n defaults.\n - SCSS → `@use \"<path>/tokens/strata.scss\" as strata;` then\n `strata.strata-role(\"primary\")`.\n - Tailwind → add `tokens/tailwind.preset.js` to `presets` **and** import\n `tokens/strata.css`; the preset holds `var()` references and the stylesheet\n does the switching.\n - Other → consume\n [../skills/dude-pack-strata-visual/tokens/strata-tokens.json](../skills/dude-pack-strata-visual/tokens/strata-tokens.json).\n\n3. **Typography** — `--strata-font-sans` on the root, `--strata-font-mono` for\n code and metadata, the `--strata-fs-*` / `--strata-lh-*` pairings, body\n ≥ 14px, at most two weights per surface.\n\n4. **Planes** — replace every `box-shadow` with a plane change plus\n `var(--strata-rule-hairline)`. Nothing floats, blurs, or glows.\n\n5. **Shape** — every interactive element and panel to `--strata-radius-md` (4px);\n nothing above 8px.\n\n6. **Colour** — role tokens only, never a palette colour name. One accent per\n surface. Text on a light plane uses a `-deep` or `-text` form, never a vivid\n slot.\n\n7. **Fields** — every meaning-bearing fill and every tint badge gets a 1px\n border.\n\n8. **Layout** — `--strata-space-*` everywhere.\n\n9. **Motion** — `--strata-dur-*` and `--strata-ease-*`, plus a\n `prefers-reduced-motion` block for anything animated.\n\n10. **Charts (if any)** — `--strata-series-1..7` in order, a non-colour encoding\n for any series beyond two, and `--strata-rule` on every mark.\n\n11. **Run the self-check below** and fix every Fail and Warn before handing back.\n\n## Final self-check\n\nProduce a markdown table of **Pass / Warn / Fail** per item, with file:line\nreferences.\n\n### Colour and palette portability\n\n- [ ] No component references a palette-specific colour name, or a raw hex,\n `rgb()`, `rgba()`, or `hsl()` literal that a `--strata-*` token expresses.\n- [ ] Role tokens are used in preference to `series-N` slots wherever a role\n exists.\n- [ ] The surface renders correctly under **all four** palette/theme\n combinations.\n- [ ] Vivid slots are never used as text on a light plane — use `-deep` or the\n `-text` role token.\n- [ ] White text sits only on a `-deep` form, or on a vivid slot measured\n ≥ 4.5:1. Amber fills use `--strata-on-warning`.\n- [ ] Destructive fill is `--strata-danger-text`, not the vivid danger slot.\n- [ ] Every meaning-bearing fill has a 1px border; every tint badge is bordered\n with its `-tint-ink`.\n- [ ] `--strata-hair` is not used as a control boundary, plane edge, or field\n border.\n- [ ] `--strata-muted` is not used on `--strata-code-bg`; use\n `--strata-code-muted`.\n- [ ] Body text ≥ 4.5:1; large text and non-text UI ≥ 3:1.\n- [ ] State is never communicated by colour alone.\n\n### Planes and shape\n\n- [ ] **Zero** `box-shadow` declarations. Depth is plane + 1px rule.\n- [ ] Every plane change is accompanied by a rule — the light plane scale spans\n about 1.15:1, so tone alone is not perceivable.\n- [ ] No `backdrop-filter`, blur, glow, or gradient mesh.\n- [ ] Interactive elements at 4px; nothing above 8px. No pills.\n- [ ] No warm-cream ground, no oversized editorial headline, no monospace\n manifesto banner.\n\n### Typography\n\n- [ ] Font stacks reference `--strata-font-sans` / `--strata-font-mono`.\n- [ ] No `@font-face`, no remote font import, no font files added.\n- [ ] Long-form prose constrained to `--strata-reading-measure`; tables, code,\n and figures may use `--strata-reading-wide`.\n- [ ] Headings 600 with line-height ≤ 1.3. Body ≥ 14px. At most two weights per\n surface.\n- [ ] Uppercase appears **only** on `.strata-meta` metadata, never on headings.\n\n### Motion and focus\n\n- [ ] Durations and easings come from tokens; no CSS easing keyword is used as a\n token value.\n- [ ] Every animated property is covered by `prefers-reduced-motion: reduce`.\n- [ ] Focus is `outline` + `outline-offset` ≥ 2px on every interactive element,\n never painted with `box-shadow`.\n\n### Data visualization\n\n- [ ] Series use `--strata-series-1..7` in the documented order.\n- [ ] Any series beyond two carries a non-colour encoding (labels, markers,\n patterns).\n- [ ] The categorical ramp is not used for sequential or diverging data.\n- [ ] Every mark is stroked with `--strata-rule`.\n- [ ] Axis and legend labels use `.strata-meta`, not the series colour.\n\n### Iconography and misc\n\n- [ ] One icon family per surface; icons inherit `currentColor`.\n- [ ] No emoji as functional UI iconography.\n- [ ] No logo, wordmark, or product mark introduced.\n\n### Output format\n\n```\n| Area | Item | Status | Location | Notes |\n|---|---|---|---|---|\n| Colour | Hardcoded #1348E8 in primary button | Fail | src/Header.tsx:42 | Use var(--strata-primary) |\n| Colour | Vivid series-4 used as text | Fail | src/Chart.tsx:88 | Use --strata-series-4-deep (vivid is under 2:1) |\n| Planes | box-shadow on card | Fail | styles.css:120 | Plane change + var(--strata-rule-hairline) |\n| Shape | border-radius: 16px on card | Warn | styles.css:124 | Ceiling is 8px; default is 4px |\n```\n\nThen offer the user **\"Want me to fix the Fail and Warn items?\"** and proceed if\nconfirmed.\n\n## Also run the validator\n\nThe self-check covers the surface you edited. The pack's own validator covers the\ntoken files:\n\n```bash\nbash <path>/skills/dude-pack-strata-visual/scripts/strata-check.sh\n# or\npwsh <path>/skills/dude-pack-strata-visual/scripts/strata-check.ps1\n```\n\nIt asserts cross-palette id parity, that palette blocks carry colour only, the\nno-shadow rule, the radius ceiling, keyword easings, reduced motion, and\nlocal-only fonts.\n\n## Output\n\nReturn:\n\n- The edited file(s).\n- A short bulleted list of what changed (tokens wired, planes, shape, colour\n roles, spacing, motion).\n- The self-check table.", "variables": [], "notes": "Apply the Strata visual system to the current file/selection, then run the built-in self-check. Mode: agent.", "metadata": { "source": { "provider": "github-prompts", "repository": "https://github.com/E-G-C/dude", "path": ".github/prompts/dude-pack-strata-apply-visual-system.prompt.md", "ref": "c10c7810b5cb64cb348d5aec982eb6efedd92a23", "url": "https://github.com/E-G-C/dude/blob/c10c7810b5cb64cb348d5aec982eb6efedd92a23/.github/prompts/dude-pack-strata-apply-visual-system.prompt.md", "key": "E-G-C/dude/.github/prompts/dude-pack-strata-apply-visual-system.prompt.md" } } }

dude-pack-strata-apply-visual-system

About