Our review
Generates a static visual mockup of an app screen based on a DESIGN.md file, producing a standalone HTML file.
Strengths
- Rapid prototyping of app screens following an existing design system.
- Mobile-first mockup with centered layout and bottom navigation bar.
- Realistic placeholder content instead of lorem ipsum for better representation.
- Output as an HTML Artifact viewable directly in the browser.
Limitations
- Static mockup only, no real data fetching or interactivity.
- Requires a pre-existing DESIGN.md file with specific design tokens.
- Does not handle routing or dynamic navigation between screens.
Use this skill to quickly obtain a visual mockup of an app screen that adheres to the existing design system.
Do not use it when you need a functional prototype with dynamic data or user interactions.
Security analysis
SafeThe skill generates static HTML mockups using a design system; no destructive or exfiltration actions. It does not instruct to run arbitrary code or access sensitive data, and the output is explicitly limited to visual placeholder content.
No concerns found
Examples
Generate a visual mockup of the home screen for a fitness tracking app. Use the design tokens from DESIGN.md. It should include a header with the user's name, a daily step count card, and a list of recent workouts.Create a visual mockup of the profile tab for a social media app. Use the victory-* colors from DESIGN.md. Show the user avatar, username, bio, and a grid of recent posts. Include a bottom nav bar with Profile highlighted./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.