After Hours Editorial Template
FreeCreate luxurious dark-themed editorial motion pages.
Free · Opens the source repo
What After Hours Editorial Template does
The After Hours Editorial Template is designed for developers and designers looking to produce high-end, cinematic storyboards with a strong editorial aesthetic. This skill provides a structured approach to creating a self-contained HTML artifact that embodies a dark luxury style, perfect for fashion or premium presentations. It emphasizes cinematic typography and rich transitions, ensuring that the output is visually compelling and engaging.
To utilize the template, users will begin by referencing their active DESIGN.md to map essential design elements such as colors, typography, and layout rhythm into CSS variables. The skill then guides users through a series of steps to create an HTML file that maintains a dark editorial baseline while ensuring that the narrative flows smoothly across three pages. Each page is designed to engage viewers without exceeding a three-second dwell time, preserving the intended pacing of the story.
The skill includes specific guidelines for maintaining premium motion behaviors, such as staged text reveals and chapter wipe transitions, which contribute to the overall cinematic experience. Additionally, it incorporates ambient effects like grain and vignette depth to enhance the visual richness. The final output is a single-file HTML document with inline CSS and JavaScript, making it easy to deploy and share without external dependencies.
This skill is ideal for creative professionals in the fashion or editorial industries who require a template that not only looks premium but also functions seamlessly across various platforms. It is particularly useful for those looking to present their work in a visually striking manner, combining storytelling with high-quality design.
When to use it
Use this skill when you need to create a dark-themed editorial presentation that requires a cinematic touch and premium aesthetics.
When not to use it
Avoid this skill if you're looking for a simple, text-based HTML output or if your project does not require a high-end visual presentation.
What you can build with it
Creating Fashion Editorials
Use the template to develop visually rich fashion editorial pages that showcase collections or stories in a premium format.
Cinematic Storyboarding
Leverage the cinematic typography and transitions for creating storyboards that require a high-end presentation style.
High-End Presentations
Employ the After Hours Editorial Template for corporate or creative presentations that demand a luxurious dark aesthetic.
How to install After Hours Editorial Template
View source1. Install with the skills CLI
npx skills add nexu-io/open-design/after-hours-editorial-template --agent claude-code2. Or install it manually
Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.
Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs
Inside SKILL.md
Written by nexu-ioAfter 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>
Frequently asked questions about After Hours Editorial Template
Similar skills
PPTX HTML Fidelity Audit
Ensure your PPTX matches its HTML source perfectly.
HTML PPT Studio
Create professional HTML presentations effortlessly.
Humanize PPT
Transform raw material into presentation-ready outlines.
Replit Deck
Create visually cohesive decision decks with ease.
Open Design Landing Deck
Create engaging marketing decks with a magazine-style format.
Magazine Web Presentation
Create visually striking HTML presentations with ease.