Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor GitHub Copilot

after-hours-editorial-template — Claude Code skill: install

Generates luxury dark editorial presentations with haute-couture typography and cinematic transitions. Built for fashion lookbooks and premium brand pitches.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add nexu-io/open-design --skill after-hours-editorial-template -a claude-code
Open on GitHub

What after-hours-editorial-template does

The skill assembles three-page cinematic presentations in a dark editorial aesthetic inspired by haute-couture title cards and magazine chapter spreads. Each page opens with staged text reveal hierarchy, chapter-wipe transitions, and ambient grain with vignette depth. Page dwell stays under three seconds.

It works by copying assets/template.html to index.html. The skill reads the active DESIGN.md and maps color, typography tone, and layout rhythm into CSS variables while keeping the dark editorial baseline. Final output is a single HTML file with inline CSS and JS, avoiding localStorage and other sandbox-hostile APIs.

Requires a DESIGN.md file in the project and file-write capability. The skill does not push page dwell above the default three seconds, even with more content — that signals you should trim the volume.

What it helps with

  • build dark fashion magazine presentation
  • create three-page cinematic storyboard
  • generate haute-couture title card sequence with transitions
  • produce premium brand pitch with grain and vignette
  • render editorial lookbook with text reveal hierarchy

Example prompts for the agent

  • Create a three-page HyperFrames editorial in after-hours style: dark background, premium serif typography, magenta accent
  • Make a fashion lookbook with cinematic transitions and grain like haute couture
  • Need a dark editorial presentation with vignette and staged text reveal on each page

How to install after-hours-editorial-template

1Skills CLI (Vercel)

npx skills add nexu-io/open-design --skill after-hours-editorial-template -a claude-code

2Manually: put the files in place

~/.claude/skills/after-hours-editorial-template/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/after-hours-editorial-template/

From the same set106

The whole set →
ui-ux-pro-max nexu-io A discovery catalog entry for the UI/UX Pro Max skill in OpenDesign. It registers design system triggers so agents recognize interface usability requests. Claude Code CX Codex Cursor +1 5,400installs frontend-design nexu-io Skill for building frontend interfaces with considered typography, color and layout — from landing pages to dashboards. Claude Code CX Codex Cursor +1 4,800installs threejs nexu-io Guides the agent in building browser 3D scenes, materials, interactive controls, and post-processing with Three.js. Claude Code CX Codex Cursor +1 3,400installs creative-director nexu-io This skill takes a creative concept from brief to presentation and checks it on three axes. Use it for campaign ideas and creative critique. Claude Code CX Codex Cursor +1 3,400installs design-brief nexu-io Parses an I-Lang design brief into a concrete spec with palette, typography, density, and constraints. Eliminates ambiguity from phrases like "make it professional." Claude Code CX Codex Cursor +1 3,400installs apple-hig nexu-io Integrates Apple Human Interface Guidelines for iOS, macOS, visionOS, watchOS, and tvOS into your coding agent during planning. Claude Code CX Codex Cursor +1 3,200installs hatch-pet nexu-io Creates, validates, and packages 8×9 animated pet spritesheets for Codex. Use it when turning visual references or concept prompts into importable digital pet companions. Claude Code CX Codex Cursor +1 3,100installs design-md nexu-io Creates and maintains DESIGN.md with design direction, tokens, and visual rules. Useful when an agent needs one source of truth for a project’s design system. Claude Code CX Codex Cursor +1 3,100installs

Similar

event-store-design Seth Hobson This skill guides event store design for event-sourced systems and helps compare storage technologies. Use it when building event persistence infrastructure or choosing a store. Claude Code CX Codex Cursor 10,800installs answer-me-with-html QingYunA This skill turns selected answers into one-page HTML explainers. Use it to show a flow, compare options, or lay out findings from an investigation. Claude Code CX Codex Cursor +1 5,200installs antislop miqdadbadjuber A rule-based filter for generic AI output in interfaces and code. Use it when an agent needs explicit checks for UI, copy, accessibility, or mobile layout. Claude Code CX Codex Cursor +1 7,300installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs grill-me Matt Pocock grill-me interviews you about a plan or design to expose gaps and sharpen decisions. Use it before implementation starts. Claude Code 1,424,476installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. Claude Code CX Codex Cursor +1 673,100installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. Claude Code 986,201installs grilling Matt Pocock Stress-test a plan, decision, or idea through structured rounds of questions. Use it when you need to expose assumptions before acting. Claude Code 979,543installs

Questions about after-hours-editorial-template

How to install after-hours-editorial-template in Claude Code?

Run npx skills add nexu-io/open-design --skill after-hours-editorial-template -a claude-code. The skill will appear in ~/.claude/skills/after-hours-editorial-template/SKILL.md.

What does after-hours-editorial-template do?

Assembles three-page HTML presentations in a dark premium aesthetic with cinematic transitions, serif typography, and texture. Reads settings from DESIGN.md and maps them into the template's CSS variables.

What does the skill require to work?

A DESIGN.md file in the project root and file-write capability. The skill works with color, typography, layout, and components sections from the design system.

Source text

SKILL.md · Apache-2.0 
---
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

```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>
```

© nexu-io · Apache-2.0 · nexu-io/open-design

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor