create-flowmo 1.0.0 → 1.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-flowmo",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "description": "Scaffold an OutSystems-Lite project with screens, data, logic, and built-in agent skills",
   "type": "module",
   "license": "MIT",

package/skills/outsystems-ui/SKILL.md

@@ -5,7 +5,7 @@ description: >
   CSS classes. Use when creating .visual.html prototypes, 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 87 UI patterns across 7 categories, 16 core widgets, and
+  explicitly. Covers all 86 UI patterns across 8 categories, 16 core widgets, 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:
@@ -22,16 +22,136 @@ Build pixel-perfect OutSystems-compatible `.visual.html` prototypes using only t
 1. **Utility-first styling** — use OSUI utility classes (`.padding-m`, `.text-bold`, `.background-primary`). Never use raw CSS properties or inline `style=""` attributes.
 2. **12-column grid** — use `.columns2` through `.columns6` for responsive layouts. These auto-stack on mobile — do not add custom media queries.
 3. **No external JavaScript** — all interaction patterns are CSS/class-driven.
-4. **Layout Wrapper required** — every screen must be wrapped in:
-   ```html
-   <div class="layout active-screen">
-     <!-- header, content, footer -->
-   </div>
-   ```
-   The `.active-screen` class is REQUIRED or utility classes and CSS variables will not resolve.
-5. **Strip platform IDs** — never include `os-internal-id` or similar platform-generated attributes.
-6. **Widget slots** — use `{{content}}` placeholders in templates where nested widgets would go.
-7. **Base template** — see [assets/layout-template.html](assets/layout-template.html) for the starting scaffold.
+4. **Layout is CRITICAL** — every screen MUST use one of the three OutSystems layouts. Pick the right one and use the exact HTML structure from the layout template files. The `.active-screen` wrapper is REQUIRED or utility classes will not resolve. See the **Layouts** section below.
+5. **Scroll model** — OSUI sets `html { overflow: hidden }`. The `.active-screen` div is the actual scroll container. Your theme.css MUST include `.active-screen { overflow: hidden auto; height: 100vh; }` or the page will not scroll.
+6. **Strip platform IDs** — never include `os-internal-id` or similar platform-generated attributes.
+7. **Widget slots** — use `{{content}}` placeholders in templates where nested widgets would go.
+8. **theme.css is mandatory** — every project has a `theme.css` that loads after `outsystems-ui.css`. Use it for brand colors, custom component styles, and OSUI overrides. See the **Theme Customization** section below.
+
+## Layouts
+
+OutSystems has four top-level page layouts. **Every screen must use one.** The layout controls the header, navigation, sidebar, and content structure. Do NOT invent your own layout wrapper — use the correct template.
+
+### Choosing a Layout
+
+| Layout | Class | Best for | Template |
+|--------|-------|----------|----------|
+| **LayoutTopMenu** | `.layout.layout-top` | Web apps with 3–6 top-level pages. Horizontal nav in header. | [assets/layout-top.html](assets/layout-top.html) |
+| **LayoutSideMenu** | `.layout.layout-side` | Backoffice/admin apps with many pages or deep navigation. Vertical sidebar. | [assets/layout-side.html](assets/layout-side.html) |
+| **LayoutBase** | `.layout.layout-blank` | Landing pages, marketing pages, public screens. Full-width sections. Same header/nav as LayoutTopMenu. | [assets/layout-base.html](assets/layout-base.html) |
+| **LayoutBlank** | `.layout.blank` | Login, error pages, splash screens. No header, no footer, no navigation. | [assets/layout-blank.html](assets/layout-blank.html) |
+
+**Mixing layouts** within one app is normal. Use LayoutBase for the landing page and LayoutTopMenu for inner pages. Or LayoutBlank for login and LayoutSideMenu for the main app.
+
+### Layout Structure
+
+#### LayoutTopMenu & LayoutBase (shared pattern)
+
+```
+.active-screen
+  └── .layout.layout-top.fixed-header  (or .layout.layout-blank.fixed-header)
+        └── .main
+              ├── header.header [role=banner]
+              │     └── .header-top.ThemeGrid_Container
+              │           └── .header-content.display-flex
+              │                 ├── .menu-icon [role=button]       ← hidden on desktop, visible on mobile
+              │                 └── .header-navigation (flex:1)
+              │                       └── nav.app-menu-content.display-flex [role=navigation]
+              │                             ├── .header-logo                ← padding-right for gap
+              │                             │     └── .application-name    ← logo + app title
+              │                             ├── .app-menu-links [role=menubar] (flex:1)
+              │                             │     └── <a role="menuitem">  ← .active on current page
+              │                             ├── .app-login-info > .user-info
+              │                             └── .app-menu-overlay [role=button]
+              ├── .content
+              │     ├── .main-content.ThemeGrid_Container [role=main]    ← LayoutTopMenu
+              │     │     ├── .content-breadcrumbs
+              │     │     ├── .content-top.display-flex.align-items-center
+              │     │     │     ├── .content-top-title.heading1
+              │     │     │     └── .content-top-actions
+              │     │     └── .content-middle
+              │     │
+              │     │  OR for LayoutBase:
+              │     ├── .main-content [role=main]                        ← NO ThemeGrid_Container
+              │     │     └── .content-middle
+              │     │           └── LayoutBaseSection (.full-width-section)
+              │     │                 └── .ThemeGrid_Container (inside EACH section)
+              │     │
+              │     └── footer.content-bottom [role=contentinfo]
+              │           └── .footer.ThemeGrid_Container
+```
+
+#### LayoutSideMenu (different structure)
+
+The sidebar `<aside>` sits OUTSIDE `.main`, as a sibling:
+
+```
+.active-screen
+  └── .layout.layout-side.fixed-header
+        ├── aside.aside-navigation [role=complementary]    ← OUTSIDE .main
+        │     └── Common.Menu block (same nav as header)
+        │           ├── .app-menu-content
+        │           │     ├── .header-logo > .application-name
+        │           │     ├── .app-menu-links [role=menubar]
+        │           │     └── .app-login-info > .user-info
+        │           └── .app-menu-overlay [role=button]
+        └── .main
+              ├── header.header [role=banner]
+              │     └── .header-top.ThemeGrid_Container
+              │           └── .header-content.display-flex
+              │                 ├── .menu-icon [role=button]
+              │                 ├── .application-name
+              │                 └── .header-navigation
+              │                       └── Common.Menu block (duplicate for desktop)
+              └── .content
+                    ├── .main-content.ThemeGrid_Container [role=main]
+                    │     ├── .content-breadcrumbs
+                    │     ├── .content-top > .content-top-title + .content-top-actions
+                    │     └── .content-middle
+                    └── footer.content-bottom [role=contentinfo]
+                          └── .footer.ThemeGrid_Container
+```
+
+#### LayoutBlank (minimal)
+
+```
+.active-screen
+  └── .layout.blank
+        └── .content [role=main]
+              └── .main-content
+```
+
+No header, no footer, no navigation. For login pages, error pages, etc.
+
+### Common.Menu Block (standard navigation)
+
+All layouts that have navigation use the **same `Common.Menu` block**. It provides:
+- **App title/logo** in `.header-logo` > `.application-name`
+- **Menu links** in `.app-menu-links` with `role="menubar"`
+  - Simple links: `<a role="menuitem" href="#">Page</a>`
+  - Subsequent links use `.ThemeGrid_MarginGutter` for spacing
+  - Active page: add `.active` class to the link
+  - Dropdown submenus: use `Navigation.Submenu` pattern (`.osui-submenu`)
+- Subsequent links add `.ThemeGrid_MarginGutter` for spacing
+- **User info** in `.app-login-info` > `.user-info`
+- **Overlay** `.app-menu-overlay` for mobile menu backdrop
+
+### Mobile Responsive Behavior
+
+The layouts are **automatically responsive** via the OSUI CSS — no custom media queries needed:
+
+| Viewport | body class | Menu behavior |
+|----------|-----------|---------------|
+| Desktop | `desktop landscape` | Menu links visible in header (top) or sidebar (side) |
+| Tablet | `tablet` | Burger icon appears, menu slides in from left |
+| Phone | `phone portrait` | Burger icon appears, menu slides in from left |
+
+How it works:
+1. `.menu-icon` (burger) is `display: none` on desktop, `display: flex` on tablet/phone
+2. Clicking burger adds `.menu-visible` to the layout wrapper
+3. `.app-menu-content` slides in: `position: fixed; left: -300px` → `translateX(300px)`
+4. `.app-menu-overlay` goes from `opacity: 0` to `opacity: 1` with `pointer-events: auto`
+5. Menu links switch from `flex-direction: row` (desktop) to `flex-direction: column` (mobile)
 
 ## Buttons
 
