Our review
Generates a static visual mockup of an app screen as a self-contained HTML file, using design tokens from DESIGN.md, and publishes it via the Artifact tool.
Strengths
- Follows the exact design tokens and components from DESIGN.md for visual consistency.
- Outputs a browser-viewable artifact directly in the chat.
- Mobile-first layout with a bottom nav bar for primary tabs.
- Uses realistic placeholder content instead of lorem ipsum.
Limitations
- Static only; no real data fetching, routing, or interactive behavior.
- Depends on a valid DESIGN.md; without it the skill cannot run.
- Single screen only, not a multi-screen user journey.
Use when you need a quick, visual, on-brand mockup of an app screen to share or validate.
Do not use when you need a functional prototype or when no design system/file is available.
Security analysis
SafeThe skill only instructs reading a design file and generating a static HTML mockup published via the Artifact tool. It does not involve executing shell commands, network calls, file deletion, secret exfiltration, or any obfuscated payloads.
No concerns found
Examples
Generate a quick visual mockup of an app screen for: a login screen with email and password fields, a primary button, and a link to sign up, matching the DESIGN.md patterns.Generate a quick visual mockup of an app screen for: the home dashboard of a fitness tracker app, showing today's steps, heart rate, and a bottom nav bar for Home, Train, Feed, and Profile.Generate a quick visual mockup of an app screen for: a settings screen with toggles for notifications, a slider for difficulty, and a logout button, using the victory-* colors 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.