create-flowmo 1.0.0

package/skills/outsystems-sql/SKILL.md

@@ -0,0 +1,272 @@
+---
+name: outsystems-sql
+description: >-
+  OutSystems SQL query authoring for both O11 (MSSQL) and ODC (PostgreSQL).
+  Covers entity references, aggregate syntax, advanced SQL, joins, functions,
+  parameterized queries, and platform-specific syntax differences. Use when the
+  developer is writing SQL queries, creating aggregates, or working with data
+  retrieval logic in OutSystems.
+compatibility: Designed for OutSystems Service Studio. Requires knowledge of target platform (O11 or ODC).
+metadata:
+  version: "1.0"
+  source: "OutSystems documentation and SQL best practices"
+---
+
+# OutSystems SQL Skill
+
+## Platform Detection
+
+Before writing any SQL, determine the target platform:
+
+- **O11 (OutSystems 11)** — Uses Microsoft SQL Server syntax (T-SQL)
+- **ODC (OutSystems Developer Cloud)** — Uses PostgreSQL syntax
+
+Ask the developer which platform they are targeting if not already clear. The syntax differences are significant and mixing them will produce runtime errors.
+
+## Entity & Attribute References
+
+### O11 (MSSQL)
+```sql
+SELECT {Entity}.[Attribute1], {Entity}.[Attribute2]
+FROM {Entity}
+WHERE {Entity}.[IsActive] = 1
+```
+- Entities: `{EntityName}` in curly braces
+- Attributes: `[AttributeName]` in square brackets
+- Boolean: `1` / `0`
+
+### ODC (PostgreSQL)
+```sql
+SELECT entity."Attribute1", entity."Attribute2"
+FROM entity
+WHERE entity."IsActive" = true
+```
+- Entities: lowercase, no braces
+- Attributes: `"AttributeName"` in double quotes (case-sensitive)
+- Boolean: `true` / `false`
+
+## Syntax Differences Quick Reference
+
+| Operation | O11 (MSSQL) | ODC (PostgreSQL) |
+|-----------|-------------|------------------|
+| Current date/time | `GETDATE()` | `NOW()` |
+| Top N rows | `SELECT TOP N ...` | `SELECT ... LIMIT N` |
+| Null coalesce | `ISNULL(x, default)` | `COALESCE(x, default)` |
+| String concat | `'a' + 'b'` | `'a' \|\| 'b'` |
+| Boolean values | `1` / `0` | `true` / `false` |
+| Identity insert | `SCOPE_IDENTITY()` | `RETURNING Id` |
+| Date diff | `DATEDIFF(day, d1, d2)` | `d2 - d1` or `EXTRACT(...)` |
+| Substring | `SUBSTRING(s, start, len)` | `SUBSTRING(s FROM start FOR len)` |
+| Type cast | `CAST(x AS INT)` | `CAST(x AS INTEGER)` or `x::integer` |
+| IF/ELSE in query | `IIF(cond, t, f)` | `CASE WHEN cond THEN t ELSE f END` |
+| String length | `LEN(s)` | `LENGTH(s)` |
+| Trim | `LTRIM(RTRIM(s))` | `TRIM(s)` |
+| Regex match | `LIKE` + `PATINDEX` | `~` or `SIMILAR TO` |
+| Pagination | `OFFSET N ROWS FETCH NEXT M ROWS ONLY` | `LIMIT M OFFSET N` |
+| Auto-increment | `IDENTITY(1,1)` | `SERIAL` or `GENERATED ALWAYS AS IDENTITY` |
+| Temp tables | `#TempTable` | `CREATE TEMP TABLE` |
+| Table variable | `DECLARE @t TABLE(...)` | Not supported — use CTEs |
+| Merge/Upsert | `MERGE INTO ... USING ...` | `INSERT ... ON CONFLICT ... DO UPDATE` |
+
+## Common Query Patterns
+
+### CRUD — Create
+**O11:**
+```sql
+INSERT INTO {Entity} ([Attr1], [Attr2], [CreatedDate])
+VALUES (@Param1, @Param2, GETDATE())
+```
+
+**ODC:**
+```sql
+INSERT INTO entity ("Attr1", "Attr2", "CreatedDate")
+VALUES (@Param1, @Param2, NOW())
+RETURNING "Id"
+```
+
+### CRUD — Read with Join
+**O11:**
+```sql
+SELECT {Order}.[Id], {Order}.[Total], {Customer}.[Name]
+FROM {Order}
+INNER JOIN {Customer} ON {Customer}.[Id] = {Order}.[CustomerId]
+WHERE {Order}.[Status] = @Status
+ORDER BY {Order}.[CreatedDate] DESC
+```
+
+**ODC:**
+```sql
+SELECT o."Id", o."Total", c."Name"
+FROM "order" o
+INNER JOIN customer c ON c."Id" = o."CustomerId"
+WHERE o."Status" = @Status
+ORDER BY o."CreatedDate" DESC
+```
+
+### CRUD — Update
+**O11:**
+```sql
+UPDATE {Entity}
+SET [Attr1] = @NewValue, [ModifiedDate] = GETDATE()
+WHERE [Id] = @Id
+```
+
+**ODC:**
+```sql
+UPDATE entity
+SET "Attr1" = @NewValue, "ModifiedDate" = NOW()
+WHERE "Id" = @Id
+```
+
+### CRUD — Delete (Soft)
+**O11:**
+```sql
+UPDATE {Entity}
+SET [IsActive] = 0, [DeletedDate] = GETDATE()
+WHERE [Id] = @Id
+```
+
+**ODC:**
+```sql
+UPDATE entity
+SET "IsActive" = false, "DeletedDate" = NOW()
+WHERE "Id" = @Id
+```
+
+### Aggregation with Group By
+**O11:**
+```sql
+SELECT {Category}.[Name], COUNT(*) AS Total, SUM({Product}.[Price]) AS Revenue
+FROM {Product}
+INNER JOIN {Category} ON {Category}.[Id] = {Product}.[CategoryId]
+WHERE {Product}.[IsActive] = 1
+GROUP BY {Category}.[Name]
+HAVING COUNT(*) > 5
+ORDER BY Revenue DESC
+```
+
+**ODC:**
+```sql
+SELECT c."Name", COUNT(*) AS "Total", SUM(p."Price") AS "Revenue"
+FROM product p
+INNER JOIN category c ON c."Id" = p."CategoryId"
+WHERE p."IsActive" = true
+GROUP BY c."Name"
+HAVING COUNT(*) > 5
+ORDER BY "Revenue" DESC
+```
+
+### Pagination
+**O11:**
+```sql
+SELECT {Entity}.[Id], {Entity}.[Name]
+FROM {Entity}
+ORDER BY {Entity}.[Name]
+OFFSET @StartIndex ROWS
+FETCH NEXT @MaxRecords ROWS ONLY
+```
+
+**ODC:**
+```sql
+SELECT e."Id", e."Name"
+FROM entity e
+ORDER BY e."Name"
+LIMIT @MaxRecords OFFSET @StartIndex
+```
+
+### Subquery / EXISTS
+**O11:**
+```sql
+SELECT {Customer}.[Id], {Customer}.[Name]
+FROM {Customer}
+WHERE EXISTS (
+  SELECT 1 FROM {Order}
+  WHERE {Order}.[CustomerId] = {Customer}.[Id]
+    AND {Order}.[Total] > 1000
+)
+```
+
+**ODC:**
+```sql
+SELECT c."Id", c."Name"
+FROM customer c
+WHERE EXISTS (
+  SELECT 1 FROM "order" o
+  WHERE o."CustomerId" = c."Id"
+    AND o."Total" > 1000
+)
+```
+
+### CTE (Common Table Expression)
+**O11:**
+```sql
+WITH RecentOrders AS (
+  SELECT {Order}.[CustomerId], MAX({Order}.[CreatedDate]) AS LastOrder
+  FROM {Order}
+  GROUP BY {Order}.[CustomerId]
+)
+SELECT {Customer}.[Name], ro.LastOrder
+FROM {Customer}
+INNER JOIN RecentOrders ro ON ro.[CustomerId] = {Customer}.[Id]
+```
+
+**ODC:**
+```sql
+WITH recent_orders AS (
+  SELECT o."CustomerId", MAX(o."CreatedDate") AS "LastOrder"
+  FROM "order" o
+  GROUP BY o."CustomerId"
+)
+SELECT c."Name", ro."LastOrder"
+FROM customer c
+INNER JOIN recent_orders ro ON ro."CustomerId" = c."Id"
+```
+
+## Parameters
+
+Always use parameters (`@ParamName`) for input values — NEVER concatenate user input into SQL strings. OutSystems enforces this in Advanced SQL but ensure it in any generated queries.
+
+```sql
+-- CORRECT
+WHERE {Entity}.[Name] LIKE '%' + @SearchTerm + '%'
+
+-- WRONG (SQL injection risk)
+WHERE {Entity}.[Name] LIKE '%' + 'user input here' + '%'
+```
+
+## OutSystems Aggregates vs Advanced SQL
+
+Prefer **Aggregates** (visual query builder) for simple queries:
+- Single entity or simple joins
+- Standard filters, sorting, pagination
+- Calculated attributes
+
+Use **Advanced SQL** when you need:
+- Complex joins (3+ entities, self-joins)
+- CTEs, window functions, recursive queries
+- UNION / INTERSECT / EXCEPT
+- Database-specific functions
+- Bulk operations
+- Performance-critical queries with hints
+
+## Validation
+
+After writing a SQL query, verify:
+1. All input values use `@ParamName` parameters — no string concatenation of user input
+2. `Max Records` is explicitly set on the Advanced SQL node (never leave it unlimited)
+3. The Output Structure is defined and its attributes match the SELECT column names
+4. Entity/attribute references use the correct syntax for the target platform (curly braces + square brackets for O11, lowercase + double quotes for ODC)
+5. Reserved words (`Order`, `User`, `Group`, `Table`) are properly quoted in ODC
+
+If any check fails, fix the query before presenting the output.
+
+## Gotchas
+
+1. **OutSystems Nulls**: In O11, `NullTextIdentifier()`, `NullDate()`, etc. map to NULL in SQL. In ODC, use standard NULL comparisons.
+2. **Max Records**: Always set `Max Records` on Advanced SQL queries. Default is unlimited — this can cause performance issues.
+3. **Output Structure**: Advanced SQL queries must have an Output Structure defined. The column names in SELECT must match the Output Structure attributes.
+4. **Test Queries**: O11 allows testing SQL in Service Studio. ODC requires deployment to test. Always validate syntax for the target platform.
+5. **Reserved Words**: `Order`, `User`, `Group`, `Table` are reserved in PostgreSQL. In ODC, always double-quote these entity names.
+6. **Date Comparisons**: O11 uses `BETWEEN` or `DATEDIFF`. ODC prefers range comparisons with `>=` and `<` or `EXTRACT()`.
+7. **Aggregate Functions in WHERE**: Use `HAVING` for aggregate conditions — `WHERE` runs before `GROUP BY`.
+8. **Index Awareness**: Filter on indexed attributes when possible. In O11 check Query Analyzer; in ODC check the database logs.

