Notre avis
Génère une maquette visuelle statique d'un écran d'application en HTML/CSS en suivant un fichier de design existant.
Points forts
- Respecte strictement les tokens de design (couleurs, espacements, composants) d'un fichier DESIGN.md
- Produit un fichier HTML autonome visualisable directement dans le navigateur
- Utilise des contenus réalistes et adaptés au contexte au lieu de lorem ipsum
Limites
- Nécessite un fichier DESIGN.md préexistant avec les définitions de tokens
- Ne gère pas les données dynamiques ni le routage
- N'affiche qu'un seul écran à la fois, sans interactions
Lorsque vous avez besoin d'un rendu visuel rapide et fidèle d'un écran d'application à partir d'une charte graphique définie.
Pour des prototypes interactifs ou fonctionnels nécessitant des appels API ou des transitions entre écrans.
Analyse de sécurité
SûrThe skill only instructs to generate a static HTML mockup based on a design file and publish it as an artifact. No destructive actions, no network access, no code execution, no data exfiltration. Completely safe.
Aucun point d'attention détecté
Exemples
Generate a quick visual mockup of the Home screen for our app. Use the existing DESIGN.md file and show the bottom navigation bar.Create a static HTML mockup of the Profile screen according to our DESIGN.md. Include the user avatar and settings button./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.