# Cursor Designer Visual

> Use when working on UI, layout, design implementation, pixel-perfect tasks, styling, colors, spacing, typography, animations, responsive behavior, or implementing sections from a Figma/design mockup (Vue or React).

- Skill: `igrlebed/cursor-designer-visual` (Agent Skill)
- Install (CLI): `npx skillmds@latest add igrlebed/cursor-designer-visual`
- Raw SKILL.md: https://api.skillmd.com/api/skills/igrlebed/cursor-designer-visual/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: igrlebed (https://skillmd.com/u/igrlebed)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/igrlebed/cursor-designer-visual

---


# Visual Rules

## Visual Fidelity
- Implement pixel-perfect against the design mockup.
- If the mockup does not cover a breakpoint — use the grid system and document the decision in CHANGELOG.md.
- Do NOT add hover effects, animations, or transitions that are not in the mockup.
- Do NOT tweak colors, spacing, or fonts by eye — if you spot a mismatch, log it in CHANGELOG.md as `Design debt`.
- When a mockup is missing a state (error, empty, loading) — create a minimal version, do not leave it blank.
- Do NOT use base64 for images > 1KB.
- All icons must come from the design system or the project UI kit (Nuxt UI / Iconify; lucide for shadcn; PrimeReact icons) — no custom SVG without approval.

## Styling Rules
- Never hardcode colors — always use design tokens or theme variables.
- Never hardcode spacing — use design system scale.
- Never hardcode typography values — use theme tokens.
- Avoid random Tailwind utility soup without semantic purpose.
- Prefer semantic and reusable styling patterns.
- Maintain responsive consistency across breakpoints.
- Any non-standard values (when token is missing) must be documented in CHANGELOG.md.

## UI kit awareness
- Use only components from the stack in `docs/ARCHITECTURE.md`.
- **Vue:** Nuxt UI is the visual base — prefer `U*` primitives over one-off HTML when the kit covers the pattern.
- **React:** shadcn `components/ui` or PrimeReact per ARCHITECTURE.
- Legacy Soft*/DS: follow existing atoms; do not add a second kit.