oc-shattered-glass-storyboard

Community@sumino/oc-shattered-glass-storyboard
Community skill — not reviewed. It was shared by Jagulus and has not been checked by Neta. Read SKILL.md below before letting an agent use it.
Use it in Cohub

Paste this into your agent's chat — it fetches the skill and follows it.

Use the skill: oc-shattered-glass-storyboard. Run `npx -y @neta-art/neta-search-cli@latest skills use @sumino/oc-shattered-glass-storyboard --via site` and follow what it prints. Read its complete output, redirecting it to a temporary file first if necessary, and resolve relative paths from the skill directory it prints.
Install from a terminal
npx -y @neta-art/neta-search-cli@latest skills use @sumino/oc-shattered-glass-storyboard
Summary

A broken-mirror poster: your character's face at the centre, their world in the shards around them.

  • One huge half-face close-up ringed by eight or nine glass shards, each holding a different character, place, or scene from the same world.
  • A clean title band at the bottom switches between twelve languages automatically, showing the character name and story title in the reader's own language.
  • Works best with a character who has a striking look and a world full of other people and places you want to show at once.
  • You get a finished poster page published on Neta, plus a card on your board that opens the live version when clicked.
SKILL.md
# OC Shattered Glass Storyboard

A vertical poster that looks like one pane of glass broken outward from a face. The OC's eyes and jaw hold the centre; eight or nine sharp shards carry the rest of her world — the other cast, the landmark, the memory, the thing she is looking for. At the bottom, a clean dark band carries a live title plate: seal, name, main title, English subtitle. Because the plate is HTML, the same poster speaks twelve languages.

**Live demo:** https://neta.art/w/sumino/sweet-nightmare-park/crimson-vaelen-shattered-glass

The story is carried by the shards, not by text in the image. The artwork is textless on purpose.

## What the user gets

- A 3:4 anime poster: one huge half-face close-up, ringed by eight or nine irregular glass shards, each shard a complete mini-scene from the same world, in one muted palette with visible glass thickness and edge highlights.
- A clean empty title band at the bottom of the artwork, and a live plate over it: `VOL. III`, the OC name, the localised main title, and `ENGLISH TITLE · world`.
- A single-page web Work that frames the print on a near-black gallery wall.
- Twelve complete locales, system-language detection, English default and fallback, a manual selector, and Arabic RTL.
- A published Work, a Board card, and an optional community skill package.

## When to use

Use when the user wants a vertical, narrative, fragmented-mirror poster for one OC, especially:

- "shattered glass storyboard", "broken mirror poster", "shards of memory";
- "碎玻璃分镜", "破碎玻璃插画", "玻璃碎片里的世界观";
- a character poster where the world's cast and key scenes must appear *inside* the composition.

Do not use for:

- a branching story, game or interactive fiction — `create-avg` or `game-maker`;
- a chat roleplay or companion — `create-roleplay` / `companion-onboarding`;
- the negative-space boat-and-wake print — that is `oc-abyss-wake-poster`;
- a split-panel skyline poster — that is the `oc-skyline-slices` pattern;
- a plain illustration with no web presentation — generate an image only.

## Hard rules

0. **Use the sandbox CLI path.** Every `neta` command is `node /mods/neta/neta …` (`neta` may not be on PATH).
1. **Read the OC before drawing.** Use the world's real character atom, its cover and `## 形象参考`. Never reuse the Crimson Vaelen demo on another character.
2. **No text in the generated image.** All type is HTML on the plate. One baked-in word kills the locale switch.
3. **The bottom band stays empty.** 12–15% of the canvas, flat near-black, one hairline, no glyph and no emblem. The page draws the seal and the title.
4. **Half a face, not a portrait.** One eye, one brow, part of a cheek and jaw, signature strands; the other half is cropped or in shadow. Ask for the race feature and the signature accessory to break the frame edge.
5. **Eight or nine shards, every one a scene.** Different sizes, overlapping, radiating outward. Each holds a named character, a landmark, a key beat or a signature object. No empty coloured glass.
6. **One palette.** Low saturation, one grade across the face and all shards; the OC's accent colour becomes `accent` in `content.js`.
7. **At least 10 complete locales.** English is default and fallback. Each locale has `world`, `title`, `tagline`, `ui.language` and `ui.atlas`. No half-translated locale.
8. **The plate is live.** Fixed band, auto-fitting title, no scrollbars, Arabic RTL supported. The title must fit one line in the longest locale.
9. **Publish and place.** A source page without a published Work and a Board card is not shipped. Place the **web Work** card, never the raw artwork.

