napkin-fry-feeding

Name: napkin-fry-feeding
Author: Jagulus

Community@sumino/napkin-fry-feeding

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: napkin-fry-feeding. Run `npx -y @neta-art/neta-search-cli@latest skills use @sumino/napkin-fry-feeding --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/napkin-fry-feeding

Summary

A web page where you feed a french fry to your character or eat it yourself.

Pick one character from your world and watch them react in six hand-drawn expressions as you offer a ketchup-dipped fry.
Two choices: eat the fry yourself and watch them pout and cry, or feed them and see them take a bite and beam.
A real hand holding a fry over a napkin doodle, with counters tracking how many fries you fed or stole.
Works best with characters who have a strong look: distinctive hair, ears, props, or clothing that reads clearly as a small doodle.
The finished page runs in 11 languages and works on phones, tablets, and desktops with no scrolling.

SKILL.md

# Napkin Fry Feeding Simulator

A tiny, tactile web Work: a real hand holds a ketchup-tipped fry in front of a doodle on a napkin. Choose one OC from the world, then either eat the fry yourself or feed it to them. The drawing reacts in six states. The whole interface is multilingual; English is the source and fallback, and Chinese shows English above every Chinese line.

**Live demo:** https://neta.art/w/sumino/sweet-nightmare-park/fries-with-oc
**Starter:** `templates/` contains the working page and a Pipo example. `assets/` contains the shared photography and a demo cover.

## What the user gets

- A warm top-down photo of a napkin, a red carton corner, a real hand and a ketchup-tipped fry.
- A horizontal row of Q-version avatars for every OC in the world, names underneath.
- A large 4:5 stage where a black-ink OC reacts to the fry.
- Two hand-drawn buttons: **Eat it myself** and **Feed the OC**.
- Six expressions per character: startled, eager, pouty, wailing, chewing, satisfied.
- Counters for fed / stolen fries, a TAKE slate, a photobooth flash, crumbs, hearts and a small WebAudio track.
- 11 locales, a manual language selector, system-language detection and English fallback.

## When to use

Use when the user asks for a small interactive scene around an OC and food — especially "feed my OC a fry", "napkin doodle", "photo plus line art", "first-person snack interaction", or a light web mini-game that should use the world's existing cast.

Do not use for:

- a branching visual novel or choice-heavy game — that is `create-avg`;
- an ongoing chat/roleplay with one character — that is `create-roleplay` or `companion-onboarding`;
- a plain static illustration or poster;
- a full game with levels, combat or a long loop — use `game-maker`.

## Hard rules

0. **Use the sandbox CLI path.** In a Cohub sandbox every `neta` command is `node /mods/neta/neta …` (`neta` may not be on PATH). The commands below use that form.
1. **Read the current world first.** Use the characters that actually exist. Do not invent a new cast when the world has one, and do not use the demo's Pipo/Reapette data in another world without replacing it.
2. **Two visual languages, never blended.** The hand, fries, carton and napkin are photographic. The OC is pure black ink line art, no fill, no colour, no paper texture, transparent background. The OC is composited with `mix-blend-mode:multiply` so the paper fibres show through.
3. **Generate the key art with the image model.** No SVG OC, no CSS doodle, no stock hand. Use a reference-capable model with `--image` (gpt-image-2 or equivalent) and transparent background support.
4. **The OC must be recognisable at 40 px.** Preserve signature hair, ornaments, ears/horns, eyes, species, clothing silhouette and prop from the atom's appearance reference.
5. **At least 10 complete locales.** English is default and fallback. In `zh`, every visible Chinese line has the English source above it. No half-translated locale.
6. **No page scrollbars.** The app is a fixed flex column; only the avatar rail scrolls horizontally.
7. **Test both paths, reset, character switch and language switch.** The initial frame is not a test.
8. **Publish and place the card.** A finished page without a published Work and a Board card is not shipped.

## Pipeline

### 0. Read the world and choose the cast

```bash
node /mods/neta/neta atom list --type character
node /mods/neta/neta find images "<character name>"
```

For each character read `world/characters/<name>.md`, especially `## 形象参考` / `## Appearance`, and open the cover. Write down 4–8 signature features. Use all characters in the world; if there are more than 12, ask the user which main cast to use, or take the first 12.

