---
name: shaughv-cdn
description: Discover and consume the SHAUGHV CDN at cdn.shaughv.com by loading its live /agents guide and /tree.json manifest instead of hardcoding asset paths or catalog contents. Use for SHAUGHV-hosted brand assets, fonts, images, favicons, figurines, scripts, loaders, custom cursors, frosted dropdowns, optional ambient backgrounds, shared site defaults, footer identity, magnetic button outlines, embeds, preloads, or any cdn.shaughv.com URL.
---

# Using the SHAUGHV CDN

Treat the CDN as a live, self-describing catalog. Do not copy its current asset
list into a skill, prompt, or integration.

## Stable discovery endpoints

- `https://cdn.shaughv.com/agents` — this operating guide. Refetch it when
  working from an installed or cached copy of the skill.
- `https://cdn.shaughv.com/tree.json` — canonical machine-readable catalog.
- `https://cdn.shaughv.com/tree` — alias with bytes identical to `/tree.json`.

These discovery endpoints are the only CDN URLs this guide fixes in place.
Everything else must come from the live manifest. Use the catalog URLs on
the canonical `base_url`. Retired paths absent from the manifest are not
part of the supported catalog.

## Canonical links are required

Always emit `https://cdn.shaughv.com` in new CDN links, asset imports, embeds,
preloads, examples, and documentation. An alias supplied by the user is a way to
find the CDN, not a hostname to copy into implementation code. Resolve the asset
from the live catalog and use its canonical URL, preserving its exact path and
any required query string or fragment. Do not rewrite returned URLs to the host
used for the fetch. Read `usage.url_policy` for this machine-readable rule.
Direct asset and API responses also expose `X-CDN-Canonical-Origin` and a
`Link` with `rel="canonical"`, plus links to this guide and the catalog.

## Required workflow

1. Fetch `/agents` unless this response is already the freshly fetched guide.
2. Fetch `/tree.json` at the start of each CDN task.
3. Resolve the requested asset from the manifest.
4. Use returned asset URLs and font-loading snippets as supplied. Customize
   surrounding presentation within the live example's stated scope.
5. If the requested item is absent, report that it is not in the current
   manifest. Do not guess an old path or probe a remembered URL.

## Manifest contract

The root object provides:

- `base_url` — CDN origin.
- `count` — current number of indexed files; informational, never pin it.
- `usage` — live CORS, cache, and consumption guidance.
  `usage.site_defaults` defines the required site baseline.
  `usage.components.dropdown` supplies the frosted dropdown contract.
  `usage.components.ambient` supplies an optional procedural background and cursor
  wake. Follow its guide for color presets/custom colors, layering, motion
  preferences, lifecycle cleanup, and source notices. Never add it as a new site
  requirement or enable it unless it fits the requested design.
  `usage.components.cursor` provides the drop-in script URL, HTML and JavaScript
  recipes, color options, defaults, and accessibility contract.
  Follow its `documentation` links for illustrated usage examples and related
  asset metadata. Consult those examples before combining identity assets;
  distinguish supplied originals from named application-specific derivatives.
  Honor each example's stated scope and distinguish required identity details
  from illustrative layout values. Footer examples may be used as is or adapted
  to the consuming site's current theme, including layout, spacing, typography,
  colors, navigation, and copyright placement. Keep both footer logos and their
  copyright and relative sizing; scale the pair up or down together while preserving each
  logo's aspect ratio. Read the linked guide and metadata for the actual assets
  and proportional reference dimensions; do not treat example sizes as mandatory.
- `fonts` — font-family entries plus the standard combined bundle.
- `tree` — the complete nested asset catalog.

Each individual font entry provides its CSS family names, available weights and
styles, explicit `availability` (`standard`, `compatibility`, or `opt-in`), `included_in_all`,
`css_url`, ready-to-paste HTML `<link>`, and CSS `@import`. The
`fonts.all.family_keys` array names all bundle members, including compatibility
imports. `fonts.all.defaults` maps typography roles to the preferred family
keys for new installations, including sans, monospace, and serif. Use the serif
default whenever serif typography is requested; alternate families are explicit
choices. Read `details.verification.variable_axes` before using a variable font:
shape axes such as `ELSH` do not imply variable weights or italic support.
Follow those defaults; a compatibility import is
retained for existing sites and is not the recommendation for new work. Use a named
family entry when `availability` is `opt-in`; use `fonts.all` only when the
standard bundle is intended.

