Our review
Generates a quick visual mockup of an app screen as a standalone HTML file, following the design system defined in DESIGN.md.
Strengths
- Strictly follows tokens and components from the provided design system.
- Outputs a self-contained HTML file viewable right away via the Artifact tool.
- Uses a mobile-first layout with proper frame and bottom navigation.
- Fills with realistic placeholder content instead of lorem ipsum.
Limitations
- Static visual only—no interactivity or live data.
- Requires a complete DESIGN.md to be present.
- Relies on the Artifact tool for in-browser preview.
When you need a quick, on-brand screen mockup to share with stakeholders before building the real UI.
When you need a working prototype with navigation, data fetching, or any functional logic.
Security analysis
SafeThe skill only instructs generating a static HTML mockup and publishing it via the Artifact tool. It does not use shell commands, network requests, file deletion, data exfiltration, or obfuscated code. No meaningful execution risk.
No concerns found
Examples
/mockup-app-skill Train booking search screen with origin/destination fields and a search button/mockup-app-skill Profile screen with user info, stats, and logout button/mockup-app-skill Empty state for notifications tab with a bell icon and a 'No notifications yet' message/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.