Generate a single-file HTML questionnaire with side-by-side visual previews — UI mockups, CSS animations, Mermaid diagrams, font/typography samples, layout variations, code rendering comparisons — so the user picks from rendered options in the browser instead of describing choices in chat. Use for any visually-shaped design decision: layout, motion, typography, color, diagram shape, icon style, content rendering rules (\"show me, don't tell me\"). Useful for design reviews, design-system exploration, UI prototype direction, and surfacing ADR-worthy decisions. Ships with English and Chinese templates. Fire PROACTIVELY whenever you're about to ask the user 3+ visual-trade-off questions in chat, OR 2 questions where seeing options side-by-side would meaningfully change the answer — don't wait for them to ask.
Install with
Claude CodeCodexCursorGitHub CopilotGemini CLI
Supported by the Atlas install prompt. Skill-specific requirements vary.
Skill stats
Skills1CategoryProduct & designStars0
About this skill
Generate a single-file HTML questionnaire with side-by-side visual previews — UI mockups, CSS animations, Mermaid diagrams, font/typography samples, layout variations, code rendering comparisons — so the user picks from rendered options in the browser instead of describing choices in chat. Use for any visually-shaped design decision: layout, motion, typography, color, diagram shape, icon style, content rendering rules (\"show me, don't tell me\"). Useful for design reviews, design-system exploration, UI prototype direction, and surfacing ADR-worthy decisions. Ships with English and Chinese templates. Fire PROACTIVELY whenever you're about to ask the user 3+ visual-trade-off questions in chat, OR 2 questions where seeing options side-by-side would meaningfully change the answer — don't wait for them to ask.
Quick start
Copy the install prompt. Use the green button above this README.
Send it to your agent. Paste it into your coding agent’s chat and send.
Review the setup. Your agent checks the skill’s instructions, requirements, and installation scope.
Generate a single-file HTML questionnaire with side-by-side visual previews — UI mockups, CSS animations, Mermaid diagrams, font/typography samples, layout variations, code rendering comparisons — so the user picks from rendered options in the browser instead of describing choices in chat. Use for any visually-shaped design decision: layout, motion, typography, color, diagram shape, icon style, content rendering rules (\"show me, don't tell me\"). Useful for design reviews, design-system exploration, UI prototype direction, and surfacing ADR-worthy decisions. Ships with English and Chinese templates. Fire PROACTIVELY whenever you're about to ask the user 3+ visual-trade-off questions in chat, OR 2 questions where seeing options side-by-side would meaningfully change the answer — don't wait for them to ask.
About this listing
Category
Product & design
Reported license
Not specified
Listing language (estimated)
English
Review status
Not individually reviewed
Agent compatibility
Atlas installation supports Claude Code, Codex, and Cursor. Skill-specific dependencies and features are checked during setup.
Claude Code
Codex
Cursor
GitHub Copilot
Gemini CLI