What is ugrc-official-utah-chrome-migration?

A migration guide for replacing an app's existing top and bottom navigation with the official Utah Design System header and footer. It covers the NPM/Vite package, configuration, stable render targets, and a waffle-menu action for existing links.

Use it when updating an application to the Utah header/footer package, configuring its title and links, moving top links into the header menu, and setting the footer's separator and viewport behaviour.

It helps preserve the application's map interface while aligning its surrounding navigation with Utah's official design components and required scrolling behaviour.

ugrc-official-utah-chrome-migration — Skill for Claude Code and Codex

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent

npx skills add agrc/agent-skills --skill ugrc-official-utah-chrome-migration

Clone the repo

git clone --depth 1 https://github.com/agrc/agent-skills

Made for: Claude Code, Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/skills/agrc/agent-skills/ugrc-official-utah-chrome-migration/github.svg)](https://agentmods.dev/skills/agrc/agent-skills/ugrc-official-utah-chrome-migration)

Your own site

<a href="https://agentmods.dev/skills/agrc/agent-skills/ugrc-official-utah-chrome-migration"><img src="https://agentmods.dev/badge/skills/agrc/agent-skills/ugrc-official-utah-chrome-migration/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

Your own site · 80×15

<a href="https://agentmods.dev/skills/agrc/agent-skills/ugrc-official-utah-chrome-migration"><img src="https://agentmods.dev/badge/skills/agrc/agent-skills/ugrc-official-utah-chrome-migration.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 40 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 718 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5.1	$0.00040	$0.00718
Opus 5	$0.00020	$0.00359
Sonnet 5	$0.00008	$0.00144
Haiku 4.5	$0.00004	$0.00072

Measured 2d ago against content hash 4c7af74c47c0, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-12, from the pricing page.

Security

Grade A, and why

ugrc-official-utah-chrome-migration scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 2d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/ugrc-official-utah-chrome-migration/SKILL.md · 62 lines

What it actually says

Replace app chrome with the official Utah Design System header/footer while preserving existing map UI behavior.

Requirements:

Use @utahdts/utah-design-system-header (NPM/Vite integration), not CDN script tags.
Import @utahdts/utah-design-system-header/css once at app startup.
Add declare module '@utahdts/utah-design-system-header/css'; to an existing generic type file to satisfy TypeScript.
Configure chrome through setUtahHeaderSettings() in a dedicated adapter component (for example UtahChrome).
Render stable DOM targets for both header and footer via domLocationTarget.cssSelector.
Footer settings must explicitly disable the separator line:

showHorizontalRule: false

Example header settings:

applicationType: 'custom application'
title: 'Project Name'
titleUrl: '/'
skipLinkUrl: '#main-content'
showTitle: true
size: 'MEDIUM'
mainMenu: false
utahId: false
notifications: false
onSearch: false

Move any existing top links into a single header action item popup menu and use the waffle icon trigger:

Icon HTML: <span class="utds-icon-before-waffle" aria-hidden="true" />

Keep SocialMedia unchanged and in its current location if it exists. It is explicitly out of scope.
Preserve the existing branding and logo via official header logo setting if possible. Prefer using a separate file in the public directory rather than embedding a large inline SVG.
Replace old UGRC Header and Footer component usage with the new official chrome adapter.

Possible layout fixes. If the existing app is a full-screen map, the new header/footer may push the map content and cause overflow/scroll issues. Ensure the following layout requirements are met:

Header plus main content must fill exactly one viewport.
Footer must be below that viewport and only appear when the user scrolls.
Implement this by rendering a top wrapper with h-screen for header+main, and rendering footer target after that wrapper.
Ensure map area remains usable with main as a flex child (min-h-0/flex-1 pattern) and no footer overlap.

Lessons learned / pitfalls to avoid:

If logo is omitted, no agency mark appears in the official header.
Keeping logo as a giant inline SVG string works but is harder to maintain; use a standalone public asset.
Small SVGs imported from src may be inlined by Vite; using public/logo.svg guarantees a separate served file.
Putting footer in the same min-h-screen flex column as header/main can make it visible in the initial viewport; keep footer outside the viewport-height wrapper.

Validation checklist:

Manual verify in dev server:

Official header renders with the app's original logo and title
Waffle action menu contains all links
Footer is positioned correctly and only appears after scrolling
Map area remains usable and is not overlapped by the footer

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

2d ago Changed · -4 lines 4c7af74c47c0
12d ago First seen · 66 lines · 40 tokens per session scan A 20d1d1079aba

Subscribe to this mod's changes

ugrc-official-utah-chrome-migration is a skill published in the GitHub repository agrc/agent-skills (2 stars, last pushed 2d ago), licensed MIT. It adds 40 tokens to every session and 718 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

Design and UX Frontend ai government-app skills terraform-managed

playground

Creates interactive HTML playgrounds — self-contained single-file explorers that let users configure something visually through controls, see a live preview, and copy out a prompt. Use when the user asks to make a playground, explorer, or interactive tool for a topic.

anthropics/claude-plugins-official · 53 tokens

frontend-design

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

anthropics/claude-plugins-official · 40 tokens

fixing-accessibility

Audit and fix HTML accessibility issues including ARIA labels, keyboard navigation, focus management, color contrast, and form errors. Use when adding interactive controls, forms, dialogs, or reviewing WCAG compliance.

ibelick/ui-skills · 45 tokens

baseline-ui

Quickly deslop UI code by fixing spacing, hierarchy, typography, and small layout issues. Use when the interface needs a fast cleanup or polish pass.

ibelick/ui-skills · 34 tokens

generative-ui

Design system and guidelines for Claude's built-in generative UI — the showwidget tool that renders interactive HTML/SVG widgets inline in claude.ai conversations. This skill provides the complete Anthropic "Imagine" design system so Claude produces high-quality widgets without needing to call readme first. Use this…

himself65/finance-skills · 205 tokens

accessibility

Audit and improve web accessibility following WCAG 2.2 guidelines. Use when asked to "improve accessibility", "a11y audit", "WCAG compliance", "screen reader support", "keyboard navigation", or "make accessible".

addyosmani/web-quality-skills · 51 tokens