Our review
This skill guides HTML/CSS changes on the NestMind site by enforcing the light, editorial design system defined in css/styles.css.
Strengths
- Requires reuse of the `:root` tokens and existing components (.container, .btn, .card, .hero) instead of one-off styles
- Locks in responsive rules: mobile-first with the existing 640px, 768px and 1024px breakpoints
- Sets clear accessibility (semantic HTML, visible focus, 4.5:1 contrast, 44px tap targets) and motion-performance expectations (transform/opacity, prefers-reduced-motion)
- States exactly where global versus page-specific styles belong
Limitations
- Tightly coupled to the NestMind repo and css/styles.css, so it does not transfer to other projects as-is
- Gives no full brand reference (palette, type scale) beyond the token and class names mentioned
- Covers neither JavaScript behavior nor visual regression testing
Use it whenever you need to change layout, styling or responsive behavior on a page of the NestMind site.
Skip it for work outside the NestMind repo or for non-CSS tasks such as server logic or image optimization.
Security analysis
SafeThe 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.
No concerns found
Examples
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.
Next.js App Router Expert
Development
A skill that turns Claude into a Next.js App Router expert.
README Generator
Development
Creates professional and comprehensive README.md files for your projects.
API Documentation Writer
Development
Generates comprehensive API documentation in OpenAPI/Swagger format.