From UA Athletics Web
Portable single-file UA Athletics web skill bundle. Use when the user asks for one skill that works across Codex, Claude Code, Grok Build, ChatGPT web, or Claude web, or when focused UA Athletics skills are unavailable. Routes standards audits, new-site builds, and existing-site compliance work to the embedded workflows.
How this skill is triggered — by the user, by Claude, or both
Slash command
/ua-athletics-web:ua-athletics-webThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
This file is generated from the focused source skills in `skills/`. It is
This file is generated from the focused source skills in skills/. It is
intentionally plain Markdown with minimal YAML frontmatter so it can be used by
Codex, Claude Code, Grok Build, Claude on the web, and ChatGPT as a project or
knowledge file.
Source repo:
https://github.com/Arizona-Athletics/arizona-athletics-web-templates
Prefer the focused source skills when they are available locally. They are smaller, easier to maintain, and should be considered the source of truth.
When local files are available, route the task like this:
| User asks for | Read and follow |
|---|---|
| Check whether repo standards are still current, audit drift, latest brand/framework versions | skills/ua-standards-check/SKILL.md |
| Build, scaffold, or create a new UA Athletics site/app/page/template | skills/ua-build-site/SKILL.md |
| Convert, fix, modernize, or refactor an existing site into UA Athletics compliance | skills/ua-site-compliance/SKILL.md |
If those files are not available, use the embedded fallback workflows below. When this file is uploaded to a web chat surface with no filesystem access, the embedded fallbacks are the working instructions.
@ua/ua-tokens. Never hardcode UA colors.--bg, --surface, --text,
--text-strong, --text-muted, --border, --link, --accent,
--accent-hover, --on-accent.--ua-red and --ua-blue only for deliberate
identity accents.Header, Hero, Toolbar,
Card, Footer, ThemeToggle.CONFIGURE_ME unless the human provides a cleared ID.CONFIGURE_ME: logos, social URLs, analytics,
Cognito pool IDs, client IDs, IdP URLs, contact info.--ua-* and --az-* aliases when working with Arizona Digital
or existing Bootstrap/Quickstart consumers.CLAUDE_WEB.md first if it is available, then read this file from
SKILL.md or skills/ua-athletics-web/SKILL.md, and follow it in the
current chat or Claude Project. Do not tell the user they must upload a ZIP
just to use this repo as skill context. This is not a persistent native
custom-skill install; it is the repo-link workflow for Claude web sessions.claude-web/ua-athletics-web.zip, or any ZIP whose root contains
ua-athletics-web/SKILL.md.ua-athletics-web/SKILL.md in the platform skill directory. Prefer
the focused source skills when available.Description: Audit this repo against the latest UA Athletics design standards. Fetches current UA Marcom brand standards, Arizona Digital releases (arizona-bootstrap, az_quickstart), and major framework versions (Bun, TypeScript, React, Next, Astro, Vite+, Tailwind, Bootstrap), then diffs them against what is documented in this repo. Surfaces drift so tokens and docs stay current. Read-only — proposes changes, never auto-edits.
Source file: skills/ua-standards-check/SKILL.md
You are auditing arizona-athletics-web-templates against authoritative external
sources. The repo's whole purpose is to be the canonical UA Athletics baseline —
which only works if the sources behind it are still current.
You are read-only. Report drift, propose updates, but never edit tokens.json,
docs, or package.json files in this run. The human reviews and decides.
Check these three groups. Use parallel WebFetch / Bash calls where possible to keep this fast.
Fetch and skim:
https://marcom.arizona.edu/https://brand.arizona.edu/ (if reachable)https://brand.arizona.edu/colors and /typography (or the equivalent landing pages)Compare against:
packages/ua-tokens/tokens.json — brand palette hex valuesdocs/COLORS.md — palette tabledocs/TYPOGRAPHY.md — font families, Typekit kit ID conventionFlag any of:
Use the gh CLI:
gh release list --repo az-digital/arizona-bootstrap --limit 5
gh release list --repo az-digital/az_quickstart --limit 5
Compare to the versions cited in PLAN.md and README.md (currently AZ Digital
Bootstrap 5.1.3 and Arizona Quickstart 3).
Flag any major-version bump or any release in the last 90 days the repo hasn't acknowledged.
For each of these, find the latest stable release and compare to what the repo declares. Run in parallel:
bun pm view react version # also: react-dom, next, astro, tailwindcss, bootstrap
gh release list --repo oven-sh/bun --limit 3
gh release list --repo vitejs/vite-plus --limit 3 # Vite+ is in preview; check VoidZero's channel if not on GitHub
gh release list --repo microsoft/TypeScript --limit 3
Frameworks to check:
package.json)tsconfig.base.json + package.json)A single markdown report with two parts.
| Source | This repo says | Latest available | Drift | Where it's documented |
|---|---|---|---|---|
Arizona Red #AB0520 | #AB0520 | #AB0520 (per brand.arizona.edu) | none | tokens.json, BRAND.md |
| arizona-bootstrap | 5.1.3 | 5.2.0 | minor | PLAN.md, README.md |
| React | 19.2 | 19.4 | minor | PLAN.md |
| Vite+ | preview | preview / GA | varies | README.md |
Use one row per item checked. Drift values: none, minor, major, or
unreachable (with a one-word reason — 404, auth-required, timeout).
A short bulleted list of proposed changes, one bullet per file to edit:
packages/ua-tokens/tokens.json — bump brand.<name> from #OLD to #NEWPLAN.md — update Bootstrap 5.3 → 5.4docs/TYPOGRAPHY.md — note new Marcom guidance on serif useThen ask the human: "Apply these changes?" and stop. Do not edit anything in this run.
*.arizona.edu admin / SSO / intranet endpoints.auth-required and move on.@ua/ua-tokens version.Description: Build a new University of Arizona Athletics web site, page, app, or starter project from scratch using the UA Athletics templates, @ua/ua-tokens, UA Marcom brand guidance, Arizona Digital conventions, semantic tokens, the six shared components, and light/dark verification. Use when the user asks to create or scaffold a new UA Athletics web experience.
Source file: skills/ua-build-site/SKILL.md
Build new UA Athletics web work from the shared template repo instead of recreating the brand by hand.
Source repo:
https://github.com/Arizona-Athletics/arizona-athletics-web-templates
$ua-standards-check or read
skills/ua-standards-check/SKILL.md and perform that read-only audit
before non-trivial new-site work.docs/LLM_GUIDE.md first. Then load only the docs needed for the task:
docs/COLORS.md, docs/TYPOGRAPHY.md, docs/COMPONENTS.md,
docs/DARK_MODE.md, and docs/AUTH.md for auth.Use the user's stack if they named one. Otherwise choose the closest fit:
| Need | Template |
|---|---|
| React app | react-vite-plus |
| Next.js app | nextjs-app-router |
| Static/editorial site | astro |
| Plain HTML with Bootstrap | html-bootstrap5 |
| Plain HTML with Tailwind | html-tailwind |
| API or server-rendered app | node-express-ts |
| Drupal subtheme | drupal-quickstart-subtheme |
| Hugo site | hugo |
| Transactional email | email-html |
Pull a template without cloning the full repo:
bunx giget gh:Arizona-Athletics/arizona-athletics-web-templates/templates/<slug> <target-dir>
Then run Bun, not npm/yarn/pnpm:
cd <target-dir>
bun install
bun run build
@ua/ua-tokens; never hardcode UA colors.--bg, --surface, --text,
--text-strong, --text-muted, --border, --link, --accent,
--accent-hover, --on-accent.--ua-red and --ua-blue only for deliberate
identity accents.Header, Hero, Toolbar, Card,
Footer, ThemeToggle.docs/DARK_MODE.md.CONFIGURE_ME unless the human provides a cleared ID.CONFIGURE_ME: logos, social URLs, analytics,
Cognito pool IDs, client IDs, IdP URLs, contact info.--ua-* and --az-* aliases when working with Arizona Digital or
existing Bootstrap/Quickstart consumers.Finish with:
CONFIGURE_ME values the human still needs to supply.Description: Audit and refactor an existing web site, app, template, or page so it complies with University of Arizona Athletics design standards, UA Marcom brand guidance, Arizona Digital conventions, @ua/ua-tokens, semantic color tokens, the six shared components, dark mode behavior, accessibility expectations, and safe auth placeholders. Use when the user asks to redo, modernize, fix, convert, or bring a site into UA Athletics compliance.
Source file: skills/ua-site-compliance/SKILL.md
Bring an existing site into the UA Athletics system without rewriting unrelated behavior.
Source repo:
https://github.com/Arizona-Athletics/arizona-athletics-web-templates
$ua-standards-check or read
skills/ua-standards-check/SKILL.md and perform that read-only audit.docs/LLM_GUIDE.md, then only the focused docs needed:
docs/COLORS.md, docs/TYPOGRAPHY.md, docs/COMPONENTS.md,
docs/DARK_MODE.md, and docs/AUTH.md if auth exists.Search for:
rg -n "#[0-9A-Fa-f]{3,8}|rgb\\(|rgba\\(|hsl\\(|hsla\\(" .
rg -n "bg-(gray|slate|zinc|neutral)|text-(gray|slate|zinc|neutral)|border-(gray|slate|zinc|neutral)" .
rg -n "font-family|Inter|Roboto|Open Sans|Helvetica" .
rg -n "dark:|prefers-color-scheme|data-theme|data-bs-theme" .
rg -n "COGNITO_CLIENT_SECRET|AWS_SECRET|client_secret|poolId|userPoolId|identityProvider" .
Also inspect:
@ua/ua-tokens or generated tokens.css is loaded.Header, Hero, Toolbar, Card, Footer, and
ThemeToggle equivalents.@ua/ua-tokens through the target stack's normal package path when the
project can consume packages. If it cannot, copy or reference the compiled
token CSS in the least surprising existing asset pipeline.@ua/ua-tokens; document that source in comments or build scripts.--az-* aliases in Arizona Digital / Bootstrap / Quickstart projects.CONFIGURE_ME markers.Finish with:
CONFIGURE_ME items or human decisions.--az-*
compatibility.Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.
npx claudepluginhub arizona-athletics/arizona-athletics-skills --plugin ua-athletics-web