Notre avis
Génère rapidement une maquette visuelle statique d'un écran d'application, en utilisant les jetons de design d'un fichier DESIGN.md pour garantir la cohérence.
Points forts
- Produit un fichier HTML autonome prêt à être affiché dans un navigateur.
- Respecte strictement les couleurs, espacements et composants définis dans DESIGN.md.
- Conçu pour le mobile-first avec une largeur max de 32rem et un fond sombre.
- Utilise des contenus réalistes au lieu de lorem ipsum pour un rendu plus professionnel.
Limites
- Seulement une maquette statique sans interactivité ni données réelles.
- Nécessite un fichier DESIGN.md préexistant avec les jetons de design.
- Ne gère pas les écrans complexes ou les mises en page avancées.
Utilisez cette compétence lorsque vous devez rapidement visualiser un écran d'application avec une identité visuelle cohérente, par exemple pour valider un design ou présenter une idée.
Évitez cette compétence si vous avez besoin d'un prototype fonctionnel avec navigation ou chargement de données, ou si aucun jeu de jetons de design n'est disponible.
Analyse de sécurité
SûrThe skill generates a static HTML mockup with inline CSS; no shell commands, network requests, file system access, or sensitive data handling. It is purely a design output tool.
Aucun point d'attention détecté
Exemples
Generate a quick visual mockup of an app screen for a fitness app home screen with a daily step counter, a few workout cards, and a bottom nav bar (Home, Train, Feed, Profile).Generate a quick visual mockup of an app screen for an e-commerce product page showing a product image, title, price, description, and an 'Add to Cart' button.Generate a quick visual mockup of an app screen for a settings screen with toggle switches for notifications, dark mode, and a logout 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.