create-flowmo 1.0.0 → 1.1.0

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

@@ -1,288 +0,0 @@
-# OutSystems UI — Interaction Patterns (18)
-
-Patterns for user interaction: inputs, selections, animations, and dynamic content.
-
-## Action Sheet
-
-Bottom-sliding panel with action options (mobile pattern).
-
-```html
-<div class="osui-action-sheet">
-  <div class="osui-action-sheet__header">{{title}}</div>
-  <div class="osui-action-sheet__content">
-    <div class="osui-action-sheet__item">{{action-1}}</div>
-    <div class="osui-action-sheet__item">{{action-2}}</div>
-  </div>
-</div>
-```
-
-**Mandatory classes**: `.osui-action-sheet`
-
-## Animate
-
-Apply CSS animations to content on appear, scroll, or trigger.
-
-```html
-<div class="animate" data-animate="fadeIn">
-  {{content}}
-</div>
-```
-
-**Mandatory classes**: `.animate`
-**Animation types**: `fadeIn`, `slideInUp`, `slideInDown`, `slideInLeft`, `slideInRight`, `zoomIn`, `bounceIn`
-
-## Animated Label
-
-Input label that animates from placeholder to floating label on focus.
-
-```html
-<div class="animated-label">
-  <input type="text" class="form-control" placeholder=" " />
-  <label>{{label-text}}</label>
-</div>
-```
-
-**Mandatory classes**: `.animated-label`
-**Note**: The `placeholder=" "` (space) is required for the CSS animation to work.
-
-## Bottom Sheet
-
-Mobile-style panel that slides up from the bottom of the screen.
-
-```html
-<div class="osui-bottom-sheet">
-  <div class="osui-bottom-sheet__header">
-    <div class="osui-bottom-sheet__handle"></div>
-    {{header-content}}
-  </div>
-  <div class="osui-bottom-sheet__content">{{content}}</div>
-</div>
-```
-
-**Mandatory classes**: `.osui-bottom-sheet`
-
-## Carousel
-
-Horizontal content slider with navigation dots.
-
-```html
-<div class="osui-carousel" id="carousel-1">
-  <div class="osui-carousel__wrapper">
-    <div class="osui-carousel__item">{{slide-1}}</div>
-    <div class="osui-carousel__item">{{slide-2}}</div>
-    <div class="osui-carousel__item">{{slide-3}}</div>
-  </div>
-  <div class="osui-carousel__navigation">
-    <div class="osui-carousel__dots"></div>
-  </div>
-</div>
-```
-
-**Mandatory classes**: `.osui-carousel`, `.osui-carousel__item`
-**CSS Variable**: `--{carousel-id}-width` to control slide width
-
-## Date Picker
-
-Calendar-based date selection input.
-
-```html
-<div class="osui-datepicker">
-  <input type="text" class="form-control" placeholder="Select date" />
-</div>
-```
-
-**Mandatory classes**: `.osui-datepicker`
-
-## Dropdown Search
-
-Searchable dropdown selection. Filters options as user types.
-
-```html
-<div class="osui-dropdown-search">
-  <div class="osui-dropdown-search__trigger">
-    <input type="text" placeholder="Search..." />
-  </div>
-  <div class="osui-dropdown-search__content">
-    <div class="osui-dropdown-search__item">{{option-1}}</div>
-    <div class="osui-dropdown-search__item">{{option-2}}</div>
-  </div>
-</div>
-```
-
-**Mandatory classes**: `.osui-dropdown-search`
-
-## Dropdown Tags
-
-Multi-select dropdown that shows selections as tags/pills.
-
-```html
-<div class="osui-dropdown-tags">
-  <div class="osui-dropdown-tags__selected">
-    <span class="tag">{{selected-1}}</span>
-    <span class="tag">{{selected-2}}</span>
-  </div>
-  <div class="osui-dropdown-tags__content">
-    <div class="osui-dropdown-tags__item">{{option-1}}</div>
-    <div class="osui-dropdown-tags__item">{{option-2}}</div>
-  </div>
-</div>
-```
-
-**Mandatory classes**: `.osui-dropdown-tags`
-
-## Floating Actions
-
-FAB — floating action button with expandable sub-actions.
-
-```html
-<div class="osui-floating-actions" style="--delay: 0.1s;">
-  <div class="osui-floating-actions__trigger">
-    <button class="btn btn-primary border-radius-circle">+</button>
-  </div>
-  <div class="osui-floating-actions__items">
-    <div class="osui-floating-actions__item">{{action-1}}</div>
-    <div class="osui-floating-actions__item">{{action-2}}</div>
-  </div>
-</div>
-```
-
-**Mandatory classes**: `.osui-floating-actions`
-**CSS Variable**: `--delay` for staggered animation
-
-## Input With Icon
-
-Text input with an icon inside (left or right).
-
-```html
-<div class="input-with-icon">
-  <span class="icon">{{icon}}</span>
-  <input type="text" class="form-control" placeholder="{{placeholder}}" />
-</div>
-```
-
-**Mandatory classes**: `.input-with-icon`
-**Icon position**: `.input-with-icon--left` (default), `.input-with-icon--right`
-
-## Lightbox Image
-
-Clickable image that opens in a fullscreen overlay.
-
-```html
-<div class="lightbox-image">
-  <img src="{{thumbnail-url}}" alt="{{alt-text}}" />
-</div>
-```
-
-**Mandatory classes**: `.lightbox-image`
-
-## Notification
-
-Toast-style notification that appears briefly.
-
-```html
-<div class="osui-notification osui-notification--{type}">
-  <div class="osui-notification__content">{{message}}</div>
-  <div class="osui-notification__close"></div>
-</div>
-```
-
-**Types**: `info`, `success`, `warning`, `error`
-**Position**: `.osui-notification--top`, `.osui-notification--bottom`
-
-## Range Slider
-
-Single-value slider input.
-
-```html
-<div class="osui-range-slider">
-  <input type="range" min="0" max="100" value="50" />
-</div>
-```
-
-**Mandatory classes**: `.osui-range-slider`
-
-## Range Slider Interval
-
-Dual-handle slider for selecting a range.
-
-```html
-<div class="osui-range-slider-interval">
-  <input type="range" min="0" max="100" value="25" />
-  <input type="range" min="0" max="100" value="75" />
-</div>
-```
-
-**Mandatory classes**: `.osui-range-slider-interval`
-
-## Scrollable Area
-
-Content area with overflow scrolling and configurable dimensions.
-
-```html
-<div class="osui-scrollable-area" style="
-  --scrollable-area-width: 100%;
-  --scrollable-area-height: 300px;
-">
-  {{scrollable-content}}
-</div>
-```
-
-**Mandatory classes**: `.osui-scrollable-area`
-**CSS Variables**: `--scrollable-area-width`, `--scrollable-area-height`
-
-## Search
-
-Search input with clear button and optional results area.
-
-```html
-<div class="osui-search">
-  <div class="osui-search__input">
-    <input type="text" class="form-control" placeholder="Search..." />
-    <span class="osui-search__icon"></span>
-  </div>
-  <div class="osui-search__results">{{results}}</div>
-</div>
-```
-
-**Mandatory classes**: `.osui-search`
-
-## Sidebar
-
-Slide-in panel from left or right edge.
-
-```html
-<div class="osui-sidebar osui-sidebar--{direction}">
-  <div class="osui-sidebar__header">{{header}}</div>
-  <div class="osui-sidebar__content">{{content}}</div>
-</div>
-```
-
-**Direction**: `left` (default), `right`
-**Mandatory classes**: `.osui-sidebar`
-
-## Stacked Cards
-
-Swipeable stack of overlapping cards (Tinder-style).
-
-```html
-<div class="osui-stacked-cards">
-  <div class="osui-stacked-cards__item">{{card-1}}</div>
-  <div class="osui-stacked-cards__item">{{card-2}}</div>
-  <div class="osui-stacked-cards__item">{{card-3}}</div>
-</div>
-```
-
-**Mandatory classes**: `.osui-stacked-cards`, `.osui-stacked-cards__item`
-
-## Video
-
-Responsive video embed container.
-
-```html
-<div class="video-container">
-  <iframe src="{{video-url}}" allowfullscreen></iframe>
-</div>
-```
-
-**Mandatory classes**: `.video-container`
-**Note**: Maintains 16:9 aspect ratio automatically.

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

