after-hours-editorial-template
nexu-io/open-design
Luxury dark-editorial HyperFrames template for cinematic three-page motion sequences with haute couture styling.
What is after-hours-editorial-template?
A premium dark-editorial template for creating three-page cinematic HyperFrames with moody serif typography, elegant transitions, and high-end visual storytelling. Use when building fashion-inspired motion pages, magazine-style chapter spreads, or luxury brand presentations with rich, restrained animations.
- Generates self-contained HTML editorial motion artifacts with dark luxury aesthetic
- Produces three-page cinematic sequences with staged text reveal hierarchy and chapter wipe transitions
- Integrates design system colors and typography while maintaining dark editorial baseline
- Applies ambient grain, vignette depth, and restrained cursor-light interactions for preview
- Outputs single-file HTML with inline CSS and JavaScript, no external dependencies
- Validates against premium motion behavior checklist before delivery
How to install after-hours-editorial-template
npx skills add https://github.com/nexu-io/open-design --skill after-hours-editorial-template- Active DESIGN.md file with color, typography, layout, and component definitions
- File write capability enabled
- Desktop platform for preview and interaction
How to use after-hours-editorial-template
- 1.Read the active DESIGN.md to extract colors, typography tone, and layout rhythm
- 2.Copy assets/template.html to index.html as your working file
- 3.Structure content into three narrative pages, keeping each under 3 seconds dwell time
- 4.Implement staged text reveals, chapter wipe transitions, and ambient grain effects
- 5.Add restrained cursor-light interactions for local preview functionality
- 6.Validate output against references/checklist.md for premium motion standards
- 7.Emit final artifact as single-file HTML with inline CSS and JavaScript
Use cases
- Creating luxury fashion brand motion presentations with cinematic typography
- Building magazine-style chapter introductions with dark, moody aesthetics
- Designing haute couture title card sequences with premium transition language
- Producing high-end editorial storyboards with staged text animations
- Developing dark-themed brand storytelling pages with grain and vignette effects
- Fashion and luxury brand designers
- Editorial and magazine content creators
- Motion graphics designers working with premium aesthetics
- Brand storytellers seeking cinematic presentation templates
- Designers building dark-themed, typography-forward experiences
after-hours-editorial-template FAQ
The template is designed for three-page sequences to maintain cinematic pacing. Extending beyond this may dilute the premium editorial aesthetic and transition impact.
Read the active DESIGN.md file and map its color, typography, and layout definitions into CSS variables while preserving the dark editorial baseline.
Avoid sandbox-hostile APIs like localStorage and confirm(). Stick to standard DOM manipulation and CSS animations for reliable preview and deployment.
The template outputs as single-file HTML with inline CSS and JS. External dependencies should be avoided; use system fonts or embed assets inline.
Light, subtle interactions triggered by cursor movement or hover states that enhance the preview experience without overwhelming the editorial aesthetic.
Full instructions (SKILL.md)
Source of truth, from nexu-io/open-design.
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
surface: video
type: hyperframes
platform: desktop
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
after-hours-editorial-template/
├── SKILL.md
├── assets/
│ └── template.html
├── references/
│ └── checklist.md
└── example.html
Workflow
- Read active
DESIGN.mdand map colors, typography tone, and layout rhythm into CSS variables while preserving a dark editorial baseline. - Copy
assets/template.htmltoindex.html. - Keep three narrative pages in sequence; do not increase default page dwell above 3 seconds.
- Preserve premium motion behavior:
- staged text reveal hierarchy
- chapter wipe transitions
- ambient grain/vignette depth
- restrained cursor-light interaction for local preview
- Keep output single-file HTML with inline CSS and JS.
- Avoid sandbox-hostile browser APIs (e.g. localStorage and confirm).
- Validate with
references/checklist.mdbefore emitting.
Output contract
One short orientation sentence, then:
<artifact identifier="after-hours-editorial" type="text/html" title="After Hours Editorial Template">
<!doctype html>
<html>...</html>
</artifact>
Related skills
More from nexu-io/open-design and the wider catalog.
agent-browser
Browser automation CLI for AI agents to inspect, test, and automate web pages locally.
ai-music-album
Full-lifecycle AI music album production from concept to export.
algorithmic-art
Create reproducible generative art with p5.js using seeded randomness.
apple-hig
Apple Human Interface Guidelines as 14 agent skills for iOS, macOS, visionOS, watchOS, and tvOS design.
article-magazine
Huashu / huashu-md-html-inspired magazine article layout for turning Markdown or notes into a polished long-form HTML essay.
artifacts-builder
Create elaborate multi-component HTML artifacts with React, Tailwind CSS, and shadcn/ui for claude.ai