Notre avis
Génère une maquette visuelle statique d'un écran d'application sous forme d'un fichier HTML autonome, en respectant les tokens de design définis dans DESIGN.md.
Points forts
- Garantit la cohérence avec le design system grâce aux variables victory-*.
- Cadre mobile-first avec bottom bar pour un rendu réaliste.
- Contenu réaliste plutôt que du lorem ipsum.
- Résultat immédiatement consultable via un artefact HTML.
Limites
- La maquette n'est pas interactive et ne contient pas de logique.
- Nécessite un DESIGN.md existant avec les tokens appropriés.
- Limité à des écrans individuels, pas à des parcours complets.
Lorsque vous avez besoin d'une validation visuelle rapide d'un écran d'application aligné sur un design system établi.
Quand vous avez besoin d'un prototype cliquable ou d'une interface de production avec de vraies données.
Analyse de sécurité
SûrThe skill instructs generating a static HTML mockup and publishing via the Artifact tool. It explicitly avoids data fetching or dynamic behavior, uses only inline CSS with provided hex values, and does not involve shell commands, external resource loading, secret exfiltration, or destructive actions. No meaningful execution risk.
Aucun point d'attention détecté
Exemples
/mockup-app-skill Home screen for the fit-track app — include today's step count, a progress ring, and the bottom nav./mockup-app-skill Onboarding welcome screen with a gradient hero, headline, and primary/secondary buttons./mockup-app-skill Profile tab with avatar, stats row, settings list, and bottom nav./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.
Expert Next.js App Router
Developpement
Un skill qui transforme Claude en expert Next.js App Router.
Générateur de README
Developpement
Crée des README.md professionnels et complets pour vos projets.
Rédacteur de Documentation API
Developpement
Génère de la documentation API complète au format OpenAPI/Swagger.