From ecddcd4fbd66e5399007a45726a85bc6fc9c1747 Mon Sep 17 00:00:00 2001 From: Tuola-waj Date: Sat, 9 May 2026 16:59:27 +0800 Subject: [PATCH] add after-hours-editorial-template template skill (#1053) Add a new dark editorial HyperFrames template skill with seed/example/checklist assets and register the skill id in DE/FR/RU i18n fallback lists so localized-content validation stays green. Co-authored-by: Tuola Ge Co-authored-by: Cursor --- apps/web/src/i18n/content.fr.ts | 1 + apps/web/src/i18n/content.ru.ts | 1 + apps/web/src/i18n/content.ts | 1 + .../after-hours-editorial-template/SKILL.md | 78 ++++++++ .../assets/template.html | 173 ++++++++++++++++++ .../example.html | 12 ++ .../references/checklist.md | 25 +++ 7 files changed, 291 insertions(+) create mode 100644 skills/after-hours-editorial-template/SKILL.md create mode 100644 skills/after-hours-editorial-template/assets/template.html create mode 100644 skills/after-hours-editorial-template/example.html create mode 100644 skills/after-hours-editorial-template/references/checklist.md diff --git a/apps/web/src/i18n/content.fr.ts b/apps/web/src/i18n/content.fr.ts index bf8981b76..9124fa446 100644 --- a/apps/web/src/i18n/content.fr.ts +++ b/apps/web/src/i18n/content.fr.ts @@ -373,6 +373,7 @@ export const FR_SKILL_IDS_WITH_EN_FALLBACK = [ 'x-research', 'trading-analysis-dashboard-template', 'github-dashboard', + 'after-hours-editorial-template', ] as const; export const FR_DESIGN_SYSTEM_IDS_WITH_EN_FALLBACK = [ diff --git a/apps/web/src/i18n/content.ru.ts b/apps/web/src/i18n/content.ru.ts index 2978dcf40..2ebfba797 100644 --- a/apps/web/src/i18n/content.ru.ts +++ b/apps/web/src/i18n/content.ru.ts @@ -373,6 +373,7 @@ export const RU_SKILL_IDS_WITH_EN_FALLBACK = [ 'x-research', 'trading-analysis-dashboard-template', 'github-dashboard', + 'after-hours-editorial-template', ] as const; export const RU_DESIGN_SYSTEM_IDS_WITH_EN_FALLBACK = [ diff --git a/apps/web/src/i18n/content.ts b/apps/web/src/i18n/content.ts index 528238560..de8b36f77 100644 --- a/apps/web/src/i18n/content.ts +++ b/apps/web/src/i18n/content.ts @@ -422,6 +422,7 @@ const DE_SKILL_IDS_WITH_EN_FALLBACK = [ 'x-research', 'trading-analysis-dashboard-template', 'github-dashboard', + 'after-hours-editorial-template', ] as const; const DE_DESIGN_SYSTEM_IDS_WITH_EN_FALLBACK = [ diff --git a/skills/after-hours-editorial-template/SKILL.md b/skills/after-hours-editorial-template/SKILL.md new file mode 100644 index 000000000..1a8080fc6 --- /dev/null +++ b/skills/after-hours-editorial-template/SKILL.md @@ -0,0 +1,78 @@ +--- +name: after-hours-editorial-template +description: | + Luxury dark-editorial HyperFrames template for three-page cinematic storyboards, + inspired by haute couture title cards and magazine chapter spreads. Use when the + user asks for premium fashion-style motion pages, moody serif-led storytelling, + or a high-end dark presentation aesthetic with rich transitions. +triggers: + - "after hours editorial template" + - "dark fashion hyperframes template" + - "haute couture motion pages" + - "magazine style cinematic slides" + - "高级暗黑时尚风模板" + - "高定杂志风动效" +od: + mode: template + platform: desktop + scenario: live-artifacts + preview: + type: html + entry: index.html + reload: debounce-100 + design_system: + requires: true + sections: [color, typography, layout, components] + outputs: + primary: index.html + secondary: + - template.html + - example.html + example_prompt: "Create a three-page HyperFrames editorial sequence in a dark haute-couture style: premium serif typography, magenta accent, elegant chapter transitions, and cinematic grain. Keep each page under 3 seconds." + capabilities_required: + - file_write +--- + +# After Hours Editorial Template + +Produce a self-contained HTML editorial motion artifact in a dark luxury style, +with three short pages, cinematic typography, and premium transition language. + +## Resource map + +```text +after-hours-editorial-template/ +├── SKILL.md +├── assets/ +│ └── template.html +├── references/ +│ └── checklist.md +└── example.html +``` + +## Workflow + +1. Read active `DESIGN.md` and map colors, typography tone, and layout rhythm + into CSS variables while preserving a dark editorial baseline. +2. Copy `assets/template.html` to `index.html`. +3. Keep three narrative pages in sequence; do not increase default page dwell + above 3 seconds. +4. Preserve premium motion behavior: + - staged text reveal hierarchy + - chapter wipe transitions + - ambient grain/vignette depth + - restrained cursor-light interaction for local preview +5. Keep output single-file HTML with inline CSS and JS. +6. Avoid sandbox-hostile browser APIs (e.g. localStorage and confirm). +7. Validate with `references/checklist.md` before emitting. + +## Output contract + +One short orientation sentence, then: + +```xml + + +... + +``` diff --git a/skills/after-hours-editorial-template/assets/template.html b/skills/after-hours-editorial-template/assets/template.html new file mode 100644 index 000000000..35b365643 --- /dev/null +++ b/skills/after-hours-editorial-template/assets/template.html @@ -0,0 +1,173 @@ + + + + + + + + + + + + +
+
+
+
+
+
Maison NocturneVol. XIV · A/W 2026
+
01 / 03
+
+ +
+
A field report on late-night coutureEdition 14
+

After
Hours.

+
+
EditionNo. 14
+
DirectorL. Marchetti
+
LocaleParis · 11e
+
DateMay 2026
+
+
+ +
+
+
Maison Nocturne Vol. XIV
+
02
+
+
+
Movements
+

A study
in cuts
& color.

+

Three silhouettes carry the season - the column, the cape, and the cinch. Each is annotated in the chapters that follow.

+
+
+ +
+
+
"
+
+
The house dresses you for an evening that has not begun. You leave the fitting and somewhere a room is already waiting.
+
- Camille Aubry Editor-in-Chief · Le Soir Parisien
+
+
+
+
Voices · Le Soir ParisienIssue 14
+
+
+ + + + diff --git a/skills/after-hours-editorial-template/example.html b/skills/after-hours-editorial-template/example.html new file mode 100644 index 000000000..d26b4b53f --- /dev/null +++ b/skills/after-hours-editorial-template/example.html @@ -0,0 +1,12 @@ + + + + + + After Hours Editorial Template Example + + + + + + diff --git a/skills/after-hours-editorial-template/references/checklist.md b/skills/after-hours-editorial-template/references/checklist.md new file mode 100644 index 000000000..53a3dba6d --- /dev/null +++ b/skills/after-hours-editorial-template/references/checklist.md @@ -0,0 +1,25 @@ +# Checklist + +## P0 + +- `assets/template.html` exists and opens directly from disk. +- `example.html` renders the default sample in an iframe without a build step. +- SKILL frontmatter uses `od.mode: template`, `od.scenario: live-artifacts`, and `od.outputs.primary: index.html`. +- The template preserves a three-page editorial narrative in one scene flow. +- Each page dwell is <= 3 seconds in the default timeline. +- Includes high-end transitions (multi-column wipe) and layered text reveal motion. +- Includes ambient cinematic finish (film grain, vignette, frame chrome). +- No sandbox-hostile APIs (`localStorage`, `sessionStorage`, `alert`, `confirm`, `prompt`, `window.open`). + +## P1 + +- Local preview supports keyboard chapter jumps (`1`,`2`,`3`) and reset (`R`). +- Cursor-follow glow interaction is smooth and non-blocking. +- Typography hierarchy clearly separates kicker, display serif, and metadata labels. +- Color system stays constrained to dark base + single magenta accent. + +## P2 + +- Scene transitions remain readable at 30fps export. +- Small metadata text remains legible on a 1080p canvas. +- Decorative effects (grain/glow) do not overpower core copy.