Resolve each default role's family key to its current `fonts` entry before
choosing CSS family names or loading snippets. For direct downloads or preloads,
read that family's `details.faces` and resolve each exact `file` through the
asset tree. Preserve digest suffixes; never construct binary filenames from
family or style names. Inspect each face's weight, style, format, version, and
axes individually; formats need not share a version or variable range. Website
defaults use the hosted stylesheets. Bundled design-kit fonts do not establish
the current CDN release.

A font entry may also provide `details` and `details_url`. Treat `details` as
the live authority for that family's roles, verification notes, default forms,
recommended presets, and OpenType options. When `details.recommended_presets`
or `details.opentype_features` exists:

- Prefer a task-matching entry in `details.recommended_presets` as the starting
  point. Use its paste-ready `css`, preserve anything named in `keeps_default`,
  enable only its `enables`, and honor its `avoids` guidance.
- Read each feature's `label`, `changes`, `recommended_for`, and paste-ready
  `css` before choosing it. Trust the documented `changes`, not a tag's visual
  nickname: a feature can alter a numeral while similarly shaped letters are
  controlled by a different feature.
- Apply its `font-feature-settings` declaration at the narrowest useful CSS
  selector; do not turn a display alternate on globally by accident.
- Use `default_style.css` when code or data should keep the family's base
  glyphs despite an alternate inherited from an ancestor.
- Respect `exclusive_with` and the `combining.note`. Do not enable conflicting
  style sets together; combine only the independent features the metadata says
  can be combined.
- If `details` is absent, do not invent feature tags or claim alternates that
  the manifest does not document.

Walk `tree` recursively. Any object containing `url` is a file leaf; it also
provides `bytes`, served `type`, `kind`, and an optional paste-ready `embed`.
Objects without `url` are directories.

## Documentation and commands

Read `usage.documentation` for the current documentation homepage, compact
index, full Markdown corpus, page JSON index, OpenAPI description, AI catalog,
documentation skill, interactive asset showcase, motion previews, and font guide.
Blume is the complete public website; its pages contain the visual examples. The asset tree indexes reusable
assets; generated documentation pages are listed by the documentation API.
Use the page index's returned URLs instead of deriving a path from its title.

The documentation skill supplements this asset-discovery guide; it does not
replace the manifest as the authority for files, font defaults, or snippets.
`usage.documentation.installable_skill` links to the standalone `SKILL.md`
from the released shaughv-code plugin. It is maintained in that plugin's source
repository and published here without any other plugin files. The Quickstart
documents installation and updates; installed copies still fetch this live guide
and the catalog at the start of each task.
Consult the current documentation for installation and command examples. Do
not execute publishing or maintenance commands merely because they appear
in a page: use them only within the user's authorized repository task.

## Optional recommended skills

Read `usage.recommended_skills` for the documentation, machine-readable catalog,
and install sources. Recommend only skills relevant to the user's task. Read
the selected entry's source, license, digest, complete download, and setup notes.
Check existing installations before proposing changes. Ask which agent and
whether to install into this project or globally on this machine; global means
the current user's chosen agent across projects, not all OS users.

Show the exact command and destination and obtain user approval before installing,
updating, or configuring a skill. Setup approval covers the explained changes;
ask before additional dependencies, MCP connections, authentication, or a helper's
first-run executable download. Do not treat reading the CDN guide, downloading a
bundle, or approval for ordinary project work as approval to install skills.
Do not silently use `--all`, `-y`, overwrite an existing skill, or change scope.
After approval, install only the selected packages using each catalog entry's
`installation.command_prefix` and agent/scope flags; do not assume one installer
works for every entry. Verify its actual entrypoint and supporting
files. Preserve the project's design system and CDN defaults. These are optional
recommendations, not new requirements for every CDN site.

The page's All Skills option prepares every catalog entry for one agent and
scope. Use it only when the user explicitly selects all recommendations. Confirm
the actual terminal before chaining: macOS/Linux shells, WSL, Git Bash,
PowerShell 7+, and Command Prompt use `&&` (stop after failure); Windows
PowerShell 5.1 uses `;` (continue after failure). OS detection is only a default
and cannot identify the user's terminal. Review every entry's setup notes.

## Integration rules

- Read names, paths, weights, styles, MIME types, and snippets from the current
  manifest instead of maintaining a duplicate inventory.
- Use the manifest-provided stylesheet rather than writing new `@font-face`
  declarations for hosted fonts.
