Marcos Paulo
24 lines
2.2 KiB
JavaScript
24 lines
2.2 KiB
JavaScript
const packageFiles = {
|
|
skill: { label: 'SKILL.md', 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.' },
|
|
references: { label: 'references/', 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' },
|
|
scripts: { label: 'scripts/', 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' },
|
|
assets: { label: 'assets/', 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' }
|
|
};
|
|
|
|
const preview = document.querySelector('#package-preview');
|
|
const buttons = [...document.querySelectorAll('[data-package-file]')];
|
|
function renderPackage(file) {
|
|
const item = packageFiles[file];
|
|
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((button) => {
|
|
const selected = button.dataset.packageFile === file;
|
|
button.classList.toggle('active', selected);
|
|
button.setAttribute('aria-selected', String(selected));
|
|
});
|
|
}
|
|
buttons.forEach((button) => button.addEventListener('click', () => renderPackage(button.dataset.packageFile)));
|
|
renderPackage('skill');
|