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

devouring-details-design

Implement Moonwell design tokens and editorial layouts for Devouring Details web surfaces.

Updated Aug 27, 2026
Search Tags:#design system#ui styling#dark theme#motion guidelines#editorial layout#tailwind tokens#prototype surface
One-click install
npx skills add https://github.com/moonwell-fi/moonwell-ai --skill devouring-details-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: devouring-details-design
Source: https://github.com/moonwell-fi/moonwell-ai/tree/main/.claude/skills/devouring-details-design
Command: npx skills add https://github.com/moonwell-fi/moonwell-ai --skill devouring-details-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Devouring Details design direction is hard to replicate consistently, so teams end up with generic “SaaS UI” that lacks the authored, grayscale-first, accent-disciplined feel.

Core Features & Use Cases

  • Token-first visual system: Applies Moonwell design tokens (no standalone hex) to produce the correct dark-only reading surfaces and accent discipline.
  • Editorial + rail layout recipes: Implements reading-lane/second-rail structure for marketing, editorial chapters, prototypes, and resources, including mobile adaptation.
  • Motion and interaction rules: Guides tactile, intent-revealing motion behavior (with reduced-motion considerations) so interactions feel mechanical and purposeful rather than decorative.
  • Implementation-ready guidance: Provides typography, layout, non-negotiables, and React/Framer Motion shell patterns for building DD-style pages.

Quick Start

Use the devouring-details-design skill to restyle the page so it uses Moonwell tokens, a reading-lane plus rail layout, and a single disciplined accent moment that matches the Devouring Details aesthetic.

Frequently Asked Questions about devouring-details-design

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

FAQPage Schema
How do I implement a dark theme design system using Tailwind tokens?▼

You can structure editorial chapter layouts by implementing a reading-lane and second-rail layout structure. This recipe applies to marketing landing pages, prototype chapters with demos, and resource pages, including specific mobile adaptation rules.

What's the best way to add motion guidelines to a React UI?▼

Add motion guidelines to a React UI using Framer Motion shell patterns that reveal tactile, intent-revealing behavior. This ensures interactions feel mechanical and purposeful rather than decorative, while strictly aligning with reduced-motion expectations.

Does this design system approach work for mobile adaptations?▼

Yes, this design system approach works for mobile adaptations by providing specific layout recipes for reading-lane and second-rail structures. It ensures mobile surfaces maintain the same dark-only reading surfaces and restrained typography rules.

Why does my UI styling look like generic SaaS instead of an editorial layout?▼

Your UI styling looks like generic SaaS because teams struggle to replicate the Devouring Details visual system consistently. Applying Moonwell design tokens and restrained spacing rules directly fixes this by producing the authored, grayscale-first aesthetic.

Can I use standalone hex colors instead of design tokens for dark theme surfaces?▼

No, you cannot use standalone hex colors instead of design tokens. The system requires strict use of Moonwell design tokens via the Tailwind theme to produce correct dark-only reading surfaces and maintain accent discipline.

Related Skills

Explore More Design & Creative Skills→
Anuj23105Anuj23105
1

tailwind-configuration

Extend Tailwind CSS configuration with design tokens, utilities, and theme settings.

Community
Intermediate
imsaifimsaif
3

Pattern Demo Generator

Generate interactive React demo components for AI design patterns.

Community
Intermediate
AngelP17AngelP17
1

tailwind-design-system

Standardize UI design with Tailwind-based design tokens and component patterns.

Community
Advanced
otto-poblyshotto-poblysh

tailwind-design-system

Convert UI styling into Tailwind CSS v4 design tokens and component variants.

Community
Intermediate