Pick a kebab-case slug, e.g. `fries-with-oc`, and create the work stub:

```bash
WORK=works/web/<slug>
node /mods/neta/neta work init web "$WORK" --title "<title>"
# Read the printed workDir. It may normalize works/web -> works/webs.
WORK_DIR="<workDir from the output>"
```

### 1. Generate the three shared photo assets

Read `references/art-direction.md` for the exact prompts.

1. **Napkin scene** — 4:5, top-down, white napkin, red carton corner, two or three fries, empty centre, warm window light, grain, no hand, no drawing, no text.
2. **Hand with whole fry** — transparent, bottom-left wrist, thumb/index pinch, ketchup tip.
3. **Hand with bitten fry** — same hand/angle/scale, top half bitten, ketchup at the bite.

Submit in batches of at most six concurrent gpt-image-2 tasks. These three are needed by the build, so use synchronous calls.

```bash
NETA_DEFAULT_IMAGE_MODEL=gpt-image-2-auto node /mods/neta/neta generate image \
  --prompt "<prompt from art-direction.md>" \
  --work-title "<asset title>" \
  --param size=1536x1920 --param quality=high --param output_format=png
```

For transparent assets use `--param background=transparent`. For the bitten fry pass the whole-fry image with `--image`.

Process them into `assets/`:

- `napkin.webp` — resize to max 1200×1500, quality 84.
- `hand.webp`, `hand-bitten.webp` — union-crop both to the same alpha bounding box before resizing, or the swap will jump. Resize to height 900, WebP 88.

The starter already ships working versions of all three; use them as the baseline if the user likes the demo look.

### 2. Generate one 2×3 expression sheet per character

Use the character cover as `--image`. The full prompt is in `references/art-direction.md`.

```bash
NETA_DEFAULT_IMAGE_MODEL=gpt-image-2-auto node /mods/neta/neta generate image \
  --prompt "<expression-sheet prompt; fill {APPEARANCE}>" \
  --image "world/media/studio/characters/<name>.png" \
  --work-title "<name> · expression sheet" \
  --param size=2048x1360 --param quality=high \
  --param background=transparent --param output_format=png
```

Six cells, left-to-right then top-to-bottom: **idle, expect, sad, cry, eat, happy**. Pure black line, transparent, no grid, no text. Batch at most six characters at a time.

These sheets are ingredients of the page; do not put each sheet on the Board.

### 3. Slice, clean, ink and avatar

```bash
python3 scripts/process-oc-sheet.py \
  --sheet /tmp/<name>-sheet.png \
  --out assets/oc --id <id>
```

The script:

- splits 3×2 cells;
- cleans the 1/255 alpha haze;
- union-crops all six states so swaps don't jump;
- converts to pure black ink (`alpha × darkness`) and removes grey wash;
- writes six 500 px WebP states + a 180 px avatar;
- prints the union `ratio` for `characters.js`.

Copy the shared photography into the work:

```bash
cp assets/napkin.webp assets/hand.webp assets/hand-bitten.webp <work>/assets/
cp -r assets/oc/<id> <work>/assets/oc/
```

The starter ships `assets/oc/pipo/` as a worked example. If the world has Pipo, it runs immediately; otherwise replace it.

### 4. Fill the data

Copy the templates:

```bash
cp templates/index.html templates/style.css templates/app.js <work>/
cp templates/characters.example.js <work>/characters.js
cp templates/i18n.starter.js <work>/i18n.js
```

`characters.js` is presentation only:

```js
{ id, name, tint, ratio, mouth }
```

- `id` matches `assets/oc/<id>/`;
- `ratio` is printed by the processing script;
- `mouth` is the scene percentage where the fry tip meets the mouth. Start at 46; Pipo ≈ 52, normal chibi ≈ 42–48. Use `?debug=1` and adjust.

`i18n.js` holds every spoken line and every UI string. The starter has all 26 UI keys in 11 locales plus Pipo as one worked character. Replace the Pipo example with the world's cast, and translate the five lines and the home for every locale.

### 5. i18n

Read `references/i18n.md`.

