Our review
Generates a static visual mockup of an app screen as a self-contained HTML file that follows the tokens and components defined in DESIGN.md, then publishes it as a browser-viewable artifact.
Strengths
- Enforces strict adherence to DESIGN.md (colors, spacing, buttons, cards) rather than falling back to generic Tailwind defaults
- Produces a single self-contained HTML file with inline CSS that is easy to view and share
- Faithfully reproduces the app's mobile-first frame (centered max-width 32rem, dark victory-bg background, bottom nav bar for primary tabs)
- Uses realistic placeholder content instead of lorem ipsum and returns only an artifact link instead of dumping markup into the chat
Limitations
- Purely a static mockup: no real data fetching or routing
- Depends entirely on DESIGN.md existing and being complete; without it the victory-* tokens are unavailable
- Publishing relies on the Artifact tool, so it requires an environment that provides it
Use it to quickly validate how a screen should look before writing production code.
Avoid it when you need an interactive prototype wired to real data or a page that can ship as-is.
Security analysis
SafeThe skill only instructs generating a static HTML mockup using design tokens from a local DESIGN.md and publishing via an Artifact tool. It does not involve shell commands, network requests, destructive actions, exfiltration, or obfuscated code. No meaningful execution risk.
No concerns found
Examples
/mockup-app-skill Train screen: today's workout list with a summary card at the top and the bottom nav bar/mockup-app-skill Profile screen showing avatar, display name, streak stats and a settings list/mockup-app-skill Feed screen in its empty state, before the user has followed anyone/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.