Use this skill when the user wants to set up a new TypeScript project or add standard tooling to an existing one. Triggers on phrases like "set up this repo", "initialize the project", "add linting", "scaffold this", "set up tooling", "configure typescript", or "sow".
Audit an API, CLI, or config surface for what it makes easy (affordances) and what it makes easy to get wrong (anti-affordances, footguns). Finds the pit-of-success versus the footgun, and the smell where the primary use is smooth but the secondary use is awkward. The principle: good design you act through without noticing; bad design makes you fight it. Use when designing or reviewing a public interface, library, SDK, or command surface. Triggers on "API ergonomics", "is this easy to misuse", "footgun", "pit of success", "review this interface", "review this CLI", "ergonomics".
Guidelines for authoring reusable UI components. Use when asked to create new frontend features, components, or design-adjacent tasks.
Always use when user asks to create, generate, draw, or design a diagram, flowchart, architecture diagram, ER diagram, sequence diagram, class diagram, network diagram, mockup, wireframe, or UI sketch, or mentions draw.io, drawio, drawoi, .drawio files, or diagram export to PNG/SVG/PDF.
A code-review lens that flags cleverness for its own sake, fashion-driven choices, premature abstraction, and indirection that serves the author instead of the reader. Asks one question of every choice: who does this serve? Empathy over ego: ego-driven work never produces something humane. Use when reviewing a diff or PR, especially a clever or trendy one. Triggers on "review this", "is this over-engineered", "too clever", "code review", "is this abstraction worth it".
Export the current Pi or Claude Code conversation transcript to a standalone HTML file. Use whenever the user invokes this skill, says /export, asks to export/share/save the current agent session, or wants a transcript HTML without manually finding a JSONL path or installing devlog.
Verify WCAG 2.1.1 (Keyboard) compliance by testing fuzzy, property-based focus invariants against a live page. Use when auditing keyboard accessibility, testing focus management, validating tab order, or checking that interactive elements are reachable. Prefer Chrome MCP/devtools tools when available; CDP via curl is also supported. Framework-agnostic.
Detect unnecessary layout shifts (jank / CLS) in a web UI by instrumenting Chrome with PerformanceObserver while driving real interactions. Use whenever the user asks to check a UI for layout shifts, jank, jumpiness, content shifts, CLS, or Core Web Vitals — phrases like "check for layout shifts", "is it janky", "is anything jumping", "QA the UI", "any CLS issues". Also use proactively as part of any browser-based verification of a UI change: after taking screenshots or driving an interaction in the browser to confirm a feature works, run this pass to confirm the feature doesn't move already-painted content unexpectedly. The check is cheap (≈10 seconds in the same browser session) and catches a class of bug that static reading and casual screenshotting both miss.