Standalone HTML Artifact Skill

Date: 2026-05-26

Background

During Focus-Reminders task (May 2026), we built two self-contained single-file HTML pages:

sites/sdc/focus.astro → dist/focus.html (SDC mission/status page)
sites/mbr/focus.astro → dist/focus/index.html (MBR mission/status page)

These are fully inlined (CSS + JS + fonts + content), deployed via FTP, no external dependencies at runtime. They work as:

Investor briefing leave-behinds
Center-of-influence (COI) status dashboards
Team alignment pages pinned to phone home screens (PWA-installable)

The pattern is repeatable and valuable. A skill would make it fast to spin up new artifacts of this type without re-inventing the wheel.

Key source files to reference:

/home/ta/projects/monorepo/sites/sdc/src/pages/focus.astro — SDC implementation
/home/ta/projects/monorepo/sites/mbr/src/pages/focus.astro — MBR implementation
/home/ta/projects/monorepo/sites/sdc/src/data/sdc-focus.ts — content data pattern
/home/ta/projects/monorepo/sites/mbr/src/data/mbr-focus.ts — content data pattern
/home/ta/utils/web/web-deploy/config.yaml — how projects are registered for deploy
/home/ta/utils/web/web-deploy/sdc-mission-deploy/deploy_sdc_focus.py — FTP deploy script pattern

Design tokens live in: /home/ta/projects/monorepo/packages/design-tokens/src/ Brand colors (primary): --brand-primary: #004425, --brand-gold: #D5B038

Tasks

Design and implement a /new-artifact skill (or similar name) that guides Claude through creating a new standalone HTML artifact. The skill should:

1. Skill interface

Define the invocation: /new-artifact [name] or prompts for name if omitted. Ask for:

Brand — which brand (SDC / MBR / TS / custom)
Purpose — mission page, investor brief, status dashboard, event one-pager, etc.
Content structure — which section types are needed (card, plan, prominent, custom)
Deployment target — FTP subfolder on talbotstevens.com, or Cloudflare Pages, or local-only

2. Scaffolding outputs

Skill should produce (or guide production of):

New Astro site entry in monorepo/sites/[name]/ using the focus page pattern as template
src/pages/[name].astro — page template (copy/adapt from sdc or mbr focus.astro)
src/data/[name]-content.ts — typed content data file with JSDoc usage block
public/ — favicon, apple-touch-icon, site.webmanifest (brand-appropriate)
astro.config.mjs — with output: 'static', build.format: 'file', inlineStylesheets: 'always'
package.json, tsconfig.json — minimal, matching sdc/mbr pattern

3. Design token integration

Skill should offer to pull brand colors from monorepo design tokens:

Read packages/design-tokens/src/ to get OKLCH palette for the chosen brand
Inject correct --brand-primary, --brand-gold (or equivalent) CSS vars into the template
Flag if brand tokens don’t exist yet (prompt to define them or use hex fallback)

4. Deploy registration

Add entry to web-deploy/config.yaml for the new artifact (port auto-assigned, starting from 8003)
If FTP deploy: create sdc-mission-deploy/deploy_[name].py from the existing deploy script pattern
If Cloudflare: note the wrangler pages deploy command to use

5. Content guidance

Include a worked example in the skill showing how to populate [name]-content.ts
Show the section types: card, plan, prominent, and how to use HTML helpers for brand spans
Show the show=next focus mode pattern and when it’s useful

6. Skill file location

Save as ~/.claude/commands/new-artifact.md (or artifact-page.md — TBD on naming). Follow skill quality standard: review with /simplify, test on a real invocation before declaring done.

Key Implementation Gotchas (from Focus-Reminders task)

build.inlineStylesheets: 'always' + build.format: 'file' required for self-contained output — JS module imports that Vite bundles as external _astro/*.js files reference absolute paths (/_astro/...) that break when deployed to a subfolder. Use <script is:inline> for all JS that must stay in the single file.
Toggle/UI elements inside the content container get hidden by show-param logic — Any element inside .container is subject to el.style.display = 'none' in the show=next handler. Exclude by ID: if (el.id !== 'plan' && el.id !== 'view-toggle').
PWA background_color must contrast with favicon SVG foreground — Monochromatic SVG on same-color background = invisible splash/icon. Use white when favicon has no built-in background fill.

Notes / Open Questions

Should this be a single skill file, or a skill that delegates to sub-steps?
Is there a better name than “artifact”? Options: focus-page, briefing-page, standalone-page
Should the skill support non-Astro output (pure HTML template for simpler cases)?
Could this integrate with the KB to pull mission/plan content automatically?