@@ -77,6 +197,30 @@ Add `.btn-loading` to the button and include a spinner element inside. This is C
 </button>
 ```
 
+### Button Specificity Warning
+
+The `.btn` class sets its own `color` and `background-color` with high specificity. **DO NOT** try to override button colors with OSUI color utilities like `.background-neutral-0` or `.text-primary` — they will be overridden by `.btn` rules and the text will become invisible.
+
+**Wrong** (text invisible — white on white):
+```html
+<button class="btn btn-primary background-neutral-0 text-primary">Open Account</button>
+```
+
+**Right** — use a named class in `theme.css`:
+```html
+<button class="btn hero-btn-primary">Open Account</button>
+```
+```css
+/* theme.css */
+.hero-btn-primary {
+  background: var(--bank-gold) !important;
+  color: var(--bank-navy) !important;
+  border: 2px solid var(--bank-gold) !important;
+}
+```
+
+If you need a button style that doesn't match `.btn-primary`, `.btn-cancel`, `.btn-success`, or `.btn-error`, create a custom class in `theme.css` rather than stacking conflicting utility classes.
+
 ## Borders
 
 ### Border Radius
@@ -188,17 +332,18 @@ Most-used palette entries. Load [references/colors.md](references/colors.md) for
 
 ## UI Pattern Categories
 
-OutSystems UI includes 87 patterns across 7 categories plus 16 core widgets. Load the appropriate reference file when working with patterns in that category.
+OutSystems UI includes 86 patterns across 8 categories plus 16 core widgets. All verified HTML structures are in **[references/ui-patterns.md](references/ui-patterns.md)** — load it when building any UI pattern.
 
-| Category | Count | When to load |
-|----------|-------|--------------| 
-| Adaptive | 12 | Load [references/patterns-adaptive.md](references/patterns-adaptive.md) if the user mentions columns, gallery, grid, responsive, Master-Detail, or multi-column layout |
-| Content | 16 | Load [references/patterns-content.md](references/patterns-content.md) if the user mentions Card, Accordion, Alert, Tag, Tooltip, Section, Blank Slate, or content display |
-| Interaction | 18 | Load [references/patterns-interaction.md](references/patterns-interaction.md) if the user mentions Carousel, DatePicker, Sidebar, Search, Notification, drag, modal, or interactive elements |
-| Navigation | 9 | Load [references/patterns-navigation.md](references/patterns-navigation.md) if the user mentions Breadcrumb, Tabs, Pagination, Wizard, Timeline, or navigation |
-| Numbers | 6 | Load [references/patterns-numbers.md](references/patterns-numbers.md) if the user mentions Badge, Counter, Progress Bar, Progress Circle, Rating, or numeric display |
-| Utilities | 9 | Load [references/patterns-utilities.md](references/patterns-utilities.md) if the user mentions centering, separator, swipe, touch, Inline SVG, or alignment helpers |
-| Widgets | 16 | Load [references/widgets.md](references/widgets.md) if the user mentions form, table, checkbox, dropdown, switch, upload, popup, radio, or input widget |
+| Category | Count | Key patterns |
+|----------|-------|-------------|
+| Adaptive | 12 | Columns 2–6, Columns Medium/Small Left/Right, Gallery, Master Detail, Display On Device |
+| Content | 16 | Card, Card Background, Card Item, Card Sectioned, Accordion, Alert, Tag, Section, Tooltip, User Avatar, Chat Message, Flip Content, Floating Content, List Item Content, Blank Slate, Section Group |
+| Interaction | 18 | Animated Label, Carousel, Date Picker, Dropdown Search, Dropdown Tags, Floating Actions, Input With Icon, Lightbox Image, Notification, Range Slider, Search, Sidebar, Stacked Cards, Video, Action Sheet, Animate, Scrollable Area, Range Slider Interval |
+| Navigation | 9 | Breadcrumbs, Tabs, Pagination, Wizard, Timeline Item, Bottom Bar Item, Section Index, Submenu, Overflow Menu |
+| Numbers | 6 | Badge, Counter, Icon Badge, Progress Bar, Progress Circle, Rating |
+| Utilities | 9 | Align Center, Button Loading, Center Content, Inline SVG, Margin Container, Separator, Mouse Events, Swipe Events, Touch Events |
+| Widgets | 16 | Button, Button Group, Checkbox, Dropdown, Feedback Message, Form, Input, Link, List, Popover, Popup, Radio Group, Switch, Table, TextArea, Upload |
+| Advanced | 1 | DropdownServerSide |
 
 For complete screen scaffolds (Dashboard, List/Detail, Form, Login, etc.), load [references/screen-templates.md](references/screen-templates.md).
 
@@ -215,23 +360,113 @@ Some patterns expose CSS custom properties for fine-tuning. Set these on the pat
 | Rating | `--rating-size: 16px` |
 | Scrollable Area | `--scrollable-area-width`, `--scrollable-area-height` |
 
+## Theme Customization
+
+Every project ships two CSS files: `outsystems-ui.css` (base framework) and `theme.css` (project overrides). The theme file loads second and extends OSUI.
+
+### What theme.css MUST contain
+
+1. **Scroll model fix** — OSUI expects `.active-screen` to be the scroll container:
+   ```css
+   .active-screen {
+     overflow: hidden auto;
+     height: 100vh;
+   }
+   ```
+
+2. **Brand tokens** — override `:root` CSS variables:
+   ```css
+   :root {
+     --color-primary: #1a56db;
+     --color-secondary: #0a1628;
+     --font-family-base: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
+   }
+   ```
+
+3. **Custom component classes** — for styles that can't be achieved with OSUI utilities alone (e.g. hero buttons, gradient backgrounds, themed footers). Use **BEM naming** (`block__element--modifier`):
+   ```css
+   .hero__btn--primary { ... }
+   .hero__btn--outline { ... }
+   .footer__link--active { ... }
+   .stats__number { ... }
+   .card__icon--large { ... }
+   ```
+   BEM keeps custom classes predictable and avoids collisions with OSUI's own class names.
+
+### What theme.css should NOT do
+
+- Don't redefine OSUI layout structure (`.layout`, `.main`, `.content`, `.header-content`)
+- Don't add `@media` queries — OSUI handles responsiveness
+- Don't override `.btn` base styles — create new named classes instead
+
+### Common OSUI specificity traps
+
+These OSUI classes set background/color with high specificity that utility classes can't override:
+
+| Class | Sets | Don't override with |
+|-------|------|--------------------|
+| `.btn` | `color`, `background-color` | `.text-*`, `.background-*` |
+| `.list-item` | `background-color: white` | Needs `background: transparent !important` in dark contexts |
+| `.card` | `background-color: white` | Needs explicit override for dark backgrounds |
+| `.badge` | `background-color`, `color` | Use `!important` or a custom class |
+
+### Icons
+
+OSUI does not bundle an icon font. If your screen uses Font Awesome icons (`<i class="fa fa-*">`), you MUST add the CDN link in `<head>`:
+
+```html
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
+```
+
+Alternatively, use inline SVGs with the `.icon` class if you want to avoid external dependencies.
+
+### Dark section styling
+
+When placing content on a dark background (`.background-primary`, `.background-secondary`, or custom dark sections), remember:
+- Use `.text-neutral-0` for white text (headings, paragraphs)
+- Footer `.list-item` elements have `background: white` by default — override with `background: transparent !important`
+- Links default to the primary color — use custom classes for white/light link colors
+- Border colors may be invisible — use `border-color: rgba(255,255,255,0.1)` overrides
+
 ## Validation
 
 After generating a `.visual.html` file, verify:
-1. The root `<div>` has class `layout active-screen`
+1. The root `<div>` has class `active-screen` wrapping a `.layout` div
 2. No inline `style=""` attributes exist anywhere in the file
-3. All classes used are from the OSUI cheat sheet — no custom CSS class names
-4. The OSUI stylesheet `<link>` is present in `<head>`
-5. No `@media` queries or custom breakpoints were added
+3. All classes are either OSUI utilities OR custom classes defined in `theme.css` — no undefined classes
+4. Both `outsystems-ui.css` and `theme.css` stylesheet `<link>` tags are present in `<head>`
+5. If Font Awesome icons are used, the FA CDN `<link>` is in `<head>`
+6. No `@media` queries or custom breakpoints were added
+7. `.active-screen` scroll model is handled in `theme.css`
 
 If any check fails, fix the issue before presenting the output.
 
+### Visual testing with the dev server
+
+The project includes a Vite dev server. If `npm install` has already been run, start it with:
+
+```
+npm run dev
+```
+
+This serves all `.visual.html` files with hot-reload at `http://localhost:5173/`. Use it to:
+- **Open the page in a browser** and take a screenshot to verify the layout renders correctly
+- **Check for invisible text** — buttons or links with white-on-white or same-color text/background
+- **Confirm scrolling works** — the page should scroll within `.active-screen`
+- **Verify icons render** — Font Awesome icons should not be 0×0 invisible boxes
+- **Inspect computed styles** — confirm utility classes resolve as expected against OSUI
+
+Do NOT run `npm install` yourself — only use `npm run dev` if `node_modules` already exists.
+
 ## Gotchas
 
