dd-mobile-reading

Transform desktop DD editorial layouts into mobile single-column reading flows.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/moonwell-fi/moonwell-ai --skill dd-mobile-reading
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dd-mobile-reading
Source: https://github.com/moonwell-fi/moonwell-ai/tree/main/.claude/skills/dd-mobile-reading
Command: npx skills add https://github.com/moonwell-fi/moonwell-ai --skill dd-mobile-reading

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps teams translate a Desktop “DD” editorial experience into a mobile reading experience that stays true to the authored rhythm instead of shrinking into generic single-column UI.

Core Features & Use Cases

  • Mobile-first layout rules: Collapse to one reading column, reduce chrome aggressively, and inline media rail content directly after the relevant paragraph or section.
  • Typography & spacing preservation: Keep generous spacing, maintain a readable baseline around 16px body text with tall line height, and preserve quiet monospaced section labels.
  • Control & motion adaptation: Make hover-dependent affordances visible/touch-friendly, simplify motion, and avoid overloading the viewport while keeping tactile feel.

Core Features & Use Cases

  • Use Case: You have an article prototype with multi-column DD components and a side media rail; you want a responsive breakpoint that keeps the “DD feel” while producing a comfortable phone reading flow.

Quick Start

Use dd-mobile-reading to adapt an existing DD/editorial page for mobile by collapsing to a single authored column, inlining the media rail after its associated section, and updating typography, controls, and motion to match touch-first reading.

Frequently Asked Questions about dd-mobile-reading

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

FAQPage Schema
How do I adapt a multi-column editorial layout for mobile reading without losing the original structure?▼

Adapt multi-column editorial layouts for mobile by collapsing columns into a single reading column, inlining side media rails directly after relevant sections, and adjusting typography and controls for touch-first reading.

What is the best way to handle responsive breakpoint behavior for desktop editorial components?▼

Handle responsive breakpoint behavior by reusing existing content components while reducing chrome visibility aggressively and simplifying motion to avoid overloading the mobile viewport during the single-column collapse.

Can I preserve typography and spacing when converting a desktop design to a phone layout?▼

Preserve typography and spacing in a phone layout by maintaining a readable baseline around 16px body text with tall line height, keeping generous spacing, and retaining quiet monospaced section labels.

How do I make hover-dependent interaction design work for touch-first mobile UI?▼

Make hover-dependent interaction design work for mobile UI by converting affordances to be visible and touch-friendly, simplifying Framer Motion animations, and ensuring controls maintain a tactile feel without relying on pointer hover.

Does collapsing a side media rail inline disrupt the authored rhythm of an article?▼

Collapsing a side media rail inline preserves authored rhythm by placing rail content directly after its associated paragraph or section, maintaining the contextual flow and component fidelity within the single-column mobile layout.

When should I avoid using a single-column layout for mobile UI adaptation?▼

Avoid single-column mobile UI adaptation when the desktop editorial experience relies heavily on simultaneous multi-column comparison viewing, as collapsing the structure into one reading column removes side-by-side visual context.