Component showcase
Every MDX component available in harnez posts — props, variants, and live examples.
Callout
Contextual callout boxes. type controls the colour: info (default), tip, warning, danger, note. label renders a distinct header row above the body.
CodeBlock
A syntax-highlighted code card with a header bar showing filename and language. Uses Shiki dual-theme so colours work in both dark and light mode.
interface Session {
id: string;
model: string;
tokens: { in: number; out: number };
checkpoints: Checkpoint[];
}
function totalTokens(session: Session): number {
return session.tokens.in + session.tokens.out;
}npx cc-session-viewer --roots ~/.claude --port 4000MetaCard
Single metadata card or a responsive card grid. Pass label and value for one card, or items for the four-up overview used at the top of posts.
MetricCard
Large-number callout for quantitative highlights. Pass value and label for a single card, or items for a responsive four-up grid.
Stage
Unified stage cards for milestone sequences and additive rule stacks. Pass items and the component renders a vertical stack.
Milestone stack
Explore
Map the problem space. Read the existing code, understand the constraints, identify the unknowns.
Build
Implement a minimal version that covers the core path. Defer edge cases until the shape is right.
Validate
Run against real data. Measure, compare, and decide whether to ship or iterate.
Rule stack
Role + task
The minimal prompt: a one-line role anchoring the model, and a task defining what to extract.
<role>
You are a data extraction expert.
</role>
<task>
Extract reviewer and rating as CSV.
</task>+ Format rules
Explicit format constraints prevent the model from inventing column names or wrapping output in markdown.
<format>
Return raw CSV only. No headers. No fences.
Columns: reviewer,rating
</format>+ Edge cases
Explicit handling for null ratings, decimals, and boundary sentiments locks in consistent output.
<rules>
- Missing rating → empty string, not "N/A"
- Decimal ratings → preserve as-is (3.5, not 4)
- Sentiment: only "positive"/"negative"/"neutral"
</rules>Table
Markdown tables in a bordered card with an optional caption header. Leave a blank line before and after the table inside the component.
| Model | Speed | Cost | Best for |
|---|---|---|---|
| claude-haiku-4-5 | Fast | Low | Classification, simple extraction |
| claude-sonnet-4-6 | Balanced | Mid | Most coding tasks |
| claude-opus-4-7 | Thorough | High | Complex reasoning, large context |
Matrix variant
Use variant="matrix" when the structure is a fixed validation grid rather than freeform markdown table content.
| Check | Task 1 | Task 2 | Task 3 |
|---|---|---|---|
| Output format correct | PASS | PASS | FAIL |
| Null ratings handled | FAIL | PASS | PASS |
| No extra columns | PASS | WARN | PASS |
| No markdown fences | PASS | PASS | PASS |
| Decimal ratings preserved | — | PASS | PASS |
TodoList
Ordered task list with optional detail and status per item. Status done shows a green checkmark, failed shows a red ×, default shows the step number.
- Define the content schema in Zod src/content.config.ts
- Create the MDX layout PostLayout.astro
- Wire up dynamic routing [slug].astro
- Add syntax highlighting Shiki dual-theme
- Write the first post Needs content
BeforeAfter
Side-by-side before/after comparison with named slots. beforeLabel and afterLabel default to Naive / Improved.
Fix the bug.The validateUser() function at src/auth/validate.ts:42
throws when email contains a + character. Fix it so
RFC 5321 addresses are accepted. Do not change the
function signature.TwoCol
Two-column layout with named slots main and side. The side column is narrower and typically holds a figure, table, or supporting note.
Why prompts drift
Every iteration of a prompt is an implicit experiment. Without a fixed fixture to validate against, you can’t tell whether a change made things better or just different. The instinct is to keep the last version that felt good — but “felt good” isn’t reproducible.
A fixture anchors the experiment. It defines what correct looks like so every prompt change has a measurable outcome.
| Step | Output |
|---|---|
| Change prompt | .system.md |
| Run | output.txt |
| Validate | results.json |
| Analyze | suggestions.json |
Takeaways
Highlighted insight cards with a coloured left border. tone controls the colour: accent, good, warn, purple, neutral.
accent — the default
Use for primary findings or the central argument of a section.
good — positive outcomes
Use for things that worked, improvements measured, or results worth highlighting.
warn — watch out
Use for tradeoffs, caveats, or patterns that look good but carry hidden costs.
purple — insight
Use for non-obvious observations, surprising findings, or model behaviour notes.
neutral — context
Use for background observations that support the argument without strong valence.
Timeline
Vertical log of iterations or events. status is pass, fail, model, fixture, info, or change.
Baseline prompt — no format rules
Model wrapped output in markdown fences and added extra columns.
Add explicit CSV format instruction
Fences gone, but model still normalised empty strings to 'N/A'.
Switch to claude-opus-4-7
Better instruction following. Zero-rating ambiguity resolved correctly.
Lock down null handling explicitly
All 20 pages pass. Output is clean CSV with no post-processing needed.
Carousel
Paged navigation for any component. Each direct child becomes one slide.
StepFlow
Horizontal numbered steps for a linear process. Each step has a label and detail.
ComparisonGrid
Multi-column comparison table with labelled rows. Columns define the headers; rows define the values per column.
Format compliance
0 / 20
14 / 20
20 / 20
Null handling
Fails
Partial
Correct
Token cost (avg)
420 out
380 out
310 out
Extra columns
Yes
No
No
Iteration
A single pass/fail card for an experiment iteration. Usually rendered inside a loop or sequence. status is pass, fail, model, or fixture.
Prompt v2 — explicit null rules
PassAdding null → empty string to the format block eliminated all N/A substitutions. 20/20 pages pass the null check.
Prompt v1 — baseline
FailModel consistently substituted empty ratings with “N/A” and wrapped output in triple-backtick fences despite no instruction to do so.
Mermaid
Client-side Mermaid diagrams, re-rendered on theme change. Pass the diagram source as the code prop. Optional caption renders below the diagram.