Inventory · assets.gf.cx — toolkit primitives with live examples

Lifecycle-state badge that sits under a record title. Tag each pill with data-state and keep one JSON vocabulary on the page — add a state once, not per row. Lifted from home.gf.cx/returns.

The five variants

Neutral · in flight Alert · needs attention Resolved · closed-good Service · work done Warning · high-visibility

Demo + colour swatches: status-pill · Docs: README · Source: github

made-with · v0.1.0

shared provenance footer · rendered from a placeholder · one import · change-once-updates-everywhere

The "Built with — how this page ships" footer, rendered from a placeholder so the wording + styling live in one file. Ends hand-copied-footer drift — the favicon-control-plane model applied to provenance.

Live footer

Demo: made-with · Docs: README · Source: github

media · v0.1.0

portfolio-wide sizing defaults for inline <video> / <img> / <audio> · one place to tune visual proportion

Edit once, every renderer that imports inherits the new sizing. Override per-page via the --media-video-max-width custom property.

Inline image inside an <article> (sizing applies)

Heraldic family emblem demo — media.css applies max-width sizing inside an article context.

Image scoped to <article> img — caps at 100% width by default.

Docs: README · Source: github

map-dossier · v0.1.0

the "good-map" pattern for locating a facility · aerial → close-up hover → street-view

Three composable primitives — .rollimg (mouse-over reveal; for maps, start on the close-up and hover out to the wider context), .svfacade (click-to-load embed facade, defers the third-party until intent), and .embed3d (always-on inline embed). The .rollup hover image must be the exact pixel dimensions of the base so the overlay lands pixel-perfect.

Live demo · hover the aerial to zoom out (base = pinned block, hover = wider district)

Close-up satellite of the Equinix ZH4 block, Josefstrasse 225, Zürich-West.

Wider satellite of the Escher-Wyss / Industriequartier data-centre district, Zürich-West.

hover · zoom out

Docs: README · Notes: kb.gf.cx · Source: github

dropzone · v0.1.0

drag-and-drop file capture with localStorage persistence + JSON export · pure client-side, no server roundtrip

Drop files into the zone, they persist in browser localStorage. Click "Copy JSON for sync" → paste to Claude or run pa_dropzone_apply.py to land them at the canonical filesystem path.

Live demo · drag files in (state persists in localStorage)

Docs: README · Source: github

sortable-table

click-to-sort table headers with arrow indicators · vanilla JS, no dependencies

Pure-CSS-and-data-attr sortable tables. Used on pa.gf.cx/amazon/orders.html (5,476 line-items) and home-insurance claim affidavit-dashboard.

Docs: README · live in production on pa.gf.cx/amazon/orders

icons · heraldic emblems

SVG emblem library · 16 heraldic crests + family glyph · used for placeholder thumbnails on system cards

Hand-curated SVG set originally from Claude.ai chat. Used wherever a card needs a thumb but no real photo exists yet.

Heraldic emblem set (first 8)

Gallery: /icons/ · Source: github

date-counter

runtime widget · "116d left" / "Aug 8 2026" formatting · auto-refresh

Add data-date="2026-08-08" to any element, the widget renders relative + absolute formatting + auto-ticks on a 1-minute heartbeat. Used on countdown pages + status dashboards.

Source: github

pattern library · feedback memories

Beyond the visual primitives above, the toolkit is anchored by a memory-resident pattern library. Each rule below has its own feedback_*.md in ~/.claude/projects/.../memory/, propagated to future sessions.

Micro-gestures

stamps · grayscale-hover · pulse · live timestamps · refresh-copy · closing summary

"Features tell you what something does. Gestures tell you that someone cared."

SEO-rewrite at drop

slug-with-purpose filename + full descriptive alt-text sentence

"A file with a bad name is a file you can't find."

Photo-strip order

hero first · detail middle · serial / data-plate LAST

"The regulatory sticker is load-bearing for the warranty, not for the page."

Ingest-dashboard

pa_job_status_update.py + pa_job_status_render.py + status JSON substrate

"Don't build a status dashboard. Wire the job into the one that already exists."

CF Pages subdomain setup

scaffold → wrangler project create → deploy → CF API domain-bind

"Dashboard clicks don't go in version control. API calls do."

API burn — chunked + watchable

50-100 items per invocation · Dan-go between chunks · same $ different shape

"Spend isn't the variable to throttle — visibility is."

Pattern-break collaboration loop

Claude proposes + ships · Dan reads + corrects · correction → memory

"A pattern that survives one user-correction round is stronger than a pattern that was right by luck the first time."

subdomain-scaffold · v0.3.1

one-command new gf.cx subdomain · declarative landing + context-aware 404 + cards + media + favicon + made-with footer + stamps baked in

Generates ~/Code/<name>.gf.cx/ from templates. Includes a "holding card" so a fresh subdomain has a proper greeting before real content lands.

~/bin/gfcx_subdomain_new.py <name> --title "..." --kicker "..." --description "..."

Live dogfood: sandbox.gf.cx · Source: ~/Code/toolkit/subdomain-scaffold/ · Memo: parked_sketch_sandbox_gfcx_subdomain_template.md

Inventory with live examples

cards · v0.1.0

status-pill · v0.1.0