Autonomous workflow for visual design analysis, UI cloning, and Next.js component generation with integrated UI validation.
This skill empowers the agent to act as a high-fidelity web application architect, converting visual designs into production-ready code aligned with the Matrix Design System, with integrated UI issue detection and correction.
The following resources are integrated into the design system and inform all UI decisions:
| Resource | Integration | Token Prefix |
|---|---|---|
| OpenAI Apps SDK UI | Alpha layers, semantic surfaces/borders, card patterns, accessible components via Radix primitives | --m-alpha-*, --m-border-* |
| AG-UI Protocol | State colors for streaming/thinking/complete/error, event-based UI patterns | --m-state-* |
| Onyx | High-density dashboard patterns, agent cards, RAG status displays | MetricCard, SurfaceCard |
| Ink | Terminal-inspired progress bars, spinners, task lists, terminal color palette | --m-terminal-*, ProgressBar, Spinner, TaskList |
| Avalonia | Cross-platform theming architecture, dark mode token system | Theme structure |
| Open Targets | Data-dense visualization patterns, sparkline micro-charts | MetricCard density |
These packages were extracted from the GitHub resources and installed:
radix-ui — Accessible primitives (Dialog, Tooltip, Select, Accordion)react-syntax-highlighter — Code block rendering with themesusehooks-ts — Premium hooks (useMediaQuery, useLocalStorage, useDebounce)When a user sends a UI image or design link:
.tsx file in core/templates/.tokens.css and base.css as the only source of truth for variables.DesignTokens.tsx component library for standard UI primitives (Badge, SurfaceCard, ProgressBar, etc.).Before finalizing, run validation checks (via matrix-capture.js):
--m-min-touch-target)--m-min-font-size (10px)nexus, reflect, or any Matrix sub-app.--m-* tokens instead of hardcoded colors.Codified by Antigravity Infrastructure. v2.0 — GitHub Resource Integration.