Notre avis
Génère un mockup visuel rapide d'un écran d'application en HTML autonome, en respectant les tokens de DESIGN.md.
Points forts
- Produit un fichier HTML unique et auto-contenu facile à visualiser
- Respecte strictement les couleurs et composants définis dans DESIGN.md
- Convient pour des maquettes mobiles avec barre de navigation inférieure
- Utilise un contenu réaliste et non du lorem ipsum
Limites
- Uniquement un mockup statique, sans fonctionnalité réelle
- Nécessite que DESIGN.md soit présent et à jour
- Limité à une largeur mobile de 32rem
Pour valider rapidement une idée d'écran ou un flux utilisateur avec une maquette fidèle au design system.
Pour un prototype interactif ou une page de production avec des données dynamiques.
Analyse de sécurité
SûrThe skill instructs to read a local design file and generate a static HTML mockup with inline CSS, then publish it as an Artifact. There are no destructive commands, network calls, secret handling, or obfuscated payloads. The only external action is using the Artifact tool to display the mockup, which is benign.
Aucun point d'attention détecté
Exemples
/mockup-app-skill Create a home screen for a fitness app with a greeting header, a daily goal card, and a bottom nav bar./mockup-app-skill Show a profile tab with user avatar, stats row, settings list, and a bottom nav bar./mockup-app-skill Make a feed screen empty state with an illustration placeholder, a call-to-action button, and a bottom nav bar./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.