@@ -1,180 +0,0 @@
-# OutSystems UI — Navigation Patterns (9)
-
-Patterns for navigating between screens, sections, and steps.
-
-## Bottom Bar Item
-
-Mobile-style tab bar item at the bottom of the screen.
-
-```html
-<div class="bottom-bar">
-  <div class="bottom-bar-item active">
-    <span class="bottom-bar-item-icon">{{icon-1}}</span>
-    <span class="bottom-bar-item-text">{{label-1}}</span>
-  </div>
-  <div class="bottom-bar-item">
-    <span class="bottom-bar-item-icon">{{icon-2}}</span>
-    <span class="bottom-bar-item-text">{{label-2}}</span>
-  </div>
-  <div class="bottom-bar-item">
-    <span class="bottom-bar-item-icon">{{icon-3}}</span>
-    <span class="bottom-bar-item-text">{{label-3}}</span>
-  </div>
-</div>
-```
-
-**Mandatory classes**: `.bottom-bar`, `.bottom-bar-item`
-**Active state**: Add `.active` to the current item.
-
-## Breadcrumbs
-
-Hierarchical navigation trail showing the user's location.
-
-```html
-<div class="breadcrumbs">
-  <a class="breadcrumb-item" href="#">Home</a>
-  <span class="breadcrumb-separator">/</span>
-  <a class="breadcrumb-item" href="#">Category</a>
-  <span class="breadcrumb-separator">/</span>
-  <span class="breadcrumb-item active">Current Page</span>
-</div>
-```
-
-**Mandatory classes**: `.breadcrumbs`, `.breadcrumb-item`
-**Active state**: Last item uses `.active` and is a `<span>`, not a link.
-
-## Overflow Menu
-
-Three-dot menu that reveals additional actions in a dropdown.
-
-```html
-<div class="osui-overflow-menu">
-  <div class="osui-overflow-menu__trigger">
-    <span class="osui-overflow-menu__icon">⋯</span>
-  </div>
-  <div class="osui-overflow-menu__content">
-    <div class="osui-overflow-menu__item">{{action-1}}</div>
-    <div class="osui-overflow-menu__item">{{action-2}}</div>
-    <div class="osui-overflow-menu__item osui-overflow-menu__item--destructive">{{delete-action}}</div>
-  </div>
-</div>
-```
-
-**Mandatory classes**: `.osui-overflow-menu`
-**Destructive variant**: `.osui-overflow-menu__item--destructive` for dangerous actions (red text).
-
-## Pagination
-
-Page navigation for large datasets.
-
-```html
-<div class="pagination">
-  <a class="pagination-item pagination-prev" href="#">&laquo;</a>
-  <a class="pagination-item" href="#">1</a>
-  <a class="pagination-item active" href="#">2</a>
-  <a class="pagination-item" href="#">3</a>
-  <a class="pagination-item pagination-next" href="#">&raquo;</a>
-</div>
-```
-
-**Mandatory classes**: `.pagination`, `.pagination-item`
-**Active state**: `.active` on the current page.
-
-## Section Index
-
-Sticky sidebar or inline index that links to page sections.
-
-```html
-<div class="section-index">
-  <a class="section-index-item active" href="#section-1">Section 1</a>
-  <a class="section-index-item" href="#section-2">Section 2</a>
-  <a class="section-index-item" href="#section-3">Section 3</a>
-</div>
-```
-
-**Mandatory classes**: `.section-index`, `.section-index-item`
-
-## Submenu
-
-Nested navigation menu for secondary-level items.
-
-```html
-<div class="submenu">
-  <a class="submenu-item active" href="#">Overview</a>
-  <a class="submenu-item" href="#">Details</a>
-  <a class="submenu-item" href="#">Settings</a>
-</div>
-```
-
-**Mandatory classes**: `.submenu`, `.submenu-item`
-
-## Tabs
-
-Tabbed content switcher.
-
-```html
-<div class="osui-tabs">
-  <div class="osui-tabs__header">
-    <div class="osui-tabs__header-item active">{{tab-1-label}}</div>
-    <div class="osui-tabs__header-item">{{tab-2-label}}</div>
-    <div class="osui-tabs__header-item">{{tab-3-label}}</div>
-  </div>
-  <div class="osui-tabs__content">
-    <div class="osui-tabs__content-item active">{{tab-1-content}}</div>
-    <div class="osui-tabs__content-item">{{tab-2-content}}</div>
-    <div class="osui-tabs__content-item">{{tab-3-content}}</div>
-  </div>
-</div>
-```
-
-**Mandatory classes**: `.osui-tabs`, `.osui-tabs__header-item`, `.osui-tabs__content-item`
-**Active state**: Both the header item and content item need `.active` class.
-**Orientation**: Add `.osui-tabs--vertical` for a vertical tab layout.
-
-## Timeline Item
-
-Vertical timeline entry for displaying chronological events.
-
-```html
-<div class="timeline">
-  <div class="timeline-item">
-    <div class="timeline-item-icon">{{icon}}</div>
-    <div class="timeline-item-content">
-      <div class="timeline-item-header">
-        <span class="timeline-item-title">{{title}}</span>
-        <span class="timeline-item-date">{{date}}</span>
-      </div>
-      <div class="timeline-item-body">{{description}}</div>
-    </div>
-  </div>
-  <div class="timeline-item">
-    <!-- repeat for each event -->
-  </div>
-</div>
-```
-
-**Mandatory classes**: `.timeline`, `.timeline-item`
-
-## Wizard
-
-Multi-step process indicator with numbered steps.
-
-```html
-<div class="osui-wizard">
-  <div class="osui-wizard__item osui-wizard__item--past">
-    <div class="osui-wizard__item__step">1</div>
-    <div class="osui-wizard__item__label">{{step-1-label}}</div>
-  </div>
-  <div class="osui-wizard__item osui-wizard__item--active">
-    <div class="osui-wizard__item__step">2</div>
-    <div class="osui-wizard__item__label">{{step-2-label}}</div>
-  </div>
-  <div class="osui-wizard__item">
-    <div class="osui-wizard__item__step">3</div>
-    <div class="osui-wizard__item__label">{{step-3-label}}</div>
-  </div>
-</div>
-```
-
-**Mandatory classes**: `.osui-wizard`, `.osui-wizard__item`
-**Step states**: `.osui-wizard__item--past` (completed), `.osui-wizard__item--active` (current), no modifier (future)

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