## Pipeline

### 0. Read the OC and the world

```bash
node /mods/neta/neta atom list --type character
node /mods/neta/neta atom get "world/characters/<Name>.md"
node /mods/neta/neta find images "<Name>"
```

Record:

- `name`, and a plate number (`VOL. I` … `VOL. IX`) consistent with the world's atlas if one exists;
- 3–5 face features: eye colour and pupil, hair colour/streaks, signature accessory, race feature, skin;
- the OC's signature colour and 4–6 palette colours;
- 3–5 other named characters from the same world, with one recognisable prop each;
- 1 landmark, 1 key story beat, 1 personal memory from before the story, 1 signature object/rune, 1 symbol/plant/animal, 1 broken core motif;
- the world name and its existing translations, and a short main title (three to five words in Latin scripts).

Pick a random character when the user says "random". Read the atom, not just the cover: the cover may be chibi, while the poster needs mature proportions.

### 1. Create the page work

```bash
SLUG="<name>-shattered-glass"
WORK="works/web/$SLUG"
node /mods/neta/neta work init web "$WORK" --title "<Name> · <Title>"
# The CLI may normalize works/web -> works/webs; use the printed workDir.
```

Copy the starter:

```bash
cp templates/index.html templates/style.css templates/app.js "$WORK"/
cp templates/content.example.js "$WORK/content.js"
mkdir -p "$WORK/assets"
```

`content.js` is the only per-OC data file. Replace every demo value.

### 2. Generate the artwork

Read `references/art-direction.md` for the full prompt, shard casting and palette rules.

```bash
NETA_DEFAULT_IMAGE_MODEL=gpt-image-2 node /mods/neta/neta generate image \
  --work-title "<Name> · <Title> poster" \
  --work-description "<one sentence about the print>" \
  --param size=1152x1536 --param quality=high --param output_format=png \
  --image "world/media/studio/characters/<Name>.png" \
  --prompt "$(cat /tmp/<slug>-poster.txt)"
```

The prompt must start with `@<Name>`, use the reference only for identity, forbid text, require the empty bottom band, and list the shard scenes by name. Use `gpt-image-2` (reference-capable).

Save the result:

```bash
curl -sL "<mediaUrl>" -o /tmp/<slug>-poster.png
convert /tmp/<slug>-poster.png -quality 90 "$WORK/assets/poster.webp"
```

The generated image is an **ingredient**. Do not place it on the Board.

If the band is dirty, regenerate once with the band sentence repeated at the very end. If the face is a full portrait, add "cropped by the frame edge, only one eye visible".

### 3. Fill `content.js`

```js
window.POSTER = {
  name: "CRIMSON VAELEN",
  number: "VOL. III",
  englishTitle: "CROWN OF FRACTURES",
  art: "assets/poster.webp",
  accent: "#b04a5c",
  langs: { en: { label: "English", short: "EN", dir: "ltr" }, /* … 12 total */ },
  world: { en: "Sweet Nightmare Park", "zh-CN": "蚀梦甜魇疯乐园", /* … */ },
  title: { en: "Crown of Fractures", "zh-CN": "裂隙王冠", /* … */ },
  tagline: { en: "Every world I break remembers my name.", "zh-CN": "我打碎的每一个世界，都记得我的名字。", /* … */ },
  ui: {
    en: { language: "Language", atlas: "OC World Atlas" },
    "zh-CN": { language: "语言", atlas: "OC 世界观图鉴" }
    // … one per locale
  }
};
```

Rules:

- `name` and `number` are proper nouns; they stay identical in every locale.
- `title` is the big line. Keep it short; the page shrinks it, but a five-word floor is better than a fitted paragraph.
- In every non-English locale the subtitle is `englishTitle + " · " + world`; in English it is the world alone, so nothing repeats.
- `tagline` is one sentence in the character's voice. It appears in the top-left chrome, not on the plate.
- `accent` colours the selected-language dot.
- The page supports `?lang=<code>` for QA/share; it still saves a manual choice in `localStorage`.

### 4. Validate

```bash
node scripts/validate-i18n.mjs "$WORK"
```

Exit 1 means fix `content.js`, not the page.

### 5. QA

Follow `references/qa.md`. At minimum:

- 1440×900 and 390×844;
- every locale, including Arabic; no title or subtitle overflow;
- the title stays on one line inside the band, away from the seal and the side mark;
- the band is opaque and its hairline is continuous;
- no page scrollbars, no missing key, no `undefined`;
- the poster remains 3:4 and centred.

### 6. Publish and place

```bash
node /mods/neta/neta work publish web "$WORK"
```

Then place the **web Work** card:

```bash
node /mods/neta/.agents/skills/board-ops/scripts/place.mjs \
  --title "<Poster title> · shattered glass" \
  --work "works/webs/<slug>"
```

If the Board read fails with `unknown property preview`, use the hand-written `neta.work` card patch in `references/publishing.md`. The final reply links the Work; the raw artwork is never the deliverable.

### 7. Package the skill (optional)

If the user asks for a reusable skill, copy this folder to `.agents/skills-drafts/<skill-name>/`, replace the demo data with the new OC as the example, then follow `references/publishing.md` to submit it. Write `SKILL.md` in English even when the world is Chinese.

## Content model

```
$WORK/
  index.html
  style.css
  app.js
  content.js          # per-OC data; the only file that changes per character
  assets/poster.webp  # generated artwork, textless, with an empty bottom band
```

`index.html` and `style.css` are generic. The plate is `.band` (13.8% of the poster height) with `.sigil` at the left, `.titles` centred and `.side` at the right. The image's own band is covered by the HTML band; keep the artwork's band within a couple of percent of the same height so no scene is cut.

`app.js` handles detection, fallback, the menu, `dir="rtl"`, and `fitTitle()`. Do not bake a language into the HTML.

## Pitfalls

- Text in the image kills the locale switch. The plate must stay HTML.
- A full-face portrait loses the "only a fragment of her" feeling; crop it.
- Empty shards read as decoration. Every shard needs a named scene.
- Mixing palettes per shard breaks the single-pane illusion. One grade.
- A band that is too short clips German or Spanish. Test the longest title and raise the band height, not the font.
- A dirty band with a generated emblem fights the HTML seal. Regenerate or cover it completely with an opaque band.
- The cover may be chibi. Say "mature proportions, not chibi" in the prompt.
- A shard that crosses the band ruins the type. Ask for "composition must not overlap the band".

## Demo

The shipped example is Crimson Vaelen from *Sweet Nightmare Park*: a red-eyed wolf princess, a tear on one cheek, and nine shards holding the park gate, Ciely, Reapette, Rakushero, Pipo, a burning throne, a rune, a clawed hand with a wine glass, and a crown sinking in dark water. Twelve locales; title `裂隙王冠 / Crown of Fractures`. It is a demo, not a constraint.
Related skills
napkin-fry-feedingCommunityA web page where you feed a french fry to your character or eat it yourself.oc-halloween-icon-sheetCommunityTurn your character into a sheet of 16 black-silhouette Halloween stickers, ready to tap, save and share in 12 languages.oc-coloring-book-coverCommunityTurn your character into a vintage Halloween coloring-book cover with a title that speaks 12 languages.oc-abyss-wake-posterCommunityA vertical art print: tiny boat, sweeping mineral-pigment wake, live text in 11 languages.chinese-bookmark-setCommunityTurn your character into a set of three Chinese-style ink bookmarks, shown together in one product-style picture.oc-clay-mansion-sceneVerifiedTurn your character into a handmade clay Halloween mansion: towers, glowing pumpkins and no character in sight.