-- `.active-screen` class is **REQUIRED** on the layout wrapper `<div>`. Without it, utility classes and CSS variables will NOT resolve correctly.
+- `.active-screen` is **REQUIRED** as the outermost wrapper. Without it, utility classes and CSS variables will NOT resolve. It also serves as the **scroll container** — OSUI sets `html { overflow: hidden }` so `.active-screen` must have `overflow: hidden auto; height: 100vh` (set this in `theme.css`).
+- **Button + color utilities don't mix** — `.btn` overrides `color` and `background-color` at high specificity. Stacking `.btn .background-neutral-0 .text-primary` will produce invisible text (white on white). Create custom button classes in `theme.css` instead.
+- **`.list-item` has white background** — In dark-background sections (footer, sidebar), list items will show as white rectangles. Override with `background: transparent !important` in `theme.css`.
+- **Font Awesome is not bundled** — If using `<i class="fa fa-exchange">` style icons, add the FA 4.7 CDN link to `<head>` or the icons will be invisible (0×0 size).
 - OutSystems pattern previews render inside iframes — CSS resolves against the OSUI framework, not browser defaults. Your `.visual.html` must link the OSUI stylesheet.
-- **Never mix** inline `style=""` attributes with utility classes. Pick one approach — always prefer utility classes.
+- **Never mix** inline `style=""` attributes with utility classes. Always prefer utility classes.
 - `.columns*` patterns auto-stack on mobile breakpoints. Do NOT add custom `@media` queries to override this behavior.
 - Button loading state is purely CSS (`.btn-loading` + spinner element), not a JavaScript toggle.
 - Use `{{content}}` placeholders in component templates to indicate where nested child widgets go.
