Notre avis
Génère une maquette visuelle statique d'un écran d'application en HTML autonome, en respectant les tokens et composants définis dans DESIGN.md, puis la publie comme artefact consultable dans le navigateur.
Points forts
- Impose le respect strict de DESIGN.md (couleurs, espacements, boutons, cartes) au lieu des valeurs Tailwind par défaut
- Produit un seul fichier HTML autonome avec CSS inline, facile à visualiser et à partager
- Reproduit fidèlement le cadre mobile-first de l'app (max-width 32rem centré, fond sombre victory-bg, barre de navigation basse pour les onglets principaux)
- Utilise du contenu de remplissage réaliste plutôt que du lorem ipsum, et ne renvoie qu'un lien vers l'artefact au lieu de polluer le chat
Limites
- Maquette purement statique : aucune récupération de données ni routage réel
- Dépend entièrement de l'existence et de la complétude de DESIGN.md ; sans lui, les tokens victory-* ne sont pas disponibles
- La publication repose sur l'outil Artifact, donc sur un environnement qui le fournit
À utiliser pour valider rapidement l'apparence d'un écran avant d'écrire le code de production.
À éviter si vous avez besoin d'un prototype interactif connecté à de vraies données ou d'une page directement exploitable en production.
Analyse de sécurité
SûrThe skill only instructs generating a static HTML mockup using design tokens from a local DESIGN.md and publishing via an Artifact tool. It does not involve shell commands, network requests, destructive actions, exfiltration, or obfuscated code. No meaningful execution risk.
Aucun point d'attention détecté
Exemples
/mockup-app-skill Train screen: today's workout list with a summary card at the top and the bottom nav bar/mockup-app-skill Profile screen showing avatar, display name, streak stats and a settings list/mockup-app-skill Feed screen in its empty state, before the user has followed anyone/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.