after-hours-editorial-template
🤖 AI Summary
Generates a self-contained, dark-luxury HTML editorial with three pages, cinematic typography, and premium transitions (staged text reveals, chapter wipes, ambient grain/vignette, cursor-light). It reads a `DESIGN.md` for color/typography mapping, copies a template, and enforces a 3-second max page dwell.
How to Install
Claude Code:
git clone --depth 1 https://github.com/nexu-io/open-design.git && cp open-design/skills/after-hours-editorial-template ~/.claude/skills/after-hours-editorial-template -r# 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
...
```
Details
| Category | Design → ui |
| Source | nexu-io/open-design |
| SKILL.md | View on GitHub → |
| Repo Stars | ★ 70.0K |
| Est. per Skill | 503 (shared across 139 skills from this repo) |
| Difficulty | Intermediate |
| Risk Level | N/A |
Related Skills
n8n-node-configuration
n8n Node Configuration Expert guidance for operation-aware node configuration with property dependen
seo-aeo-internal-linking
SEO-AEO Internal Linking Overview Analyses a set of pages and produces a prioritised list of interna
transformers-js
Transformers.js - Machine Learning for JavaScript Transformers.js enables running state-of-the-art m
antigravity-design-expert
Antigravity UI & Motion Design Expert When to Use You are building a highly interactive web inte
Works Well With
Skills from the same repository — often designed to work together
8-bit-orbit-video-template
Hyperframes Video Template Ship a premium template-mode Hyperframes composition with a ready default
ad-creative
ad-creative > Curated from Corey Haines. What it does Generate and iterate ad creative including hea
agent-browser
Agent Browser Use agent-browser for local Open Design preview validation: inspect rendered state, cl