Our review
Generates a static visual mockup of an app screen in HTML/CSS by following an existing design file.
Strengths
- Strictly adheres to design tokens (colors, spacing, components) from a DESIGN.md file
- Produces a self-contained HTML file viewable directly in the browser
- Uses realistic, context-appropriate placeholder content instead of lorem ipsum
Limitations
- Requires a pre-existing DESIGN.md file with token definitions
- Does not handle dynamic data or routing
- Shows only one screen at a time, no interactions
When you need a quick, faithful visual rendering of an app screen based on a defined design system.
For interactive or functional prototypes that require API calls or screen transitions.
Security analysis
SafeThe skill only instructs to generate a static HTML mockup based on a design file and publish it as an artifact. No destructive actions, no network access, no code execution, no data exfiltration. Completely safe.
No concerns found
Examples
Generate a quick visual mockup of the Home screen for our app. Use the existing DESIGN.md file and show the bottom navigation bar.Create a static HTML mockup of the Profile screen according to our DESIGN.md. Include the user avatar and settings button./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.