After Hours Editorial Template
Generate a self-contained three-page dark haute-couture HyperFrames HTML motion sequence with serif editorial typography and cinematic transitions.
Overview
After-hours-editorial-template is an agent skill most often used in Build (also Validate, Launch) that emits a three-page dark editorial HyperFrames HTML motion sequence.
Install
npx skills add https://github.com/nexu-io/open-design --skill after-hours-editorial-templateWhat is this skill?
- Three-page cinematic HyperFrames sequence with chapter-style editorial transitions
- Dark luxury aesthetic: premium serif typography, magenta accent, grain-forward motion language
- Open Design mode template with design_system sections: color, typography, layout, components
- Outputs: primary index.html plus template.html and example.html under assets/references
- Example prompt caps each page under ~3 seconds for short-form motion storytelling
- 3-page HyperFrames sequence
- 4 design_system sections required
- Example prompt: each page under 3 seconds
Adoption & trust: 833 installs on skills.sh; 61.4k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You need a premium dark editorial motion presentation but lack a repeatable template that ties typography, color, and transitions into one HTML artifact.
Who is it for?
Creators pitching fashion, lifestyle, or premium brands who want cinematic HyperFrames in HTML without building motion systems from scratch.
Skip if: Light SaaS dashboard UI, backend work, or long-form video edits outside short per-page motion caps.
When should I use this skill?
User asks for after hours editorial template, dark fashion HyperFrames, haute couture motion pages, magazine cinematic slides, or 高级暗黑时尚风 / 高定杂志风动效.
What do I get? / Deliverables
You receive a self-contained HTML editorial sequence with template and example files aligned to the After Hours luxury checklist.
- index.html primary motion artifact
- template.html and example.html
- Design system sections for color, typography, layout, components
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
The primary deliverable is buildable front-end HTML motion artifacts, even when the creative brief sounds like marketing or pitch work. HyperFrames output is implemented as index.html and template assets—frontend surface, not analytics or SEO copy alone.
Where it fits
Generate index.html plus template.html for a three-chapter dark editorial sequence before wiring it into a launch microsite.
Storyboard a premium concept with serif chapter transitions to test positioning before full brand build.
Ship a moody motion landing artifact for a product drop or editorial campaign page.
Refresh seasonal lookbook motion pages using the same HyperFrames design_system sections.
How it compares
Design-system-backed HTML motion template—not a Figma-only mockup skill or a generic Tailwind landing generator.
Common Questions / FAQ
Who is after-hours-editorial-template for?
Solo builders and marketers who want dark luxury editorial motion pages in HyperFrames HTML for pitches, lookbooks, or launch storytelling.
When should I use after-hours-editorial-template?
During Build frontend when authoring motion HTML, during Validate prototype when storyboarding a premium concept, or at Launch distribution when you need a cinematic dark presentation asset.
Is after-hours-editorial-template safe to install?
It writes local HTML assets; review the Security Audits panel on this page and inspect generated files before hosting publicly.
SKILL.md
READMESKILL.md - After Hours Editorial Template
# 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 <artifact identifier="after-hours-editorial" type="text/html" title="After Hours Editorial Template"> <!doctype html> <html>...</html> </artifact> ```