@@ -1,94 +0,0 @@
-# OutSystems UI — Number Patterns (6)
-
-Patterns for displaying numeric data: badges, counters, progress indicators, and ratings.
-
-## Badge
-
-Small numeric or text label, typically overlaid on another element.
-
-```html
-<span class="badge">{{value}}</span>
-```
-
-**Mandatory classes**: `.badge`
-**Color variants**: Combine with `.background-primary`, `.background-success`, `.background-error`, etc.
-**Shape**: Add `.border-radius-circle` for a circular badge.
-**Usage**: Overlay on icons for notification counts, or inline in lists.
-
-## Counter
-
-Displays a count value with a label. Often used in dashboard cards.
-
-```html
-<div class="counter">
-  <div class="counter-value">{{number}}</div>
-  <div class="counter-label">{{label}}</div>
-</div>
-```
-
-**Mandatory classes**: `.counter`
-**Sizing**: Use `.font-size-display` or `.font-size-h1` on `.counter-value` for hero numbers.
-
-## Icon Badge
-
-Badge attached to an icon — for notification indicators on menu items or buttons.
-
-```html
-<div class="icon-badge">
-  <span class="icon">{{icon}}</span>
-  <span class="badge">{{count}}</span>
-</div>
-```
-
-**Mandatory classes**: `.icon-badge`
-**Note**: The badge is absolutely positioned on top-right of the icon container.
-
-## Progress Bar
-
-Horizontal bar showing completion percentage.
-
-```html
-<div class="progress-bar">
-  <div class="progress-bar-value" style="width: {{percentage}}%;">
-    {{percentage}}%
-  </div>
-</div>
-```
-
-**Mandatory classes**: `.progress-bar`, `.progress-bar-value`
-**Color**: Apply `.background-primary`, `.background-success`, etc. to `.progress-bar-value`.
-**Size**: The containing `.progress-bar` handles the track; `.progress-bar-value` is the fill.
-
-## Progress Circle
-
-Circular/radial progress indicator.
-
-```html
-<div class="progress-circle" data-progress="{{percentage}}">
-  <div class="progress-circle-content">
-    <span class="progress-circle-value">{{percentage}}%</span>
-    <span class="progress-circle-label">{{label}}</span>
-  </div>
-</div>
-```
-
-**Mandatory classes**: `.progress-circle`
-**Data**: Set `data-progress` attribute to a value 0–100.
-
-## Rating
-
-Star-based rating display and input.
-
-```html
-<div class="osui-rating" style="--rating-size: 16px;">
-  <div class="osui-rating__item osui-rating__item--filled">★</div>
-  <div class="osui-rating__item osui-rating__item--filled">★</div>
-  <div class="osui-rating__item osui-rating__item--filled">★</div>
-  <div class="osui-rating__item osui-rating__item--half">★</div>
-  <div class="osui-rating__item">★</div>
-</div>
-```
-
-**Mandatory classes**: `.osui-rating`, `.osui-rating__item`
-**States**: `.osui-rating__item--filled` (full star), `.osui-rating__item--half` (half star), no modifier (empty star)
-**CSS Variable**: `--rating-size` controls the star size (default: 16px)

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

