Marcos Paulo
48c31dc1b3
Ten git worktrees each carried their own 225 MB node_modules (1.1 GB across five) and paid 11s per `npm ci`. pnpm hardlinks from a shared store: the same five worktrees cost ~250 MB total, and a fresh install is 4s. What changed beyond the mechanical rename: - `overrides` moved to `pnpm-workspace.yaml`. pnpm 11 does not read the `pnpm` field in package.json *or* npm's top-level `overrides`, and it fails silently — the vite/defu/language-server pins would have quietly stopped applying. - Build scripts are blocked by default in pnpm; esbuild and sharp are allowed explicitly via `allowBuilds` (renamed from `onlyBuiltDependencies` in 11). - `packageManager` + `engines` pin the toolchain. - gate.sh rejects a package-lock.json/yarn.lock/bun.lock outright, so an agent running `npm install` out of habit fails loudly instead of building a second, divergent dependency tree. - CI bootstraps pnpm with `npm install --global pnpm@11.25.0` rather than corepack (unbundled as of Node 25) or pnpm/action-setup (this self-hosted act-runner has never run a job; fetching a third-party action is not something to discover on the first one). Two pre-existing CI bugs fixed while in the file: - the gate installed with `npm install --package-lock=false`, which discarded the lockfile the previous session had just fixed. - the visual-regression step imported `playwright`, which is not a dependency, and `visual-regression.mjs` has no compare mode anyway — in CI it overwrote its own baselines and passed unconditionally. Removed with a comment; it comes back when it can diff. The `publish` job is now manual (`workflow_dispatch`). During the migration dist/ holds three HTML files against the live pages branch's ten, so publishing on every push to main would take the site down to a stub. Restore at task 20. HANDOVER.md's incident log still says npm where it describes what happened at the time; that is history, not a missed rename. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
82 lines
2.1 KiB
Markdown
82 lines
2.1 KiB
Markdown
---
|
|
name: astro-component
|
|
description:
|
|
Build one Astro component for the ai-for-dummies site from the project
|
|
templates. Use when creating a primitive, block, or island, or when splitting
|
|
existing markup into a component.
|
|
---
|
|
|
|
# Building an Astro component
|
|
|
|
## Decide it should exist
|
|
|
|
Three occurrences, or a name a person says out loud. Two is not enough — see
|
|
[`../../rules/componentization.md`](../../rules/componentization.md).
|
|
|
|
Then place it:
|
|
|
|
- `primitives/` — no domain knowledge (Eyebrow, Rule, Callout, CodeBlock)
|
|
- `blocks/` — composed, page-agnostic, takes props (RouteCard, PhasePanel)
|
|
- `islands/` — interactive, justified, a leaf
|
|
|
|
## Start from a template
|
|
|
|
```bash
|
|
cp .agents/templates/components/static-block.astro src/components/blocks/RouteCard.astro
|
|
# interactive? use island.astro instead
|
|
```
|
|
|
|
Templates exist so ten parallel agents produce one house style. Do not start
|
|
from a blank file.
|
|
|
|
## Write it
|
|
|
|
```astro
|
|
---
|
|
interface Props {
|
|
number: string;
|
|
title: string;
|
|
summary: string;
|
|
href: string;
|
|
}
|
|
const { number, title, summary, href } = Astro.props;
|
|
---
|
|
|
|
<article class="card">
|
|
<b>{number}</b>
|
|
<h2>{title}</h2>
|
|
<p>{summary}</p>
|
|
<a href={href}>Open chapter →</a>
|
|
</article>
|
|
|
|
<style>
|
|
.card {
|
|
display: grid;
|
|
gap: 10px;
|
|
padding: 22px;
|
|
background: var(--paper);
|
|
}
|
|
b {
|
|
color: var(--accent);
|
|
font: var(--font-eyebrow);
|
|
}
|
|
</style>
|
|
```
|
|
|
|
Rules that bite most often here:
|
|
|
|
- **No raw hex.** Tokens only. `check-tokens.mjs` will fail you.
|
|
- **No `client:*`** unless it is genuinely interactive, and say why in the PR.
|
|
- Keep the `gap:1px` over a coloured parent trick where the original used it —
|
|
it is the house style, not a bug.
|
|
- Preserve every ARIA attribute from the markup you are replacing.
|
|
|
|
## Prove it
|
|
|
|
1. Render it at 560 / 800 / 1100 / 1600 px.
|
|
2. Tab to it. Focus ring visible (`outline: 3px solid #a7483f`).
|
|
3. Diff its rendered text against the markup it replaced.
|
|
4. Run
|
|
[`../../checklists/before-component.md`](../../checklists/before-component.md).
|
|
5. `pnpm run verify` — green, with no assertion deleted.
|