Marcos Paulo
2cda37b553
Built from main 79920c9e6c
feat: give the chapters motion, diagrams, and retrieval practice
66 lines
12 KiB
HTML
66 lines
12 KiB
HTML
<!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><meta name="description" content="A skill changes behavior. Keep the trigger precise, put the workflow in SKILL.md, and move conditional facts, scripts, and examples into focused files."><link rel="stylesheet" href="/ai-for-dummies/_astro/tokens.BxNFvepo.css"><link rel="stylesheet" href="/ai-for-dummies/fonts/fonts.css"><link rel="stylesheet" href="/ai-for-dummies/_astro/base.BX9jSTkZ.css"><link rel="stylesheet" href="/ai-for-dummies/_astro/chapters.BPlnnXOa.css"><link rel="stylesheet" href="/ai-for-dummies/_astro/motion.DuPi8tKA.css"><link rel="stylesheet" href="/ai-for-dummies/_astro/skills.CRdDXdLp.css">
|
|
<link rel="stylesheet" href="/ai-for-dummies/_astro/ChapterHero.DU6N_2z3.css">
|
|
<link rel="stylesheet" href="/ai-for-dummies/_astro/skills.ISd55bu-.css">
|
|
<link rel="stylesheet" href="/ai-for-dummies/_astro/StepFlow.D8D5Or_Q.css"></head> <body> <header class="top" id="top" data-astro-cid-xattfbdu> <div class="cell" data-astro-cid-xattfbdu><a href="/ai-for-dummies/summary/" data-astro-cid-xahix5fp>← ROUTE MAP</a></div> <div class="cell" data-astro-cid-xattfbdu><span data-astro-cid-xahix5fp>03 / SKILLS</span></div> <div class="cell" data-astro-cid-xattfbdu><a href="/ai-for-dummies/skills-review/" data-astro-cid-xahix5fp>review desk ↗</a></div> </header> <main> <section class="hero rise-in" data-astro-cid-7xzskqga> <p data-astro-cid-4yr5atew="true" class="eyebrow tone-red">Reusable judgment</p> <h1 class="parallax-near" data-astro-cid-7xzskqga><span data-astro-cid-xahix5fp>Teach the<br><em>decision.</em></span></h1> <div class="intro parallax-far" data-astro-cid-7xzskqga> <p data-astro-cid-xahix5fp>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> </div> </section> <section class="pipeline package-anatomy reveal" data-astro-cid-xahix5fp> <div class="depth-slow" data-astro-cid-xahix5fp> <p class="eyebrow" data-astro-cid-xahix5fp>Package anatomy</p> <h2 data-astro-cid-xahix5fp>One job.<br>More than<br>one <em>file.</em></h2> <p class="package-hint" data-astro-cid-xahix5fp>Choose a file to see why it belongs in the package.</p> <svg class="draw-line" viewBox="0 0 150 150" aria-hidden="true" focusable="false" style="--draw-height: 150px" data-astro-cid-n6ozym62> <path d="M 0.5 0 V 117.5 Q 0.5 149.5 33 149.5 H 150" pathLength="100" data-astro-cid-n6ozym62></path> </svg> </div> <div class="depth-fast" data-astro-cid-xahix5fp> <div class="package-workbench" data-package-workbench data-astro-cid-xk5n4466> <div class="package-tree" role="tablist" aria-label="Files in the review-ui skill package" data-astro-cid-xk5n4466> <p data-astro-cid-xk5n4466>REVIEW-UI / SKILL PACKAGE</p> <button class="active" data-skill-file="skill" role="tab" aria-selected="true" data-astro-cid-xk5n4466> <code data-astro-cid-xk5n4466>├── SKILL.md</code> <small data-astro-cid-xk5n4466>trigger + workflow</small> </button><button data-skill-file="references" role="tab" aria-selected="false" data-astro-cid-xk5n4466> <code data-astro-cid-xk5n4466>├── references/</code> <small data-astro-cid-xk5n4466>conditional facts</small> </button><button data-skill-file="scripts" role="tab" aria-selected="false" data-astro-cid-xk5n4466> <code data-astro-cid-xk5n4466>├── scripts/</code> <small data-astro-cid-xk5n4466>deterministic checks</small> </button><button data-skill-file="assets" role="tab" aria-selected="false" data-astro-cid-xk5n4466> <code data-astro-cid-xk5n4466>└── assets/</code> <small data-astro-cid-xk5n4466>templates + examples</small> </button> </div> <article class="package-preview" id="package-preview" aria-live="polite" data-astro-cid-xk5n4466></article> </div> <script type="application/json" data-skill-files>[{"id":"skill","prefix":"├── ","label":"SKILL.md","caption":"trigger + workflow","title":"The operating contract","body":"The one file that should always be loaded. Define the exact trigger, the ordered workflow, safety limits, and the evidence the agent returns.","code":"---\nname: review-ui\ndescription: Review a changed UI for focus, reflow, and motion.\n---\n\n1. Inspect the changed interaction.\n2. Run the UI checks.\n3. Return findings with evidence."},{"id":"references","prefix":"├── ","label":"references/","caption":"conditional facts","title":"Facts, only when needed","body":"Keep conditional detail out of the main instruction. A dialog pattern, framework caveat, or accessibility checklist belongs here when it is not needed for every review.","code":"references/\n└── accessibility.md\n ├── keyboard interaction patterns\n └── focus and reflow checklist"},{"id":"scripts","prefix":"├── ","label":"scripts/","caption":"deterministic checks","title":"Mechanics that should not depend on memory","body":"Turn deterministic checks into runnable tools. The agent still judges the result, but it should not have to recreate a viewport test or filename rule by hand.","code":"scripts/\n└── check-reflow.mjs\n └── checks 320px, 1280px, and 4K widths"},{"id":"assets","prefix":"└── ","label":"assets/","caption":"templates + examples","title":"Starting material, not hidden instructions","body":"Use assets for templates and examples a person or agent can copy. Keep them clearly named so package readers can choose the right starting point.","code":"assets/\n├── review-report.md\n└── focus-test-fixture.html"}]</script> <script>
|
|
(function () {
|
|
const preview = document.querySelector('#package-preview');
|
|
const buttons = document.querySelectorAll('[data-skill-file]');
|
|
const dataNode = document.querySelector('[data-skill-files]');
|
|
const tree = document.querySelector('[data-package-workbench] .package-tree');
|
|
if (!preview || !dataNode) return;
|
|
const files = JSON.parse(dataNode.textContent || '[]');
|
|
|
|
// Position the gold selection bar over the active button. The bar is a
|
|
// 1px-tall pseudo-element on the tree, moved and stretched by transform
|
|
// alone, so the slide composites — animating its `top`/`height` would
|
|
// force layout on every frame. Measured rather than computed from the
|
|
// index: the buttons are not all the same height once a long filename
|
|
// wraps.
|
|
function placeIndicator() {
|
|
const active = tree && tree.querySelector('.active');
|
|
if (!active) return;
|
|
tree.style.setProperty('--tab-x', active.offsetLeft + 'px');
|
|
tree.style.setProperty('--tab-y', active.offsetTop + 'px');
|
|
tree.style.setProperty('--tab-h', String(active.offsetHeight));
|
|
}
|
|
|
|
function renderPackage(id) {
|
|
const item = files.find((entry) => entry.id === id);
|
|
if (!item) return;
|
|
preview.classList.remove('is-swapping');
|
|
void preview.offsetWidth;
|
|
preview.classList.add('is-swapping');
|
|
preview.innerHTML =
|
|
'<span>SELECTED / ' +
|
|
item.label +
|
|
'</span>' +
|
|
'<h3>' +
|
|
item.title +
|
|
'</h3>' +
|
|
'<p>' +
|
|
item.body +
|
|
'</p>' +
|
|
'<pre><code>' +
|
|
item.code +
|
|
'</code></pre>';
|
|
buttons.forEach(function (button) {
|
|
const active = button.dataset.skillFile === id;
|
|
button.classList.toggle('active', active);
|
|
button.setAttribute('aria-selected', String(active));
|
|
});
|
|
placeIndicator();
|
|
}
|
|
|
|
buttons.forEach(function (button) {
|
|
button.addEventListener('click', function () {
|
|
renderPackage(button.dataset.skillFile);
|
|
});
|
|
});
|
|
|
|
// Button heights change at the two breakpoints below (the caption is
|
|
// dropped, the padding shrinks), which moves every offset under the bar.
|
|
window.addEventListener('resize', placeIndicator);
|
|
|
|
renderPackage('skill');
|
|
})();
|
|
</script> </div> </section> <section class="practice reveal" data-astro-cid-xahix5fp> <div class="depth-slow" data-astro-cid-xahix5fp> <p class="eyebrow" data-astro-cid-xahix5fp>Create a skill</p> <h2 data-astro-cid-xahix5fp>Observe →<br>trigger →<br>validate</h2> <svg class="draw-line" viewBox="0 0 4 110" aria-hidden="true" focusable="false" style="--draw-height: 110px" data-astro-cid-n6ozym62> <path d="M 0.5 0 V 110" pathLength="100" data-astro-cid-n6ozym62></path> </svg> </div> <ol class="flow depth-fast" data-astro-cid-ld3fmquo> <li data-astro-cid-ld3fmquo> <article data-astro-cid-ld3fmquo> <b data-astro-cid-ld3fmquo>01</b> <div data-astro-cid-ld3fmquo> <strong data-astro-cid-ld3fmquo>Observe friction</strong> <span data-astro-cid-ld3fmquo>Find a repeated decision or failure.</span> </div> </article> </li><li data-astro-cid-ld3fmquo> <article data-astro-cid-ld3fmquo> <b data-astro-cid-ld3fmquo>02</b> <div data-astro-cid-ld3fmquo> <strong data-astro-cid-ld3fmquo>Define the trigger</strong> <span data-astro-cid-ld3fmquo>Say when it should load and when it should stay out.</span> </div> </article> </li><li data-astro-cid-ld3fmquo> <article data-astro-cid-ld3fmquo> <b data-astro-cid-ld3fmquo>03</b> <div data-astro-cid-ld3fmquo> <strong data-astro-cid-ld3fmquo>Choose anatomy</strong> <span data-astro-cid-ld3fmquo>Use references for facts and scripts for deterministic mechanics.</span> </div> </article> </li><li data-astro-cid-ld3fmquo> <article data-astro-cid-ld3fmquo> <b data-astro-cid-ld3fmquo>04</b> <div data-astro-cid-ld3fmquo> <strong data-astro-cid-ld3fmquo>Evaluate behavior</strong> <span data-astro-cid-ld3fmquo>Test realistic prompts, edge cases, safety, and evidence.</span> </div> </article> </li> </ol> </section> <section class="practice recall reveal" id="recall" data-astro-cid-xahix5fp> <div class="depth-slow" data-astro-cid-xahix5fp> <p class="eyebrow" data-astro-cid-xahix5fp>Check yourself</p> <h2 data-astro-cid-xahix5fp>Recall it before<br>you <em>ship it.</em></h2> <p class="recall-note" data-astro-cid-xahix5fp>Answer from memory first — the reveal is the feedback.</p> <div class="recall-links" data-astro-cid-xahix5fp> <a href="https://agentskills.io/specification" target="_blank" rel="noreferrer" data-astro-cid-xahix5fp> Format specification ↗ </a><a href="/ai-for-dummies/hands-on/starter/" data-astro-cid-xahix5fp> Try it on the Tiny Tasks lab → </a> </div> </div> <div class="recall-list depth-fast" data-astro-cid-xahix5fp> <details data-astro-cid-xahix5fp> <summary data-astro-cid-xahix5fp> <span data-astro-cid-xahix5fp>The skill never loads. What is the first suspect?</span> <b aria-hidden="true" data-astro-cid-xahix5fp>+</b> </summary> <p data-astro-cid-xahix5fp>The trigger. A precise description says when to load the skill — and when to leave it out. A vague one never fires.</p> </details><details data-astro-cid-xahix5fp> <summary data-astro-cid-xahix5fp> <span data-astro-cid-xahix5fp>Where do the workflow, the facts, and the repeated mechanics each go?</span> <b aria-hidden="true" data-astro-cid-xahix5fp>+</b> </summary> <p data-astro-cid-xahix5fp>The workflow stays in SKILL.md, conditional facts move to references/, and deterministic repeated mechanics become scripts/.</p> </details><details data-astro-cid-xahix5fp> <summary data-astro-cid-xahix5fp> <span data-astro-cid-xahix5fp>What proves a skill works?</span> <b aria-hidden="true" data-astro-cid-xahix5fp>+</b> </summary> <p data-astro-cid-xahix5fp>Behavior, not headings: realistic prompts, edge cases, and safety checks with observable evidence — the same bar the review desk applies.</p> </details> </div> </section> </main> <section class="footer" data-astro-cid-bmvnf73n> <nav class="links" aria-label="Chapter navigation" data-astro-cid-bmvnf73n> <nav class="links" aria-label="Chapter navigation" data-astro-cid-xahix5fp> <a href="/ai-for-dummies/agents/" data-astro-cid-xahix5fp>Agents & trees →</a> <a href="/ai-for-dummies/rules/" data-astro-cid-xahix5fp>Rules case study →</a> <a href="/ai-for-dummies/skills-review/" data-astro-cid-xahix5fp>Review submitted skills →</a> <a href="/ai-for-dummies/full-guide/#create-skill" data-astro-cid-xahix5fp>Full guide: skill forge →</a> </nav> </nav> <div class="text" data-astro-cid-bmvnf73n> </div> </section> </body></html> |