@@ -1,124 +0,0 @@
-# OutSystems UI — Utility Patterns (9)
-
-Helper patterns for layout, alignment, spacing, and event handling.
-
-## Align Center
-
-Centers content both horizontally and vertically within a container.
-
-```html
-<div class="align-center">
-  {{content}}
-</div>
-```
-
-**Mandatory classes**: `.align-center`
-**Note**: Uses flexbox centering. The parent container must have a defined height.
-
-## Button Loading
-
-Alternative button loading pattern. Replaces button content with a spinner.
-
-```html
-<button class="btn btn-primary btn-loading">
-  <span class="btn-loading-spinner"></span>
-  {{loading-text}}
-</button>
-```
-
-**Mandatory classes**: `.btn-loading`
-**Note**: This is the same as adding `.btn-loading` to any button. See the Buttons section in SKILL.md.
-
-## Center Content
-
-Centers content horizontally with max-width constraint.
-
-```html
-<div class="center-content">
-  {{content}}
-</div>
-```
-
-**Mandatory classes**: `.center-content`
-**Note**: Adds `margin: 0 auto` and a `max-width`. Useful for constraining content width on wide screens.
-
-## Margin Container
-
-Adds consistent horizontal margins (gutters) to content.
-
-```html
-<div class="margin-container">
-  {{content}}
-</div>
-```
-
-**Mandatory classes**: `.margin-container`
-**Note**: Typically used for page-level content areas to add left/right padding that responds to screen width.
-
-## Mouse Events
-
-Container that exposes mouse interaction events for child elements.
-
-```html
-<div class="mouse-events" data-event="hover">
-  {{content}}
-</div>
-```
-
-**Mandatory classes**: `.mouse-events`
-**Events**: `hover`, `click`, `mouseenter`, `mouseleave`
-**Note**: This is a wrapper pattern — in OutSystems, the events are wired to Client Actions via the pattern's event handlers.
-
-## Separator
-
-Horizontal or vertical divider line.
-
-```html
-<hr class="separator" />
-```
-
-**Mandatory classes**: `.separator`
-**Orientation**: Default is horizontal. Add `.separator--vertical` for vertical.
-**Color**: Inherits from `--color-neutral-4` by default.
-**Spacing**: The separator has built-in margin. Override with `.margin-top-none`, `.margin-bottom-none`, etc.
-
-## Swipe Events
-
-Container that detects swipe gestures (mobile).
-
-```html
-<div class="swipe-events">
-  {{content}}
-</div>
-```
-
-**Mandatory classes**: `.swipe-events`
-**Note**: In OutSystems, swipe direction events (Left, Right, Up, Down) are wired to Client Actions. In a `.visual.html` prototype, this is a structural placeholder.
-
-## Touch Events
-
-Container that detects touch interactions (tap, long press).
-
-```html
-<div class="touch-events">
-  {{content}}
-</div>
-```
-
-**Mandatory classes**: `.touch-events`
-**Note**: Like Swipe Events, touch handlers are wired in OutSystems. Structural placeholder in prototypes.
-
-## Inline SVG
-
-Renders inline SVG content so it can be styled with CSS.
-
-```html
-<div class="inline-svg">
-  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-    {{svg-path-data}}
-  </svg>
-</div>
-```
-
-**Mandatory classes**: `.inline-svg`
-**Note**: Inline SVG can be colored with `.text-primary`, `.text-error`, etc. using `fill: currentColor`.