Marcos Paulo
47f4de8757
Built from main 25ef5af63e
fix: refuse to publish a build that logged a vite error
45 lines
12 KiB
HTML
45 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.CVOStimI.css"><link rel="stylesheet" href="/ai-for-dummies/fonts/fonts.css"><link rel="stylesheet" href="/ai-for-dummies/_astro/chapters.Bvwgp4pJ.css"><style>.package-workbench[data-astro-cid-xk5n4466]{display:grid;grid-template-columns:minmax(190px,.85fr) minmax(0,1.3fr);min-width:0;background:var(--ink);border:1px solid var(--ink);box-shadow:10px 10px color-mix(in srgb,var(--gold) 55%,transparent)}.package-tree[data-astro-cid-xk5n4466]{padding:22px 16px;border-right:1px solid var(--muted);min-width:0}.package-tree[data-astro-cid-xk5n4466]>p[data-astro-cid-xk5n4466],.package-preview[data-astro-cid-xk5n4466]>span[data-astro-cid-xk5n4466]{margin:0 0 14px;color:var(--gold);font:700 var(--step-0) / 1.35 ui-monospace,monospace;letter-spacing:.1em}.package-tree[data-astro-cid-xk5n4466] button[data-astro-cid-xk5n4466]{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;width:100%;padding:12px 8px;border:0;border-left:2px solid transparent;background:transparent;color:var(--line);text-align:left;cursor:pointer;transition:background .2s ease,border-color .2s ease,transform .2s ease}.package-tree[data-astro-cid-xk5n4466] button[data-astro-cid-xk5n4466]:hover,.package-tree[data-astro-cid-xk5n4466] button[data-astro-cid-xk5n4466]:focus-visible,.package-tree[data-astro-cid-xk5n4466] button[data-astro-cid-xk5n4466].active{border-left-color:var(--gold);background:var(--blue);outline:0}.package-tree[data-astro-cid-xk5n4466] button[data-astro-cid-xk5n4466]:hover{transform:translate(3px)}.package-tree[data-astro-cid-xk5n4466] code[data-astro-cid-xk5n4466]{min-width:0;overflow-wrap:anywhere;font:700 13px/1.4 ui-monospace,monospace}.package-tree[data-astro-cid-xk5n4466] small[data-astro-cid-xk5n4466]{color:var(--muted);font:11px/1.25 Arial,sans-serif;text-align:right}.package-preview[data-astro-cid-xk5n4466]{min-width:0;padding:26px;background:var(--ink);color:var(--paper)}.package-preview[data-astro-cid-xk5n4466] h3[data-astro-cid-xk5n4466]{margin:0 0 8px;font-size:clamp(24px,3vw,38px);line-height:1.02;letter-spacing:-.045em}.package-preview[data-astro-cid-xk5n4466] p[data-astro-cid-xk5n4466]{max-width:52ch;margin:0;color:var(--line)}.package-preview[data-astro-cid-xk5n4466] pre[data-astro-cid-xk5n4466]{max-width:100%;margin:20px 0 0;padding:15px;overflow:auto;border:1px solid var(--muted);background:var(--deep);color:var(--line);font:12px/1.55 ui-monospace,monospace}.package-preview[data-astro-cid-xk5n4466].is-swapping{animation:package-preview-in .2s cubic-bezier(.2,0,0,1) both}@keyframes package-preview-in{0%{opacity:.25;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}@media(max-width:800px){.package-workbench[data-astro-cid-xk5n4466]{grid-template-columns:1fr}.package-tree[data-astro-cid-xk5n4466]{border-right:0;border-bottom:1px solid var(--muted)}.package-preview[data-astro-cid-xk5n4466]{padding:22px}}@media(max-width:560px){.package-tree[data-astro-cid-xk5n4466]{padding:18px 10px}.package-tree[data-astro-cid-xk5n4466] button[data-astro-cid-xk5n4466]{padding:12px 6px}.package-tree[data-astro-cid-xk5n4466] small[data-astro-cid-xk5n4466]{display:none}.package-preview[data-astro-cid-xk5n4466]{padding:18px}.package-preview[data-astro-cid-xk5n4466] pre[data-astro-cid-xk5n4466]{font-size:var(--step-0)}}@media(prefers-reduced-motion:reduce){[data-astro-cid-xk5n4466],[data-astro-cid-xk5n4466]:before,[data-astro-cid-xk5n4466]:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
|
|
.top[data-astro-cid-xattfbdu]{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:24px 0;border-bottom:1px solid var(--line);font:700 var(--step-0) monospace;letter-spacing:.08em;text-transform:uppercase}.top[data-astro-cid-xattfbdu] a{color:var(--ink);text-decoration:none}.top[data-astro-cid-xattfbdu] a:focus-visible{outline:3px solid var(--red);outline-offset:2px}@media(max-width:560px){.cell[data-astro-cid-xattfbdu]:nth-child(2){display:none}}.footer[data-astro-cid-bmvnf73n]{padding:30px 0 70px;color:var(--muted);font-size:clamp(13px,13px,13px)}.links[data-astro-cid-bmvnf73n]{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 70px}.links[data-astro-cid-bmvnf73n] a{padding:10px 13px;color:var(--ink);border:1px solid var(--ink);text-decoration:none;font:var(--step-0) monospace;text-transform:uppercase}.links[data-astro-cid-bmvnf73n] a:hover{color:var(--paper);background:var(--ink)}.links[data-astro-cid-bmvnf73n] a:focus-visible{outline:3px solid var(--red);outline-offset:2px}.eyebrow[data-astro-cid-4yr5atew]{margin:0;font:600 var(--step-0) "DM Mono",monospace;letter-spacing:.1em;text-transform:uppercase}.tone-accent[data-astro-cid-4yr5atew]{color:var(--accent)}.tone-gold[data-astro-cid-4yr5atew]{color:var(--gold)}.tone-red[data-astro-cid-4yr5atew]{color:var(--red)}.hero[data-astro-cid-7xzskqga]{padding:100px 0 70px;max-width:950px}h1[data-astro-cid-7xzskqga]{margin:16px 0;font-size:clamp(52px,9vw,126px);line-height:.9;letter-spacing:-.07em}h1[data-astro-cid-7xzskqga] em{font:400 .9em Georgia,serif;color:var(--red)}.intro[data-astro-cid-7xzskqga] p{max-width:680px;margin:0;color:var(--muted);font-size:clamp(20px,20px,20px)}@media(max-width:800px){.hero[data-astro-cid-7xzskqga]{padding:65px 0 45px}}@media(max-width:560px){h1[data-astro-cid-7xzskqga]{font-size:clamp(56px,56px,56px)}.intro[data-astro-cid-7xzskqga] p{font-size:clamp(17px,17px,17px)}}
|
|
</style></head> <body> <header class="top" id="top" data-astro-cid-xattfbdu> <div class="cell" data-astro-cid-xattfbdu><a href="/ai-for-dummies/summary/">← ROUTE MAP</a></div> <div class="cell" data-astro-cid-xattfbdu><span>03 / SKILLS</span></div> <div class="cell" data-astro-cid-xattfbdu><a href="/ai-for-dummies/skills-review/">review desk ↗</a></div> </header> <main> <section class="hero" data-astro-cid-7xzskqga> <p data-astro-cid-4yr5atew="true" class="eyebrow tone-red">Reusable judgment</p> <h1 data-astro-cid-7xzskqga><span>Teach the<br><em>decision.</em></span></h1> <div class="intro" data-astro-cid-7xzskqga> <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> </div> </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 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]');
|
|
if (!preview || !dataNode) return;
|
|
const files = JSON.parse(dataNode.textContent || '[]');
|
|
|
|
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));
|
|
});
|
|
}
|
|
|
|
buttons.forEach(function (button) {
|
|
button.addEventListener('click', function () {
|
|
renderPackage(button.dataset.skillFile);
|
|
});
|
|
});
|
|
|
|
renderPackage('skill');
|
|
})();
|
|
</script> </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> </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"> <a href="/ai-for-dummies/agents/">Agents & trees →</a> <a href="/ai-for-dummies/rules/">Rules case study →</a> <a href="/ai-for-dummies/skills-review/">Review submitted skills →</a> <a href="/ai-for-dummies/full-guide/#create-skill">Full guide: skill forge →</a> </nav> </nav> <div class="text" data-astro-cid-bmvnf73n> </div> </section> </body></html> |