---
name: cads-prototyping
description: Build CADS UI prototypes with real components. Use for CodeAI/CADS mocks, Figma-aligned screens, or when the user asks for design-system prototypes.
license: UNLICENSED
compatibility: Requires code execution or file output. Internal CodeAI use only (embeds FA Pro fonts).
---

# CADS prototyping

Create **self-contained HTML prototypes** that embed the real CADS runtime.
No npm install, hosting, or package registry required. Intended for
**organization-only / internal** sharing.

## Workflow

1. Translate the user's request into constrained CADS prototype JSON
   (see [references/schema.md](references/schema.md)).
2. Use only components and props from
   [references/manifest-summary.md](references/manifest-summary.md).
   Compose them per [references/ui-patterns.md](references/ui-patterns.md).
3. Generate a **self-contained HTML** file by inlining:
   - `runtime/cads-runtime.css`
   - `runtime/cads-runtime.js`
   - the prototype JSON in
     `<script id="cads-prototype-spec" type="application/json">`
   - a boot call: `CADS.mountFromScriptTag("cads-prototype-spec")`
4. Prefer regenerating the full HTML after edits. Do **not** rewrite or
   hand-edit `cads-runtime.js`.
5. Stamp `_cads.manifestVersion` from `runtime/VERSION.json`.

### Helper (when code execution can read skill files)

```bash
python3 scripts/generate_artifact.py --spec path/to/spec.json --out /tmp/prototype.html
```

If the helper is unavailable, assemble the HTML template below by hand.

## HTML template

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>PROTOTYPE_TITLE</title>
  <style>
    html, body { margin: 0; padding: 0; }
    /* paste entire contents of runtime/cads-runtime.css here */
  </style>
</head>
<body>
  <div id="cads-root"></div>
  <script id="cads-prototype-spec" type="application/json">
  /* paste validated prototype JSON (include _cads stamp) */
  </script>
  <script>
  /* paste entire contents of runtime/cads-runtime.js here */
  </script>
  <script>
    CADS.mountFromScriptTag("cads-prototype-spec");
  </script>
</body>
</html>
```

## Rules

- Only CADS components from the manifest. Never invent props, colors, or APIs.
- No hard-coded hex colors. No `--ds-*` variables.
- Brand tokens for CTAs/links; selected tokens for selected chrome.
- Control heights via `size`: large / medium / small / extraSmall.
- Layout only via `layout` nodes: `stack`, `inline`, `surface`.
- Typography only via `text` nodes with approved variants.
- Do not emit callbacks (`onClick`, etc.) in the JSON — they are not serializable.
- After the user asks for changes, update the JSON and regenerate the HTML.

## Output

- **Reliable:** one self-contained HTML file with the runtime inlined.
- Some hosts preview HTML inline; others return a downloadable file. Either is fine.
- Do not rely on multi-file React module imports unless the host preserves local modules.

## Sharing

Keep prototypes **internal / organization-only**. This skill embeds Font Awesome
Pro fonts under CodeAI’s internal license — not for public or commercial
redistribution.

## Example

See [examples/teacher-onboarding.json](examples/teacher-onboarding.json). Prompt:

> Create a CADS teacher onboarding form with school name, role, and Continue.
