Notre avis
Génère une maquette HTML statique, mobile-first, d'un écran d'application en utilisant les tokens du fichier DESIGN.md et la publie via l'outil Artifact.
Points forts
- Respecte strictement les couleurs, composants et motifs d'un système de design existant.
- Produit une maquette visible dans le navigateur grâce à l'outil Artifact.
- Utilise un contenu réaliste plutôt que du lorem ipsum, facilitant la conception.
- Cadre mobile-first cohérent avec la largeur maximale de 32rem et la barre de navigation.
Limites
- Maquette purement statique, sans fonctionnalités interactives ni données réelles.
- Nécessite un fichier DESIGN.md existant et correctement structuré.
- L'utilisation de l'outil Artifact limite la portabilité à d'autres environnements.
Lorsque vous avez besoin d'un prototype visuel rapide d'un écran d'application conforme à un système de design établi.
Lorsque vous avez besoin d'une page fonctionnelle avec des données réelles, du routage ou des interactions dynamiques.
Analyse de sécurité
SûrThe skill only generates a static HTML mockup based on a design system and publishes it via the Artifact tool. It does not execute shell commands, access files beyond DESIGN.md, send data externally, or perform destructive actions. The use of the Artifact tool is for displaying output, not a security risk.
Aucun point d'attention détecté
Exemples
Create a mockup of the home screen for a fitness app. Read DESIGN.md and follow its tokens exactly.Mock up the profile screen for a social app showing an empty state with a call-to-action button, using our DESIGN.md tokens and a bottom nav bar.Generate a visual mockup of the Train tab with a list of workout cards. Use the victory-* colors and component patterns 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.