design-expert

nestmind-app's avatarfrom nestmind-app

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.

⭐0stars🔀0forks📁View on GitHub🕐Updated Dec 21, 2025
[Code Generation]

When & Why to Use This Skill

The Design Expert skill is a specialized frontend development assistant focused on creating and refining HTML/CSS layouts within the NestMind ecosystem. It ensures strict adherence to the Zed-inspired design system, utilizing predefined tokens for typography, spacing, and color. By prioritizing mobile-first responsiveness, accessibility standards, and performance-optimized animations, this skill helps maintain a cohesive and professional UI across the entire codebase.

Use Cases

  • Developing responsive web layouts that adapt seamlessly across mobile, tablet, and desktop breakpoints (640px, 768px, 1024px).
  • Implementing UI components like buttons, cards, and navigation bars using existing CSS patterns and design tokens to ensure visual consistency.
  • Auditing and improving web accessibility by implementing semantic HTML and ensuring WCAG-compliant color contrast ratios.
  • Refactoring legacy CSS to follow a mobile-first approach and eliminate horizontal overflow on small screens.
  • Applying theme-consistent styling and dark mode overrides while maintaining the project's light-theme aesthetic.
  • Optimizing UI performance by using transform and opacity for animations to prevent layout thrashing.
namedesign-expert
descriptionUse 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-toolsRead, 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.