Our review
Generates a static, mobile-first HTML mockup of an app screen using tokens from DESIGN.md and publishes it via the Artifact tool.
Strengths
- Strictly follows colors, components, and patterns from an existing design system.
- Produces a viewable in-browser mockup through the Artifact tool.
- Uses realistic placeholder content instead of lorem ipsum, aiding design feedback.
- Consistent mobile-first frame with max-width 32rem and bottom navigation.
Limitations
- Static mockup only, with no interactive functionality or real data.
- Requires an existing, well-structured DESIGN.md file.
- Tied to the Artifact tool, which limits portability to other environments.
When you need a quick visual prototype of an app screen that adheres to an established design system.
When you need a functional page with real data, routing, or dynamic interactions.
Security analysis
SafeThe skill only generates a static HTML mockup based on a design system and publishes it via the Artifact tool. It does not execute shell commands, access files beyond DESIGN.md, send data externally, or perform destructive actions. The use of the Artifact tool is for displaying output, not a security risk.
No concerns found
Examples
Create a mockup of the home screen for a fitness app. Read DESIGN.md and follow its tokens exactly.Mock up the profile screen for a social app showing an empty state with a call-to-action button, using our DESIGN.md tokens and a bottom nav bar.Generate a visual mockup of the Train tab with a list of workout cards. Use the victory-* colors and component patterns 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.