v1.0.0 to v2.0.0

53 added, 134 removed. Audit A to A.

---

name: story-engineer

- description: Use when transforming raw project facts, case studies, creative briefs, or product histories into cinematic, dramatic story arcs and non-generic web narrative structures.

+ description: Use when transforming evidence-rich project histories, case studies, launches, research journeys, or retrospectives into truthful narrative structures. Not for inventing greenfield brand concepts from sparse briefs.

author: J StaR Films / Takomi

coauthored: J StaR Films / Takomi

- version: 1.0.0

+ version: 2.0.0

---

# Story Engineer

- Transform raw project facts, milestones, and technical achievements into cinematic, non-generic narrative architectures. Establish narrative tension, transformations, and visual metaphors **before** making visual, layout, or code decisions.

- For emotional modulation patterns and question-chain templates, see [narrative-patterns.md](references/narrative-patterns.md).

- For techniques on turning abstract concepts and data into physical visual metaphors, see [visual-metaphors.md](references/visual-metaphors.md).

- For worked examples (including the VOID/FORM case study), see [examples.md](references/examples.md).

- ---

- ## Ground Rules

- 1. **Story before structure**: Never start with UI sections (`Hero`, `About`, `Features`, `Contact`). Discover the story hiding inside the facts first.

- 2. **Discover, do not invent**: The drama already exists in the real sequence of events, failed experiments, scale, and breakthroughs. Extract it.

- 3. **Protect the reveal**: Gate the final climax or artifact. Never spoil the destination in the opening beat.

- 4. **Questions create motion**: Move visitors forward through escalating curiosity, not passive reading.

- ---

- ## The 6-Stage Story Engineering Pipeline

+ Turn real events, artifacts, decisions, and outcomes into a compelling interface narrative without inventing drama or forcing every project through the same arc.

- ```

- Archaeology → Transformation → Contradiction → Question-Relay → Metaphor & Texture → Interface Script

- ```

+ ## Applicability

- Follow all stages in order. Do not skip to layout until Stage 6.

+ Use this skill when the material contains a meaningful transformation, investigation, trial, construction process, consequence, or sequence of discoveries.

- ---

+ For a sparse request such as “make a website for this business,” use a creative-direction workflow instead. A category name is not a project history.

- ## Stage 1: Factual Archaeology ("What actually happened?")

+ ## 1. Build the Evidence Ledger

- Extract the raw, unpolished, chronological sequence of reality. Strip away marketing polish and extract the genuine timeline.

+ Extract:

- 1. **Map the factual event chain**:

- - What was the initial itch, observation, or frustration?

- - What investigation or digging occurred?

- - What data, books, tools, or sources were gathered?

- - What was synthesized, extracted, or built?

- - What failed, broke, or resisted?

- - What was the turning point?

- - What was the final result?

+ - Events and their actual order.

+ - Decisions and known causes.

+ - Artifacts that can be shown.

+ - Claims and their support.

+ - Accurate metrics that materially change understanding.

+ - Unknowns requiring confirmation.

- 2. **Inventory the raw numbers & scale**: Record exact metrics (e.g., *45 PDFs, 752 pages, 44 skills, 5 AI candidates, 1 winner*). These will serve as dramatic story objects in Stage 5.

+ Keep facts, interpretations, and unknowns distinguishable. Do not invent failures, competitions, milestones, quotations, metrics, or turning points.

### Completion Gate

- - [ ] Chronological factual sequence mapped (minimum 6 discrete milestones)

- - [ ] Concrete scale metrics inventoried

- - [ ] No marketing buzzwords in the event chain

- ---

+ - [ ] Narrative claims trace to supplied evidence.

+ - [ ] Missing facts remain visible.

- ## Stage 2: The Core Transformation

+ ## 2. Identify the Narrative Engine

- Reduce the entire project to a single three-part arc:

+ Choose the real source of motion:

- ```

- BEFORE → CHANGE → AFTER

- ```

+ - Transformation

+ - Investigation

+ - Trial

+ - Construction

+ - Reframing

+ - Consequence

- 1. **Before**: The unsatisfactory status quo, common frustration, or default assumption (e.g., *"AI generates repetitive, generic websites"*).

- 2. **Change**: The hypothesis, daring experiment, or contrarian intervention (e.g., *"What if we engineer deep human expertise into an AI skill?"*).

- 3. **After**: The resulting transformation or new reality (e.g., *"An AI skill generates award-winning creative architecture"*).

+ State it in one sentence. Use a contradiction or driving question only when the evidence earns it.

### Completion Gate

- - [ ] Core transformation stated in 3 sentences or fewer

- - [ ] Contrast between Before and After is sharp and meaningful

- ---

- ## Stage 3: Contradiction & The Driving Question

+ - [ ] The engine describes actual change or discovery.

+ - [ ] The proposed conclusion can answer it honestly.

- Identify the central paradox or friction in the material. Great stories run on tension.

+ ## 3. Choose the Shape

- 1. **Locate the contradiction**: Find where expectations collide with the experiment:

- - *Example*: "We used AI to escape AI-looking design."

- - *Example*: "We studied 1970s medical rule systems to build modern generative graphics."

+ Select among chronological, question-and-evidence, problem-attempt-resolution, artifact-first reconstruction, parallel comparison, or thematic chapters.

