skills.rest
Yash-1511
Yash-1511COMMUNITY
Explore all skills by this author →
Website𝕏@Yash15113GitHub

dux-screen

Generate standalone HTML screens from DESIGN.md with tokenized design constraints.

1|Updated May 20, 2026
Search Tags:#html generation#design systems#semantic html#token mapping#batch generation#ui prototyping#wcag aa
One-click install
npx skills add https://github.com/Yash-1511/bmad-dux-visual-architect --skill dux-screen
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dux-screen
Source: https://github.com/Yash-1511/bmad-dux-visual-architect/tree/main/skills/dux-screen
Command: npx skills add https://github.com/Yash-1511/bmad-dux-visual-architect --skill dux-screen

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

It turns a single source of design truth in DESIGN.md into standalone, production-ready HTML screens so you can preview and ship UI without manually translating design tokens into code.

Core Features & Use Cases

  • Single-screen generation: Create one screen from a brief for rapid iteration, grounded strictly in the DESIGN.md tokens.
  • Batch screen generation: Produce many screens sequentially from a manifest, including per-screen workspaces and an auditable manifest trail.
  • Guardrails built in: Enforces token fidelity, semantic HTML structure, AA contrast targets, and an inline accessibility notes self-check.
  • Variant outputs: Generates separate state variants (e.g., empty/loading/error/denied/success) so states are explicit and testable.
  • Mayasura routing: Works through the Mayasura agent via SC intent for interactive or headless workflows.

Quick Start

Ask Mayasura to generate a screen from your DESIGN.md by selecting SC, then provide a one-sentence brief for what the page should do.

Frequently Asked Questions about dux-screen

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

FAQPage Schema
How do I generate HTML screens from a DESIGN.md file?▼

You generate HTML screens from a DESIGN.md by providing an explicit brief and tokenized design constraints, which produces standalone, production-ready UI previews with semantic HTML and strict token mapping.

Can I batch generate multiple UI prototypes from a manifest?▼

Yes, you can batch generate UI prototypes sequentially from a manifest, producing per-screen workspaces and an auditable manifest trail for tracking production UI previews.

Does HTML screen generation enforce WCAG AA contrast and accessibility standards?▼

Yes, HTML screen generation enforces WCAG AA contrast targets and semantic HTML structure, while including an inline accessibility notes self-check to ensure your UI prototypes meet compliance.

What is the best way to create different state variants for UI prototypes?▼

The best way to create state variants for UI prototypes is through manifest-driven generation, which outputs separate explicit state variants like empty, loading, error, denied, and success for testing.

How do I set up Tailwind Play CDN for semantic HTML generation?▼

Tailwind Play CDN is set up automatically during semantic HTML generation, applying strict token mapping from your DESIGN.md directly into the standalone UI preview without requiring manual configuration.

Related Skills

Explore More Design & Creative Skills→
valuedrivenvaluedriven
4

design-md

Extract design tokens from Stitch projects and generate a semantic DESIGN.md.

Community
Advanced
wanyusheng63-altwanyusheng63-alt

batch-image-generator

Batch generate game assets from a structured JSON manifest.

Community
Advanced
Yash-1511Yash-1511
1

dux-design-md-lint

Validate DESIGN.md against getdesign.md v2 schema and WCAG 2.1 AA contrast.

Community
Intermediate
CyangZhouCyangZhou
2

Frontend_Design_System

Generate React component libraries from design tokens and UI requirements using Tailwind styling.

Community
Intermediate