Imported from asas-erp-saas-1/As (
docs/engineering-history/branches/055-archive__engineering-history-integrity-2026-10-17/docs/engineering-history/branches/052-archive__engineering-history-2026-10-16/engineering-history/branch-snapshots/045--feat--engineering-workflow-2026-10-16/.agents/skills/asas-design-fidelity/SKILL.md). Install upstream withnpx skills add asas-erp-saas-1/As --skill asas-design-fidelity. Copyright stays with the author.
Design Fidelity
Design authority
Product/business semantics come from ASAS architecture/contracts. Visual/design intent comes from accepted Figma/design contracts. Executable UI is repository code. Runtime behavior is tested implementation.
Pipeline
IDEA → UX MODEL → TOKENS → PRIMITIVES → COMPONENTS → PATTERNS → FIGMA → DESIGN REVIEW → DESIGN ACCEPTED → CODEX IMPLEMENTATION → BROWSER QA → VISUAL QA → ACCESSIBILITY QA → RESPONSIVE QA → ACCEPTED.
Figma MCP
Use official Figma MCP when configured. It provides structured design context; it does not guarantee perfect code. Use Code Connect when real ASAS components are stable and mappings are trustworthy.
Acceptance
Check:
- component reuse;
- variables/tokens;
- typography;
- spacing/layout constraints;
- interaction states;
- loading/empty/error states;
- Arabic/RTL/French/English;
- keyboard/focus/accessibility;
- responsive behavior;
- real-data density;
- mobile/tablet/desktop;
- visual regression.
Never fix an architectural component problem with arbitrary CSS. Escalate the contract when design and domain semantics conflict.
