القائمة
Compare implemented UI against Figma and report only meaningful deviations
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Single entry point for frontend work. Classify intent, create a plan, and run the minimal agent workflow.
Independent adversarial code review via Codex CLI to eliminate Claude self-review bias
Find reusable components with compact output before UI work
Create a task branch after plan approval
Create scoped Conventional Commits after reviewer PASS
Create an issue for failed tests or tracked follow-up work
| name | pixel-check |
| description | Compare implemented UI against Figma and report only meaningful deviations |
Trigger: /pixel-check [figma-url] or auto-called after ui-builder
Purpose: Flag only deviations large enough to matter before review.
| Category | What to check | Blocker threshold |
|---|---|---|
| Spacing | Gap, padding, margin match 4px grid | >4px off |
| Typography | Font size, weight, line-height, letter-spacing | Any deviation |
| Color | Design token used — not raw hex or hardcoded rgba | Any raw value |
| Component | Mapped codebase component used — not custom re-implementation | Re-implementation present |
| States | Hover, focus, disabled, loading, error states rendered | Any interactive state missing |
| Responsive | Breakpoint behavior matches Figma variants | Layout breaks at defined breakpoint |
1. Fetch Figma screenshot via get_design_context
2. Compare implementation against check criteria above
3. Report only blocker-level or meaningful major deviations
## Pixel Check Results
### Blockers
- [element]: [expected] vs [actual]
### Notes
- [non-blocking major deviation]
Overall: PASS | NEEDS REVISION
Rules: