Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →Design user experience wireframes, user flows, and interactive mockups for web and mobile applications using industry-standard notation
.claude/skills/williamzujkowski-ux-wireframe-designer/SKILL.md| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-01 | ✗→✓ | ▲ Improved | -1% | 0% |
| case-02 | ✗→✓ | ▲ Improved | 1% | 0% |
| case-06 | ✗→✓ | ▲ Improved | 164% | 0% |
| case-10 | ✗→✓ | ▲ Improved | 11% | 0% |
| case-16 | ✗→✓ | ▲ Improved | 47% | 0% |
Use this skill when you need to:
Skip this skill if you need high-fidelity visual design (use a design tool like Figma) or interactive prototypes (use frontend-framework-advisor for code-based prototypes).
NOW_ET = 2025-10-26T12:00:00-04:00 (accessed via NIST/time.gov semantics)For single-screen layouts or basic user flows (3-5 screens):
For complex flows with 5-15 screens and responsive requirements:
For large applications requiring detailed interaction design and user research validation:
When to escalate complexity tier:
Fidelity level selection:
When to abort:
Required fields:
yamlwireframe_diagrams: string # Mermaid flowchart or ASCII/SVG wireframes interaction_spec: object # Component behaviors and state transitions screen_list: array # Ordered list of screens with descriptions
Optional fields:
yamlresponsive_layouts: object # Breakpoint-specific wireframes accessibility_notes: array # WCAG compliance checklist design_system_components: array # Mapped or new components user_flow_diagram: string # Mermaid flowchart
Format: Markdown document with embedded diagrams, or JSON/YAML with diagram references
mermaid%% User flow: Login and dashboard (T1 example, ≤30 lines) graph TD A[Landing Page] -->|Click Login| B[Login Screen] B -->|Enter Credentials| C{Validate} C -->|Success| D[Dashboard] C -->|Invalid| E[Error Message] E -->|Retry| B D -->|View Profile| F[Profile Screen] D -->|Logout| A style A fill:#e1f5ff style D fill:#c8e6c9 style E fill:#ffcdd2
markdown## Login Screen Wireframe +----------------------------------+ | [Logo] [Help] [Sign Up] | +----------------------------------+ | Welcome Back! | | | | Email [..................] | | Password [..................] 👁 | | | | [ ] Remember me [Forgot?] | | [ Login ] | +----------------------------------+ Interactions: - Email/password fields validate on blur, show inline errors - Eye icon toggles password visibility - Login button disabled until valid input, shows spinner on click
Token budgets:
Safety checks:
Validation:
Determinism:
UX Best Practices (accessed 2025-10-26):
Accessibility Standards (accessed 2025-10-26):
Platform Guidelines (accessed 2025-10-26):
Tools:
Related Skills:
frontend-designsystem-validator - Validate against existing design systemsfrontend-framework-advisor - Recommend framework for implementationtesting-unit-generator - Generate tests for component interactions| Case | Status | Duration (ms) | Turns | Tokens | Tool calls | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Without | With | Δ | Without | With | Δ | Without | With | Δ | Without | With | Δ | ||
case-01 | fail→pass | 33,536 | 18,192 | -46% | 1 | 1 | 0% | 6,229 | 6,167 | -1% | 0 | 0 | — |
case-02 | fail→pass | 32,938 | 21,253 | -35% | 1 | 1 | 0% | 6,224 | 6,311 | +1% | 0 | 0 | — |
case-03 | pass→pass | 5,566 | 10,387 | +87% | 1 | 1 | 0% | 1,026 | 4,346 | +324% | 0 | 0 | — |
case-04 | fail→fail | 4,694 | 26,190 | +458% | 1 | 1 | 0% | 839 | 8,573 | +922% | 0 | 0 | — |
case-05 | fail→fail | 18,150 | 14,365 | -21% | 1 | 1 | 0% | 4,180 | 5,618 | +34% | 0 | 0 | — |
case-06 | fail→pass | 8,173 | 8,462 | +4% | 1 | 1 | 0% | 1,598 | 4,225 | +164% | 0 | 0 | — |
case-07 | fail→fail | 16,200 | 14,451 | -11% | 1 | 1 | 0% | 2,929 | 4,886 | +67% | 0 | 0 | — |
case-08 | pass→pass | 17,770 | 18,895 | +6% | 1 | 1 | 0% | 3,080 | 5,636 | +83% | 0 | 0 | — |
case-09 | fail→fail | 21,113 | 17,656 | -16% | 1 | 1 | 0% | 3,552 | 5,058 | +42% | 0 | 0 | — |
case-10 | fail→pass | 24,248 | 14,250 | -41% | 1 | 1 | 0% | 4,527 | 5,031 | +11% | 0 | 0 | — |
case-11 | pass→pass | 17,753 | 14,902 | -16% | 1 | 1 | 0% | 3,449 | 5,436 | +58% | 0 | 0 | — |
case-12 | pass→pass | 15,720 | 11,750 | -25% | 1 | 1 | 0% | 2,697 | 4,682 | +74% | 0 | 0 | — |
case-13 | pass→pass | 7,046 | 7,988 | +13% | 1 | 1 | 0% | 1,421 | 3,917 | +176% | 0 | 0 | — |
case-14 | pass→pass | 3,565 | 6,927 | +94% | 1 | 1 | 0% | 646 | 3,588 | +455% | 0 | 0 | — |
case-15 | pass→pass | 18,618 | 16,249 | -13% | 1 | 1 | 0% | 3,131 | 6,045 | +93% | 0 | 0 | — |
case-16 | fail→pass | 28,589 | 31,556 | +10% | 1 | 1 | 0% | 5,383 | 7,936 | +47% | 0 | 0 | — |
case-17 | fail→pass | 12,242 | 8,089 | -34% | 1 | 1 | 0% | 3,154 | 3,971 | +26% | 0 | 0 | — |
case-18 | fail→pass | 15,164 | 14,142 | -7% | 1 | 1 | 0% | 2,744 | 5,319 | +94% | 0 | 0 | — |
case-19 | pass→pass | 12,777 | 12,741 | -0% | 1 | 1 | 0% | 2,328 | 4,829 | +107% | 0 | 0 | — |
case-20 | pass→pass | 13,664 | 16,587 | +21% | 1 | 1 | 0% | 2,608 | 5,791 | +122% | 0 | 0 | — |
case-21 | pass→pass | 15,529 | 16,551 | +7% | 1 | 1 | 0% | 2,735 | 5,757 | +110% | 0 | 0 | — |
case-22 | fail→pass | 8,767 | 4,150 | -53% | 1 | 1 | 0% | 1,701 | 3,252 | +91% | 0 | 0 | — |
DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 22 cases were attempted. The headline lift of +36 percentage points is the difference between those two pass rates over the 22 comparable cases.
Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.
Other measured skills in the registry, with their headline benchmark lift.