create-flowmo 1.1.1 → 1.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/package.json +1 -1
  2. package/skills/outsystems-ui/SKILL.md +47 -43
  3. package/skills/outsystems-ui/assets/layout-base.html +1 -0
  4. package/skills/outsystems-ui/assets/layout-blank.html +1 -0
  5. package/skills/outsystems-ui/assets/layout-side.html +1 -0
  6. package/skills/outsystems-ui/assets/layout-template.html +1 -0
  7. package/skills/outsystems-ui/assets/layout-top.html +1 -0
  8. package/template/screens/home.visual.html +1 -0
  9. package/template/theme/grid.css +82 -0
  10. package/template/theme/theme.css +3 -13
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "create-flowmo",
3
- "version": "1.1.1",
3
+ "version": "1.2.1",
4
4
  "description": "Scaffold an OutSystems-Lite project with screens, data, logic, and built-in agent skills",
5
5
  "type": "module",
6
6
  "license": "MIT",
package/skills/outsystems-ui/SKILL.md CHANGED
@@ -23,10 +23,10 @@ Build pixel-perfect OutSystems-compatible `.visual.html` prototypes using only t
23
23
  2. **12-column grid** — use `.columns2` through `.columns6` for responsive layouts. These auto-stack on mobile — do not add custom media queries.
24
24
  3. **No external JavaScript** — all interaction patterns are CSS/class-driven.
25
25
  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.
26
- 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.
26
+ 5. **Scroll model** — OSUI sets `html { overflow: hidden }`. The `.active-screen` div is the actual scroll container. The `grid.css` file provides `.active-screen { overflow-y: auto; height: 100vh; }` — make sure `grid.css` is linked.
27
27
  6. **Strip platform IDs** — never include `os-internal-id` or similar platform-generated attributes.
28
28
  7. **Widget slots** — use `{{content}}` placeholders in templates where nested widgets would go.
29
- 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.
29
+ 8. **Three CSS files** — every screen links three stylesheets in order: `outsystems-ui.css` (framework), `grid.css` (platform grid & scroll), `theme.css` (project styles). See the **Theme Customization** section below.
30
30
 
31
31
  ## Layouts
32
32
 
@@ -362,19 +362,22 @@ Some patterns expose CSS custom properties for fine-tuning. Set these on the pat
362
362
 
363
363
  ## Theme Customization
364
364
 
365
- Every project ships two CSS files: `outsystems-ui.css` (base framework) and `theme.css` (project overrides). The theme file loads second and extends OSUI.
365
+ Every project ships three CSS files, loaded in this order:
366
366
 
367
- ### What theme.css MUST contain
367
+ 1. **`outsystems-ui.css`** — the OSUI framework (patterns, utilities, layout). Never edit this.
368
+ 2. **`grid.css`** — platform grid definitions (`.ThemeGrid_Container` max-width, `.ThemeGrid_Width*` columns, `.ThemeGrid_MarginGutter` spacing, `.active-screen` scroll model). Normally injected by OutSystems at runtime — we provide it statically. Never edit this.
369
+ 3. **`theme.css`** — project-specific brand tokens and custom styles. This is the only file you should edit.
368
370
 
369
- 1. **Scroll model fix** — OSUI expects `.active-screen` to be the scroll container:
370
- ```css
371
- .active-screen {
372
- overflow: hidden auto;
373
- height: 100vh;
374
- }
375
- ```
371
+ All three `<link>` tags must be present in `<head>`:
372
+ ```html
373
+ <link rel="stylesheet" href="../theme/outsystems-ui.css" />
374
+ <link rel="stylesheet" href="../theme/grid.css" />
375
+ <link rel="stylesheet" href="../theme/theme.css" />
376
+ ```
377
+
378
+ ### What theme.css MUST contain
376
379
 
377
- 2. **Brand tokens** — override `:root` CSS variables:
380
+ 1. **Brand tokens** — override `:root` CSS variables:
378
381
  ```css
379
382
  :root {
380
383
  --color-primary: #1a56db;
@@ -383,7 +386,7 @@ Every project ships two CSS files: `outsystems-ui.css` (base framework) and `the
383
386
  }
384
387
  ```
385
388
 
386
- 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`):
389
+ 2. **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`):
387
390
  ```css
388
391
  .hero__btn--primary { ... }
389
392
  .hero__btn--outline { ... }
