| name | generate-preset |
| description | Optional sub-skill of self-media-composer. Generates a custom CSS + JS preset pair from a user's style description. Load this skill when the user chooses "Custom style" in Step 4.1 of the self-media-composer workflow, or explicitly asks to create / design a new visual template.
English triggers: - "make a new preset", "create a style for me", "I want a custom template" - "design a theme that looks like…", "generate a matching preset" - User provides a reference image / Figma frame / screenshot and asks for a matching preset
Multilingual triggers: - Equivalent custom-style, new-template, theme-design, palette-system, design-system, reference-image,
Figma, or screenshot-matching requests in any user language.
|
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.
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 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 present on page). No
fetch, no DOM manipulation outside of ECharts.
- The IIFE must use the exact wrapper:
(function(global){ ... }(window));
- Expose only one global:
window.<PascalCase>Presets.
- Include the full CSS class quick-reference as a JSDoc comment block.
Step G5 — Author the Preview File
Write <preset-name>/preview.html — a standalone gallery page that showcases all major CSS components and at least one chart rendered by the JS preset. Load references/preview-skeleton.md for the full platform-specific template.
Key rules:
- Override
html, body { width: auto; height: auto; overflow: auto; } so the page scrolls.
- Include at least 4 cards: cover, content/stats, content/chart, content/list.
- Exercise every §2 component class and every §3 utility group at least once across all cards.
- Load ECharts from CDN (
https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js) and render at least one chart using the JS preset's .get() method.
- Fill cards with representative placeholder content matching the content domain from Step G1 — never leave cards empty or use generic "Lorem ipsum".
- Use the same class prefix and naming as the authored CSS; do not introduce ad-hoc styles that bypass the preset.
Preview layout by platform:
| Platform | Container layout | Card wrapper size | Notes |
|---|
rednote | flex-wrap: wrap | 540×720 | Cards at native size, side-by-side |
instagram | flex-direction: column | 1080×1350 scaled to 50% | Use transform: scale(0.5) + negative margin-bottom |
Step G6 — Save the Files
Write all three files directly into the project's shared/presets/<preset-name>/ folder:
<project-root>/shared/presets/<preset-name>/<preset-name>.css
<project-root>/shared/presets/<preset-name>/<preset-name>.js
<project-root>/shared/presets/<preset-name>/preview.html
Use write_file for all three. If the destination already exists, ask the user before overwriting.
Step G7 — Register the Preset
After writing the files, do not modify the master self-media-composer/SKILL.md. The generated preset lives only in the project's shared/presets/ folder. It is a project-local preset, not a built-in one.
The self-media-composer workflow (Step 4.4) will reference it exactly like a built-in preset:
<link
rel="stylesheet"
href="../../shared/presets/<preset-name>/<preset-name>.css"
/>
<script src="../../shared/presets/<preset-name>/<preset-name>.js"></script>
Quality Checklist
Before handing off the generated files, verify every item:
CSS
JS
Preview
Files
References
Load these files during the corresponding steps:
| Reference | When to load |
|---|
| CSS File Anatomy | During Step G3 — full §0–§4 structure, component list, utility groups |
| JS File Skeleton | During Step G4 — complete IIFE skeleton to fill in |
| Preview HTML Skeleton | During Step G5 — platform-specific gallery template, card content guidelines |
Example: Deriving a "Soft Pastel" Preset
User description: "I want something soft and feminine — pastel pink and mint, rounded corners, no harsh shadows, light and airy feel."
Derived tokens:
Preset name: soft-pastel
Global prefix: sp-
JS namespace: window.SoftPastelPresets
bg-primary: #FFF8F8 Warm near-white
bg-surface: #FFE8EE Soft pink surface
bg-surface2: #E8F8F2 Soft mint surface
accent: #F472A0 Rose pink
accent-light: #FBB6D1 Light rose
text-primary: #3D2B35 Deep warm brown
text-muted: #9E7A88 Muted pink-brown
border: #F0D0DC Soft pink border
positive: #52C97A Mint green
negative: #F07070 Muted coral
font-display: 'Noto Serif SC', Georgia, serif
font-body: 'Noto Sans SC', sans-serif
weight-heavy: 700
weight-light: 300
letter-spacing-display: 0.02em
letter-spacing-body: 0.01em
border-width: 1.5px
border-radius: 16px
shadow-style: 0 4px 16px rgba(244,114,160,0.12)
bg-pattern: none (clean flat)
Resulting visual identity: Warm white + blush pink + mint accent, soft rounded corners, gentle box shadows (no hard offset), serif display font for warmth. Ideal for beauty, lifestyle, relationship, wellness topics.
