Claude Code Plugins

Community-maintained marketplace

Feedback

design-expert

@nestmind-app/docs
0
0

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.

Install Skill

1Download skill
2Enable skills in Claude

Open claude.ai/settings/capabilities and find the "Skills" section

3Upload to Claude

Click "Upload skill" and select the downloaded ZIP file

Note: Please verify skill by going through its instructions before using it.

SKILL.md

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-serif for headings, --font-sans for body.
  • Default theme is light; add .dark overrides 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 transform and opacity; 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.css for existing patterns like .container, .btn, .card, .hero, .nav, .feature-detail, and .phone-mockup.