Notre avis
Génère une maquette visuelle statique d'un écran d'application sous forme d'un fichier HTML autonome, en utilisant les tokens de design de DESIGN.md, et la publie via l'outil Artifact.
Points forts
- Respecte exactement les tokens et composants de DESIGN.md pour une cohérence visuelle.
- Produit un artefact visualisable directement dans le navigateur.
- Conception mobile-first avec une barre de navigation inférieure pour les onglets principaux.
- Utilise un contenu réaliste de substitution au lieu de lorem ipsum.
Limites
- Statique uniquement ; pas de récupération de données, de routage ou de comportement interactif.
- Nécessite un DESIGN.md valide ; sans lui, la compétence ne peut pas fonctionner.
- Se limite à un seul écran, pas à un parcours multi-écrans.
À utiliser lorsque vous avez besoin d'une maquette visuelle rapide et conforme à la charte d'un écran d'application à partager ou à valider.
Ne pas l'utiliser lorsque vous avez besoin d'un prototype fonctionnel ou si aucun fichier de design n'est disponible.
Analyse de sécurité
SûrThe skill only instructs reading a design file and generating a static HTML mockup published via the Artifact tool. It does not involve executing shell commands, network calls, file deletion, secret exfiltration, or any obfuscated payloads.
Aucun point d'attention détecté
Exemples
Generate a quick visual mockup of an app screen for: a login screen with email and password fields, a primary button, and a link to sign up, matching the DESIGN.md patterns.Generate a quick visual mockup of an app screen for: the home dashboard of a fitness tracker app, showing today's steps, heart rate, and a bottom nav bar for Home, Train, Feed, and Profile.Generate a quick visual mockup of an app screen for: a settings screen with toggles for notifications, a slider for difficulty, and a logout button, using the victory-* colors from DESIGN.md./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.