-- Always test your prototype with the OSUI CSS linked — plain browser rendering will look wrong.
+- Always generate BOTH the `.visual.html` AND corresponding `theme.css` styles together. A screen without proper theme styles will look broken.

package/skills/outsystems-ui/assets/layout-base.html

@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>{{screen-name}}</title>
+  <link rel="stylesheet" href="../theme/outsystems-ui.css" />
+  <link rel="stylesheet" href="../theme/theme.css" />
+</head>
+<body class="desktop">
+  <!--
+    LayoutBase — Full-width sections, content-first.
+    Best for: landing pages, marketing pages, public-facing screens.
+    Uses the same header/nav as LayoutTopMenu, but the content area has
+    NO ThemeGrid_Container — each section is full-bleed with its own container.
+    
+    Can be mixed with LayoutTopMenu in the same app (e.g. LayoutBase for
+    the landing page, LayoutTopMenu for inner pages).
+  -->
+  <div class="active-screen">
+    <div data-block="Layouts.LayoutBase" class="layout layout-blank fixed-header">
+      <div class="main">
+
+        <!-- ═══════════ HEADER (same nav as LayoutTopMenu) ═══════════ -->
+        <header role="banner" class="header">
+          <div class="header-top ThemeGrid_Container">
+            <div class="header-content display-flex">
+
+              <!-- Burger menu (hidden on desktop, visible on tablet/phone) -->
+              <div class="menu-icon" role="button" aria-label="Toggle the Menu" aria-haspopup="true">
+                <div class="menu-icon-line" aria-hidden="true"></div>
+                <div class="menu-icon-line" aria-hidden="true"></div>
+                <div class="menu-icon-line" aria-hidden="true"></div>
+              </div>
+
+              <!-- Top Navigation -->
+              <div class="header-navigation">
+                <nav class="app-menu-content display-flex" role="navigation">
+
+                  <!-- App Logo & Name (inside nav for proper spacing) -->
+                  <div class="header-logo">
+                    <div class="application-name display-flex align-items-center full-height">
+                      <!-- <img class="app-logo" src="logo.png" alt="" style="height: 32px;" /> -->
+                      <span class="heading6 text-neutral-8">{{app-name}}</span>
+                    </div>
+                  </div>
+
+                  <div class="app-menu-links" role="menubar">
+                    <a class="active" role="menuitem" href="#">Home</a>
+                    <a class="ThemeGrid_MarginGutter" role="menuitem" href="#">{{nav-link-2}}</a>
+                    <a class="ThemeGrid_MarginGutter" role="menuitem" href="#">{{nav-link-3}}</a>
+                  </div>
+                </nav>
+                <div class="app-menu-overlay" role="button" aria-label="Close Menu"></div>
+              </div>
+
+            </div>
+          </div>
+        </header>
+
+        <!-- ═══════════ CONTENT ═══════════ -->
+        <div class="content">
+          <div class="main-content" role="main">
+            <div class="content-middle">
+
+              <!--
+                LayoutBaseSection — Full-width section block.
+                Each section spans the full viewport width.
+                Put ThemeGrid_Container INSIDE each section for centered content.
+                Use background-* classes on the section for colored bands.
+              -->
+
+              <!-- Hero Section -->
+              <div data-block="Layouts.LayoutBaseSection" class="full-width-section padding-y-xxl">
+                <div class="ThemeGrid_Container">
+                  <h1 class="heading1">{{hero-title}}</h1>
+                  <p class="font-size-base text-neutral-7">{{hero-subtitle}}</p>
+                </div>
+              </div>
+
+              <!-- Feature Cards Section -->
+              <div data-block="Layouts.LayoutBaseSection" class="full-width-section padding-y-xxl background-neutral-0">
+                <div class="ThemeGrid_Container">
+                  <div class="columns3">
+                    <div class="column">{{feature-1}}</div>
+                    <div class="column">{{feature-2}}</div>
+                    <div class="column">{{feature-3}}</div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- CTA Section -->
+              <div data-block="Layouts.LayoutBaseSection" class="full-width-section padding-y-xxl">
+                <div class="ThemeGrid_Container">
+                  <h3>{{cta-title}}</h3>
+                  <p class="margin-top-base">{{cta-text}}</p>
+                </div>
+              </div>
+
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </div>
+</body>
+</html>

