Notre avis
Génère une maquette visuelle rapide d'un écran d'application en HTML autonome, en respectant le design system défini dans DESIGN.md.
Points forts
- Respecte strictement les tokens et composants du design system fourni.
- Produit un fichier HTML autonome visualisable immédiatement via l'outil Artifact.
- Adopte une approche mobile-first avec un cadre et une navigation adaptés.
- Utilise un contenu réaliste au lieu de lorem ipsum.
Limites
- Maquette strictement statique, sans interactivité ni données réelles.
- Nécessite la présence d'un fichier DESIGN.md complet.
- Dépend de l'outil Artifact pour l'affichage.
Lorsqu'il faut présenter rapidement une maquette d'écran cohérente avec un design system existant avant le développement.
Pour créer une interface interactive, un prototype navigable ou un composant isolé nécessitant des échanges avec une API.
Analyse de sécurité
SûrThe skill only instructs generating a static HTML mockup and publishing it via the Artifact tool. It does not use shell commands, network requests, file deletion, data exfiltration, or obfuscated code. No meaningful execution risk.
Aucun point d'attention détecté
Exemples
/mockup-app-skill Train booking search screen with origin/destination fields and a search button/mockup-app-skill Profile screen with user info, stats, and logout button/mockup-app-skill Empty state for notifications tab with a bell icon and a 'No notifications yet' message/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.