01
Three code approaches
Compare three implementations side by side, with trade-offs called out where the code actually differs.
Catalog
Explore visual and interactive HTML artifacts you can open, inspect, and use as references for your own agent work.
Browse the collection
Showing 38 of 38 · Expanded
Interactive sequence diagram · README artifact
Follow a request through the whole stack.
Select one of six request paths to dim the surrounding system, trace causality across the architecture, and reveal the nodes and explanation for that flow.
- Create
- Live edit
- Agent edit
- Public read
- Login
- HTML render
Supporting preview · the live HTML is the artifactExploration
Put alternatives beside one another, choose a direction, then make the implementation legible.
3 artifacts02
Visual design directions
Render several layout and tone directions live so reviewers can react to the actual alternatives.
16
Implementation plan
Combine milestones, data flow, mockups, code, risks, and open decisions in one inspectable handoff.
Review
Give diffs, modules, and reviewer guidance enough spatial structure to be scanned instead of decoded.
3 artifacts03
Annotated pull request
Render a real diff with margin notes, severity, jump links, and clear places for a reviewer to focus.
17
PR writeup for reviewers
Explain motivation, before and after behavior, the file-by-file tour, and where scrutiny matters most.
04
Module map
Draw an unfamiliar package as a readable system with its hot path, boundaries, and entry points visible.
Design
Turn tokens, components, variants, and states into a reference people can actually inspect.
2 artifacts05
Living design system
Turn colors, type, spacing, and interface primitives into a reference that stays concrete and copyable.
06
Component variants
Lay out sizes, states, and intents together so a component can be reviewed as a complete family.
Prototyping
Make motion and interaction tangible enough to tune, compare, and redirect before production work.
2 artifacts07
Animation sandbox
Isolate a transition with controls for duration and easing so the movement can be tuned by feel.
08
Clickable flow
Connect only the screens needed to feel whether an interaction, transition, or task flow is right.
Diagrams
Use vector scenes and interactive diagrams when relationships are the explanation.
2 artifacts10
SVG figure sheet
Collect crisp figures for an article in one editable vector sheet instead of describing them in prose.
13
Annotated flowchart
Draw a process as a real flowchart and let each step reveal the timing, work, and failure path underneath.
Decks
Sequence a meeting-sized story in one portable file with deliberate pacing and keyboard navigation.
1 artifact09
Arrow-key slide deck
Turn source material into a short browser-native presentation with a real sequence and no export step.
Research
Give an unfamiliar system multiple coordinated views, live explanations, and a navigable reading path.
2 artifacts14
How a feature works
Combine a summary, collapsible request path, code samples, and questions into a navigable system explanation.
15
Interactive concept explainer
Teach a difficult idea with a manipulable model, aligned comparison, and glossary that respond together.
Reports
Make recurring status and incident documents faster to scan without flattening their evidence.
2 artifacts11
Weekly status
Give shipped work, slips, risks, and one useful chart enough structure for a quick operational read.
12
Incident timeline
Join the minute-by-minute timeline, evidence, impact, and follow-up work into one readable post-mortem.
Editors
Replace an awkward text instruction with a purpose-built interface that exports the human’s decision.
3 artifacts18
Ticket triage board
Reorder a concrete set of tickets across decision buckets, then export the resulting judgment.
19
Feature flag editor
Edit structured configuration with dependencies and warnings, then copy only the keys that changed.
20
Prompt tuner
Edit a reusable template while representative inputs render beside it, then export the tuned result.
Wireframes, mockups, and prototypes.
HTML examples made for this catalog. Open them, resize them, and inspect the source.
Wireframe · Three directions · low fidelity
Effective HTML comparison wireframe
Three ways to organize the same artifact catalog, kept rough so the hierarchy and browsing model are the decision.
Mockup · Chosen direction · branded
Effective HTML catalog mockup
The same catalog decision carried into the Effective HTML visual system, with working density and responsive controls.
Wireframe · Review structure · low fidelity
Plannotator review wireframe
A rough review workspace for testing the balance between the document, annotation tools, comments, and approval actions.
Mockup · Product-aligned · interactive
Plannotator review mockup
A product-specific review surface using Plannotator’s dark shell, annotation language, and approval flow without copying a screenshot.
Wireframe · Current and proposed · low fidelity
Product change review wireframe
A rough side-by-side review that keeps the current state, proposed change, and unresolved questions in one frame.
Mockup · Decision artifact · interactive
Product change review mockup
A vivid review artifact for comparing a product change, changing the viewport, and recording a direction before implementation.
Wireframe · Structure
Release readiness wireframe
Three deliberately unfinished directions for deciding hierarchy, evidence, navigation, and responsive structure.
Prototype · Behavior
Release readiness prototype
A working blocked-to-ready flow with validation, status changes, recovery, keyboard support, and mobile behavior.
Mockup · Interface study · Linear
Linear issue workspace
A calm, dense issue workspace with active and backlog filters, keyboard-ready rows, and a focused issue detail rail.
Mockup · Interface study · Notion
Notion project space
A connected project document that keeps strategy, properties, tasks, progress, and a timeline in one navigable surface.
Mockup · Interface study · Vercel
Vercel deployment ledger
A chronological deployment ledger with environment filters, expandable build evidence, and explicit promotion actions.
The methods behind the artifacts.
Six focused skills turn a broad request into an artifact with the right fidelity, behavior, and verification boundary.
HTML
The broad router for reports, explainers, presentations, interfaces, data stories, and mixed artifacts.
Design artifact
Design principles and creative direction for pages, reports, plans, landing pages, demos, decks, and small tools.
HTML wireframe
Low-fidelity structure for reviewing content, hierarchy, navigation, task flow, and responsive behavior.
HTML prototype
Polished mockups and bounded working flows with the states and interactions needed for a real decision.
HTML plan
Plans that preserve source commitments while clarifying sequence, ownership, dependencies, and completion.
HTML diagram
Purpose-built visual models for topology, sequence, process, state, hierarchy, time, and quantity.
Sources remain visible.
The twenty reference examples accompany Thariq Shihipar’s essay on using HTML to stay engaged with agent work. Effective SVG reinterprets those same subjects as static and animated vector artifacts. The first-party collection adds the request-path explorer, the release-readiness pair, three new wireframe-and-mockup pairs, and three product-interface studies built with synthetic data.