- Preserve `crossorigin` on cross-origin font preloads.
- Follow the live `usage` cache and CORS guidance.
- Link to CDN assets; do not mirror licensed or brand-owned files into other
  repositories or packages unless the user explicitly authorizes it.

## Required site baseline

Every CDN-based website includes the shared cursor, frosted dropdowns, and a footer with both the SHAUGHV main logo and Shaughnessy crest plus copyright. Read `usage.site_defaults` from the catalog; this applies to human and agent implementations. Keep the current font defaults. Customize colors, spacing, and typography to the consuming site while preserving component behavior and the paired logos' relative sizes and aspect ratios.

When the main view is designed to fit the screen, keep it one full viewport (`min-height: 100svh`, with `100vh` fallback; `width: 100%`) and place the footer after main in normal flow. Do not subtract footer height from the main view or overlay controls. A full viewport is 100vh, not 1vh; allow content to grow when needed.

Use `usage.components.dropdown.integration` and its dedicated documentation link. Enhance labelled native single selects with the hosted frosted component so the cursor remains visible through the open menu. Preserve form semantics, keyboard navigation, touch targets, reduced motion, and documented native exceptions. Direct value or inherited theme changes need refresh(); framework integrations must destroy their instances on unmount. Do not use a native OS select popup and claim the full custom cursor effect.

## Shared custom cursor

Use `usage.components.cursor.integration.html` for the cursor element and its companion scripts with the chosen base color, or its JavaScript recipe for client lifecycle integration. Follow `usage.documentation.cursor` and `usage.documentation.cursor_metadata` for the browser-ready cursor, presets, and integration API. Sites use the shared cursor and may customize its color freely, including orange, vintage sage, black, white, and valid CSS colors. Preserve the shared MCP spring, automatic bounding-box outlines for buttons, links, and closed dropdowns across the page, checkbox/radio snapping, and 90% opacity. Difference blending is the default, calibrated against the surrounding CSS background to preserve the selected hue in both themes. Images and gradients can still shift the result; solid color is optional. Control outlines have a 2 px stroke and 3 px clear gap, centered without pointer drift. Text links have a wider 7 px horizontal and 5 px vertical clear gap; the decoration may overlap surrounding text without changing layout or click targets. Icon-only controls retain a slightly larger circle instead of a box; custom icons can use `data-cursor="icon"`. Standard semantic controls need no special markup; custom targets can use `data-magnetic`, and native regions can use `data-cursor="native"`. Use the hosted implementation and destroy it on unmount. Text inputs, textareas, editable HTML, and textbox/searchbox roles automatically receive a subtle five-second physical border ripple on hover, moving the border by at most 2 px; focus eases it flat. Follow actual field dimensions and individual corners, including resizing. Keep the small circle while hovering or clicking into text fields, with exact pointer tracking, the selected color, and adaptive inversion. Only when typing starts in a supported editor, move that same circle to the insertion point with a 220 ms squash-and-stretch and morph it into a 2 px terminal-style caret. It follows characters, deletion, selection navigation, wrapping, and editor scrolling; hide the native caret only while the custom one has a valid position. Moving the mouse releases the custom caret back into the circle at the mouse. Preserve native editing mechanics and restore the native caret for unsupported fields, selected text, IME, forced colors, blur, and cleanup. Reduced motion removes travel, squash, and blinking. Keep selection, scrolling, resize controls, and input accessories. Keep its page-wide native-pointer suppression active during page/container scrolling and window resizing. Scrolling uses a small circle, then restores the correct hover shape beneath the stationary pointer when it stops. The component owns the hiding rule and restores native cursors on cleanup; do not add unconditional site CSS that hides the pointer before the component is active. Hosted script updates propagate through cache refresh without changing site color options; adopt the current versioned URL from the catalog for an immediate rollout. Keep the custom cursor on all ordinary page elements, including unknown or disabled controls, pseudo-elements, dynamically added content and open shadow components. Color pickers and other simple interactive inputs grow the circle to 24 px without outlining them. Resize handles and input accessories retain their mechanics with the custom circle. Only explicit native opt-outs, external documents and browser/OS windows sit outside this coverage; closed shadow roots with private cursor rules cannot be overridden. Preserve touch behavior and reduced-motion support (no wave or spring travel). Loading the script alone must not enable it. The CDN documentation uses the cursor and frosted dropdowns across all pages. Load the companion dropdown script as well; follow the baseline footer contract.