Our review
Generates a self-contained HTML mockup of an app screen based on a project's DESIGN.md tokens and publishes it via the Artifact tool.
Strengths
- Enforces brand consistency by strictly using victory-* tokens from DESIGN.md.
- Produces a single-file artifact previewable in the browser.
- Uses realistic placeholder content to make mockups feel concrete.
- Optimized for mobile-first frames with bottom nav support.
Limitations
- Not a functional page — no data, routing, or business logic.
- Requires a DESIGN.md file with victory-* token definitions.
- Artifact output may not be accessible outside the tool that renders artifacts.
Use when you need a quick, on-brand visual mockup of an app screen to share or iterate on before development.
Use instead when you need an interactive prototype or must work without an existing DESIGN.md.
Security analysis
SafeThe skill instructs generating a static HTML mockup and publishing it via Artifact tool. It does not use bash, network, file deletion, or any destructive/exfiltrating actions. No risky commands or obfuscation.
No concerns found
Examples
/mockup-app-skill Login screenGenerate a quick visual mockup of the Home screen for the app using the design tokens./mockup-app-skill Profile/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.