Marcos Paulo 4acdd1e571 feat: add primitives Eyebrow, Rule, Callout, CodeBlock
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.
2026-09-05 06:06:56 +00:00
2026-09-05 04:29:42 +00:00
2026-09-05 04:29:42 +00:00
2026-09-05 04:29:42 +00:00
2026-09-05 04:29:42 +00:00
2026-09-05 04:29:42 +00:00
2026-09-05 04:29:42 +00:00

AI For Dummies

A lightweight, presentation-style field guide to AI-assisted engineering.

It explains how to combine a strong planning/review model with faster workers, reusable skills, subagent handoffs, Git worktrees, and explicit verification. An interactive field kit compares common behavior skills such as ponytail-lite, caveman, unlazy, research, debugging, and review. The skill-forge workflow covers discovery, triggers, package anatomy, progressive instructions, structural validation, and behavioral iteration. The hands-on lab provides a tiny starter project and copy-ready baseline and skill-enabled prompts for a short side-by-side exercise. An interactive model gearbox separates capability tier from reasoning effort across OpenAI, Claude, and Gemini, and every featured skill links to a pinned source with an approval-first installation prompt.

Run locally

This is a dependency-free static site:

python3 -m http.server 4173

Then open http://localhost:4173.

Verify the content and interaction contracts with:

pnpm run verify

Project structure

  • index.html — default route map and focused chapter navigation
  • full-guide/ — the complete bilingual presentation, with responsive audit overrides
  • styles.css / app.js — editorial visual system and bilingual field-guide interactions
  • responsive.css — interactive diagrams and Full HD-to-4K adaptations
  • docs/references/ — bundled research sources and notes
  • docs/operations-guide.md — canonical SilverBullet operations and skills guide
  • hands-on/starter/ — dependency-free Tiny Tasks exercise
  • hands-on/rules/ — dependency-free Guardrails lab; toggles rule sources into the prompt
  • rules/ — bilingual case study of skills, CLI ratchets, Husky, and PR review
  • skills/ — reusable design and rules-case-study skills, plus an interactive package anatomy explorer
  • skills-review/ — static review desk for submitted skills; its reader vote widget calls the separate vote-service
  • vote-service/ — small Go API + Kubernetes manifests backing the skills-review vote widget (see vote-service/README.md)
  • GATES.md — acceptance ledger for the project

Publishing

The Gitea instance has a Pages Server configured to publish a repositorys pages branch under pages.marcospaulo.dev.br. The intended site address is:

https://netcracker.pages.marcospaulo.dev.br/ai-for-dummies/

If the URL is not available yet, verify that the pages branch exists and that the repositorys pages branch exists. Gitea itself does not provide a built-in Pages server; this setup uses the instances separate Pages Server and Actions deployment path.

For the complete authoring, verification, publication, rollback, worktree, and skill workflow, see docs/operations-guide.md.

Reader voting on the skills-review desk

skills-review/ is static, so its "which draft would you ship?" vote widget calls a separate stateful service — vote-service/, a small Go API on its own pod, one vote per visitor enforced server-side by IP (a MAC address is never visible to a server across the internet, so it cannot be used). See vote-service/README.md for the API, the anti-abuse design, and the build/push/deploy steps; skills-review/index.html sets window.SKILLS_REVIEW_VOTE_API to point at it once deployed.

Research

See docs/references/README.md for official Claude, Codex, and Git documentation. The additional reading path bundles 12 verified articles and guides, including Medium and practitioner sources. See model routing for current provider controls and verified skill sources for commit-pinned provenance.

Rules and enforcement case study

Open /rules/ for a concise walkthrough grounded in the netcracker/interview repository. It shows how AGENTS.md, project-local skills, machine-readable repo ledgers, a UI contract ratchet, lint-staged, Husky, commitlint, specialist verifier agents, and PR review reinforce one another. Every example links to its source file in Gitea, and the page includes a copy-ready prompt for mapping the same layers in another repository.

The implementation patterns are also packaged as project-local skills in skills/. Use editorial-playbook when adding chapters or sections, and rules-case-study when turning repository controls into a source-linked teaching page.

S
Description
A lightweight field guide to AI-assisted engineering workflows
Readme 13 MiB
Languages
Astro 41.9%
JavaScript 20.8%
Python 14.8%
Shell 11%
HTML 7.4%
Other 4%