Notre avis
Génère une maquette visuelle statique d'un écran d'application à partir d'un fichier DESIGN.md, produisant un fichier HTML autonome avec des placeholders réalistes.
Points forts
- Respecte strictement le système de design (couleurs, composants, espacements) défini dans DESIGN.md
- Produit un fichier HTML autonome visualisable directement dans le navigateur via l'outil Artifact
- Optimisé pour le mobile-first avec conteneur centré max-width: 32rem et barre de navigation basse pour les onglets principaux
Limites
- Nécessite un fichier DESIGN.md préexistant avec toutes les spécifications de design
- Ne génère pas de page fonctionnelle (pas de données réelles ni de routage)
- La sortie est un lien Artifact, le code HTML n'est pas affiché dans le chat
Idéal pour prototyper rapidement un écran d'application en respectant une charte graphique existante.
Inapproprié si vous avez besoin d'une page interactive avec des données dynamiques ou des fonctionnalités back-end.
Analyse de sécurité
SûrThe skill only generates a static HTML mockup using a design file and the Artifact tool; no destructive or exfiltrating actions are instructed, and no dangerous tools are used.
Aucun point d'attention détecté
Exemples
Generate a quick visual mockup of an app screen for a fitness tracker home screen.Generate a quick visual mockup of an app screen for an e-commerce product detail page./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.