Notre avis
Génère une maquette visuelle statique d'un écran d'application à partir d'un fichier DESIGN.md, produisant un fichier HTML autonome.
Points forts
- Prototypage rapide d'écrans d'application en respectant un système de design existant.
- Maquette mobile-first avec une mise en page centrée et une barre de navigation inférieure.
- Contenu réaliste (pas de lorem ipsum) pour une meilleure représentation.
- Sortie sous forme d'Artifact HTML visualisable directement dans le navigateur.
Limites
- Ne produit qu'une maquette statique sans données réelles ni interactivité.
- Nécessite un fichier DESIGN.md préexistant avec des tokens de design spécifiques.
- Ne gère pas le routage ou la navigation dynamique entre plusieurs écrans.
Utilisez cette compétence pour obtenir rapidement une maquette visuelle d'un écran d'application fidèle au système de design existant.
Ne l'utilisez pas si vous avez besoin d'un prototype fonctionnel avec des données dynamiques ou des interactions utilisateur.
Analyse de sécurité
SûrThe skill generates static HTML mockups using a design system; no destructive or exfiltration actions. It does not instruct to run arbitrary code or access sensitive data, and the output is explicitly limited to visual placeholder content.
Aucun point d'attention détecté
Exemples
Generate a visual mockup of the home screen for a fitness tracking app. Use the design tokens from DESIGN.md. It should include a header with the user's name, a daily step count card, and a list of recent workouts.Create a visual mockup of the profile tab for a social media app. Use the victory-* colors from DESIGN.md. Show the user avatar, username, bio, and a grid of recent posts. Include a bottom nav bar with Profile highlighted./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.