Our review
Generates a static visual mockup of an app screen using design tokens defined in DESIGN.md.
Strengths
- Strictly adheres to existing design tokens (colors, spacing, components).
- Produces a self-contained HTML file viewable in the browser.
- Mobile-first with max-width and bottom navigation bar when appropriate.
Limitations
- Requires a pre-existing DESIGN.md with defined tokens.
- Static mockup only—no real data or interactions.
- Does not handle dynamic or multiple states.
When you need a quick visual prototype of an app screen that follows an existing design system.
If you need an interactive prototype, real data, or functional testing.
Security analysis
SafeThe skill generates a static HTML mockup using predefined design tokens; no execution of external commands, network access, or destructive operations is involved.
No concerns found
Examples
Create a mockup of the home screen for a fitness app using our design system. Follow the tokens in DESIGN.md and include a bottom navigation bar.Generate a visual mockup of the user profile page with placeholder content. Use the notes icon and gray cards from DESIGN.md.Make a mockup of the settings screen with a list of toggles and buttons, matching the victory color scheme from DESIGN.md./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.