Notre avis
Génère une maquette visuelle statique d'un écran d'application en utilisant les tokens de design définis dans DESIGN.md.
Points forts
- Respecte strictement les tokens visuels existants (couleurs, espacements, composants).
- Produit un fichier HTML autonome et visualisable dans le navigateur.
- Adapté au mobile-first avec une largeur maximale et une barre de navigation inférieure.
Limites
- Nécessite un fichier DESIGN.md préexistant avec les tokens définis.
- Maquette uniquement statique, sans données réelles ni interactions.
- Ne prend pas en charge les variations dynamiques ou multiples états.
Lorsque vous souhaitez prototyper rapidement un écran d'application en respectant une charte graphique existante.
Si vous avez besoin d'une maquette interactive, de données dynamiques ou de tests fonctionnels.
Analyse de sécurité
SûrThe skill generates a static HTML mockup using predefined design tokens; no execution of external commands, network access, or destructive operations is involved.
Aucun point d'attention détecté
Exemples
Create a mockup of the home screen for a fitness app using our design system. Follow the tokens in DESIGN.md and include a bottom navigation bar.Generate a visual mockup of the user profile page with placeholder content. Use the notes icon and gray cards from DESIGN.md.Make a mockup of the settings screen with a list of toggles and buttons, matching the victory color scheme from DESIGN.md./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.