@@ -396,6 +399,7 @@ Every project ships two CSS files: `outsystems-ui.css` (base framework) and `the
396
399
  ### What theme.css should NOT do
397
400
 
398
401
  - Don't redefine OSUI layout structure (`.layout`, `.main`, `.content`, `.header-content`)
402
+ - Don't redefine grid classes (`.ThemeGrid_*`) — those belong in `grid.css`
399
403
  - Don't add `@media` queries — OSUI handles responsiveness
400
404
  - Don't override `.btn` base styles — create new named classes instead
401
405
 
@@ -428,40 +432,40 @@ When placing content on a dark background (`.background-primary`, `.background-s
428
432
  - Links default to the primary color — use custom classes for white/light link colors
429
433
  - Border colors may be invisible — use `border-color: rgba(255,255,255,0.1)` overrides
430
434
 
431
- ## Validation
432
-
433
- After generating a `.visual.html` file, verify:
434
- 1. The root `<div>` has class `active-screen` wrapping a `.layout` div
435
- 2. No inline `style=""` attributes exist anywhere in the file
436
- 3. All classes are either OSUI utilities OR custom classes defined in `theme.css` — no undefined classes
437
- 4. Both `outsystems-ui.css` and `theme.css` stylesheet `<link>` tags are present in `<head>`
438
- 5. If Font Awesome icons are used, the FA CDN `<link>` is in `<head>`
439
- 6. No `@media` queries or custom breakpoints were added
440
- 7. `.active-screen` scroll model is handled in `theme.css`
441
-
442
- If any check fails, fix the issue before presenting the output.
443
-
444
- ### Visual testing with the dev server
445
-
446
- The project includes a Vite dev server. If `npm install` has already been run, start it with:
447
-
448
- ```
449
- npm run dev
450
- ```
451
-
452
- This serves all `.visual.html` files with hot-reload at `http://localhost:5173/`. Use it to:
453
- - **Open the page in a browser** and take a screenshot to verify the layout renders correctly
454
- - **Check for invisible text** — buttons or links with white-on-white or same-color text/background
455
- - **Confirm scrolling works** — the page should scroll within `.active-screen`
456
- - **Verify icons render** — Font Awesome icons should not be 0×0 invisible boxes
457
- - **Inspect computed styles** — confirm utility classes resolve as expected against OSUI
458
-
459
- Do NOT run `npm install` yourself — only use `npm run dev` if `node_modules` already exists.
435
+ ## Workflow
436
+
437
+ Follow this checklist when creating or editing a screen. Do not skip steps.
438
+
439
+ - [ ] Step 1: **Generate the screen** — create the `.visual.html` file and any `theme.css` updates
440
+ - [ ] Step 2: **Self-check** — verify the generated file against these rules:
441
+ 1. Root `<div>` has class `active-screen` wrapping a `.layout` div
442
+ 2. No inline `style=""` attributes anywhere
443
+ 3. All classes are OSUI utilities OR custom classes defined in `theme.css`
444
+ 4. All three CSS stylesheets linked in `<head>`: `outsystems-ui.css`, `grid.css`, `theme.css` (in that order)
445
+ 5. If Font Awesome icons are used, the FA CDN `<link>` is in `<head>`
446
+ 6. No `@media` queries or custom breakpoints
447
+ 7. Scroll model and grid are handled by `grid.css` (not duplicated in `theme.css`)
448
+ 8. **Text readability** — for every text element, confirm the text color contrasts with its background:
449
+ - Dark backgrounds (`.background-primary`, `.background-neutral-10`, navy/dark sections) → use light text (`.text-neutral-0` or white custom class)
450
+ - Light backgrounds (`.background-neutral-0`, white sections) → use dark text (`.text-neutral-10` or default)
451
+ - **Header and menu links are especially prone** — if the header has a dark background, menu links MUST use a light text class. OSUI link defaults are the primary color, which may be invisible on a dark header.
452
+ - Buttons: check that button text contrasts with the button background (`.btn` defaults to white text — don't add `.text-neutral-0` on a white button)
453
+ 9. If any check fails, fix and re-check before continuing
454
+ - [ ] Step 3: **Install dependencies** — if `node_modules/` does not exist, run `npm install`
455
+ - [ ] Step 4: **Start the dev server** — run `npm run dev` to serve the project at `http://localhost:5173/`
456
+ - [ ] Step 5: **Visual verification** — open the screen URL in the browser and check:
457
+ - Layout renders correctly (no collapsed sections, no overlapping elements)
458
+ - **Text readability** — read every section and confirm ALL text is visible against its background. Pay special attention to: header/nav menu links, buttons, text in dark sections, links in footers
459
+ - Page scrolls within `.active-screen`
460
+ - Icons render (not 0×0 invisible boxes)
461
+ - Menu links and form fields have proper spacing (`.ThemeGrid_MarginGutter`)
462
+ - If anything looks wrong, fix the issue and reload to verify the fix
460
463
 
461
464
  ## Gotchas
462
465
 
463
- - `.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`).
466
+ - `.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** \u2014 OSUI sets `html { overflow: hidden }` so `.active-screen` must have `overflow-y: auto; height: 100vh` (provided by `grid.css`).\n- **`.ThemeGrid_MarginGutter` needs `grid.css`** \u2014 this class is used for menu link spacing and form field gutters, but its `margin-left` value is NOT in `outsystems-ui.css`. It comes from `grid.css`. Without it, menu links will bunch together with no spacing.
464
467
  - **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.
468
+ - **Header menu links vanish on dark headers** — OSUI link color defaults to `var(--color-primary)`. On a dark header where `--color-primary` is also dark (e.g. navy), menu links become invisible. Fix: add a custom class in `theme.css` that forces light link color in the header (e.g. `.header__link { color: #fff; }`).
465
469
  - **`.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`.
466
470
  - **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).
