r2-dev-html

Generate layout.html, components.html, and mockup.html from page specifications.

2|1|Updated Nov 20, 2025

Search Tags:#html #frontend #tailwind #design-system #ui-components #mockup #design-spec

Ready to run

npx skills add https://github.com/silentbalanceyh/r2mo-lain --skill r2-dev-html

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: r2-dev-html
Source: https://github.com/silentbalanceyh/r2mo-lain/tree/main/skills/r2-dev-html
Command: npx skills add https://github.com/silentbalanceyh/r2mo-lain --skill r2-dev-html

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about r2-dev-html

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

FAQPage Schema

How do I convert page specifications into production-ready HTML layouts?▼

You can convert page specifications into production-ready HTML layouts by processing requirement.page.md and page.yaml files to generate layout.html, components.html, and mockup.html artifacts aligned with your project design system.

How does a design system token application work for HTML mockups?▼

Design system token application works for HTML mockups by reading global spec tokens from .r2mo/design/spec.md and applying them to Tailwind-based styling, ensuring visual consistency across all generated component primitives and layouts.

Can I generate visual mockups from markdown page specs for stakeholder reviews?▼

Yes, you can generate visual mockups from markdown page specs. The process produces a dedicated mockup.html artifact that renders the page design visually, making it suitable for stakeholder reviews and design validation.

Do I need a design draft to generate Tailwind UI components from a page spec?▼

You do not need a design draft to generate Tailwind UI components, but supporting design drafts via .r2mo/design/draft/{page_id} preserves specific design intent and improves the accuracy of the generated component library.

What is the best way to ensure responsive design and accessibility in generated HTML layouts?▼

The best way to ensure responsive design and accessibility in generated HTML layouts is to use a specification-driven approach that applies design system tokens and component primitives, inherently enforcing these standards during artifact generation.

Why do my generated HTML components not match the project design system?▼

Generated HTML components fail to match the project design system when global design tokens from .r2mo/design/spec.md are missing or misconfigured, preventing consistent Tailwind styling and layout alignment across the output artifacts.