package/skills/outsystems-ui/assets/layout-blank.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>{{screen-name}}</title>
+  <link rel="stylesheet" href="../theme/outsystems-ui.css" />
+  <link rel="stylesheet" href="../theme/theme.css" />
+</head>
+<body class="desktop">
+  <!--
+    LayoutBlank — No header, no footer, no navigation.
+    Best for: login pages, error pages, splash screens, or any screen
+    that needs full control with zero chrome.
+    
+    This is the most minimal OutSystems layout.
+  -->
+  <div class="active-screen">
+    <div data-block="Layouts.LayoutBlank" class="layout blank">
+
+      <div class="content" role="main">
+        <div class="main-content">
+          {{content}}
+        </div>
+      </div>
+
+    </div>
+  </div>
+</body>
+</html>

package/skills/outsystems-ui/assets/layout-side.html

@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>{{screen-name}}</title>
+  <link rel="stylesheet" href="../theme/outsystems-ui.css" />
+  <link rel="stylesheet" href="../theme/theme.css" />
+</head>
+<body class="desktop">
+  <!--
+    LayoutSideMenu — Vertical navigation in a left sidebar.
+    Best for: backoffice/admin apps with many pages or deep navigation.
+    
+    Structure differs from LayoutTopMenu:
+    - <aside> with the menu sits OUTSIDE .main (sibling, before .main)
+    - Header inside .main has the burger icon + app title + header-navigation
+    - On mobile: body changes to "phone portrait", burger becomes visible,
+      sidebar slides in from left via translateX, overlay appears
+  -->
+  <div class="active-screen">
+    <div data-block="Layouts.LayoutSideMenu" class="layout layout-side fixed-header">
+
+      <!-- ═══════════ SIDEBAR (outside .main) ═══════════ -->
+      <aside class="aside-navigation" role="complementary">
+        <nav class="app-menu-content display-flex" role="navigation">
+          <div class="header-logo">
+            <div class="application-name display-flex align-items-center full-height">
+              <!-- <img class="app-logo" src="logo.png" alt="" style="height: 32px;" /> -->
+              <span class="heading6 text-neutral-8">{{app-name}}</span>
+            </div>
+          </div>
+          <div class="app-menu-links" role="menubar">
+            <a class="active" href="#" role="menuitem">Home</a>
+            <a class="ThemeGrid_MarginGutter" href="#" role="menuitem">{{nav-link-2}}</a>
+            <a class="ThemeGrid_MarginGutter" href="#" role="menuitem">{{nav-link-3}}</a>
+            <a class="ThemeGrid_MarginGutter" href="#" role="menuitem">{{nav-link-4}}</a>
+          </div>
+          <div class="app-login-info">
+            <div class="user-info">
+              <span>{{user-name}}</span>
+            </div>
+          </div>
+        </nav>
+        <div class="app-menu-overlay" role="button"></div>
+      </aside>
+
+      <div class="main">
+
+        <!-- ═══════════ HEADER ═══════════ -->
+        <header role="banner" class="header">
+          <div class="header-top ThemeGrid_Container">
+            <div class="header-content display-flex">
+
+              <!-- Menu Toggle (hamburger) — visible on mobile, hidden on desktop -->
+              <div class="menu-icon" aria-label="Toggle the Menu" role="button" tabindex="0">
+                <div class="menu-icon-line"></div>
+                <div class="menu-icon-line"></div>
+                <div class="menu-icon-line"></div>
+              </div>
+
+              <!-- App Logo & Name -->
+              <div class="application-name display-flex align-items-center full-height">
+                <span class="heading6 text-neutral-8">{{app-name}}</span>
+              </div>
+
+              <!-- Header navigation (duplicate menu for desktop top bar + user info) -->
+              <div class="header-navigation">
+                <nav class="app-menu-content display-flex" role="navigation">
+                  <div class="app-menu-links" role="menubar">
+                    <!-- Same links as sidebar — shown in header on desktop -->
+                  </div>
+                  <div class="app-login-info">
+                    <div class="user-info">
+                      <div class="padding-y-base display-flex align-items-center">
+                        <span>{{user-name}}</span>
+                      </div>
+                    </div>
+                  </div>
+                </nav>
+              </div>
+
+            </div>
+          </div>
+        </header>
+
+        <!-- ═══════════ CONTENT ═══════════ -->
+        <div class="content">
+          <div class="main-content ThemeGrid_Container" role="main">
+
+            <div class="content-breadcrumbs"></div>
+
+            <div class="content-top display-flex align-items-center">
+              <div class="content-top-title heading1">{{page-title}}</div>
+              <div class="content-top-actions">
+                <!-- Action buttons go here -->
+              </div>
+            </div>
+
+            <div class="content-middle">
+              {{content}}
+            </div>
+
+          </div>
+
+          <footer role="contentinfo" class="content-bottom">
+            <div class="footer ThemeGrid_Container">
+              {{footer}}
+            </div>
+          </footer>
+        </div>
+
+      </div>
+    </div>
+  </div>
+</body>
+</html>