Skills
.Work. You
Rest

r2-dev-html

Community

Turn page specs into production HTML layouts.

Design & Creative#html#frontend#tailwind#design-system#ui-components#mockup#design-spec
Authorsilentbalanceyh
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Generate production-ready HTML layouts and visual design mockups directly from page specifications, accelerating design-to-development workflows.

Core Features & Use Cases

  • Produce layout.html, components.html, and mockup.html from {MODULE_PATH}/requirement.page.md and {MODULE_PATH}/page.yaml
  • Apply global design system tokens from the project's .r2mo/design/spec.md to ensure consistency
  • Support design drafts via .r2mo/design/draft/{page_id} and preserve design intent
  • Provide a reusable component library and a visual mockup for stakeholder reviews
  • Ensure accessibility, responsive design, and Tailwind-based styling aligned with the design system
  • Integrate with r2-dev-page for code generation references

Quick Start

Run the r2-dev-html skill against your page specification to generate the three HTML artifacts in the designated output directory.

Dependency Matrix

Required Modules

None required

Components

Standard package

đź’» Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: r2-dev-html
Download link: https://github.com/silentbalanceyh/r2mo-lain/archive/main.zip#r2-dev-html

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.