generate-preset

# Generate Preset Sub-Skill

Generates a ready-to-use CSS + JS preset bundle for self-media cards, derived from the user's free-form style description. The output is a pair of files (`<preset-name>.css` + `<preset-name>.js`) that follow the exact same anatomy as the built-in presets (`neo-brutalism`, `code-dispatch`, `dark-tech`).

---

## When to Load This Skill

Load this skill immediately when **any** of the following is true:

**English triggers:**

- The user selects "Custom style — describe the visual language you want" in the Step 4.1 preset picker.
- The user says phrases like "make a new preset", "create a style for me", "I want a custom template", "design a theme that looks like…".
- The user provides a reference image, Figma frame, or screenshot and asks to "generate a matching preset".

**Multilingual triggers:**

- The user selects the localized equivalent of "Custom style" in Step 4.1.
- The user asks for a custom visual style, new preset, visual template, theme, palette system, or design system in any language.
- The user provides a reference image, Figma file, or screenshot and asks to match that style.

Do **not** load this skill for small card-level tweaks (e.g. "change this card's background color"). This skill is exclusively for authoring a reusable preset bundle.

---

## Output Language Contract

Follow the parent `self-media-composer` Output Language Contract:

- Keep CSS class names, preset slugs, JS namespaces, token names, filenames, and API-shaped values in stable English/ASCII.
- Write preview card copy, placeholder content, comments, labels, and visible demo prose in the user's preferred output language.
- If the user did not specify a language for demo content, infer it from the parent post request; otherwise default to concise English for preview scaffolds.
- Do not translate brand names, product names, source quotes, code identifiers, or fixed schema values.

---

## Workflow

### Step G1 — Extract the Design Brief

Interview the user (or infer from context) to resolve these five axes. Use `ask_user` if any axis is missing and cannot be safely inferred.

| Axis                 | Key questions                           | Examples                                                                                |
| -------------------- | --------------------------------------- | --------------------------------------------------------------------------------------- |
| **Mood / Aesthetic** | How should a viewer _feel_?             | Energetic, calm, authoritative, playful, minimalist, luxurious, retro, futuristic       |
| **Color Palette**    | Primary bg, accent, text, border colors | Light or dark bg? Warm or cool tones? Saturated or muted?                               |
| **Typography**       | Font personality                        | Serif, sans-serif, monospace? Heavy weight contrast or uniform?                         |
| **Decoration**       | Visual texture and ornamentation        | Grid lines, ruled paper, noise texture, clean flat, geometric shapes, gradient overlays |
| **Content Domain**   | What topics will the cards cover?       | Tech/coding, lifestyle, beauty, finance, travel, food, product reviews                  |

If the user provides a reference image, use `visual_understanding` to extract the palette, dominant textures, typography weight, and layout language before proceeding.

### Step G2 — Define Design Tokens

Translate the brief into a concrete token set. Write these down before writing any code.

**Required tokens:**

```
Preset name:   <safe-for-filesystem slug, e.g. "soft-pastel">
Global prefix: <2-4 letter prefix for all CSS classes, e.g. "sp-">
JS namespace:  window.<PascalCase>Presets  (e.g. window.SoftPastelPresets)

Color tokens:
  bg-primary:    <hex>    Main card background
  bg-surface:    <hex>    Elevated surface / inner block bg
  bg-surface2:   <hex>    Second elevation (optional)
  accent:        <hex>    Primary accent / CTA color
  accent-light:  <hex>    Lighter accent variant (hover states, highlights)
  text-primary:  <hex>    Main body text
  text-muted:    <hex>    Secondary / subdued text
  border:        <hex>    Default border / rule color
  border-accent: <hex>    Accented border (optional)
  positive:      <hex>    Positive / success indicator (green-family)
  negative:      <hex>    Negative / danger indicator (red-family)

Typography tokens:
  font-display:  <CSS font-family string>   Titles and large display text
  font-body:     <CSS font-family string>   Body and label text
  weight-heavy:  <number>   e.g. 900 or 700
  weight-light:  <number>   e.g. 300 or 400
  letter-spacing-display: <em value>
  letter-spacing-body:    <em value>

Border & Shadow tokens:
  border-width:  <px>         e.g. 3px (neo-brutalism) or 1px (dark-tech)
  border-radius: <px or 0>    e.g. 0 for hard edges, 8px for soft
  shadow-style:  <CSS value or "none">   Hard offset = "4px 4px 0 #000", soft = "none"

Texture / background decoration:
  bg-pattern:    <CSS background-image or "none">  e.g. grid lines, dots, ruled lines
```

### Step G3 — Author the CSS File

Write `<preset-name>.css` using the token values from Step G2. Follow the exact section structure (§0 variables, §1 card shell, §2 content components, §3 utility classes, §4 layout helpers) documented in [references/css-anatomy.md](./references/css-anatomy.md).

**Critical constraint from §0**: `html, body { width:540px; height:720px; overflow:hidden; }` must appear verbatim. Never set `font-size` on `html`.

### Step G4 — Author the JS File

Write `<preset-name>.js` as a self-executing IIFE that exposes a global registry `window.<PascalCase>Presets`. Load [references/js-skeleton.md](./references/js-skeleton.md) for the complete skeleton to fill in.

**Key rules:**

- Keep design tokens in `T` object — same hex values as in the CSS `:root` block.
- Include **at least 3 preset chart types** from: bar, line, donut, radar, column, scatter.
- Only use ECharts (assumed p