Skip to content

sprezzature-ui

user interface (UI) generation

Vanilla JavaScript (JS) + Tailwind UI: components, pages, forms, dialogs, dashboards, for teams shipping internal tools without a designer.

SKILL.md (the agent spec) ⭐ on GitHub

Makes

  • Semantic HyperText Markup Language (HTML) + Tailwind: forms, modals, nav, dashboards, data tables, settings, empty states, skeletons
  • Dark-mode peers, focus rings, reduced-motion guards on by default
  • The three-Roboto type rule (sans + serif + mono), honoring any font you name
  • i18n extracted to a single YAML configuration format shared by graphical user interface (GUI) and prompts — a model prompt is a translatable string, which almost nobody treats as one

Audits

  • Audit existing UI against the stack + ergonomics rules
  • Audit i18n coverage and surface untranslated strings: translations embedded in JavaScript and HTML, prompts inlined in Python
  • The fix writes each string into the catalogue and stops there. It will not rewrite your call site — only you know whether that line wants a plural or a placeholder — so it prints the line to paste, and says which ones it could not parse with certainty

Say one of these

The skill triggers itself on phrasing like this, no command to memorize.

build a UI create a component make a form / modal / nav scaffold a landing dashboard / data table dark mode toggle responsive layout audit this UI i18n to YAML

Reference library

The knowledge the skill draws on: read them straight from the repo.

Tailwind stack Vanilla JS Anti-patterns Ship checklist UX psychology Ergonomics Dashboards Material Chart selection Dataviz palettes Dataviz maps Charts in SVG Color psychology Examples

Frequently asked questions

How do I install sprezzature-ui?

Run pip install sprezzature-ui (Python 3.10 or newer): one install brings the i18n audit, the catalogue tools, the sprezzature-ui command, the HTTP API and the MCP server, with no extras to choose. The interface-writing half is the skill: pip install sprezzature then sprezzature-skills --install, or sprezzature-skills --install --agent opencode for OpenCode.

What kind of code does sprezzature-ui produce?

sprezzature-ui guides an agent to write semantic HTML, Tailwind utility classes and plain ES modules, with no React, Vue or other framework runtime. Dark-mode variants, visible focus rings and reduced-motion guards are on by default, and the type follows the three-Roboto rule: Roboto, Roboto Serif and Roboto Mono, self-hosted, unless you name another typeface.

Can I use sprezzature-ui without Claude Code?

Partly: sprezzature-ui's i18n tools run on their own as a Python library, a command line, an HTTP API with a Docker image and an MCP server, sprezzature-ui-mcp. Writing the interface itself is the model's job, guided by the skill and the prose in its references/ folder, so that half needs an agent such as Claude Code or OpenCode.

What does the sprezzature-ui audit check, and can it run in CI?

sprezzature-ui's audit, sprezzature-ui-i18n-audit, flags translation tables embedded in JavaScript or HTML (rule I18N001) and LLM prompts inlined in Python as constants named like PROMPT or INSTRUCTION (rule I18N002). It exits 1 on any finding, so it can fail a CI job or run as the pre-commit hook the repository declares; it does not judge whether a translation is good.

How does sprezzature-ui handle translations in YAML?

sprezzature-ui keeps every translatable string, interface labels and model prompts alike, in one catalogue, locales/i18n.yaml. sprezzature-ui-i18n-make scaffolds it, compiles it to locales/i18n.json and writes two loaders, locales/i18n.js for the browser and locales/i18n_prompts.py for Python; sprezzature-ui-i18n-audit --fix moves strings it finds into the catalogue and prints the call to paste, without rewriting your code.

Does sprezzature-ui send my code to a cloud service?

No: sprezzature-ui's audit and catalogue tools read your files locally, with no network and no model, so Ollama is not needed; the audit imports only the Python standard library. The interface code itself is written by your agent, which follows its own provider's data policy.

How is sprezzature-ui different from shadcn/ui, v0 or Bootstrap?

shadcn/ui hands you React components and Bootstrap ships a broad component library, while sprezzature-ui refuses any framework runtime and offers written rules plus a handful of components to copy. v0 builds an application from a prompt inside a hosted account; sprezzature-ui works with the agent you already run and checks the result with deterministic audits.

Is sprezzature-ui free?

Yes. sprezzature-ui is open source under the BSD 3-Clause licence, with no account, API key or paid tier, and its source is on GitHub.