create-flowmo 1.0.0

package/skills/outsystems-ui/references/colors.md

@@ -0,0 +1,236 @@
+# OutSystems UI — Color Reference
+
+Complete color palette from the OutSystems UI Cheat Sheet. Use `.background-{name}` for background colors and `.text-{name}` for text colors. CSS variables follow the `--color-{name}` pattern.
+
+## Brand Colors
+
+| Name | Hex | Background Class | Text Class | CSS Variable |
+|------|-----|-----------------|------------|--------------|
+| Primary | #1068EB | `.background-primary` | `.text-primary` | `--color-primary` |
+| Secondary | #303D60 | `.background-secondary` | `.text-secondary` | `--color-secondary` |
+
+## Semantic Colors
+
+| Name | Background Class | Text Class | CSS Variable |
+|------|-----------------|------------|--------------|
+| Info | `.background-info` | `.text-info` | `--color-info` |
+| Success | `.background-success` | `.text-success` | `--color-success` |
+| Warning | `.background-warning` | `.text-warning` | `--color-warning` |
+| Error | `.background-error` | `.text-error` | `--color-error` |
+
+## Extended Palette
+
+Each color has shades 0 (lightest) through 9 (darkest). Use CSS variable `--color-{color}-{shade}`.
+
+### Red
+
+| Shade | CSS Variable | Hex |
+|-------|-------------|-----|
+| 0 | `--color-red-0` | #FFF5F5 |
+| 1 | `--color-red-1` | #FFE3E3 |
+| 2 | `--color-red-2` | #FFC9C9 |
+| 3 | `--color-red-3` | #FFA8A8 |
+| 4 | `--color-red-4` | #FF8787 |
+| 5 | `--color-red-5` | #FF6B6B |
+| 6 | `--color-red-6` | #FA5252 |
+| 7 | `--color-red-7` | #F03E3E |
+| 8 | `--color-red-8` | #E03131 |
+| 9 | `--color-red-9` | #C92A2A |
+
+### Orange
+
+| Shade | CSS Variable | Hex |
+|-------|-------------|-----|
+| 0 | `--color-orange-0` | #FFF4E6 |
+| 1 | `--color-orange-1` | #FFE8CC |
+| 2 | `--color-orange-2` | #FFD8A8 |
+| 3 | `--color-orange-3` | #FFC078 |
+| 4 | `--color-orange-4` | #FFA94D |
+| 5 | `--color-orange-5` | #FF922B |
+| 6 | `--color-orange-6` | #FD7E14 |
+| 7 | `--color-orange-7` | #F76707 |
+| 8 | `--color-orange-8` | #E8590C |
+| 9 | `--color-orange-9` | #D9480F |
+
+### Yellow
+
+| Shade | CSS Variable | Hex |
+|-------|-------------|-----|
+| 0 | `--color-yellow-0` | #FFF9DB |
+| 1 | `--color-yellow-1` | #FFF3BF |
+| 2 | `--color-yellow-2` | #FFEC99 |
+| 3 | `--color-yellow-3` | #FFE066 |
+| 4 | `--color-yellow-4` | #FFD43B |
+| 5 | `--color-yellow-5` | #FCC419 |
+| 6 | `--color-yellow-6` | #FAB005 |
+| 7 | `--color-yellow-7` | #F59F00 |
+| 8 | `--color-yellow-8` | #F08C00 |
+| 9 | `--color-yellow-9` | #E67700 |
+
+### Lime
+
+| Shade | CSS Variable | Hex |
+|-------|-------------|-----|
+| 0 | `--color-lime-0` | #F4FCE3 |
+| 1 | `--color-lime-1` | #E9FAC8 |
+| 2 | `--color-lime-2` | #D8F5A2 |
+| 3 | `--color-lime-3` | #C0EB75 |
+| 4 | `--color-lime-4` | #A9E34B |
+| 5 | `--color-lime-5` | #94D82D |
+| 6 | `--color-lime-6` | #82C91E |
+| 7 | `--color-lime-7` | #74B816 |
+| 8 | `--color-lime-8` | #66A80F |
+| 9 | `--color-lime-9` | #5C940D |
+
+### Green
+
+| Shade | CSS Variable | Hex |
+|-------|-------------|-----|
+| 0 | `--color-green-0` | #EBFBEE |
+| 1 | `--color-green-1` | #D3F9D8 |
+| 2 | `--color-green-2` | #B2F2BB |
+| 3 | `--color-green-3` | #8CE99A |
+| 4 | `--color-green-4` | #69DB7C |
+| 5 | `--color-green-5` | #51CF66 |
+| 6 | `--color-green-6` | #40C057 |
+| 7 | `--color-green-7` | #37B24D |
+| 8 | `--color-green-8` | #2F9E44 |
+| 9 | `--color-green-9` | #2B8A3E |
+
+### Teal
+
+| Shade | CSS Variable | Hex |
+|-------|-------------|-----|
+| 0 | `--color-teal-0` | #E6FCF5 |
+| 1 | `--color-teal-1` | #C3FAE8 |
+| 2 | `--color-teal-2` | #96F2D7 |
+| 3 | `--color-teal-3` | #63E6BE |
+| 4 | `--color-teal-4` | #38D9A9 |
+| 5 | `--color-teal-5` | #20C997 |
+| 6 | `--color-teal-6` | #12B886 |
+| 7 | `--color-teal-7` | #0CA678 |
+| 8 | `--color-teal-8` | #099268 |
+| 9 | `--color-teal-9` | #087F5B |
+
+### Cyan
+
+| Shade | CSS Variable | Hex |
+|-------|-------------|-----|
+| 0 | `--color-cyan-0` | #E3FAFC |
+| 1 | `--color-cyan-1` | #C5F6FA |
+| 2 | `--color-cyan-2` | #99E9F2 |
+| 3 | `--color-cyan-3` | #66D9E8 |
+| 4 | `--color-cyan-4` | #3BC9DB |
+| 5 | `--color-cyan-5` | #22B8CF |
+| 6 | `--color-cyan-6` | #15AABF |
+| 7 | `--color-cyan-7` | #1098AD |
+| 8 | `--color-cyan-8` | #0C8599 |
+| 9 | `--color-cyan-9` | #0B7285 |
+
+### Blue
+
+| Shade | CSS Variable | Hex |
+|-------|-------------|-----|
+| 0 | `--color-blue-0` | #E7F5FF |
+| 1 | `--color-blue-1` | #D0EBFF |
+| 2 | `--color-blue-2` | #A5D8FF |
+| 3 | `--color-blue-3` | #74C0FC |
+| 4 | `--color-blue-4` | #4DABF7 |
+| 5 | `--color-blue-5` | #339AF0 |
+| 6 | `--color-blue-6` | #228BE6 |
+| 7 | `--color-blue-7` | #1C7ED6 |
+| 8 | `--color-blue-8` | #1971C2 |
+| 9 | `--color-blue-9` | #1864AB |
+
+### Indigo
+
+| Shade | CSS Variable | Hex |
+|-------|-------------|-----|
+| 0 | `--color-indigo-0` | #EDF2FF |
+| 1 | `--color-indigo-1` | #DBE4FF |
+| 2 | `--color-indigo-2` | #BAC8FF |
+| 3 | `--color-indigo-3` | #91A7FF |
+| 4 | `--color-indigo-4` | #748FFC |
+| 5 | `--color-indigo-5` | #5C7CFA |
+| 6 | `--color-indigo-6` | #4C6EF5 |
+| 7 | `--color-indigo-7` | #4263EB |
+| 8 | `--color-indigo-8` | #3B5BDB |
+| 9 | `--color-indigo-9` | #364FC7 |
+
+### Violet
+
+| Shade | CSS Variable | Hex |
+|-------|-------------|-----|
+| 0 | `--color-violet-0` | #F3F0FF |
+| 1 | `--color-violet-1` | #E5DBFF |
+| 2 | `--color-violet-2` | #D0BFFF |
+| 3 | `--color-violet-3` | #B197FC |
+| 4 | `--color-violet-4` | #9775FA |
+| 5 | `--color-violet-5` | #845EF7 |
+| 6 | `--color-violet-6` | #7950F2 |
+| 7 | `--color-violet-7` | #7048E8 |
+| 8 | `--color-violet-8` | #6741D9 |
+| 9 | `--color-violet-9` | #5F3DC4 |
+
+### Grape
+
+| Shade | CSS Variable | Hex |
+|-------|-------------|-----|
+| 0 | `--color-grape-0` | #F8F0FC |
+| 1 | `--color-grape-1` | #F3D9FA |
+| 2 | `--color-grape-2` | #EEBEFA |
+| 3 | `--color-grape-3` | #E599F7 |
+| 4 | `--color-grape-4` | #DA77F2 |
+| 5 | `--color-grape-5` | #CC5DE8 |
+| 6 | `--color-grape-6` | #BE4BDB |
+| 7 | `--color-grape-7` | #AE3EC9 |
+| 8 | `--color-grape-8` | #9C36B5 |
+| 9 | `--color-grape-9` | #862E9C |
+
+### Pink
+
+| Shade | CSS Variable | Hex |
+|-------|-------------|-----|
+| 0 | `--color-pink-0` | #FFF0F6 |
+| 1 | `--color-pink-1` | #FFDEEB |
+| 2 | `--color-pink-2` | #FCC2D7 |
+| 3 | `--color-pink-3` | #FAA2C1 |
+| 4 | `--color-pink-4` | #F783AC |
+| 5 | `--color-pink-5` | #F06595 |
+| 6 | `--color-pink-6` | #E64980 |
+| 7 | `--color-pink-7` | #D6336C |
+| 8 | `--color-pink-8` | #C2255C |
+| 9 | `--color-pink-9` | #A61E4D |
+
+## Neutral Palette
+
+Used for text, borders, backgrounds, and shadows.
+
+| Shade | CSS Variable | Description |
+|-------|-------------|-------------|
+| 0 | `--color-neutral-0` | White / lightest background |
+| 1 | `--color-neutral-1` | Very light background |
+| 2 | `--color-neutral-2` | Light background / hover |
+| 3 | `--color-neutral-3` | Border light |
+| 4 | `--color-neutral-4` | Border / divider |
+| 5 | `--color-neutral-5` | Placeholder text |
+| 6 | `--color-neutral-6` | Subtle text |
+| 7 | `--color-neutral-7` | Secondary text |
+| 8 | `--color-neutral-8` | Primary text |
+| 9 | `--color-neutral-9` | Heading text |
+| 10 | `--color-neutral-10` | Darkest / near-black |
+
+## Global CSS Variables (Colors)
+
+These variables are defined at the `:root` level of the OSUI theme:
+
+```css
+--color-primary: #1068EB;
+--color-secondary: #303D60;
+--color-background-body: var(--color-neutral-0);
+--color-background-login: var(--color-neutral-1);
+--color-neutral-0: #FFFFFF;
+--color-neutral-10: #1A1A2E;
+--color-focus-outer: #FFD337;
+--color-focus-inner: var(--color-neutral-10);
+```

