Notre avis
Génère une maquette visuelle HTML autonome d'un écran d'application à partir des tokens de DESIGN.md et la publie via l'outil Artifact.
Points forts
- Respecte l'identité visuelle en s'appuyant exclusivement sur les tokens victory-* de DESIGN.md.
- Produit un artefact mono-fichier consultable dans le navigateur.
- Utilise des contenus réalistes au lieu de lorem ipsum.
- Pensé pour une frame mobile-first avec barre de navigation inférieure.
Limites
- Ne crée pas de page fonctionnelle : ni données, ni routage, ni logique.
- Nécessite un fichier DESIGN.md avec les tokens victory-*.
- La sortie Artifact peut ne pas être accessible hors de l'outil qui l'a générée.
Utilisez-le quand vous avez besoin d'une maquette visuelle rapide, conforme à la charte, à partager ou à itérer avant le développement.
Ne l'utilisez pas si vous avez besoin d'un prototype interactif ou si vous ne disposez pas d'un DESIGN.md existant.
Analyse de sécurité
SûrThe skill instructs generating a static HTML mockup and publishing it via Artifact tool. It does not use bash, network, file deletion, or any destructive/exfiltrating actions. No risky commands or obfuscation.
Aucun point d'attention détecté
Exemples
/mockup-app-skill Login screenGenerate a quick visual mockup of the Home screen for the app using the design tokens./mockup-app-skill Profile/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.