skiotha-character-builder-hypertext-instructions.ocm.json json {
"ocm": "1",
"id": "skiotha-character-builder-hypertext-instructions",
"kind": "skill",
"name": "hypertext",
"description": "HTML & JS instructions (ADR-012)",
"publisher": "skiotha",
"version": "1.0.0",
"capabilities": {
"domains": [
"general"
],
"tags": [
"skill-md",
"github-instructions"
],
"languages": [
"en"
]
},
"quality_prior": 0.6,
"examples": [
"HTML & JS instructions (ADR-012)"
],
"primary": false,
"metadata": {
"source": {
"provider": "github-instructions",
"repository": "https://github.com/skiotha/character-builder",
"path": ".github/instructions/hypertext.instructions.md",
"ref": "be1e2fcd8718530b88cddfcbdd4f8992654870fc",
"url": "https://github.com/skiotha/character-builder/blob/be1e2fcd8718530b88cddfcbdd4f8992654870fc/.github/instructions/hypertext.instructions.md",
"key": "skiotha/character-builder/.github/instructions/hypertext.instructions.md"
},
"applies_to": "**/*.html, public/**/*.mjs"
},
"instructions": "# HTML & JS instructions (ADR-012)\n\n- Semantic HTML first — use the most specific element (`<section>`, `<nav>`, `<dl>`, `<dialog>`, etc.) before reaching for `<div>` or `<span>`\n- Native platform widgets over custom JS: `<dialog>`, `<details>/<summary>`, Popover API, customizable `<select>` (`appearance: base-select`)\n- Field wrapper pattern: a containing element groups a `<label>` with its associated control\n- Interactive elements must be visually distinct (hover/focus states, color-coding, cursor) with clean microanimations\n- All interactive elements must be keyboard-operable with visible f",
"cost": {
"context_tokens": 176
}
}