skills.rest
silentbalanceyh
silentbalanceyhCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/silentbalanceyh/r2mo-lain --skill r2-dev-html
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
silentbalanceyhsilentbalanceyh
2

r2-req-page

Extract page-level requirements from module context into requirement.page.md and page.yaml.

Community
Advanced
PMDevSolutionsPMDevSolutions
7

screenshot-intake

Convert website screenshots or live URLs into structured build specifications.

Official
Advanced
juricamigac-from-hrjuricamigac-from-hr

preview-import

Preview and validate imported HTML content on a local AEM Edge Delivery Services dev server.

Official
Intermediate
camoacamoa
32

html-generator

Generate branded HTML pages and components from a design system.

Community
Advanced