Criteria

Turns several loose questions into a one-file HTML form with a progress bar and a button that copies every answer at once.

Cuándo se usa

When you need to decide several different things at once and would rather fill in a form than answer them one by one.

SKILL.md

# Criteria

For when several different kinds of questions need asking at once (not just "pick option 2"),
and whoever is answering would rather fill them in with a keyboard and mouse and hand back
**the whole block in one go**, instead of answering each question one at a time in the chat.

It does not replace other ways of asking, it completes them:

- A back-and-forth **in the chat**, question by question, is still better when each answer
  needs reasoning through before the next question can even be written.
- A **Markdown** questionnaire is still better for a third party (a client, a collaborator)
  who has no coding agent installed and can only read plain text.
- **Criteria** is a form in the **browser**, for whoever already has a coding agent in front
  of them, when the questions can all be asked at once and dictating or typing them one by one
  is what is left over.

## Process

### 1. Gather the questions

Whatever the decision needs. For each one, pick its type:

- `texto` (text) - a short line (a name, a number).
- `parrafo` (paragraph) - several lines (an explanation, some context).
- `opcion` (single choice) - pick one from a list. The "Other:" free-text option is always
  added on its own, nothing needs to ask for it.
- `multiple` (multiple choice) - pick several from a list. Same always-on "Other:".
- `escala` (scale) - rate on a range (0-10, 1-5), with labels at the ends if they help.

One question per decision: if a question carries two things inside it, that is two questions.

### 2. Match the palette to the project you are working in

This is not optional: the questionnaire **does not always look the same**, it looks like the
conversation it was asked in. Before generating the file, check whether the active project has
its own design system (an `App.css`, a `globals.css`, Tailwind tokens, theme variables already
defined) and find its colors, its border radii and its typeface. If it has one, replace the
values in the block marked `PALETA` (the `--bg`, `--text`, `--accent`, `--ok`, `--warn`,
`--bad`, `--radio`, `font-family`...) with its own. The `ESTRUCTURA` block below is never
touched: it always uses `var(--something)`, so it inherits the skin change on its own. If the
project has no identifiable design system of its own (a task with no website, or a repo with no
frontend), the template's neutral default palette is kept, already checked for WCAG 2.1
contrast.

### 3. Generate the file

Copy this skill's `references/plantilla.html` into a temporary session folder (never inside the
project's own code: it is a working file, not a product artifact) as `criteria-<topic>.html`,
and replace these three things inside the `<script>` (plus the palette from step 2, if it
applies), without touching the rest of the file:

```js
const TITULO = "...";           // what is being decided, in four words
const SUBTITULO = "...";        // one sentence: what this is for and what happens when it's done
const PREGUNTAS = [ ... ];      // the questions array, using the shapes above
```

The rest of the file (structural styles, rendering, progress bar, copying) already works: it is
never rewritten by hand, so as not to reintroduce a bug that was already fixed.

### 4. Open it yourself

Open the file in the browser on your own (on Windows, `Start-Process` on the path; on macOS,
`open`; on Linux, `xdg-open`), without asking permission and without just leaving the path
written down for someone else to open by hand. In the chat, one line: what is being asked and
that the block should be pasted back once it is done. Never repeat the question list in the
terminal: whoever has to read and answer it already has it in front of them, in the form.

### 5. When the pasted block comes back

It arrives in the shape `P1. <question>\n→ <answer>`. The ones saying `(no answer)` are the
ones left blank: they are not made up, they get asked again in the chat if the decision needs
them to close, or set aside if they are not blocking. With the rest, build the prompt or make
the decision the questionnaire was for.

## What the template already has, and why it stays untouched

- **Zero CDN, one file.** It has to look the same with no internet connection.
- **System theme, no toggle.** `prefers-color-scheme` decides light or dark on its own: this is
  not a catalog that needs checking in both themes at once, it is a single-use form.
- **The default palette** (`--bg`, `--panel`, `--accent`...) is the one used in step 2 when the
  project has none of its own, with contrast already measured against WCAG 2.1. If a hex value
  is ever touched, it gets measured again, never adjusted by eye.
- **A progress bar up top**, always visible while scrolling (`position: sticky`), with the
  answered count next to it. Not just a number lost at the bottom of the page.
- **"Other:" always present** on every single- or multiple-choice question, with its free-text
  slot. It is built into the template, not something to remember to ask for.
- **Nothing is required.** A form where everything is mandatory does not get filled in quickly
  by anyone; the button still copies with blank questions, marked as such.
- **Copying with a safety net.** It tries `navigator.clipboard`, and if the browser blocks it
  (which happens sometimes on a local `file://` page), it leaves the text selected in a visible
  box so a manual Ctrl+C still works.
- **Autosaved to `localStorage`.** If the tab gets closed by accident halfway through, whatever
  was already typed is still there when the same file is reopened.

## When NOT to use this

If there is only one thing to decide, or if the questions depend on each other (the second one
cannot be written until the first is answered), that is a back-and-forth in the chat, not
Criteria: here every question gets asked at once, in a single pass.