skills.rest
moonwell-fi
moonwell-fiOFFICIAL
Explore all skills by this author →
Website𝕏@MoonwellDeFiGitHub

dd-editorial-chapter

Create a two-column editorial chapter layout with a sticky media rail.

Updated Aug 23, 2026
Search Tags:#typography#semantic HTML#Framer Motion#editorial layout#sticky media rail#long-form reading
One-click install
npx skills add https://github.com/moonwell-fi/moonwell-ai --skill dd-editorial-chapter
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dd-editorial-chapter
Source: https://github.com/moonwell-fi/moonwell-ai/tree/main/.claude/skills/dd-editorial-chapter
Command: npx skills add https://github.com/moonwell-fi/moonwell-ai --skill dd-editorial-chapter

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It solves the problem of turning long-form, essay-like content into a layout that feels readable and deliberate, while still supporting the narrative with contextual media—without falling into “docs portal” or blog-style chrome.

Core Features & Use Cases

  • Reading-first, two-column editorial layout: Keeps a single clear reading lane while adding a sticky media rail for diagrams, video, or supporting visuals on desktop.
  • Prose-first semantics: Renders content as real semantic structure (article, section, figure, aside) instead of card-grid typography tricks.
  • Deliberate typography and restrained media styling: Uses calm spacing, soft framed media shells, and understated hierarchy so the writing stays stable and prominent.
  • Interaction that supports comprehension: Uses hover/focus cues and light animation so labels and supporting details appear without dominating the reading experience.
  • Use Case: When publishing an instructional chapter—like a design or engineering explainer with diagrams and short practitioner commentary—this layout helps readers stay in flow while media remains available.

Quick Start

Use the dd-editorial-chapter skill whenever you want a long-form, reading-first chapter page with a sticky media rail and calm, semantic typography.

Frequently Asked Questions about dd-editorial-chapter

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a long-form reading layout with a sticky media rail for instructional content?▼

A long-form reading layout with a sticky media rail uses a two-column desktop shell, keeping a fixed reading measure for prose while locking contextual diagrams or videos in an interactive aside. This keeps readers in flow while supporting media remains accessible.

What is the best way to structure semantic HTML for an editorial chapter with diagrams?▼

Structuring semantic HTML for an editorial chapter involves using article, section, figure, and aside tags to build a prose-first hierarchy. This approach replaces card-grid typography tricks with real structural semantics designed for long-form instructional reading.

Can I use Framer Motion to add light animation to an editorial layout without disrupting reading?▼

Yes, Framer Motion can apply light transition animations and hover or focus cues to an editorial layout. These interactions allow labels and supporting details to appear contextually without dominating the calm typography or the primary reading experience.

Does a two-column editorial layout work for essay-style pages and teaching articles?▼

A two-column editorial layout works effectively for essay-style pages, docs-like chapters, and teaching articles. It provides a single clear reading lane while utilizing a sticky aside media rail to display supporting diagrams, figures, or video alongside the text.

How do I style typography and media for long-form reading without heavy blog-style chrome?▼

Typography and media for long-form reading should use calm spacing, soft framed media shells, and understated hierarchy. Restrained chrome and color usage ensures the writing stays stable and prominent, avoiding the heavy interface of standard docs portals.

When should I not use a sticky media rail layout for long-form content?▼

You should avoid a sticky media rail layout when your long-form content lacks contextual diagrams, figures, or video. Without supporting media, the two-column desktop shell provides no benefit and the fixed reading measure may feel unnecessarily restrictive.

Related Skills

Explore More Design & Creative Skills→
aj47aj47
1

media-fetcher

Fetch logos, GIFs, landing pages, diagrams, and social videos for video clips.

Community
Advanced
PiercingXXPiercingXX
1

docs-page

Generate a self-contained three-column documentation HTML page with inline CSS.

Community
Intermediate
fusenginefusengine
22

interactive-states

Implement hover, active, focus, disabled, and loading states with Framer Motion.

Community
Intermediate
EmasoftEmasoft

amvcp-layout-chrome

Create persistent page chrome with sticky headers, toolbars, and scroll-spy TOC navigation.

Community
Advanced