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

dd-landing-page

Generate Devouring Details landing pages with warm dark styling and section layouts.

Updated Aug 23, 2026
Search Tags:#typography#landing page#product design#framer motion#component system#ui style#marketing layout
One-click install
npx skills add https://github.com/moonwell-fi/moonwell-ai --skill dd-landing-page
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dd-landing-page
Source: https://github.com/moonwell-fi/moonwell-ai/tree/main/.claude/skills/dd-landing-page
Command: npx skills add https://github.com/moonwell-fi/moonwell-ai --skill dd-landing-page

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It solves the problem of designing marketing landing pages that feel generic and template-like instead of authored, cohesive, and visually disciplined in the Devouring Details (DD) style.

Core Features & Use Cases

  • Style system for DD landing pages: Defines a consistent visual language (warm dark canvas, card fills/hover, typography, spacing, and pill CTA hierarchy) so the page reads like one system rather than disconnected sections.
  • Section-first layout guidance: Encourages building landing pages from vertical content sections and data-driven chapter grids to support scalable layouts.
  • Motion and CTA rules: Specifies restrained reveal motion and a single dominant accent CTA component to avoid noisy or competing primary actions.

Use case: When you need a design-aware landing page for a product essay, course, or chapter-based narrative, you can use this skill to produce hero, cards, testimonials/logo clouds, FAQ, and chapter preview layouts that match the DD aesthetic while remaining structured and repeatable.

Quick Start

Use the dd-landing-page skill to generate a Devouring Details landing page for a design-focused product with hero copy, a chapter preview grid, testimonials, and an FAQ.

Frequently Asked Questions about dd-landing-page

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

FAQPage Schema
How do I design a landing page that avoids generic startup templates?▼

To design a landing page that avoids generic startup templates, use an authored style system with warm dark base colors, specific typography rules, restrained reveal motion, and a single dominant accent CTA to ensure visual cohesion.

What's the best way to build a cohesive marketing layout with framer motion?▼

The best way to build a cohesive marketing layout with framer motion is to apply restrained reveal motion across vertical content sections, avoiding noisy or competing primary actions while maintaining a consistent component system.

How do I structure a product design landing page for chapter-based narratives?▼

Structure a product design landing page for chapter-based narratives by using a section-first layout approach, building from vertical content sections and data-driven chapter preview grids to support scalable layouts.

Does this landing page design approach work for FAQ accordions and testimonial sections?▼

Yes, this landing page design approach works for FAQ accordions, testimonials, and logo clouds by applying consistent DD typography, spacing rules, and card fill styles across all vertical sections.

Can I use a dashboard-like widget-heavy layout for a DD style product design?▼

No, you should not use a dashboard-like or widget-heavy layout for a DD style product design; instead, use component-based page construction to maintain an authored and visually disciplined aesthetic.

Why does my marketing layout have competing primary actions?▼

Your marketing layout has competing primary actions because it lacks a single dominant accent CTA component; enforcing a pill CTA hierarchy and restrained reveal motion eliminates noisy visual distractions.

Related Skills

Explore More Design & Creative Skills→
KraitsKraits

visual-design-foundations

Codify typography, spacing, color, and iconography into a cohesive design system.

Community
Advanced
Clos01Clos01
3

web-prototype-taste-editorial

Create editorial-minimalist web prototypes with refined typography and component patterns.

Community
Intermediate
m-salauddinm-salauddin

framer-motion-animations

Implement scroll-triggered and entrance animations in React with Framer Motion.

Community
Intermediate
hongmaple0820hongmaple0820
9

creating-dashboards

Coordinate multi-widget dashboards with KPI cards, filters, and responsive layouts.

Community
Advanced