# Design Expert

> 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.

- Skill: `majiayu000/design-expert` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/design-expert`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/design-expert/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/design-expert

---


# 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`.