Our review
Generates a quick visual mockup of an app screen as a self-contained HTML file, following the tokens in DESIGN.md.
Strengths
- Outputs a single self-contained HTML file for easy preview
- Strictly adheres to colors and components defined in DESIGN.md
- Optimized for mobile-first screens with a bottom nav bar
- Uses realistic placeholder content instead of lorem ipsum
Limitations
- Static mockup only, no real functionality or data
- Requires an existing and accurate DESIGN.md
- Constrained to a 32rem mobile viewport
To quickly validate a screen idea or user flow with a design-system-accurate mockup.
When a working interactive prototype or production-ready page is needed.
Security analysis
SafeThe skill instructs to read a local design file and generate a static HTML mockup with inline CSS, then publish it as an Artifact. There are no destructive commands, network calls, secret handling, or obfuscated payloads. The only external action is using the Artifact tool to display the mockup, which is benign.
No concerns found
Examples
/mockup-app-skill Create a home screen for a fitness app with a greeting header, a daily goal card, and a bottom nav bar./mockup-app-skill Show a profile tab with user avatar, stats row, settings list, and a bottom nav bar./mockup-app-skill Make a feed screen empty state with an illustration placeholder, a call-to-action button, and a bottom nav bar./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.