Marcos Paulo
f526a42ddd
- New hands-on/rules/ interactive page: five toggleable rule sources (AGENTS.md, gate-discipline skill, Husky pre-commit, check-ui-contract enforcer, commitlint) rebuild a ruled prompt live against a naive prompt. - Visual system mirrors hands-on/starter (same palette, vanilla JS). - index.html hands-on section now links both labs. - docs/operations-guide.md gains a 'Hands-on rules lab' subsection. - README project structure lists the new lab. - verify.mjs passes content, interaction, and standalone checks for both labs.
44 lines
1.6 KiB
HTML
44 lines
1.6 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Guardrails — Hands-on Rules</title>
|
|
<link rel="stylesheet" href="styles.css" />
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<header>
|
|
<div><span>HANDS-ON / RULES</span><h1>Guardrails</h1></div>
|
|
<p>Toggle rules. Watch the prompt change. Same task, different leash.</p>
|
|
</header>
|
|
|
|
<section aria-labelledby="rules-heading">
|
|
<div class="section-head"><h2 id="rules-heading">Rule sources</h2><span id="rule-count">0 / 5 active</span></div>
|
|
<div id="rule-list" class="rule-list"></div>
|
|
</section>
|
|
|
|
<section aria-labelledby="prompt-heading">
|
|
<div class="section-head"><h2 id="prompt-heading">Prompt diff</h2>
|
|
<div class="lang-switch" role="group" aria-label="Language">
|
|
<button type="button" data-lang="en" aria-pressed="true">EN</button>
|
|
<button type="button" data-lang="pt" aria-pressed="false">PT</button>
|
|
</div>
|
|
</div>
|
|
<div class="prompt-grid">
|
|
<article class="prompt-card" data-side="naive">
|
|
<header><span>NAIVE</span><h3>Vanilla ask</h3></header>
|
|
<pre id="prompt-naive"></pre>
|
|
</article>
|
|
<article class="prompt-card" data-side="ruled">
|
|
<header><span>RULED</span><h3>With guardrails</h3></header>
|
|
<pre id="prompt-ruled"></pre>
|
|
<button id="copy-btn" type="button">Copy ruled prompt</button>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<script src="app.js" defer></script>
|
|
</body>
|
|
</html>
|