AI & Agent Resources

đź“– Table of Contents

Agent Knowledge Files

File Best for
SmarkForm Forms Implementing forms — CDN/npm/downloaded-copy snippets, common component patterns, lists, actions, hotkeys, prompt templates, agent checklist
SmarkForm Usage Deep internals — component types, list template roles, exportEmpties, @action decorator, find() timing, CSS grid layout

Both files are versioned alongside the library and always reflect the deployed release.

How to Use These Files When Prompting an AI

  1. Decide which task you need help with (implement a form, update docs, write tests, etc.).
  2. Open the relevant page from the table above and copy its content.
  3. Paste it at the top of your prompt (or attach it as context), then describe your specific request.
  4. Include your desired schema — field names, types, list structure — so the AI can generate matching HTML immediately.

Quick Reference Prompts

You can also link the agent directly to the versioned page:

Read https://smarkform.bitifet.net/resources/AGENTS/SmarkForm-Forms
then implement a contact form with fields: name, email, message.
Load SmarkForm from CDN (pin to the latest stable version).

Installable Skills

The repository includes installable skill specs so AI tools can enforce SmarkForm-specific implementation rules.

  • Canonical: skills/SmarkForm-Form-Builder.skill.md
  • OpenCode: skills/smarkform-form-builder/SKILL.md

Use this for general SmarkForm form implementation. It enforces:

  • source-priority lookups (deployed docs first)
  • event/action-first implementation patterns
  • required await myForm.rendered timing
  • list/context/template rules
  • root-level security option rules
  • myForm naming convention (strongly recommended, not a hard requirement)
  • mandatory “SmarkForm compliance checklist” in outputs

Optional Advanced Skill

  • Canonical: skills/SmarkForm-Advanced-Internals.skill.md
  • OpenCode: skills/smarkform-advanced-internals/SKILL.md

Use this when handling advanced internals and edge cases. It includes substantive rules for:

  • @action decorator calling conventions and argument positions
  • context/target resolution in nested list structures
  • list template role lifecycle and cloning behavior
  • mixin security option interactions and progressive allowlist semantics
  • data flattening edge cases (exportEmpties, keyStyle, arrayStyle)

Import into opencode or similar tools

The repository provides two formats for each skill:

  • Canonical format (.skill.md) — the single-file source of truth.
  • OpenCode format (<name>/SKILL.md) — a directory matching the skill name, containing a SKILL.md file with name and description in the YAML front matter.

To install in opencode:

  1. Locate your opencode skills directory (often ~/.config/opencode/skills/ or a project-local .opencode/skills/).
  2. Copy or symlink the desired skill’s complete directory tree:
    • skills/smarkform-form-builder/ → SKILL.md
    • skills/smarkform-advanced-internals/ → SKILL.md
  3. Restart opencode — the skill is available automatically.

For other tools:

  1. Open the desired skill file from skills/.
  2. Copy its full content into your tool’s skill/instruction definition.
  3. Keep the source-priority section unchanged so the agent always prefers:
    • https://smarkform.bitifet.net/resources/AGENTS/SmarkForm-Forms
    • https://smarkform.bitifet.net/resources/AGENTS/SmarkForm-Usage
  4. If your tool supports separate skills, install:
    • core skill as default
    • advanced skill as opt-in

Maintenance Rules for Skill Files

  • When docs/_resources/AGENTS/SmarkForm-Forms.md or docs/_resources/AGENTS/SmarkForm-Usage.md changes, review and update both skill specs if affected; when in doubt, update both in the same PR.
  • Apply the same update rule when their deployed equivalents change: https://smarkform.bitifet.net/resources/AGENTS/SmarkForm-Forms and https://smarkform.bitifet.net/resources/AGENTS/SmarkForm-Usage.
  • Update both formats: when editing a canonical .skill.md file, also update the corresponding skills/<name>/SKILL.md so OpenCode exports stay in sync.
  • Keep the source-priority order intact so deployed docs remain the primary knowledge source for agents.
  • If behavioral rules change, update the skill file(s), this page, and the AGENTS.md skills table.

Prompt Templates

The following ready-to-use prompts are reproduced from the SmarkForm Forms reference page. Copy, adapt, and paste into your AI assistant.

Simple form 

Using SmarkForm (CDN ESM: https://cdn.jsdelivr.net/npm/smarkform/dist/SmarkForm.esm.js),
create a contact form with fields: name (text), email (email), phone (text, optional),
message (textarea). Include Export and Reset buttons. Log exported data to the console.
Follow patterns from https://smarkform.bitifet.net/resources/AGENTS/SmarkForm-Forms.

Form with a repeating list 

Using SmarkForm loaded via CDN (UMD: https://cdn.jsdelivr.net/npm/smarkform/dist/SmarkForm.umd.js),
create an invoice form with:
- Header fields: client name (text), date (date)
- A line-items list (name it "items") where each item has: description (text),
  quantity (number, SmarkForm null-aware), unit_price (number, null-aware).
- min_items:1, max_items:10 on the list.
- Add/Remove hotkeys + and -.
- Export and Reset buttons outside the list.
Output exported JSON to a <pre> element on the page.
Refer to https://smarkform.bitifet.net/resources/AGENTS/SmarkForm-Forms for patterns.

Adding SmarkForm to an existing page 

I have an existing HTML page. Add a SmarkForm registration form to the
#registration-section div. Fields: username (text), password (input type="password",
plain input — not a SmarkForm type), role (radio: admin / editor / viewer).
Load SmarkForm from npm (already installed as "smarkform"). Use ESM import.
Set defaultValue for role to "editor". After export, POST the data to /api/register.
See https://smarkform.bitifet.net/resources/AGENTS/SmarkForm-Forms for patterns.
Resources
Developer Cheatsheet
Resources
Examples.capture