llms.txt git:20261020.a18cda0A

Immutable. This exact content never changes and is served at /api/v1/blob/6fb6b4bfd3359236.

# sprezzature

> Nine Claude / OpenCode skills for vanilla JavaScript + Tailwind CSS + Roboto frontends. Released under the BSD-3-Clause license (same as scikit-learn). For solo developers and small teams shipping internal tools without a designer.

This repository is a **bundle of nine [Anthropic skills](https://resources.anthropic.com/hubfs/The-Complete-Guide-to-Building-Skill-for-Claude.pdf)**. Use them from **Claude Code** (`cp -r sprezzature-* ~/.claude/skills/`) or from **OpenCode** (`cp -r sprezzature-* ~/.opencode/skills/`). Each skill auto-triggers on its frontmatter description.

## Skill entry points

- [sprezzature-ui/SKILL.md](sprezzature-ui/SKILL.md): UI generation core — components, pages, dataviz, design system, dark mode. Always install.
- [sprezzature-cli-gui/SKILL.md](sprezzature-cli-gui/SKILL.md): Wrap an existing CLI in a single-page vanilla-JS + Tailwind GUI. Flagship.
- [sprezzature-publish/SKILL.md](sprezzature-publish/SKILL.md): Markdown → website, meta tags, favicons, site indexes, plain language.
- [sprezzature-accessibility/SKILL.md](sprezzature-accessibility/SKILL.md): a11y lint, contrast audit, CVD simulation, alt text, captions.
- [sprezzature-colors/SKILL.md](sprezzature-colors/SKILL.md): WCAG contrast audit with OKLCH fix suggestions, colour-vision-deficiency simulation, the curated palette and its Tailwind emitter.
- [sprezzature-audio/SKILL.md](sprezzature-audio/SKILL.md): Local-AI speech both ways — captions and diarisation out of recorded speech, narration out of written text.
- [sprezzature-ux-laws/SKILL.md](sprezzature-ux-laws/SKILL.md): Apply the canonical Laws of UX (Jon YABLONSKI, lawsofux.com) — 30-law reference for make-time decisions plus a stdlib-only static auditor (Hick, Miller, Fitts, Jakob, Tesler, Aesthetic-Usability, Selective Attention, Doherty, Choice Overload).
- [sprezzature-figures/SKILL.md](sprezzature-figures/SKILL.md): 167 hand-authored SVG chart kinds, explainability and causal DAGs, and the Ralph Eyeball Loop that reads a rendered visual back.
- [sprezzature-maps/SKILL.md](sprezzature-maps/SKILL.md): Real geography on a true projection — choropleth, situation plate, accumulation map. Data attached to places, not to categories.
- [TRIGGERS.md](TRIGGERS.md): Generated reference — every guaranteed trigger phrase mapped to the skill it activates and that skill's status. Source of truth is each SKILL.md description; regenerated by `scripts/build_triggers.py`. A pre-commit drift hook (`sprezzature-triggers-sync`) refuses any commit where the projection has drifted.

## Repo philosophy — make / audit duality

Every shipped skill carries a "Two modes — make and audit" section in its SKILL.md. The repo's README.md and LISEZMOI.md hold a full per-skill matrix; the tests in `tests/test_two_modes_discipline.py` enforce it on every commit.

## sprezzature-ui core references

- [color-psychology.md](sprezzature-ui/references/color-psychology.md): Curated palettes (Choice / Emotion / Concept / Psychology) and the semantic-color mapping.
- [stack-vanilla-js.md](sprezzature-ui/references/stack-vanilla-js.md): Vanilla JS patterns — ES modules, native `<dialog>`, events, state, i18n.
- [stack-tailwind.md](sprezzature-ui/references/stack-tailwind.md): Tailwind config, base CSS, plugins, dark-mode strategy, and the three-Roboto rule.
- [checklist.md](sprezzature-ui/references/checklist.md): Pre-ship quality gate.

## sprezzature-ui charts and dataviz

- [dataviz-chart-selection.md](sprezzature-ui/references/dataviz-chart-selection.md): Decision tree for picking the right chart shape.
- [dataviz-color-palettes.md](sprezzature-ui/references/dataviz-color-palettes.md): Sequential / divergent / categorical palettes.
- [dataviz-maps.md](sprezzature-ui/references/dataviz-maps.md): Map-specific ergonomics.
- [dashboard-ergonomics.md](sprezzature-ui/references/dashboard-ergonomics.md): Tile-by-tile dashboard layout.

## sprezzature-ui design system

- [ui-guidelines/INDEX.md](sprezzature-ui/references/ui-guidelines/INDEX.md): Full map (foundations, patterns, components, inputs, platforms). Apple HIG-derived.
- [material-design.md](sprezzature-ui/references/material-design.md): Material 3 distilled with Material → skill-token mapping.
- [anti-patterns.md](sprezzature-ui/references/anti-patterns.md): Visual and copy tells to refuse.
- [ux-psychology.md](sprezzature-ui/references/ux-psychology.md): Applied cognitive principles.
- [ergonomics-criteria.md](sprezzature-ui/references/ergonomics-criteria.md): Eight ergonomic criteria for UX audit.

## sprezzature-publish — HTML, meta, i18n, indexes

- [meta-tags.md](sprezzature-publish/references/meta-tags.md): `<meta>` tags — W3C / WHATWG + Open Graph + Twitter Cards + Schema.org JSON-LD.
- [site-indexes.md](sprezzature-publish/references/site-indexes.md): robots.txt + sitemap.xml + llms.txt + Atom/RSS + humans.txt.
- [plain-language.md](sprezzature-publish/references/plain-language.md): Copy rewriting at a target grade.
- [i18n.md](sprezzature-publish/references/i18n.md): Multilingual frontend — URL strategy, `Intl.*`, plurals, RTL. Language pair configurable.

## sprezzature-accessibility — accessibility audits and content

- [lint-a11y.md](sprezzature-accessibility/references/lint-a11y.md): Twenty-rule static a11y lint. Honest framing — pre-commit gate, not a replacement for axe-core.
- [contrast-audit.md](sprezzature-colors/references/contrast-audit.md): WCAG ratio audit + OKLCH-neighbour fix hint. Contrast is colour, so it sits with the palette.
- [cvd-simulation.md](sprezzature-colors/references/cvd-simulation.md): Protanopia / deuteranopia / tritanopia rendering.
- [accessibility-levels.md](sprezzature-colors/references/accessibility-levels.md): The six levels, and what each one refuses.
- [captions-ai.md](sprezzature-audio/references/captions-ai.md): WebVTT / SRT captions via a local whisper.cpp build.
- [diarization.md](sprezzature-audio/references/diarization.md): Who spoke when (NeMo Sortformer), and who is who (TitaNet).
- [audio-narration.md](sprezzature-publish/references/audio-narration.md): Narration of a page, engine by engine. Alt text has no reference file in the bundle; its contract is the SKILL.md, and the long form lives in the `sprezzature-accessibility` repository.

## sprezzature-ux-laws — Laws of UX (make + audit)

- [laws-of-ux.md](sprezzature-ux-laws/references/laws-of-ux.md): The canonical Yablonski set (30 laws) restated as trigger → action → Tailwind hook. Make-time playbook + audit-time refusal list. Sources verified by recursive crawl of lawsofux.com plus NN/g (Aesthetic-Usability) and the Wikipedia Robustness Principle critique (Postel's Law).

## Commands

Each brick is a pip package, and these are the commands it installs. The
section used to list file paths inside each skill folder, which is where this
code lived before every brick moved to its own repository and its own release
line — nineteen of the links in this file pointed at files the bundle
no longer contains. A command is the part that stays put.

- `sprezzature` — the driver. One `--help` over the six wired skills; every
  sub-command shells out to one of the commands below.
- `python scripts/validate_content.py` — pre-ship quality gate, stdlib only.
  Checked out, not installed: it validates a skill folder *in this
  repository*, so there is nothing to ship.
- `sprezzature-publish-icons` — favicon / PWA / Apple-touch / maskable icon
  set + manifest + head snippet.
- `sprezzature-publish-meta` — drafts page meta tags from a goal or an HTML
  page.
- `sprezzature-publish-indexes` — robots, sitemap, llms.txt, feed, humans.
- `sprezzature-publish-plain` — rewrites UI copy at a target reading grade.
- `sprezzature-publish-lint` / `-html` — Markdown lint, and Markdown → HTML
  with local Mermaid and KaTeX.
- `sprezzature-publish-narrate` / `-readalong` — MP3 narration of a page, and
  the WebVTT that highlights it as it plays.
- `sprezzature-accessibility-lint` — twenty-rule static a11y lint.
- `make-alt` / `sprezzature-accessibility-alt` — W3C alt text via local Ollama
  vision (`qwen3-vl:8b`), argparse and Click front doors on one table.
- `sprezzature-accessibility-install-alt` — installs Ollama, pulls the model.
- `sprezzature-colors-contrast` — WCAG contrast audit + OKLCH fix suggester.
- `sprezzature-colors-cvd` — CVD image transforms.
- `sprezzature-colors-levels` — the six accessibility levels every figure
  generator in the suite accepts.
- `sprezzature-colors-palette-to-tailwind` — renders the curated palette CSV
  as a Tailwind `theme.extend.colors` block (default) or a full
  `tailwind.config.js` (`--emit config`). `--with-dark` derives OKLCH-L-bumped
  dark variants. Single source of truth: the CSV.
- `sprezzature-audio-captions` / `-install` — WebVTT / SRT captions via a
  local whisper.cpp build, and the installer for it.
- `sprezzature-audio-narrate-kokoro` / `-voice` — narration, and the voice
  comparison that picks one.
- `sprezzature-ux-laws-audit` — static auditor for the canonical Laws of UX.
  Stdlib only; HTML-aware findings via JSON or stdout; exit codes for
  pre-commit and CI; `--only` / `--ignore` / `--strict`.
- `make-figure <kind>` / `sprezzature-figures` — any of the 167 chart kinds.
- `make-map <kind>` / `sprezzature-maps` — choropleth, situation plate,
  accumulation map.
- `sprezzature-cli-gui` — wrap a CLI in a single-page GUI.
- `sprezzature-ui-i18n-audit` / `-i18n-make` — i18n audit, and the
  `locales/i18n.yaml` scaffold with its JS loader.
- `python -m sprezzature_figures_scripts.ralph_eyeball_loop` — the Ralph
  Eyeball Loop. Repo-internal by design, so it has no registered command.

Every brick also installs a `*-mcp` server and an HTTP API; see each
SKILL.md.

## Assets

- [sprezzature-ui/assets/starter-page.html](sprezzature-ui/assets/starter-page.html): Single-file page bootstrap (three Roboto + Tailwind + tokens).
- [sprezzature-ui/assets/components/](sprezzature-ui/assets/components/): Copy-paste HTML snippets + hand-authored SVG charts.
- [sprezzature-ui/assets/snippets/](sprezzature-ui/assets/snippets/): Law-keyed snippet catalogue — one file per mechanically-implementable Law of UX.
- [sprezzature-ui/assets/fonts/](sprezzature-ui/assets/fonts/): The three Roboto — `roboto`, `roboto-serif`, `roboto-mono` — WOFF2 + `OFL.txt` + `fonts.css`. Montserrat stood here until the three-Roboto rule replaced it.
- [sprezzature-cli-gui/assets/examples/cli-gui-demo/](sprezzature-cli-gui/assets/examples/cli-gui-demo/): Runnable CLI → GUI worked example.

## Optional

- [README.md](README.md): Human-facing English README with the "Inputs → outputs" table and the audience definition.
- [LISEZMOI.md](LISEZMOI.md): Human-facing French README, kept at parity with README.md.
- [LANDSCAPE.md](LANDSCAPE.md): Comparison matrices vs alternatives.
- [CHANGELOG.md](CHANGELOG.md): Release notes, back to the four-skill split at 0.2.0.
- [CONTRIBUTING.md](CONTRIBUTING.md): How to propose changes.
- [LICENSE.md](LICENSE.md): BSD-3-Clause + Roboto OFL carve-out.