467
471
  - OutSystems pattern previews render inside iframes — CSS resolves against the OSUI framework, not browser defaults. Your `.visual.html` must link the OSUI stylesheet.
package/skills/outsystems-ui/assets/layout-base.html CHANGED
@@ -5,6 +5,7 @@
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
6
  <title>{{screen-name}}</title>
7
7
  <link rel="stylesheet" href="../theme/outsystems-ui.css" />
8
+ <link rel="stylesheet" href="../theme/grid.css" />
8
9
  <link rel="stylesheet" href="../theme/theme.css" />
9
10
  </head>
10
11
  <body class="desktop">
package/skills/outsystems-ui/assets/layout-blank.html CHANGED
@@ -5,6 +5,7 @@
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
6
  <title>{{screen-name}}</title>
7
7
  <link rel="stylesheet" href="../theme/outsystems-ui.css" />
8
+ <link rel="stylesheet" href="../theme/grid.css" />
8
9
  <link rel="stylesheet" href="../theme/theme.css" />
9
10
  </head>
10
11
  <body class="desktop">
package/skills/outsystems-ui/assets/layout-side.html CHANGED
@@ -5,6 +5,7 @@
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
6
  <title>{{screen-name}}</title>
7
7
  <link rel="stylesheet" href="../theme/outsystems-ui.css" />
8
+ <link rel="stylesheet" href="../theme/grid.css" />
8
9
  <link rel="stylesheet" href="../theme/theme.css" />
9
10
  </head>
10
11
  <body class="desktop">
package/skills/outsystems-ui/assets/layout-template.html CHANGED
@@ -11,6 +11,7 @@
11
11
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
12
12
  <title>{{screen-name}}</title>
13
13
  <link rel="stylesheet" href="../theme/outsystems-ui.css" />
14
+ <link rel="stylesheet" href="../theme/grid.css" />
14
15
  <link rel="stylesheet" href="../theme/theme.css" />
15
16
  </head>
16
17
  <body class="desktop">
package/skills/outsystems-ui/assets/layout-top.html CHANGED
@@ -5,6 +5,7 @@
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
6
  <title>{{screen-name}}</title>
7
7
  <link rel="stylesheet" href="../theme/outsystems-ui.css" />
8
+ <link rel="stylesheet" href="../theme/grid.css" />
8
9
  <link rel="stylesheet" href="../theme/theme.css" />
9
10
  </head>
10
11
  <body class="desktop">
package/template/screens/home.visual.html CHANGED
@@ -5,6 +5,7 @@
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>Home</title>
7
7
  <link rel="stylesheet" href="../theme/outsystems-ui.css">
8
+ <link rel="stylesheet" href="../theme/grid.css">
8
9
  <link rel="stylesheet" href="../theme/theme.css">
9
10
  </head>
10
11
  <body class="desktop">
