Notre avis
Génère une maquette visuelle HTML autonome d'un écran d'application mobile à partir des tokens de style du fichier DESIGN.md, et la publie comme Artifact pour consultation dans le navigateur.
Points forts
- Impose une cohérence en réutilisant les styles du DESIGN.md (couleurs, espacements, composants).
- Produit un fichier HTML autonome, consultable immédiatement via Artifact.
- Utilise un contenu réaliste plutôt que du lorem ipsum pour un meilleur contexte visuel.
- Conçu mobile-first avec un cadre de 32rem et une barre de navigation basse pour les onglets principaux.
Limites
- Maquette statique uniquement, sans interactivité ni données réelles.
- Nécessite un DESIGN.md avec des valeurs hexadécimales victory-* ; sans lui, la compétence ne peut pas être utilisée.
- Ne convient pas pour du prototypage haute-fidélité ni pour du code de production.
Quand vous avez besoin d'une maquette rapide et conforme à la charte pour un écran d'application à partager ou itérer.
Quand vous avez besoin d'un prototype fonctionnel avec données réelles, interactions ou routage.
Analyse de sécurité
SûrThe skill only generates a static HTML mockup with inline CSS and publishes it as an Artifact. It does not use any shell commands, network requests, or destructive actions, and explicitly avoids real data fetching or routing.
Aucun point d'attention détecté
Exemples
a login screen for a fitness appthe Home tab of the app with a recent activity carda profile screen with stats and a settings list/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.