uofm-style-guide — Claude Code Plugin
A Claude Code plugin that applies University of Michigan brand standards and WCAG 2.1 AA accessibility requirements to HTML and HTML-like templates.
Installing the plugin
Add this repo as a marketplace, then install the plugin from it:
/plugin marketplace add umich-ai-resources/uofmstyleguide
/plugin install uofm-style-guide@uofmstyleguide
Run /reload-plugins after the intial install to activate the skills. The three skills are namespaced as
/uofm-style-guide:apply/uofm-style-guide:audit/uofm-style-guide:bootstrap
Skills
| Skill | Scenario |
|---|
bootstrap | Make Claude aware of U-M brand rules for all future HTML work. Only CLAUDE.md is modified; no HTML files are touched. |
apply | Bring an existing HTML file into compliance |
audit | Audit a file and get a report without making any changes |
Bootstrap
Injects a condensed U-M brand guidelines summary into the project's CLAUDE.md. Once in place, Claude will apply brand standards to all HTML work in the project going forward — no HTML files are created or modified by this skill; it only writes to CLAUDE.md.
/uofm-style-guide:bootstrap
Run this once if you want claude to have passive awareness of style guide rules. Re-run it whenever the plugin is updated — it safely replaces only its own block in CLAUDE.md, leaving everything else untouched. The injected block includes the plugin version and sync date so it's obvious when it's stale.
The scope of bootstrap is passive style guidance only — colors, typography, layout, buttons, and accessibility rules. It will not copy asset files (logo, favicon) into your project; use apply for that.
Apply
Rewrites the HTML file in scope to conform to U-M brand standards. Does not change content or functionality — only styling and structure.
[!WARNING]
This skill modifies files in place and cannot undo its changes. Make sure your files are committed to source control or otherwise backed up before running it.
/uofm-style-guide:apply
/uofm-style-guide:apply index.html
or ask Claude: "apply the uofm style guide to index.html"
If no file is specified and none is clear from context, Claude will ask before acting. After saving, Claude emits a Change Summary listing the 3–5 most significant changes with category tags ([Colors], [Typography], [Accessibility], etc.).
Logo assets — when the apply skill inserts a logo, it copies the file into your project's static asset directory (assets/, static/, images/, public/, or similar) and references it from there. If it cannot determine where static assets live, it will ask before copying.
Audit
Audits the HTML file and writes a self-contained HTML report — named audit-<filename>-<YYYY-MM-DD-HH-MM>.html — alongside the source file. The audited file is not modified. Multiple reviews of the same file on the same day produce separate timestamped reports.
/uofm-style-guide:audit
/uofm-style-guide:audit index.html
or ask Claude: "audit no-skills.html against the uofm style guide"
If no file is specified and none is clear from context, Claude will ask before acting.
The report includes:
- A summary table with per-category issue counts and red/amber/green badges
- Findings — one entry per issue with severity (
CRITICAL, WARNING, INFO), location, description, and recommendation
- A Verdict callout summarizing overall compliance
The report itself follows U-M brand standards (Michigan Blue header, Maize accents, Atkinson Hyperlegible font, inlined U-M logo).
Brand standards quick reference
| Element | Spec |
|---|
| Primary blue | #00274C — use for headers, buttons, H1 |
| Primary maize | #FFCB05 — use on blue only; fails WCAG AA on white |
| Body font | Atkinson Hyperlegible (Google Fonts) — min 16px, line-height 1.5 |
| Max content width | 960–1200px centered |
| Primary button | Blue bg, white text, 4px radius |
| Secondary button | Maize bg, blue text |
| Logo | Always use an official file from assets/; min 75px height; never recreate |
| Header | Blue bg, white text, logo top-left (use dark-bg withoutline variant) |
Full standards: skills/apply/SKILL.md · brand.umich.edu · PDF
Demo pages
The screenshots below show the same fictional "School of Claude" page at each stage.