package/skills/outsystems-ui/references/patterns-adaptive.md

@@ -0,0 +1,178 @@
+# OutSystems UI — Adaptive Patterns (12)
+
+Layout and responsive patterns for building multi-column, device-aware, and master-detail screens.
+
+## Columns2
+
+Two equal-width columns that auto-stack on mobile.
+
+```html
+<div class="columns2">
+  <div class="column">{{content-left}}</div>
+  <div class="column">{{content-right}}</div>
+</div>
+```
+
+**Mandatory classes**: `.columns2`, `.column`
+
+## Columns3
+
+```html
+<div class="columns3">
+  <div class="column">{{content-1}}</div>
+  <div class="column">{{content-2}}</div>
+  <div class="column">{{content-3}}</div>
+</div>
+```
+
+**Mandatory classes**: `.columns3`, `.column`
+
+## Columns4
+
+```html
+<div class="columns4">
+  <div class="column">{{content-1}}</div>
+  <div class="column">{{content-2}}</div>
+  <div class="column">{{content-3}}</div>
+  <div class="column">{{content-4}}</div>
+</div>
+```
+
+**Mandatory classes**: `.columns4`, `.column`
+
+## Columns5
+
+```html
+<div class="columns5">
+  <div class="column">{{content-1}}</div>
+  <div class="column">{{content-2}}</div>
+  <div class="column">{{content-3}}</div>
+  <div class="column">{{content-4}}</div>
+  <div class="column">{{content-5}}</div>
+</div>
+```
+
+**Mandatory classes**: `.columns5`, `.column`
+
+## Columns6
+
+```html
+<div class="columns6">
+  <div class="column">{{content-1}}</div>
+  <div class="column">{{content-2}}</div>
+  <div class="column">{{content-3}}</div>
+  <div class="column">{{content-4}}</div>
+  <div class="column">{{content-5}}</div>
+  <div class="column">{{content-6}}</div>
+</div>
+```
+
+**Mandatory classes**: `.columns6`, `.column`
+
+## Columns Medium Left
+
+Asymmetric — left column is wider (medium-sized), right is narrow.
+
+```html
+<div class="columns-medium-left">
+  <div class="column">{{content-main}}</div>
+  <div class="column">{{content-aside}}</div>
+</div>
+```
+
+**Mandatory classes**: `.columns-medium-left`, `.column`
+
+## Columns Medium Right
+
+Asymmetric — left is narrow, right column is wider.
+
+```html
+<div class="columns-medium-right">
+  <div class="column">{{content-aside}}</div>
+  <div class="column">{{content-main}}</div>
+</div>
+```
+
+**Mandatory classes**: `.columns-medium-right`, `.column`
+
+## Columns Small Left
+
+Left column is narrow sidebar, right column takes remaining space.
+
+```html
+<div class="columns-small-left">
+  <div class="column">{{content-sidebar}}</div>
+  <div class="column">{{content-main}}</div>
+</div>
+```
+
+**Mandatory classes**: `.columns-small-left`, `.column`
+
+## Columns Small Right
+
+Left column takes most space, right column is narrow.
+
+```html
+<div class="columns-small-right">
+  <div class="column">{{content-main}}</div>
+  <div class="column">{{content-sidebar}}</div>
+</div>
+```
+
+**Mandatory classes**: `.columns-small-right`, `.column`
+
+## Display On Device
+
+Show or hide content based on device type.
+
+```html
+<div class="display-desktop">{{desktop-only-content}}</div>
+<div class="display-tablet">{{tablet-only-content}}</div>
+<div class="display-phone">{{phone-only-content}}</div>
+```
+
+**Classes**: `.display-desktop`, `.display-tablet`, `.display-phone`
+
+## Gallery
+
+Responsive grid with configurable columns per breakpoint.
+
+```html
+<div class="gallery" style="
+  --grid-desktop: 4;
+  --grid-tablet: 2;
+  --grid-phone: 1;
+  --grid-gap: var(--space-base);
+">
+  <div class="gallery-item">{{content-1}}</div>
+  <div class="gallery-item">{{content-2}}</div>
+  <div class="gallery-item">{{content-3}}</div>
+  <div class="gallery-item">{{content-4}}</div>
+</div>
+```
+
+**Mandatory classes**: `.gallery`, `.gallery-item`
+**CSS Variables**: `--grid-desktop`, `--grid-tablet`, `--grid-phone`, `--grid-gap`
+
+## Master Detail
+
+Side-by-side layout for list + detail views. Common for entity list screens.
+
+```html
+<div class="master-detail" style="
+  --master-detail-height: 600px;
+  --left-percentage: 50;
+">
+  <div class="master-detail-list">{{list-content}}</div>
+  <div class="master-detail-detail">{{detail-content}}</div>
+</div>
+```
+
+**Mandatory classes**: `.master-detail`, `.master-detail-list`, `.master-detail-detail`
+**CSS Variables**: `--master-detail-height`, `--left-percentage` (default: 50)
+
+## Notes
+
+- All column patterns auto-stack on phone breakpoints. Do NOT add custom `@media` queries.
+- Column patterns use flexbox internally. Child `.column` elements stretch to equal height by default.
+- Gallery is CSS Grid-based and the most flexible option for card-heavy layouts.

