Marcos Paulo
103 lines
8.8 KiB
HTML
103 lines
8.8 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<meta name="description" content="A concise case study of agent skills, CLI ratchets, Husky hooks, and PR review in netcracker/interview." />
|
|
<title>Rules That Survive the Prompt — AI For Dummies</title>
|
|
<link rel="stylesheet" href="styles.css" />
|
|
</head>
|
|
<body>
|
|
<div class="progress" aria-hidden="true"><span></span></div>
|
|
<header class="topbar">
|
|
<a class="back" href="../"><b>A</b><span data-copy="back">field guide</span></a>
|
|
<nav aria-label="Page sections"><a href="#pipeline" data-copy="navPipeline">Pipeline</a><a href="#skills">Skills</a><a href="#examples" data-copy="navExamples">Examples</a></nav>
|
|
<div class="languages" aria-label="Language"><button class="active" data-lang="en" aria-pressed="true">EN</button><span>/</span><button data-lang="pt" aria-pressed="false">PT</button></div>
|
|
</header>
|
|
|
|
<main>
|
|
<section class="hero">
|
|
<p class="eyebrow" data-copy="heroEyebrow">A real repository case study</p>
|
|
<h1 data-copy="heroTitle">Rules that<br />survive the <em>prompt.</em></h1>
|
|
<div class="hero-foot">
|
|
<p data-copy="heroText">Prompts ask for behavior. Repositories preserve it. The interview project combines written context, reusable skills, executable checks, commit hooks, and independent review so the rule is still present when the conversation is gone.</p>
|
|
<aside><span>CASE / NETCRACKER</span><strong>interview</strong><small data-copy="heroAside">8 skills · 3 agents · 4 enforcement layers</small></aside>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="thesis">
|
|
<span data-copy="thesisLabel">THE SHORT VERSION</span>
|
|
<strong data-copy="thesis">A prompt is advice for one run. A repository rule is reusable context plus an executable boundary.</strong>
|
|
</section>
|
|
|
|
<section class="pipeline-section" id="pipeline">
|
|
<div class="section-label"><span data-copy="pipelineLabel">Enforcement pipeline</span><span data-copy="pipelineMeta">select a checkpoint</span></div>
|
|
<div class="intro"><div><p class="eyebrow" data-copy="pipelineEyebrow">From intent to evidence</p><h2 data-copy="pipelineTitle">Five places<br />a rule can <em>hold.</em></h2></div><p data-copy="pipelineText">Not every rule belongs in a hook. Put guidance where an agent can discover it, deterministic policy in a command, cheap checks at commit time, and independent judgment at review.</p></div>
|
|
<div class="pipeline" role="tablist" aria-label="Rule enforcement stages">
|
|
<button class="active" data-stage="context" role="tab" aria-selected="true"><span>01</span><strong data-copy="stageContext">CONTEXT</strong><small>AGENTS.md</small></button>
|
|
<i>→</i><button data-stage="skills" role="tab" aria-selected="false"><span>02</span><strong>SKILLS</strong><small>.agents/skills</small></button>
|
|
<i>→</i><button data-stage="cli" role="tab" aria-selected="false"><span>03</span><strong>CLI</strong><small>check:ui</small></button>
|
|
<i>→</i><button data-stage="commit" role="tab" aria-selected="false"><span>04</span><strong>COMMIT</strong><small>Husky</small></button>
|
|
<i>→</i><button data-stage="review" role="tab" aria-selected="false"><span>05</span><strong data-copy="stageReview">REVIEW</strong><small>pragent</small></button>
|
|
</div>
|
|
<article class="stage-detail" id="stage-detail" aria-live="polite"></article>
|
|
</section>
|
|
|
|
<section class="skill-section" id="skills">
|
|
<div class="section-label"><span data-copy="skillsLabel">Project-local skills</span><span data-copy="skillsMeta">procedures born from repeated friction</span></div>
|
|
<div class="intro"><div><p class="eyebrow" data-copy="skillsEyebrow">Small instruction packages</p><h2 data-copy="skillsTitle">Teach the trap.<br />Name the <em>trigger.</em></h2></div><p data-copy="skillsText">These skills are not downloaded magic. They are repository-specific procedures under <code>.agents/skills/</code>, distilled from mistakes, commands, and architectural decisions that kept recurring.</p></div>
|
|
<div class="skill-console">
|
|
<div class="skill-list" role="tablist" aria-label="Repository skills">
|
|
<button class="active" data-skill="gate" role="tab" aria-selected="true"><strong>gate-discipline</strong><small data-copy="skillGate">prove green is real</small></button>
|
|
<button data-skill="parallel" role="tab" aria-selected="false"><strong>parallel-agents</strong><small data-copy="skillParallel">worktree per task</small></button>
|
|
<button data-skill="repo" role="tab" aria-selected="false"><strong>repo-db</strong><small data-copy="skillRepo">query before crawling</small></button>
|
|
<button data-skill="debt" role="tab" aria-selected="false"><strong>tech-debt</strong><small data-copy="skillDebt">separate line of work</small></button>
|
|
<button data-skill="writer" role="tab" aria-selected="false"><strong>skill-writer</strong><small data-copy="skillWriter">repeat twice, encode once</small></button>
|
|
<button data-skill="area" role="tab" aria-selected="false"><strong>frontend / go-api</strong><small data-copy="skillArea">stack-specific traps</small></button>
|
|
</div>
|
|
<article class="skill-detail" id="skill-detail" aria-live="polite"></article>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="examples" id="examples">
|
|
<div class="section-label"><span data-copy="examplesLabel">Concrete examples</span><span data-copy="examplesMeta">open the source, then adapt</span></div>
|
|
<div class="example-grid">
|
|
<article><span data-copy="ratchetLabel">CLI RATCHET</span><h3 data-copy="ratchetTitle">Debt may go down.<br />Never silently up.</h3><pre><code>pnpm check:ui
|
|
# raw buttons
|
|
# swallowed catches
|
|
# pages without h1
|
|
# hardcoded colours</code></pre><a data-copy="readChecker" data-source="ratchet" href="https://git.marcospaulo.dev.br/netcracker/interview/src/branch/main/scripts/check-ui-contract.mjs">Read the checker →</a></article>
|
|
<article><span>HUSKY / PRE-COMMIT</span><h3 data-copy="hookTitle">Fast checks before history.</h3><pre><code>pnpm exec lint-staged
|
|
node scripts/check-ui-contract.mjs</code></pre><a data-copy="readHook" data-source="hooks" href="https://git.marcospaulo.dev.br/netcracker/interview/src/branch/main/.husky/pre-commit">Read the hook →</a></article>
|
|
<article><span data-copy="commitLabel">COMMIT MESSAGE</span><h3 data-copy="commitTitle">Intent has a grammar.</h3><pre><code>pnpm exec commitlint --edit $1
|
|
|
|
feat: add interview timer
|
|
fix(api): scope session query</code></pre><a data-copy="readCommit" data-source="commit" href="https://git.marcospaulo.dev.br/netcracker/interview/src/branch/main/commitlint.config.cjs">Read commitlint config →</a></article>
|
|
<article><span data-copy="reviewLabel">INDEPENDENT REVIEW</span><h3 data-copy="reviewTitle">A second reader checks intent.</h3><pre><code>.pr-review.json
|
|
├── focus
|
|
├── exclude_paths
|
|
├── languages
|
|
└── instructions</code></pre><a data-copy="readReview" data-source="review" href="https://git.marcospaulo.dev.br/netcracker/interview/src/branch/main/.pr-review.json">Read review policy →</a></article>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="copy-lab">
|
|
<div><span data-copy="copyLabel">COPY / ADAPT</span><h2 data-copy="copyTitle">Ask your agent to map the enforcement stack.</h2><p data-copy="copyText">Use this in the interview repository or adapt the path names to another project.</p></div>
|
|
<article><button data-copy-prompt><span data-copy="copyButton">COPY PROMPT</span><b>↗</b></button><pre><code id="explore-prompt"></code></pre><p id="copy-status" role="status" aria-live="polite"></p></article>
|
|
</section>
|
|
|
|
<section class="deeper">
|
|
<div><span data-copy="deeperLabel">GO DEEPER</span><strong data-copy="deeperTitle">Read the implementation, not just this summary.</strong></div>
|
|
<nav>
|
|
<a href="https://git.marcospaulo.dev.br/netcracker/interview/src/branch/main/AGENTS.md"><span>01</span><b data-copy="deepContext">Repository context</b><small>AGENTS.md</small></a>
|
|
<a href="https://git.marcospaulo.dev.br/netcracker/interview/src/branch/main/.agents/skills"><span>02</span><b data-copy="deepSkills">Skill catalog</b><small>.agents/skills/</small></a>
|
|
<a href="../skills/"><span>03</span><b>Design skills</b><small>skills/</small></a>
|
|
<a href="https://git.marcospaulo.dev.br/netcracker/interview/src/branch/main/.claude/agents"><span>03</span><b data-copy="deepAgents">Specialist agents</b><small>.claude/agents/</small></a>
|
|
<a href="https://git.marcospaulo.dev.br/netcracker/interview/src/branch/main/.lintstagedrc.cjs"><span>04</span><b data-copy="deepPolicy">Staged-file policy</b><small>.lintstagedrc.cjs</small></a>
|
|
</nav>
|
|
</section>
|
|
</main>
|
|
<script src="app.js" defer></script>
|
|
</body>
|
|
</html>
|