--- name: outsystems-ui description: > Build OutSystems UI screens using the official pattern library and utility-first CSS classes. Use when creating .visual.html prototypes, building UI screens, styling components, using layout patterns (Cards, Columns, Forms, Tables, Tabs), applying spacing, colors, typography, or scaffolding screens — even if the user doesn't mention "OutSystems" explicitly. Covers all 90 UI patterns across 8 categories, 16 core widgets, the full screen workflow (generate → self-check → dev server with npm run dev → visual verification), layout components, and the complete design token system (spacing, colors, borders, shadows, typography). compatibility: Requires outsystems-ui.css linked in the HTML file. Designed for VS Code agents. metadata: version: "1.2" synced: "OSUI v2.29.0 — mobile menu .is--open mechanism, 90 patterns, granular color tokens" source: "OutSystems UI Cheat Sheet" --- # OutSystems UI — Vibe Coding Skill Build pixel-perfect OutSystems-compatible `.visual.html` prototypes using only the official OSUI pattern library and utility classes. Every class and CSS variable below comes directly from the OutSystems UI Cheat Sheet. ## General Rules 1. **Utility-first styling** — use OSUI utility classes (`.padding-m`, `.text-bold`, `.background-primary`) for standard spacing, color, and typography. Inline `style=""` attributes are allowed — the visual inspector copies class, style, and attribute from the DOM, so inline styles are a first-class mechanism. Use `