Notre avis
Cette skill guide les modifications HTML/CSS du site NestMind en imposant le design system éditorial et clair défini dans css/styles.css.
Points forts
- Impose la réutilisation des tokens `:root` et des composants existants (.container, .btn, .card, .hero) plutôt que la création de styles ad hoc
- Fixite les règles responsive : approche mobile-first avec les breakpoints 640px, 768px et 1024px déjà en place
- Cadre l'accessibilité (HTML sémantique, focus visible, contraste 4.5:1, cibles tactiles de 44px) et la performance des animations (transform/opacity, prefers-reduced-motion)
- Indique clairement où placer les styles globaux et les styles par page
Limites
- Entièrement lié au dépôt NestMind et à css/styles.css : inutilisable tel quel sur un autre projet
- Ne fournit pas de guide de marque détaillé (palette, échelle typographique) au-delà des noms de tokens et de classes cités
- Ne couvre ni le JavaScript, ni les tests visuels ou de régression
À utiliser dès qu'il faut modifier la mise en page, le style ou le comportement responsive d'une page du site NestMind.
À éviter pour du travail hors du dépôt NestMind, ou pour des tâches sans rapport avec le HTML/CSS comme la logique serveur ou l'optimisation d'images.
Analyse de sécurité
SûrThe skill only uses read and file editing tools for HTML/CSS work. It contains no shell commands, network access, destructive actions, or data exfiltration. Instructions are limited to styling and layout guidance within the repository.
Aucun point d'attention détecté
Exemples
Add a three-column pricing section to the NestMind homepage. Reuse the existing .card and .btn classes from css/styles.css, use the :root spacing and color tokens, and make it stack to a single column below 768px.The hero section on the vision page overflows horizontally on small screens. Fix it mobile-first using the existing .hero styles and breakpoints at 640px and 768px, without fixed widths.Update the site nav so the mobile menu button has a visible focus state and a 44px tap target, and respect prefers-reduced-motion for its open/close animation.name: design-expert description: Use for HTML/CSS layout, responsive behavior, and UI styling on the NestMind site; follow the Zed-inspired design system in css/styles.css and reuse existing patterns. allowed-tools: Read, Grep, Glob, Edit, Write
Design Expert
Use this skill when adjusting HTML/CSS, layout, or visual design in this repo. Keep the current editorial, light-theme aesthetic and reuse the design system.
Project rules (must)
- Use tokens from
css/styles.css(:root) for colors, spacing, typography, and motion. - Keep typography pairing:
--font-seriffor headings,--font-sansfor body. - Default theme is light; add
.darkoverrides only when requested or already in use. - Prefer existing classes/components before creating new ones.
Responsive behavior
- Mobile-first; use existing breakpoints at 640px, 768px, and 1024px.
- Ensure tap targets are at least 44px and avoid horizontal overflow on small screens.
- Use flex/grid with wrapping; avoid fixed widths on mobile.
Motion + performance
- Animate with
transformandopacity; avoid layout thrash. - Respect
prefers-reduced-motion.
Accessibility
- Use semantic HTML and visible focus states.
- Maintain text contrast at 4.5:1 or higher.
File placement
- Global styles:
css/styles.css - Page-specific styles:
css/vision.css,css/docs.css
Reuse first
- Scan
css/styles.cssfor existing patterns like.container,.btn,.card,.hero,.nav,.feature-detail, and.phone-mockup.
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.