Iron Law

NEVER output hardcoded hex colors, raw px spacing, or NgModule. ALL colors → daisyUI semantic classes (bg-primary, text-base-content), ALL spacing → Tailwind scale (p-4, mt-2), ALL components → standalone with @if/@for control flow, ALL state → signal().

Screenshot-to-Angular Skill

Purpose

Replicate a UI screenshot as a production-ready Angular 21.x standalone component with pixel-perfect visual accuracy, compliant with Angular standards (daisyUI + Tailwind 4.x).

Scope reminder: Confirm whether this screenshot is for a marketing/web app or a mobile app feature. If it shows app-level CRUD features (dashboards, forms, ticket management) intended for mobile, consider implementing in Flutter instead of Angular.

Phase 1 — Screenshot Analysis (mandatory before writing code)