Our review
Generates a quick static visual mockup of an app screen, using design tokens from a DESIGN.md file to ensure consistency.
Strengths
- Produces a self-contained HTML file ready to view in a browser.
- Strictly follows colors, spacing, and components defined in DESIGN.md.
- Mobile-first with a max-width of 32rem and dark background.
- Uses realistic placeholder content instead of lorem ipsum for a professional look.
Limitations
- Static mockup only, no interactivity or real data.
- Requires an existing DESIGN.md file with design tokens.
- Not suited for complex screens or advanced layouts.
Use this skill when you need to quickly visualize an app screen with consistent branding, e.g., to validate a design or pitch an idea.
Avoid this skill if you need a functional prototype with navigation or data loading, or if no design tokens are available.
Security analysis
SafeThe skill generates a static HTML mockup with inline CSS; no shell commands, network requests, file system access, or sensitive data handling. It is purely a design output tool.
No concerns found
Examples
Generate a quick visual mockup of an app screen for a fitness app home screen with a daily step counter, a few workout cards, and a bottom nav bar (Home, Train, Feed, Profile).Generate a quick visual mockup of an app screen for an e-commerce product page showing a product image, title, price, description, and an 'Add to Cart' button.Generate a quick visual mockup of an app screen for a settings screen with toggle switches for notifications, dark mode, and a logout button./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.