Our review
Generates a static visual mockup of an app screen as a single self-contained HTML file, using design tokens from DESIGN.md.
Strengths
- Enforces consistency with the design system via victory-* variables.
- Mobile-first layout with bottom nav for realistic preview.
- Realistic placeholder content instead of lorem ipsum.
- Immediately viewable in the browser via an HTML artifact.
Limitations
- Mockup is not interactive and has no functionality.
- Requires an existing DESIGN.md with relevant tokens.
- Limited to individual screens, not full user flows.
When you need quick visual validation of a proposed app screen that stays true to an established design system.
When you need a clickable prototype or production-ready UI backed by real data.
Security analysis
SafeThe skill instructs generating a static HTML mockup and publishing via the Artifact tool. It explicitly avoids data fetching or dynamic behavior, uses only inline CSS with provided hex values, and does not involve shell commands, external resource loading, secret exfiltration, or destructive actions. No meaningful execution risk.
No concerns found
Examples
/mockup-app-skill Home screen for the fit-track app — include today's step count, a progress ring, and the bottom nav./mockup-app-skill Onboarding welcome screen with a gradient hero, headline, and primary/secondary buttons./mockup-app-skill Profile tab with avatar, stats row, settings list, and bottom nav./mockup-app-skill
Generate a quick visual mockup of an app screen for: $ARGUMENTS
- Read
DESIGN.mdfirst — use its tokens, components, and patterns exactly (colors, spacing, buttons, cards, empty states, page header/shell). Never invent new colors or fall back to generic Tailwind defaults. - Render the mockup as a single self-contained HTML file (inline CSS using the
victory-*hex values fromDESIGN.md) and publish it with the Artifact tool so it's viewable in the browser. - It's a static visual mockup, not a working page — no real data fetching or routing. Use realistic placeholder content instead of lorem ipsum.
- Match the mobile-first frame:
max-width: 32remcentered, darkvictory-bgbackground, bottom nav bar if the screen is a primary tab (Home/Train/Feed/Profile/etc).
Output: one Artifact link. Don't dump the markup in chat.
Next.js App Router Expert
Development
A skill that turns Claude into a Next.js App Router expert.
README Generator
Development
Creates professional and comprehensive README.md files for your projects.
API Documentation Writer
Development
Generates comprehensive API documentation in OpenAPI/Swagger format.