package/template/theme/grid.css ADDED
@@ -0,0 +1,82 @@
1
+ /* ── OutSystems Platform Grid & Base ───────────────────
2
+ These styles are normally injected by the OutSystems
3
+ platform at runtime based on app settings. Since we
4
+ render static .visual.html files outside the platform,
5
+ we must provide them explicitly.
6
+
7
+ Source: _Basic.css + <AppName>.extra.css
8
+ ──────────────────────────────────────────────────────── */
9
+
10
+ /* ── Scroll host ─────────────────────────────────────── */
11
+ .active-screen {
12
+ overflow-y: auto;
13
+ height: 100vh;
14
+ }
15
+
16
+ /* ── Base resets ─────────────────────────────────────── */
17
+ body {
18
+ margin: 0;
19
+ padding: 0;
20
+ }
21
+
22
+ .OSFillParent {
23
+ display: block;
24
+ width: 100%;
25
+ }
26
+
27
+ .OSInline {
28
+ display: inline-block;
29
+ vertical-align: top;
30
+ }
31
+
32
+ div[class*="ThemeGrid_Width"] {
33
+ vertical-align: top;
34
+ }
35
+
36
+ [class*="ThemeGrid_Width"] {
37
+ display: inline-block;
38
+ box-sizing: border-box;
39
+ }
40
+
41
+ .ThemeGrid_Container {
42
+ box-sizing: border-box;
43
+ max-width: 1280px;
44
+ padding-left: 5%;
45
+ padding-right: 5%;
46
+ }
47
+
48
+ /* ── 12-Column Grid ──────────────────────────────────── */
49
+ .ThemeGrid_Width1 { width: 6.5359477124183%; }
50
+ .ThemeGrid_Width2 { width: 15.0326797385621%; }
51
+ .ThemeGrid_Width3 { width: 23.5294117647059%; }
52
+ .ThemeGrid_Width4 { width: 32.0261437908497%; }
53
+ .ThemeGrid_Width5 { width: 40.5228758169935%; }
54
+ .ThemeGrid_Width6 { width: 49.0196078431373%; }
55
+ .ThemeGrid_Width7 { width: 57.516339869281%; }
56
+ .ThemeGrid_Width8 { width: 66.0130718954248%; }
57
+ .ThemeGrid_Width9 { width: 74.5098039215686%; }
58
+ .ThemeGrid_Width10 { width: 83.0065359477124%; }
59
+ .ThemeGrid_Width11 { width: 91.5032679738562%; }
60
+ .ThemeGrid_Width12 { width: 100%; }
61
+
62
+ /* ── Gutter & Margins ────────────────────────────────── */
63
+ .ThemeGrid_MarginGutter {
64
+ margin-left: 1.96078431372549%;
65
+ }
66
+
67
+ .ThemeGrid_Margin1 { margin-left: 10.4575163398693%; }
68
+ .ThemeGrid_Margin2 { margin-left: 18.9542483660131%; }
69
+ .ThemeGrid_Margin3 { margin-left: 27.4509803921569%; }
70
+ .ThemeGrid_Margin4 { margin-left: 35.9477124183007%; }
71
+ .ThemeGrid_Margin5 { margin-left: 44.4444444444444%; }
72
+ .ThemeGrid_Margin6 { margin-left: 52.9411764705882%; }
73
+ .ThemeGrid_Margin7 { margin-left: 61.437908496732%; }
74
+ .ThemeGrid_Margin8 { margin-left: 69.9346405228758%; }
75
+ .ThemeGrid_Margin9 { margin-left: 78.4313725490196%; }
76
+ .ThemeGrid_Margin10 { margin-left: 86.9281045751634%; }
77
+ .ThemeGrid_Margin11 { margin-left: 95.4248366013072%; }
78
+
79
+ /* ── List reset ──────────────────────────────────────── */
80
+ .ListRecords {
81
+ display: block;
82
+ }
package/template/theme/theme.css CHANGED
@@ -1,19 +1,9 @@
1
1
  /* ── Project Theme ─────────────────────────────────────
2
2
  Override OutSystems UI variables and add custom styles here.
3
- This file loads after outsystems-ui.css.
3
+ This file loads after outsystems-ui.css and grid.css.
4
4
  ──────────────────────────────────────────────────────── */
5
5
 
6
- /* ── 1. OSUI scroll model ────────────────────────────
7
- OSUI sets html { overflow: hidden }. The .active-screen
8
- div is the actual scroll container for the page.
9
- WITHOUT this rule, pages will not scroll.
10
- ──────────────────────────────────────────────────────── */
11
- .active-screen {
12
- overflow: hidden auto;
13
- height: 100vh;
14
- }
15
-
16
- /* ── 2. Brand tokens ─────────────────────────────────── */
6
+ /* ── 1. Brand tokens ─────────────────────────────────── */
17
7
  :root {
18
8
  /* Brand colors – change these to match your app */
19
9
  --color-primary: #2979ff;
@@ -27,7 +17,7 @@
27
17
  --font-size-base: 14px;
28
18
  }
29
19
 
30
- /* ── 3. Custom styles ────────────────────────────────── */
20
+ /* ── 2. Custom styles ────────────────────────────────── */
31
21
  /* Add custom component classes here.
32
22
  Use named classes for button variants, dark-section overrides,
33
23
  gradient backgrounds, etc. Keep OSUI utilities for layout/spacing. */