package/skills/outsystems-ui/SKILL.md

@@ -0,0 +1,237 @@
+---
+name: outsystems-ui
+description: >
+  Build OutSystems UI screens using the official pattern library and utility-first
+  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
+  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.0"
+  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`). 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.
+
+## Buttons
+
+From the Cheat Sheet. Buttons are the most commonly used widget.
+
+### Types
+
+| Visual | Classes |
+|--------|---------|
+| Secondary (default) | `.btn` |
+| Primary | `.btn .btn-primary` |
+| Cancel | `.btn .btn-cancel` |
+| Success | `.btn .btn-success` |
+| Error | `.btn .btn-error` |
+
+### Sizes
+
+| Size | Classes |
+|------|---------|
+| Small | `.btn .btn-small` |
+| Default | `.btn` |
+| Large | `.btn .btn-large` |
+
+### Shapes
+
+Combine any button type/size with a border-radius class:
+
+| Shape | Add class |
+|-------|-----------|
+| None (square) | `.border-radius-none` |
+| Soft | `.border-radius-soft` |
+| Rounded | `.border-radius-rounded` |
+| Circle | `.border-radius-circle` |
+
+### Loading State
+
+Add `.btn-loading` to the button and include a spinner element inside. This is CSS-driven, not JavaScript.
+
+```html
+<button class="btn btn-primary btn-loading">
+  <span class="btn-loading-spinner"></span>
+  Loading...
+</button>
+```
+
+## Borders
+
+### Border Radius
+
+| Size | Value | Class | CSS Variable |
+|------|-------|-------|--------------|
+| None | 0 | `.border-radius-none` | `--border-radius-none` |
+| Soft | 4px | `.border-radius-soft` | `--border-radius-soft` |
+| Rounded | 100px | `.border-radius-rounded` | `--border-radius-rounded` |
+| Circle | 100% | `.border-radius-circle` | `--border-radius-circle` |
+
+### Border Sizes
+
+| Size | Value | Class | CSS Variable |
+|------|-------|-------|--------------|
+| None | 0 | `.border-size-none` | `--border-size-none` |
+| S | 1px | `.border-size-s` | `--border-size-s` |
+| M | 2px | `.border-size-m` | `--border-size-m` |
+| L | 3px | `.border-size-l` | `--border-size-l` |
+
+## Spacing
+
+8px base scale. Every spacing utility has a corresponding CSS variable.
+
+| Size | Value | Padding Class | Margin Class | CSS Variable |
+|------|-------|---------------|--------------|--------------|
+| None | 0 | `.padding-none` | `.margin-none` | `--space-none` |
+| XS | 4px | `.padding-xs` | `.margin-xs` | `--space-xs` |
+| S | 8px | `.padding-s` | `.margin-s` | `--space-s` |
+| Base | 16px | `.padding-base` | `.margin-base` | `--space-base` |
+| M | 24px | `.padding-m` | `.margin-m` | `--space-m` |
+| L | 32px | `.padding-l` | `.margin-l` | `--space-l` |
+| XL | 40px | `.padding-xl` | `.margin-xl` | `--space-xl` |
+| XXL | 48px | `.padding-xxl` | `.margin-xxl` | `--space-xxl` |
+
+### Directional Variants
+
+Append direction to the class for single-side or axis spacing:
+
+- **Single side**: `.padding-top-m`, `.padding-right-s`, `.padding-bottom-l`, `.padding-left-base`
+- **Axis**: `.padding-vertical-m` (top + bottom), `.padding-horizontal-s` (left + right)
+- Same pattern for `.margin-*` variants.
+
+## Typography
+
+### Font Sizes
+
+| Name | Value | Class | CSS Variable |
+|------|-------|-------|--------------|
+| Display | 34px | `.font-size-display` | `--font-size-display` |
+| H1 | 30px | `.font-size-h1` | `--font-size-h1` |
+| H2 | 26px | `.font-size-h2` | `--font-size-h2` |
+| H3 | 24px | `.font-size-h3` | `--font-size-h3` |
+| H4 | 20px | `.font-size-h4` | `--font-size-h4` |
+| H5 | 18px | `.font-size-h5` | `--font-size-h5` |
+| H6 | 17px | `.font-size-h6` | `--font-size-h6` |
+| Base (body) | 16px | `.font-size-base` | `--font-size-base` |
+| S (body small) | 14px | `.font-size-s` | `--font-size-s` |
+| XS (body extra small) | 12px | `.font-size-xs` | `--font-size-xs` |
+
+### Font Weights
+
+| Weight | Value | Class |
+|--------|-------|-------|
+| Light | 300 | `.font-weight-light` |
+| Normal | 400 | `.font-weight-normal` |
+| Semi-Bold | 600 | `.font-weight-semi-bold` |
+| Bold | 700 | `.font-weight-bold` |
+
+### Text Transforms
+
+| Transform | Class |
+|-----------|-------|
+| Lowercase | `.text-lowercase` |
+| Uppercase | `.text-uppercase` |
+| Capitalize | `.text-capitalize` |
+| Ellipsis overflow | `.text-ellipsis` |
+
+## Shadows
+
+| Level | Class | CSS Variable |
+|-------|-------|--------------|
+| None | `.shadow-none` | `--shadow-none` |
+| XS | `.shadow-xs` | `--shadow-xs` |
+| S | `.shadow-s` | `--shadow-s` |
+| M | `.shadow-m` | `--shadow-m` |
+| L | `.shadow-l` | `--shadow-l` |
+| XL | `.shadow-xl` | `--shadow-xl` |
+
+## Colors — Quick Reference
+
+Most-used palette entries. Load [references/colors.md](references/colors.md) for the full extended + neutral palettes and all CSS variables.
+
+### Brand Colors
+
+| Name | Hex | Class (bg) | Class (text) | CSS Variable |
+|------|-----|------------|--------------|--------------|
+| Primary | #1068EB | `.background-primary` | `.text-primary` | `--color-primary` |
+| Secondary | #303D60 | `.background-secondary` | `.text-secondary` | `--color-secondary` |
+
+### Semantic Colors
+
+| Name | Class (bg) | Class (text) | 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` |
+
+## 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.
+
+| 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 |
+
+For complete screen scaffolds (Dashboard, List/Detail, Form, Login, etc.), load [references/screen-templates.md](references/screen-templates.md).
+
+## Pattern-Scoped CSS Variables
+
+Some patterns expose CSS custom properties for fine-tuning. Set these on the pattern's root element.
+
+| Pattern | CSS Variables |
+|---------|-------------|
+| Carousel | `--{element-id}-width` |
+| Floating Actions | `--delay` |
+| Master Detail | `--master-detail-height`, `--left-percentage: 50` |
+| Gallery | `--grid-desktop: 4`, `--grid-tablet: 2`, `--grid-phone: 1`, `--grid-gap: var(--space-base)` |
+| Rating | `--rating-size: 16px` |
+| Scrollable Area | `--scrollable-area-width`, `--scrollable-area-height` |
+
+## Validation
+
+After generating a `.visual.html` file, verify:
+1. The root `<div>` has class `layout active-screen`
+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
+
+If any check fails, fix the issue before presenting the output.
+
+## Gotchas
+
+- `.active-screen` class is **REQUIRED** on the layout wrapper `<div>`. Without it, utility classes and CSS variables will NOT resolve correctly.
+- 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.
+- `.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.

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

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>{{screen-name}} — OutSystems Visual Prototype</title>
+  <!--
+    OutSystems UI CSS Framework
+    This stylesheet provides all OSUI utility classes, pattern styles,
+    and CSS variables used in this prototype.
+  -->
+  <link rel="stylesheet" href="../theme/outsystemsui.css" />
+  <style>
+    /* Only add overrides here if absolutely necessary.
+       Prefer OSUI utility classes over custom CSS. */
+  </style>
+</head>
+<body>
+  <!--
+    Layout Wrapper
+    The .active-screen class is REQUIRED for OSUI utility classes
+    and CSS variables to resolve correctly.
+  -->
+  <div class="layout active-screen">
+
+    <!-- Header -->
+    <header class="header padding-base">
+      <h1 class="font-size-h2 margin-bottom-none">{{screen-title}}</h1>
+    </header>
+
+    <!-- Main Content -->
+    <main class="main-content padding-base">
+      {{content}}
+    </main>
+
+    <!-- Footer (optional) -->
+    <footer class="footer padding-base">
+      {{footer}}
+    </footer>
+
+  </div>
+</body>
+</html>