igrlebed 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/uior PrimeReact per ARCHITECTURE. - Legacy Soft*/DS: follow existing atoms; do not add a second kit.