Static markup-only component for the dark code/markdown preview surface.
Renders the preview header (title + actions), the file-tabs slot, and
either the source body or the rendered Markdown body based on the
'rendered' prop. Toggling between modes is task 16.
Preserves every CSS hook asserted by scripts/verify.mjs:
.preview, .preview-title, .preview-markdown, .markdown-preview,
max-height:540px, .markdown-table-wrap, .markdown-frontmatter,
.markdown-toc, plus the dark surface treatment. Visual fidelity gaps
listed in the task report.
Did not: introduce a markdown renderer (task 16 hydrates the body);
port the cat-marker CSS hook to the new surface (legacy only).
Static markup-only component for the package-file switcher inside the
preview surface. Renders one button per file with the kind eyebrow and
file name; applies the 'active' class on the current file. Click
handling is task 16.
The dark tab strip uses --deep for the surface and --gold for the
active state; close to the legacy palette but with a few mid-tones
documented in the task report.
Did not: extract the eyebrow into a separate component (it is a
two-property chip, not a reusable element); introduce client: directives.
Static markup-only component for the review desk's left-column listbox.
Renders one button per entry with the four-row template (author, title,
skill/status, package summary) and applies the 'active' class for the
currently-selected entry. Click handling and URL sync are task 16.
Preserves every CSS hook asserted by scripts/verify.mjs:
#skill-list, .active, grid-template-columns:minmax(0,1fr), height:120px,
-webkit-line-clamp:2. Visual fidelity gaps (panel surface tints) listed
in the task report.
Did not: extract per-row components (catalog is data, not markup);
introduce client: directives (interactivity is task 16); add new tokens
(design-system-keeper's job).
Same gate-evasion class as CodeBlock/Eyebrow: check-tokens.mjs matches
`font-size: Npx` only, so raw clamp() values pass. All three are verbatim
from styles.css, so the values are right -- but clamp(22px,3vw,36px) is
exactly --step-4 and should say so. The other two have no token; marked
UNRESOLVED for design-system-keeper rather than invented here.
CodeBlock declared `font: 12px/1.75 'DM Mono', monospace` and Eyebrow
`font: 600 var(--step-0) ...`, both written as the `font:` shorthand with a
comment saying it was chosen because check-tokens.mjs only matches
`font-size: Npx`.
CodeBlock's rule was also fabricated: `.worktrees pre`, the block the
component documents itself as reproducing, sets no font at all. Dropped it.
Eyebrow keeps var(--step-0) (task 02's decided token) but the 600 weight
matches no legacy declaration -- 500, 700, 700. Marked UNRESOLVED for the
font decision.
Move all 24 review entries from skills-review/catalog.js +
skills-review/submitted-catalog.js into a typed Astro content collection at
src/content/reviews/. Each entry is a Markdown file with frontmatter for the
review metadata (id, author, focus, wins, improve, extras, name, description)
and a body that holds the 'improved' SKILL.md content.
Re-point scripts/build-skill-review.mjs at the new collection. The generator
reads each .md file, parses its YAML frontmatter, and writes
skill-reviews/improved/{id}/SKILL.md in the same shape the legacy catalog
produced — verified byte-identical via 'git diff --exit-code skill-reviews/'.
The 'name' field is preserved separately from 'id' because two entries
renamed the skill during review (id angular-accessibility-root → name
angular-accessibility; id confectionary-skill-hub → name confectionery-orders).
Without it the generator output would drift on those two files.
Does not yet delete skills-review/catalog.js or submitted-catalog.js —
verify.mjs and the legacy review-desk page both still read them, so they
stay as a mirror until task 16 rewires the page to the collection. Adding a
new submission today requires editing both the .md file (new source of
truth) and the legacy catalog.js (until task 16).
Done-when:
- 24 entries under src/content/reviews/ ✓
- verify.mjs's id:' count assertion still passes ✓
- git diff --exit-code skill-reviews/ clean after regenerating ✓
- astro check passes (22 files: 0 errors, 0 warnings, 2 hints) ✓
Co-Authored-By: Claude Code <noreply@anthropic.com>
Migrate the bilingual copy in app.js (phases, handsOnPrompts, modelGuide,
skillSources, skillInstallPrompts) into per-collection data files under
src/content/, one folder per collection: phases/, providers/, efforts/,
skillSources/, handsOnPrompts/, skillInstallPrompts/. Strings copied
mechanically; the diff between the canonical extract-strings.mjs over a
flattened baseline of these guide blocks and the same extractor over the
new content directory is empty (56 strings total, 28 en + 28 pt).
efforts, handsOnPrompts, and skillInstallPrompts previously held arrays
of strings joined at runtime with .join('\n'); the new schema stores
them as plain strings, so canonical extract-strings.mjs cannot reach them
in their source shape. Verified byte-identical with /tmp/verify-nested.mjs
and /tmp/verify-install.mjs: every english/portuguese string in source
matches the migrated value, char-for-char.
What I did not do:
- delete the matching literals from app.js — task 15 removes them once
the page consumes the collection
- touch config.ts — the schema for these collections was set up in task 04
- move catalog.js, submitted-catalog.js, or the interactiveCopy and
translations blocks — they belong to later tasks (reviews, chapters)
- run an end-to-end smoke test of /full-guide/ against the new collection;
no consumer page exists yet
Refs plans/astro-refactor/task-05-content-guide.md.
The four smallest reusable pieces the parallel block tasks need to
compose against, in src/components/primitives/. Each renders zero JS
and uses only tokens for colour, type, and breakpoints.
Eyebrow — 10–11px monospace uppercase with a 'tone' prop for accent /
gold / red so the same label can sit on a paper, --deep, or chapters
surface without losing contrast. The guide surface uses 'accent', the
.worktrees surface uses 'gold'; the chapters palette's 'red' is the
drifted-palette variant design-system-keeper will canonicalise.
Rule — the gold-top-border section divider. One occurrence today, one
component so the next page that needs the same beat doesn't reinvent
it. Body slot expects <strong> for the clamp(24px, 3.3vw, 42px) emphasis.
Callout — gold-background emphasis block. 'label' variant (default)
matches .callout (150px label + body); 'split' variant matches the
full-guide .thesis (2 equal columns, aside slot for the signal
visualisation). Both share the gold bg + Eyebrow label + strong body.
CodeBlock — <pre> on --ink with gold text. The canonical 'code on dark'
surface used across the guide. 'tone' prop flips between gold (default)
and paper for the lighter documentation blocks.
All four fold in the existing 800px breakpoint that .rule and .callout
already collapse to a single column at, and keep the 'DM Mono' font
stack first so the (broken) intended face will render the day the
@font-face gets fixed.
Did not touch: tokens.css (design-system-keeper), verify.mjs
(verification-engineer), astro.config.mjs (astro-architect), any page,
or any existing CSS file.
- Created `src/styles/tokens.css` establishing the canonical 10-color palette, 5 designated breakpoints, and the 6-step typography scale.
- Created `src/styles/base.css` to import the root variables for Astro components.
- Wrote down decisions regarding the `--blue` palette canonicalization and the font stack simplification in the task brief.
- These tokens will power the Astro component refactors in parallel tasks.
Add src/content/config.ts with strict { en, pt } schema and eight
typed collections matching the shapes in app.js and
skills-review/catalog.js: phases, providers, efforts, skillSources,
handsOnPrompts, skillInstallPrompts, chapters, reviews.
Both locales are required on every localized field. A deliberately
missing pt fails the build with InvalidContentEntryDataError, proved
with a probe entry and reverted. Silent English fallback is what turns
a bilingual site monolingual; the schema must not allow it.
Did not move any content yet. Tasks 05 and 06 fill the entries
against the shape defined here, in parallel.
Also records the language-switching decision in the task brief:
client-side swap, both locales in the payload, html lang tracks the
active language. Behaviour parity, schema fit, and tiny payload
size beat the SEO upside of route-based i18n for this site.
astro check: 0 errors, 0 warnings. npm run verify: green. No
assertion count change.
Co-Authored-By: Claude Code <noreply@anthropic.com>
Marcos Paulo