feat: make route map the interactive landing page

This commit is contained in:
Marcos Paulo
2026-09-04 04:18:15 +00:00
parent 94f3491d7a
commit aa85864868
15 changed files with 203 additions and 65 deletions
+33 -1
View File
@@ -1 +1,33 @@
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>AI For Dummies — Skills</title><link rel="stylesheet" href="../chapters.css"></head><body><main><header class="top"><a href="../summary/">← ROUTE MAP</a><span>03 / SKILLS</span><a href="../skills-review/">review desk ↗</a></header><section class="hero"><p class="eyebrow">Reusable judgment</p><h1>Teach the<br><em>decision.</em></h1><p>A skill changes behavior. Keep the trigger precise, put the workflow in <code>SKILL.md</code>, and move conditional facts, scripts, and examples into focused files.</p></section><section class="pipeline"><div><p class="eyebrow">Package anatomy</p><h2>One job.<br>More than<br>one <em>file.</em></h2></div><div class="panel"><strong>REVIEW-UI / SKILL PACKAGE</strong><code>├── SKILL.md → trigger + workflow · ├── references/ → conditional facts · ├── scripts/ → deterministic checks · └── assets/ → templates + examples</code></div></section><section class="practice"><div><p class="eyebrow">Create a skill</p><h2>Observe →<br>trigger →<br>validate</h2></div><div class="steps"><article><b>01</b><div><strong>Observe friction</strong><span>Find a repeated decision or failure.</span></div></article><article><b>02</b><div><strong>Define the trigger</strong><span>Say when it should load and when it should stay out.</span></div></article><article><b>03</b><div><strong>Choose anatomy</strong><span>Use references for facts and scripts for deterministic mechanics.</span></div></article><article><b>04</b><div><strong>Evaluate behavior</strong><span>Test realistic prompts, edge cases, safety, and evidence.</span></div></article></div></section><nav class="links"><a href="../agents/">Agents & trees →</a><a href="../rules/">Rules case study →</a><a href="../skills-review/">Review submitted skills →</a></nav></main></body></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 practical guide to creating compact, reusable AI coding skills.">
<title>AI For Dummies — Skills</title>
<link rel="stylesheet" href="../chapters.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main>
<header class="top"><a href="../summary/">← ROUTE MAP</a><span>03 / SKILLS</span><a href="../skills-review/">review desk ↗</a></header>
<section class="hero"><p class="eyebrow">Reusable judgment</p><h1>Teach the<br><em>decision.</em></h1><p>A skill changes behavior. Keep the trigger precise, put the workflow in <code>SKILL.md</code>, and move conditional facts, scripts, and examples into focused files.</p></section>
<section class="pipeline package-anatomy">
<div><p class="eyebrow">Package anatomy</p><h2>One job.<br>More than<br>one <em>file.</em></h2><p class="package-hint">Choose a file to see why it belongs in the package.</p></div>
<div class="package-workbench" data-package-workbench>
<div class="package-tree" role="tablist" aria-label="Files in the review-ui skill package">
<p>REVIEW-UI / SKILL PACKAGE</p>
<button class="active" data-package-file="skill" role="tab" aria-selected="true"><code>├── SKILL.md</code><small>trigger + workflow</small></button>
<button data-package-file="references" role="tab" aria-selected="false"><code>├── references/</code><small>conditional facts</small></button>
<button data-package-file="scripts" role="tab" aria-selected="false"><code>├── scripts/</code><small>deterministic checks</small></button>
<button data-package-file="assets" role="tab" aria-selected="false"><code>└── assets/</code><small>templates + examples</small></button>
</div>
<article class="package-preview" id="package-preview" aria-live="polite"></article>
</div>
</section>
<section class="practice"><div><p class="eyebrow">Create a skill</p><h2>Observe →<br>trigger →<br>validate</h2></div><div class="steps"><article><b>01</b><div><strong>Observe friction</strong><span>Find a repeated decision or failure.</span></div></article><article><b>02</b><div><strong>Define the trigger</strong><span>Say when it should load and when it should stay out.</span></div></article><article><b>03</b><div><strong>Choose anatomy</strong><span>Use references for facts and scripts for deterministic mechanics.</span></div></article><article><b>04</b><div><strong>Evaluate behavior</strong><span>Test realistic prompts, edge cases, safety, and evidence.</span></div></article></div></section>
<nav class="links"><a href="../agents/">Agents & trees →</a><a href="../rules/">Rules case study →</a><a href="../skills-review/">Review submitted skills →</a><a href="../full-guide/#create-skill">Full guide: skill forge →</a></nav>
</main>
<script src="app.js" defer></script>
</body>
</html>