Notre avis
Génère rapidement une maquette visuelle statique d'un écran d'application sous forme de fichier HTML autonome, en respectant strictement les tokens de design définis dans DESIGN.md.
Points forts
- Respecte précisément les couleurs, composants et motifs du design system existant.
- Produit un fichier HTML unique et autonome, facile à visualiser dans un navigateur.
- Utilise un contenu réaliste plutôt que du lorem ipsum pour un rendu plus proche du produit final.
Limites
- Il s'agit d'une maquette statique, sans fonctionnalité réelle (pas de données dynamiques ni de routage).
- Dépend de l'existence d'un fichier DESIGN.md complet et à jour.
- Optimisé pour un cadre mobile-first (max-width 32rem), donc moins adapté aux écrans desktop.
Idéal pour valider rapidement une idée d'écran avec l'équipe avant de lancer le développement.
À éviter quand on a besoin d'une page fonctionnelle avec des interactions réelles ou quand aucun design system n'est défini.
Analyse de sécurité
SûrThis skill only generates static HTML mockups using design tokens and the Artifact tool; it does not execute shell commands, network requests, file deletion, or exfiltration. No risky or destructive instructions are present.
Aucun point d'attention détecté
Exemples
Create a mobile mockup of the Home tab for a fitness app: show a daily step counter, a workout progress card, and a bottom nav bar with Home, Train, Feed, and Profile icons.Make a static mockup for a restaurant detail screen in a food delivery app, with a hero image, rating, menu list, and an 'Add to cart' button at the bottom.Generate a mockup of a Profile screen for a finance app featuring account balance, spending summary, and a logout option, using the existing DESIGN.md tokens./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.