Our review
Quickly generates a visual mockup of an app screen as a single self-contained HTML file, strictly adhering to the design system defined in DESIGN.md.
Strengths
- Faithful to design tokens (colors, spacing, components) with no invented defaults
- Delivers a standalone HTML file viewable directly in the browser
- Uses realistic placeholder content instead of lorem ipsum for clarity
- Mobile-first with a centered frame and bottom nav bar for primary tabs
Limitations
- Purely static mockup—no real data fetching or interactivity
- Requires a complete and precise DESIGN.md to work effectively
- Only handles primary tab screens, not complex or nested views
Use this skill when you need a fast, design-accurate mockup to validate a screen or concept.
Avoid it for functional prototypes, apps with real routing, or when no design system exists.
Security analysis
SafeThe skill only reads a local DESIGN.md and generates a static HTML mockup using predefined design tokens. No destructive, exfiltrating, or obfuscated actions are instructed. It does not invoke shell commands, network requests, or sensitive data handling.
No concerns found
Examples
Generate a mockup app screen for the login page using our design system.Create a mobile mockup of the Profile tab as it would appear in the main app, matching DESIGN.md.Show me a mockup of the Feed screen's empty state using the victory-* colors and components./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.