Youssef
aedca8cb03
The published install command in the README — npx skills add nutlope/hallmark — was failing for users because the skills CLI looks for SKILL.md at the repo root, not at skill/SKILL.md where Hallmark kept it. The clone succeeded but the CLI reported "No skills found." Manual cp was the only working install path. Flattened the layout: - skill/SKILL.md → SKILL.md - skill/references/ → references/ - (skill/ directory removed; was empty after moves) git mv preserved rename history for all 76+ files (SKILL.md + 28 reference files + 21 macrostructures + 46 components + 7 verb/genre subfolders). Updated every cross-reference (36 occurrences across 9 files): - README.md — 4 links (SKILL.md + references/ + the install snippet still reads the same) - ROADMAP.md — 4 links to reference files - package.json — "files" field + "skill" entry/references paths - site/js/main.js — 3 source comments - references/design-md.md — one broken link (was pointing skill/references/export-formats.md from inside references/ — now just export-formats.md as a sibling) - site/_tests/verbs/study/notes.md, diagnosis.md and verbs/audit/audit-report.md, custom/README.md — test-artifact relative paths shortened by one segment (e.g. ../../../skill/SKILL.md → ../../../SKILL.md) No skill content changes. After this lands, 'npx skills add nutlope/hallmark' should clone + install correctly without any manual cp fallback.
1.7 KiB
05 · Workbench
Product screenshots in frames are the primary content. The page is a guided tour of the app in use. Less marketing copy, more "here's what you do with it."
- Heading: small, functional — workbench pages don't shout.
- Body: sequence of screenshot blocks, each with a short caption and an inline annotation arrow.
- Divider: the screenshot frame is the divider; sections separate by gap and frame.
- Button: sticky-bottom CTA bar after the third screenshot ("Try it →"), once context is built.
- Image: central — browser/device frames around real product captures, with annotation arrows.
- Reveal: type-unmask on captions; screenshots load instantly.
Reach for it for SaaS, developer tools, IDE extensions — anywhere seeing the product in motion is the sale.
Avoid when the product is conceptual or services-led. Workbench needs a UI to show.
Reference: Linear.app, Vercel, Raycast, Arc Browser.
Sample opening lines (imitate the specificity, not the wording — the page walks the user through):
"$ streampipe parse access.log --filter status=5xx | jq" — open on a real command, not a marketing claim "Read anything that emits lines. Files, pipes, sockets, kubectl logs." — names the inputs, refuses abstraction "Open the trace, find the span, fix the regression. No glossary required." — three concrete verbs, then a refusal
<header class="lite">…</header>
<section class="screenshot-frame">
<figure><img src="step-1.png" /><figcaption>Open a project.</figcaption></figure>
</section>
<section class="screenshot-frame">…</section>
<aside class="sticky-cta">Try it free →</aside>