01Reference by Thariq Shihipar
Three code approaches
Compare three implementations side by side, with trade-offs called out where the code actually differs.
Catalog
The work itself: twenty HTML references, forty SVG renderings, five skills, and six native artifacts you can open and inspect.
Browse the collection
Showing 31 of 31 · 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 artifacts02Reference by Thariq Shihipar
Visual design directions
Render several layout and tone directions live so reviewers can react to the actual alternatives.
16Reference by Thariq Shihipar
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 artifacts03Reference by Thariq Shihipar
Annotated pull request
Render a real diff with margin notes, severity, jump links, and clear places for a reviewer to focus.
17Reference by Thariq Shihipar
PR writeup for reviewers
Explain motivation, before and after behavior, the file-by-file tour, and where scrutiny matters most.
04Reference by Thariq Shihipar
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 artifacts05Reference by Thariq Shihipar
Living design system
Turn colors, type, spacing, and interface primitives into a reference that stays concrete and copyable.
06Reference by Thariq Shihipar
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 artifacts
Diagrams
Use vector scenes and interactive diagrams when relationships are the explanation.
2 artifacts10Reference by Thariq Shihipar
SVG figure sheet
Collect crisp figures for an article in one editable vector sheet instead of describing them in prose.
13Reference by Thariq Shihipar
Annotated flowchart
Draw a process as a real flowchart and let each step reveal the timing, work, and failure path underneath.
Research
Give an unfamiliar system multiple coordinated views, live explanations, and a navigable reading path.
2 artifacts14Reference by Thariq Shihipar
How a feature works
Combine a summary, collapsible request path, code samples, and questions into a navigable system explanation.
15Reference by Thariq Shihipar
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 artifacts11Reference by Thariq Shihipar
Weekly status
Give shipped work, slips, risks, and one useful chart enough structure for a quick operational read.
12Reference by Thariq Shihipar
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 artifacts18Reference by Thariq Shihipar
Ticket triage board
Reorder a concrete set of tickets across decision buckets, then export the resulting judgment.
19Reference by Thariq Shihipar
Feature flag editor
Edit structured configuration with dependencies and warnings, then copy only the keys that changed.
20Reference by Thariq Shihipar
Prompt tuner
Edit a reusable template while representative inputs render beside it, then export the tuned result.
Built here, open in place.
Readiness studies and high-fidelity product-interface studies, built as responsive, interactive HTML. Each one is the artifact, not a screenshot standing in for it.
Structure
Release readiness wireframe
Three deliberately unfinished directions for deciding hierarchy, evidence, navigation, and responsive structure.
Behavior
Release readiness prototype
A working blocked-to-ready flow with validation, status changes, recovery, keyboard support, and mobile behavior.
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.
Interface study · Notion
Notion project space
A connected project document that keeps strategy, properties, tasks, progress, and a timeline in one navigable surface.
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.
Five 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.
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 native collection adds the featured request-path explorer, two release-readiness studies, and three unaffiliated product-interface studies built with synthetic data.