Notre avis
Génère rapidement une maquette visuelle d'un écran d'application sous forme d'un fichier HTML autonome, en respectant strictement le système de design défini dans DESIGN.md.
Points forts
- Respecte les tokens de design (couleurs, espacements, composants) sans improvisation
- Produit un fichier HTML autonome et visualisable directement dans le navigateur
- Utilise un contenu réaliste plutôt que du lorem ipsum pour une meilleure lisibilité
- Adapté au mobile avec une frame centrée et une barre de navigation basse pour les onglets principaux
Limites
- Limité à une maquette statique, sans interactions ni données dynamiques
- Dépend de l'existence d'un DESIGN.md complet et précis
- Ne prend en charge que les écrans principaux avec navigation basse, pas les vues complexes
Utilisez cette compétence lorsque vous avez besoin d'une maquette rapide et fidèle au design system pour valider un écran ou une idée.
Ne l'utilisez pas pour des prototypes fonctionnels, des applications avec routage réel ou lorsque le design system n'est pas défini.
Analyse de sécurité
SûrThe skill only reads a local DESIGN.md and generates a static HTML mockup using predefined design tokens. No destructive, exfiltrating, or obfuscated actions are instructed. It does not invoke shell commands, network requests, or sensitive data handling.
Aucun point d'attention détecté
Exemples
Generate a mockup app screen for the login page using our design system.Create a mobile mockup of the Profile tab as it would appear in the main app, matching DESIGN.md.Show me a mockup of the Feed screen's empty state using the victory-* colors and components./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.