- 11 locales: `en`, `zh`, `ja`, `ko`, `es`, `fr`, `de`, `pt`, `it`, `ru`, `id`.
- `en` is the source and fallback.
- `zh` is bilingual: add `.bilingual` on `<body>` and `data-en` on every Chinese text element; CSS `::before` prints the English above.
- Other locales are local-only; remove `data-en`.
- The selector is `AUTO` + the 11 codes; persist a manual choice under `fries-lang`.
- `?lang=<code>` locks one locale for a load (QA).
- Validate before publishing:

```bash
node scripts/validate-i18n.mjs --characters characters.js --i18n i18n.js
```

### 6. Build and QA

```bash
node scripts/screenshot.mjs \
  --url "file:///workspace/$WORK_DIR/index.html?lang=en" \
  --out /tmp/fries-390.png --width 390 --height 844 --dpr 2 \
  --eval "(()=>({h:innerHeight,doc:document.documentElement.scrollHeight}))()"
```

Test at 390×844, 375×667, 320×568, 768×1024 and 1440×1000. Walk `references/qa.md`:

- both paths and all six expressions;
- reset and switch;
- all 11 locales, zh bilingual, non-zh no `data-en`;
- no page scroll, no title overflow;
- hand tip on each mouth;
- counter above the name label, bubble clear of both;
- `?debug=1` mouth check;
- image alpha/no white halo.

### 7. Publish and place the card

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

If publish returns `world_slug_required`, set a readable slug once:

```bash
node /mods/neta/neta world slug set <slug>
node /mods/neta/neta work publish web "$WORK_DIR"
```

Then place the Work card on the Board per `board-ops`:

```bash
node /mods/neta/.agents/skills/board-ops/scripts/place.mjs \
  --title "<work title>" --work "$WORK_DIR"
```

Do not put the OC sheets, the hand photos or the napkin photo on the Board; they are ingredients.

## File map

```
index.html                 two buttons, picker, scene, language select
style.css                  photo/ink composition, bilingual stack, responsive
app.js                     state machine, hand, bubble, counters, sound, i18n
characters.js              id / name / tint / ratio / mouth
i18n.js                    LOCALES + UI + homes + 5 lines per character
assets/napkin.webp         shared photo
assets/hand.webp           transparent whole fry
assets/hand-bitten.webp    transparent bitten fry
assets/oc/<id>/*.webp      6 states + avatar
scripts/process-oc-sheet.py
scripts/validate-i18n.mjs
scripts/screenshot.mjs
references/art-direction.md
references/interaction-spec.md
references/i18n.md
references/qa.md
references/community.md
```

## Interaction in one screen

- Scene 4:5; OC height 64%, bottom 17%; hand width 72%.
- `M` = per-character mouth percentage. Tip at `(50%, M%)`:
  `left = -10.7%`, `top = M - 0.8%`.
- Self-eat: `tease → eaten → sad → cry → finish` (1.65 / 0.76 / 1.45 / 3.0 s).
- Feed: `offer → bite → happy → finish` (1.5 / 0.95 / 3.3 s).
- Counter increments at cry / happy. Take increments on every action.
- Bubble is a speech bubble with English above Chinese in zh; fade the TAKE tag while it is visible.
- Reset restores the whole fry and the two action buttons.

Full timings and CSS in `references/interaction-spec.md`.

## Share the skill in the community

The skill is already packaged in the `neta-search` format. Publishing is explicit:

```bash
# only if the skill is still a draft
npx -y @neta-art/[email protected] skills add napkin-fry-feeding

# publish the current version of .agents/skills/napkin-fry-feeding
npx -y @neta-art/[email protected] skills submit napkin-fry-feeding --wait 120
```

`add` only moves a draft into `.agents/skills/`; `use` only consumes a skill. **`submit` is what publishes it** and waits for the server to collect the digest. Only the space owner can submit. The result is `admitted` first and `released: true` after the next publish; it then appears in `skills find` under the author's handle as a community, unreviewed skill. `--withdraw` takes it down. Full details in `references/community.md`.

## Do not

- Do not use a coloured anime illustration for the OC.
- Do not ship a generic fry or hand; the ketchup-tipped transparent fry is the hinge of the joke.
- Do not put readable text into generated images.
- Do not show Chinese without English above it in the zh build.
- Do not skip the bite asset; the half fry is the proof of the feed.
- Do not claim the Work is shipped before `meta.json` is `ready`, the public page loads, and the Board card exists.

Skills

Skills Leaderboard

Built-in

napkin-fry-feeding