Our review
Quickly generates a static visual mockup of an app screen as a standalone HTML file, strictly following the design tokens defined in DESIGN.md.
Strengths
- Adheres precisely to existing design system colors, components, and patterns.
- Produces a single self-contained HTML file, easy to preview in a browser.
- Uses realistic placeholder content instead of lorem ipsum for a more product-like impression.
Limitations
- Static mockup only — no real functionality, data fetching, or routing.
- Relies on a complete and up-to-date DESIGN.md being present.
- Optimized for a mobile-first frame (max-width 32rem), so less suited for desktop layouts.
Best for quickly validating a screen concept with stakeholders before committing to development.
Avoid when you need a working, interactive page or when no design system/file exists to guide the mockup.
Security analysis
SafeThis skill only generates static HTML mockups using design tokens and the Artifact tool; it does not execute shell commands, network requests, file deletion, or exfiltration. No risky or destructive instructions are present.
No concerns found
Examples
Create a mobile mockup of the Home tab for a fitness app: show a daily step counter, a workout progress card, and a bottom nav bar with Home, Train, Feed, and Profile icons.Make a static mockup for a restaurant detail screen in a food delivery app, with a hero image, rating, menu list, and an 'Add to cart' button at the bottom.Generate a mockup of a Profile screen for a finance app featuring account balance, spending summary, and a logout option, using the existing DESIGN.md tokens./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.