package/skills/outsystems-ui/references/patterns-content.md

@@ -0,0 +1,242 @@
+# OutSystems UI — Content Patterns (16)
+
+Patterns for displaying content: cards, alerts, sections, and informational elements.
+
+## Accordion
+
+Expandable/collapsible sections. Each item has a title and content area.
+
+```html
+<div class="osui-accordion">
+  <div class="osui-accordion__item">
+    <div class="osui-accordion__item__header">
+      <span class="osui-accordion__item__header__title">{{title}}</span>
+      <span class="osui-accordion__item__header__icon"></span>
+    </div>
+    <div class="osui-accordion__item__content">{{content}}</div>
+  </div>
+</div>
+```
+
+**Mandatory classes**: `.osui-accordion`, `.osui-accordion__item`, `__header`, `__content`
+
+## Alert
+
+Inline feedback message with semantic color.
+
+```html
+<div class="osui-alert osui-alert--{type}">
+  <div class="osui-alert__content">{{message}}</div>
+  <div class="osui-alert__close"></div>
+</div>
+```
+
+**Types**: Replace `{type}` with `info`, `success`, `warning`, `error`
+**Mandatory classes**: `.osui-alert`, `.osui-alert--{type}`
+
+## Blank Slate
+
+Empty state placeholder — use when a list or section has no data.
+
+```html
+<div class="blank-slate">
+  <div class="blank-slate-image">{{icon-or-image}}</div>
+  <div class="blank-slate-content">
+    <h5>{{title}}</h5>
+    <p>{{description}}</p>
+  </div>
+  <div class="blank-slate-footer">{{action-button}}</div>
+</div>
+```
+
+**Mandatory classes**: `.blank-slate`
+
+## Card
+
+The most common content container. Adds elevation and padding.
+
+```html
+<div class="card">
+  <div class="card-header">{{header}}</div>
+  <div class="card-content">{{content}}</div>
+  <div class="card-footer">{{footer}}</div>
+</div>
+```
+
+**Mandatory classes**: `.card`
+**Optional sections**: `.card-header`, `.card-content`, `.card-footer`
+
+## Card Background
+
+Card with a background image. Content overlays the image.
+
+```html
+<div class="card-background" style="background-image: url('{{image-url}}');">
+  <div class="card-background-content">
+    <h4>{{title}}</h4>
+    <p>{{description}}</p>
+  </div>
+</div>
+```
+
+**Mandatory classes**: `.card-background`, `.card-background-content`
+
+## Card Item
+
+Compact card variant used inside lists. Typically has an image + text side by side.
+
+```html
+<div class="card-item">
+  <div class="card-item-image">{{image}}</div>
+  <div class="card-item-content">
+    <div class="card-item-title">{{title}}</div>
+    <div class="card-item-description">{{description}}</div>
+  </div>
+</div>
+```
+
+**Mandatory classes**: `.card-item`
+
+## Card Sectioned
+
+Card divided into distinct sections with dividers.
+
+```html
+<div class="card-sectioned">
+  <div class="card-sectioned-item">{{section-1}}</div>
+  <div class="card-sectioned-item">{{section-2}}</div>
+  <div class="card-sectioned-item">{{section-3}}</div>
+</div>
+```
+
+**Mandatory classes**: `.card-sectioned`, `.card-sectioned-item`
+
+## Chat Message
+
+Message bubble for chat-style interfaces.
+
+```html
+<div class="chat-message">
+  <div class="chat-message-avatar">{{avatar}}</div>
+  <div class="chat-message-content">
+    <div class="chat-message-header">
+      <span class="chat-message-name">{{name}}</span>
+      <span class="chat-message-time">{{timestamp}}</span>
+    </div>
+    <div class="chat-message-text">{{message}}</div>
+  </div>
+</div>
+```
+
+**Mandatory classes**: `.chat-message`
+**Variants**: Add `.chat-message--right` for outgoing messages.
+
+## Flip Content
+
+Two-sided content that flips on hover or click.
+
+```html
+<div class="flip-content">
+  <div class="flip-content-front">{{front-content}}</div>
+  <div class="flip-content-back">{{back-content}}</div>
+</div>
+```
+
+**Mandatory classes**: `.flip-content`, `.flip-content-front`, `.flip-content-back`
+
+## Floating Content
+
+Content that overlays the page in a fixed/floating position.
+
+```html
+<div class="floating-content">
+  {{content}}
+</div>
+```
+
+**Mandatory classes**: `.floating-content`
+
+## List Item Content
+
+Structured list item with image, text, and optional right action.
+
+```html
+<div class="list-item-content">
+  <div class="list-item-content-left">{{image-or-icon}}</div>
+  <div class="list-item-content-center">
+    <div class="list-item-content-title">{{title}}</div>
+    <div class="list-item-content-description">{{description}}</div>
+  </div>
+  <div class="list-item-content-right">{{action}}</div>
+</div>
+```
+
+**Mandatory classes**: `.list-item-content`
+
+## Section
+
+Groups related content under a heading.
+
+```html
+<div class="section">
+  <div class="section-header">
+    <h5 class="section-title">{{title}}</h5>
+  </div>
+  <div class="section-content">{{content}}</div>
+</div>
+```
+
+**Mandatory classes**: `.section`
+
+## Section Group
+
+Container for multiple Sections with consistent spacing.
+
+```html
+<div class="section-group">
+  <div class="section">{{section-1}}</div>
+  <div class="section">{{section-2}}</div>
+</div>
+```
+
+**Mandatory classes**: `.section-group`
+
+## Tag
+
+Small label/badge for categorization.
+
+```html
+<span class="tag">{{label}}</span>
+```
+
+**Mandatory classes**: `.tag`
+**Color variants**: Combine with `.background-primary`, `.background-success`, etc.
+**Shape**: Add `.border-radius-rounded` for pill shape.
+
+## Tooltip
+
+Information popup on hover.
+
+```html
+<div class="osui-tooltip">
+  <div class="osui-tooltip__trigger">{{trigger-element}}</div>
+  <div class="osui-tooltip__content">{{tooltip-text}}</div>
+</div>
+```
+
+**Mandatory classes**: `.osui-tooltip`
+**Position**: Add `.osui-tooltip--top`, `.osui-tooltip--bottom`, `.osui-tooltip--left`, `.osui-tooltip--right`
+
+## User Avatar
+
+Circular user image with optional initials fallback.
+
+```html
+<div class="user-avatar">
+  <img src="{{image-url}}" alt="{{name}}" />
+</div>
+```
+
+**Mandatory classes**: `.user-avatar`
+**Sizes**: `.user-avatar--small`, `.user-avatar--medium` (default), `.user-avatar--large`
+**Fallback**: Use initials text inside the div when no image is available.