Skip to content

notes.md

Latest commit

 

History

History
143 lines (116 loc) · 6.85 KB

notes.md

File metadata and controls

143 lines (116 loc) · 6.85 KB
Raw

Talk notes: npx skills demo

Not committed to the no-skills/skills/impeccable branches — kept on main so each demo branch's diff stays clean and presentable.

Setup recap

All three branches start from the same commit (chore: scaffold llmao teaser demo baseline) or its descendants, get the identical brief (docs/prompt.md), and were built by fresh Sonnet 5 agents with no web search / no internet access.

main
 └─ no-skills   (plain build, no skills)
     ├─ skills       (+ astro, chrome-devtools-axi)
     └─ impeccable   (+ impeccable, design-only pass over the no-skills page)

skills branches off the shared baseline and gets its own independent build. impeccable branches off the finished no-skills page — same content, same copy, same bug — so its diff is a pure design delta, nothing else.

Every branch builds cleanly from a fresh deno task install && deno task build (verified independently; build artifacts are gitignored, not committed).

The arc: plain → verify → glow up

1. no-skills — baseline

Sonnet 5, offline, no skills. Produces a working but unremarkable Astro page: Inter everywhere, a cyan→purple gradient run straight across the llmao wordmark, uniform icon+heading+text champion cards. Ships one real bug (next section).

2. skills (astro + chrome-devtools-axi) — a real catch, otherwise minor

git diff no-skills skills -- .claude

→ two files, nothing else: .claude/skills/astro/SKILL.md and .claude/skills/chrome-devtools-axi/SKILL.md, installed with:

npx skills add https://github.com/astrolicious/agent-skills --skill astro
npx skills add kunchenguid/chrome-devtools-axi --skill chrome-devtools-axi

The headline moment: reference/ mirrors six champions, but only five champion sprite sheets exist (no Ironclad sprite). The no-skills build silently reused the towers (turret) sprite as Ironclad's icon — a visible, misleading bug that shipped with nothing to catch it (git show no-skills:src/data/content.ts line ~24). The skills build used chrome-devtools-axi to render its own preview in headless Chrome, pull the accessibility tree, and screenshot both viewports — it caught the mismatch itself and replaced it with a hue-tinted monogram badge.

Be honest about the rest: beyond that catch, the skills diff is incremental — an extracted ChampionCard.astro, role="img"/aria-label on the sprite icon, one mobile grid fix, compressHTML: true — and partly offset by regressions the run introduced (deleted tsconfig.json strict mode and src/env.d.ts, dropped an .sr-only utility and a global img reset). The astro skill's guidance was mostly generic project-structure/CLI knowledge that didn't change anything — the build only touched stable-since-v2 Astro APIs the model already knew. chrome-devtools-axi is what actually changed the outcome; astro mattered less than expected for a page this simple.

Live-demo friction worth mentioning: npx -y chrome-devtools-axi itself misrouted in the sandbox (npx parsed the package name into npm's own arg parser); the agent worked around it with npm exec -y -- chrome-devtools-axi <cmd>. Skills don't remove all friction — they give the agent a path through it and something to verify against, instead of silently shipping.

3. impeccable — the visual payoff (and its own honest asterisk)

git diff no-skills impeccable -- . ':!.claude' ':!skills-lock.json'
# → PRODUCT.md, DESIGN.md, src/pages/index.astro, src/styles/global.css

Installed the same way as the other two:

npx skills add pbakaus/impeccable

Impeccable is a design-vocabulary skill (23 commands — polish, bolder, delight, animate, critique, audit, …) whose stated purpose is killing "AI-generated UI tells": "Inter for everything, purple-to-blue gradients, cards nested in cards." The no-skills page has both of the named tells verbatim. Its 58 detector rules run with no LLM and no API key — pure static analysis, holds under "offline."

Branched from the finished no-skills page (same copy, same champions, same Ironclad-sprite bug — content was explicitly out of scope for this pass) and ran impeccable init → polish (+ layout/typeset/colorize per its own guidance) against the existing markup/CSS only:

  • Gradient text → solid color + glow. The wordmark's background-clip: text cyan→purple run is exactly the anti-pattern impeccable names. Replaced with solid --accent + a matched text-shadow — same neon read, not the tell. Detector confirms: 1 finding (gradient-text) before → 0 after.
  • Monospace given a real job. HUD tags, role labels, room code, and stat columns now render in a mono stack with tabular numerals; Inter is reserved for prose/headings — addresses "Inter for everything" without inventing a fake second display face.
  • Card grid → roster list. The uniform icon+heading+text champion cards (explicitly banned in impeccable's craft-floor guidance) became a single panel with hairline-divided rows — reads like a champion-select screen, not a SaaS template grid.

The asterisk, worth saying out loud: the row-layout redesign introduced its own real bug during verification — Ironclad's role text ("tank / bruiser") overflowed a fixed-width flex column and visually collided with the passive-ability text next to it (.champion-meta had no flex-wrap). Caught by eye during a manual screenshot check, not by the skill itself, and fixed in a follow-up commit (fix: prevent champion role text from overflowing into ability column). Good, honest line for the talk: a design-polish skill still needs a second pass — it changes what you're guarding against, not whether you still need to look.

live mode (interactive browser iteration) and any LLM-backed critique/audit sub-agents weren't available in this sandbox (need a running browser session / API key) — the build used the static detector plus direct reading of the skill's reference docs instead.

Suggested narration order

  1. git log --oneline --all --graph --decorate — one baseline, three branches, one variable each.
  2. git diff no-skills skills -- .claude — two files. That's the entire setup cost of skills #1 and #2.
  3. Ironclad's card, no-skills vs skills — turret icon vs. monogram badge. Explain why: chrome-devtools-axi let the agent literally see what it shipped.
  4. Say plainly that astro's contribution here was smaller than you'd expect — the honesty lands better than oversetting it.
  5. no-skills vs impeccable hero, side by side — gradient wordmark vs. solid glow; card grid vs. roster list. This is the visual "wow."
  6. Land on the overflow bug and the fix commit — the twist that keeps it honest: skills change your leverage, not your obligation to verify.