- 2. **Formulate the Driving Question**: Turn the contradiction into an open, provocative inquiry that propels the audience forward:

- - *Weak*: "Here is our creative AI workflow."

- - *Strong*: *"Can a machine learn taste?"*

+ Protect a reveal only when early disclosure would weaken genuine discovery. Keep products, services, prices, locations, and primary actions available when visitors need them.

### Completion Gate

- - [ ] Central contradiction identified

- - [ ] Single Driving Question formulated to anchor the experience

- ---

+ - [ ] Structure follows evidence rather than a fixed beat sheet.

+ - [ ] Essential utility is not sacrificed for suspense.

- ## Stage 4: The Question-Answer Relay (Narrative Rail)

+ ## 4. Construct the Rail

- Structure the narrative so that **every chapter answers one question and immediately creates the next**. This creates irresistible momentum.

+ For every beat, specify:

- Construct the narrative rail:

+ 1. Evidence introduced.

+ 2. Question answered.

+ 3. New understanding created.

+ 4. Emotional register earned.

+ 5. Artifact or data carrying the beat.

+ 6. Any withheld information and the reason.

- ```

- Beat 1: Poses Driving Question → Reveals Observation

- ↓

- Creates Question 2: "What did you do about it?"

- ↓

- Beat 2: Answers with Investigation → Discovers Core Principle

- ↓

- Creates Question 3: "Where did the knowledge come from?"

- ↓

- Beat 3: Answers with Historical Depth / Theory → Gathers Heavy Data

- ↓

- Creates Question 4: "Can all this data be combined?"

- ↓

- Beat 4: Answers with Synthesis / Tournament → Faces Failure / Crisis

- ↓

- Creates Question 5: "Did it survive the test?"

- ↓

- Beat 5: Answers with Climax / Reveal (THE ARTIFACT)

- ↓

- Creates Question 6: "What does this change for the future?"

- ↓

- Beat 6: Resolution & Horizon

- ```

+ Remove beats that do not advance understanding, emotional context, or visitor action.

### Completion Gate

- - [ ] Continuous Q&A chain connecting every narrative beat

- - [ ] Zero dead-end beats where momentum stalls

- ---

- ## Stage 5: Emotional Texture & Visual Metaphors

- Prevent information fatigue by deliberately modulating emotional registers and turning abstract ideas into physical phenomena.

- 1. **Modulate emotional registers across beats**:

- Ensure adjacent beats never share the same emotional frequency. Alternate between:

- - `WONDER` (The philosophical hook)

- - `TECHNICAL CURIOSITY` (Deconstruction of mechanisms)

- - `SCALE & WEIGHT` (Raw volume of data)

- - `SUSPENSE` (The competition / trial)

- - `VULNERABILITY` (The bug / breakdown)

- - `EXPLOSION` (The aesthetic reveal)

- - `MYSTERY / HORIZON` (The future implication)

- 2. **Physicalize abstract concepts into Visual Metaphors**:

- Transform conceptual abstractions into tangible, experiential imagery:

- - *Abstract*: "We synthesized knowledge from 44 skills."

- - *Physical Metaphor*: "Hundreds of fragmented glass shards hovering in dark space, colliding, aligning under magnetic force, and fusing into a monolithic prism."

- 3. **Deploy numbers as dramatic story objects**: Frame raw metrics with high contrast and scale typography.

- ### Completion Gate

- - [ ] Emotional register assigned to each beat (no consecutive identical registers)

- - [ ] At least 2 abstract concepts physicalized into visual metaphors

- - [ ] Scale metrics formatted as high-impact story objects

+ - [ ] Every beat changes what the visitor knows, feels, or can do.

+ - [ ] The ending resolves the narrative engine.

- ---

+ ## 5. Translate into Interface

- ## Stage 6: Narrative-to-Interface Translation

+ Define content, composition, optional visual metaphor, interaction, transition, and persistent utility for each beat. Prefer real artifacts over invented spectacle.

- Only now translate the finalized narrative rail into interaction, scene choreography, and interface design.

+ Use cinematic choreography only when time-based progression is essential. Editorial and utility-led narratives are equally valid.

- For each narrative beat, specify:

+ For extended pattern vocabulary, consult [references/narrative-patterns.md](references/narrative-patterns.md). For physicalizing genuinely abstract evidence, consult [references/visual-metaphors.md](references/visual-metaphors.md). Treat [references/examples.md](references/examples.md) as historical examples, not reusable scripts.

- | Element | Specification |

- |---|---|

- | **Narrative Goal** | The question answered & new question raised |

- | **Emotional Register** | Wonder / Scale / Suspense / Explosion / etc. |

- | **Visual Metaphor / Scene** | 3D environment, particle state, spatial layout |

- | **Typography & Copy** | Exact headline, driving statement, minimal body |

- | **Interaction / Transition** | Scroll triggers, camera move, audio cue, shader warp |

- | **Gated Information** | What is withheld until the next beat |

+ ### Final Gate

- ### Completion Gate

- - [ ] Complete scene-by-scene interface script generated

- - [ ] Climax/reveal strictly protected until the designated beat

- - [ ] Every visual and interaction element directly serves its narrative beat

+ - [ ] Every claim and beat remains evidence-backed.

+ - [ ] The structure would change if the source material changed.

+ - [ ] Interaction deepens evidence rather than decorating it.

+ - [ ] Accessibility and essential visitor utility remain complete.