Our review
Generates a static visual mockup of an app screen from a DESIGN.md file, strictly adhering to design tokens and producing a self-contained HTML file via the Artifact tool.
Strengths
- Exactly matches colors, spacing, and components defined in DESIGN.md
- Outputs a visual HTML file ready to view in the browser
- Uses realistic placeholder content instead of lorem ipsum for a more convincing render
- Adapts to mobile-first layout with bottom navigation bar when applicable
Limitations
- Does not generate interactive logic or functional routing
- Requires a pre-existing DESIGN.md file with design tokens
- Only produces single-screen mockups, not user flows
When you need to quickly visualize an app screen while adhering to an existing design system without building a full working application.
When you need an interactive prototype or a functional demo with API calls.
Security analysis
SafeThe skill only generates a static HTML mockup. No destructive or risky operations are performed. It reads a design file and produces an artifact.
No concerns found
Examples
Generate a visual mockup of the home screen for a fitness tracking app. Use the tokens from DESIGN.md. The screen should show a daily summary, recent workouts, and a bottom navigation bar with Home, Train, Feed, Profile.Create an app mockup for a product detail page of an e-commerce app. Follow the DESIGN.md tokens. Include product image, title, price, size selector, and add-to-cart button. Mobile-first.Make a static mockup of the settings screen for a social media app. Use the design tokens from DESIGN.md. Show a list of settings categories with toggle switches and arrow indicators./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.