Back to Skills

after-hours-editorial-template

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.

81,043stars9,364forksUpdated 7/24/2026

Security Assessment

Safe(97/100)
Security Score97/100

About after-hours-editorial-template

after-hours-editorial-template is a HyperFrames presentation template skill that produces a luxury dark-editorial, three-page cinematic storyboard inspired by haute couture title cards and magazine chapter spreads. It solves the problem of quickly generating a premium, fashion-style motion piece — moody, serif-led storytelling with a high-end dark aesthetic — without building the design language from scratch.

The workflow reads the active design tokens and maps colors, typography tone, and layout rhythm into CSS variables while preserving a dark editorial baseline, then copies the bundled template to the output file. It keeps three narrative pages in sequence with a default per-page dwell of no more than three seconds, and preserves the premium motion vocabulary: staged text-reveal hierarchy, chapter wipe transitions, ambient grain and vignette depth, and a restrained cursor-light interaction for local preview. Output is a single self-contained HTML file with inline CSS and JS, and the workflow explicitly avoids sandbox-hostile browser APIs such as localStorage and confirm. A bundled checklist validates structure, motion pacing, typographic hierarchy, a constrained dark-plus-magenta color system, and legibility on a 1080p canvas before the artifact is emitted.

The skill targets designers, brand and marketing teams, and creators who want a high-end fashion or editorial motion sequence — cinematic chapter cards, lookbook-style intros, or premium storytelling pages. It is a purely client-side design template that reads and writes local files with no network calls, credential handling, or system operations.

FAQ

What kind of output does it create?

A self-contained HTML editorial motion artifact in a dark luxury style with three short pages, cinematic serif typography, and premium transitions.

How long does each page stay on screen?

The default per-page dwell is kept at three seconds or less; the workflow says not to increase it above three seconds.

What is the visual signature?

A constrained dark base with a single magenta accent, layered text reveals, multi-column chapter wipe transitions, and ambient film grain and vignette.

Does it use browser storage or pop-ups?

No. It avoids sandbox-hostile APIs such as localStorage, sessionStorage, alert, confirm, prompt, and window.open.

Are there interactive controls in local preview?

Yes — keyboard chapter jumps (1, 2, 3), reset (R), and a smooth cursor-follow glow interaction.

All Files

4 files
references/checklist.md1.1 KB
View
example.html0.4 KB
View
assets/template.html11.9 KB
View
SKILL.md2.4 KB
View

Install after-hours-editorial-template

Download and extract the skill files to your .claude/skills/ directory.

Quick Setup:

  1. Copy the skill folder to .claude/skills/
  2. Claude will automatically detect and use the skill