Name: Design Expert
Author: nestmind-app

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.

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.

Design Expert

Project rules (must)

Responsive behavior

Motion + performance

Design Expert

Project rules (must)

Responsive behavior

Motion + performance

Accessibility

File placement

Reuse first

Extract Errors

Frontend Patterns

Coding Standards

Coding Standards

Coding Standards

Frontend Patterns