Generate portable UI mockup prompts using a six-element pattern.
npx skills add https://github.com/tetran/Hotwire-ToDo --skill mockup-creation-tetran
Please help me install this Agent Skill. Skill: mockup-creation Source: https://github.com/tetran/Hotwire-ToDo/tree/main/.claude/skills/mockup-creation Command: npx skills add https://github.com/tetran/Hotwire-ToDo --skill mockup-creation-tetran
This skill encodes a portable, project-agnostic approach to crafting UI mockups by teaching how to prompt a design agent for first-iteration approval and how to handle the post-approval workflow.
Provide a feature brief and surface context to a design agent to generate a first-iteration UI mockup.
High-intent search queries and answers about installing and using this skill.
To write UI mockup prompts for first-iteration approval, use a standardized six-element pattern that includes scene enumeration, inline tokens, and explicit post-approval contracts. This ensures design agents generate portable, project-agnostic components.
Scene enumeration in UI mockup generation is a discipline that forces clear state transitions for each mockup frame. It guides design agents by explicitly listing project-wide scenes, surfaces, and tokens to ensure accurate visual outputs.
Post-approval workflows for UI mockups are handled by binding the generated artifact to planning inputs and next steps. This explicit post-approval contract ensures the design agent maintains continuity between the approved mockup and subsequent development phases.
Yes, you can use prompt engineering to standardize UI mockups across different surfaces by applying a portable, project-agnostic prompt pattern. This approach uses inline tokens and scene enumeration to maintain consistency across project-wide UI components.
No dependencies are required to generate portable UI mockups. The skill provides a portable prompt engineering approach that guides any design agent to achieve first-iteration approval using a six-element pattern without external component libraries.
The best way to structure a prompt for a design agent is using a six-element pattern that incorporates a feature brief and surface context. This structure enforces scene enumeration, inline tokens, and post-approval responsibilities for first-iteration approval.
YaugourtGenerate visual mockups and identify missing design decisions in plans.
assafYavnaiPlan and execute governed feature-implementation slices with integrity gates.
Tahasaif3Provide Radix UI-based components styled with Tailwind CSS for React interfaces.
deanpetersGenerates a structured AI recommendation canvas with problem framing, hypotheses, risks, and next steps.
