Knowledge Pack Files

SideButton Marketing Website Knowledge Pack Files

Browse the source files that power the SideButton Marketing Website MCP server knowledge pack.

Available free v1.0.3 Browser

$ sidebutton install sidebutton.com

Download ZIP

features-workflow-engine/_skill.md

16.8 KB

What This Is

Feature page for the SideButton Workflow Engine — YAML-defined automation workflows with browser actions, AI steps, control flow, and data handling. Uses the shared FeatureHero component with "Workflow Engine" badge (primary/teal color). Includes: custom 4-category building blocks grid (Browser Actions 6 items, AI Steps 4 items, Control Flow 4 items, Data Handling 4 items — each in a white card with colored icon header), a YAML code example section with dark panel and copy button, a Growing Workflow Library section with screenshot and dynamically-generated platform cards from marketplace data, Related Features 3-card grid, and dark FeatureCTA. Has BreadcrumbList and HowTo JSON-LD schemas. This is the only feature page with client-side JavaScript for the copy button.

URL Patterns

Pattern	Description
`/features/workflow-engine`	Workflow engine feature page

Page Structure

+--[Header: sticky banner]---------------------------+
|                                                     |
| [1. HERO — FeatureHero component]                   |
|   Badge: "Workflow Engine" (teal/primary)            |
|   H1: "SideButton Workflows"                        |
|   Subtitle + 2 CTA buttons                          |
|   "Get Started Free" -> docs install                |
|   "Documentation" -> docs home                      |
|                                                     |
| [2. BUILDING BLOCKS — custom grid, bg-slate-50]     |
|   "What You Can Build" heading                      |
|   2×2 grid (md:grid-cols-2) of white cards          |
|                                                     |
|   Browser Actions (blue icon, 6 items):             |
|     navigate(url), click(selector), type(selector,  |
|     text), extract(selector), scroll(direction),    |
|     wait(condition)                                  |
|                                                     |
|   AI Steps (purple icon, 4 items):                  |
|     generate(prompt), classify(text),               |
|     summarize(content), extract_entities(text)       |
|                                                     |
|   Control Flow (orange icon, 4 items):              |
|     if/else, for loops, retry, error handling        |
|                                                     |
|   Data Handling (green icon, 4 items):              |
|     Variables, JSON output, CSV export, Templates    |
|                                                     |
| [3. EXAMPLE WORKFLOW — white background]             |
|   "Example Workflow" heading                        |
|   Dark panel (bg-slate-900) with:                   |
|     filename "draft-reply.yaml" (mono text)         |
|     Copy button (#copy-workflow-btn)                |
|     YAML code block in <pre><code>                  |
|                                                     |
| [4. WORKFLOW LIBRARY — bg-slate-50]                  |
|   "Growing Workflow Library" heading                |
|   Library screenshot /screenshots/library.png       |
|   6 platform cards (dynamic from marketplace):      |
|     grid-cols-2 md:grid-cols-3 lg:grid-cols-6      |
|     Each: logo/initial + name + workflow count      |
|   "Browse All Workflows" link button -> /integrations|
|                                                     |
| [5. RELATED FEATURES — bg-slate-50, 3-card grid]    |
|   AI Automation | Embed Buttons | Integrations       |
|                                                     |
| [6. CTA — FeatureCTA component, bg-slate-900]       |
|   "Start Building Workflows"                        |
|   "Get Started Free" + "View Documentation"         |
|                                                     |
+--[Footer: 6-column grid]---------------------------+

Key Elements

Hero Section (FeatureHero component)

Element	Selector	Notes
Hero section	`section.relative.overflow-hidden` (first)	Shared FeatureHero
Badge	`.inline-flex.rounded-full` with "Workflow Engine"	Teal: bg-primary/10 text-primary border-primary/20
Badge dot	`span.w-1\\.5.h-1\\.5.rounded-full.animate-pulse`	Pulsing teal dot
Hero heading	`h1` "SideButton Workflows"	text-4xl md:text-5xl lg:text-6xl
Hero subtitle	`p` "AI workflow automation with YAML..."	text-lg md:text-xl
Get Started Free	`a[href*="docs.sidebutton.com/installation"]`	bg-primary button
Documentation	`a[href*="docs.sidebutton.com"]` (outline)	bg-white border button

Building Blocks Section

Element	Selector	Notes
Section	`section.py-16.bg-slate-50` (first)	Slate background
Section heading	`h2` "What You Can Build"	text-2xl md:text-3xl
Subtitle	`p` "Combine these building blocks to automate anything"	text-slate-600
Grid	`.grid.md\\:grid-cols-2.gap-8`	2-column layout, 8px gap
Browser Actions card	`.bg-white.rounded-xl.border.border-slate-200.p-6` (first)	Blue header icon (bg-blue-100, text-blue-600, globe SVG)
Browser Actions heading	`h3` "Browser Actions"	font-bold, flex with icon
Browser Actions items	`code` elements in `.space-y-3`	navigate(url), click(selector), type(selector, text), extract(selector), scroll(direction), wait(condition)
AI Steps card	Second `.bg-white.rounded-xl` card	Purple header icon (bg-purple-100, text-purple-600, sparkles SVG)
AI Steps heading	`h3` "AI Steps"	font-bold
AI Steps items	`code` elements	generate(prompt), classify(text), summarize(content), extract_entities(text)
Control Flow card	Third card	Orange header icon (bg-orange-100, text-orange-600, arrows SVG)
Control Flow heading	`h3` "Control Flow"	font-bold
Control Flow items	`code` elements	if/else, for loops, retry, error handling
Data Handling card	Fourth card	Green header icon (bg-green-100, text-green-600, database SVG)
Data Handling heading	`h3` "Data Handling"	font-bold
Data Handling items	`code` elements	Variables, JSON output, CSV export, Templates
Item code style	`code.text-xs.bg-slate-100.px-2.py-1.rounded.font-mono.text-slate-700`	Inline code pill
Item description	`span.text-sm.text-slate-500`	Description text next to code

Example Workflow Section

Element	Selector	Notes
Section	`section.py-16` (Example Workflow)	White background
Section heading	`h2` "Example Workflow"	text-2xl md:text-3xl
Subtitle	`p` "A simple YAML workflow that drafts an email reply using AI"	text-slate-600
Code panel	`.bg-slate-900.rounded-2xl.overflow-hidden`	Dark code container
Filename bar	`.flex.items-center.justify-between.px-4.py-3.border-b.border-slate-700`	Contains filename + copy button
Filename	`span.font-mono.text-sm.text-slate-400`	"draft-reply.yaml"
Copy button	`#copy-workflow-btn`	border border-slate-700, text-xs, hover:text-primary hover:border-primary
Code content	`pre.p-6.text-sm.text-slate-300 > code`	YAML: name, description, steps (extract, generate, type)

Workflow Library Section

Element	Selector	Notes
Section	`section.py-16.bg-slate-50` (Library)	Slate background
Section heading	`h2` "Growing Workflow Library"	text-2xl md:text-3xl
Subtitle	`p` "Ready-to-use automations for popular platforms..."	text-slate-600
Library screenshot	`img[alt*="SideButton local workflow library"]`	/screenshots/library.png, 1280x800, lazy, rounded-xl shadow-2xl
Platform grid	`.grid.grid-cols-2.md\\:grid-cols-3.lg\\:grid-cols-6.gap-4`	Responsive: 2/3/6 columns
Platform card	`a[href^="/integrations/"]` in grid	White card, logo/initial + name + "{count} workflows"
Platform logo	`img.w-10.h-10.rounded-lg.object-contain`	Loaded from platform.logoUrl if available
Platform initial	`.w-10.h-10.rounded-lg` with background-color	Fallback: first letter of name on colored background
Platform name	`p.font-medium.text-slate-900.text-sm`	Platform display name
Platform count	`p.text-xs.text-slate-500`	"{count} workflows" — dynamically computed
Browse All link	`a` "Browse All Workflows"	inline-flex with arrow icon, links to /integrations

Related Features

Element	Selector	Notes
Section	`section.py-12.bg-slate-50`	Continuous with Library section background
Section heading	`h2` "Related Features"	text-xl
AI Automation card	`a[href="/features/ai-automation"]`	h3 "AI Automation", hover:border-primary
Embed Buttons card	`a[href="/features/embed-buttons"]`	h3 "Embed SideButton Buttons"
Integrations card	`a[href="/integrations"]`	h3 "Integrations"

CTA Section (FeatureCTA component)

Element	Selector	Notes
CTA container	`.bg-slate-900.rounded-2xl`	Dark background
Section heading	`h2` "Start Building Workflows"	text-white
Subtitle	`p` "Create your first automation in minutes..."	text-slate-300
Get Started Free	`a[href*="docs.sidebutton.com/installation"]`	bg-primary button
View Documentation	`a[href*="docs.sidebutton.com/workflows"]`	bg-white/10 button, links to docs/workflows

Data Model

Static feature page with some dynamic data from marketplace module. Content rendered at build time.

Field	Type	Description
browserActions	array[6]	Step definitions: icon, title (function signature), description
aiSteps	array[4]	AI step definitions: icon, title, description
controlFlow	array[4]	Control flow definitions: icon, title, description
dataHandling	array[4]	Data handling definitions: icon, title, description
exampleWorkflow	string	YAML template: "Draft Gmail Reply" with extract, generate, type steps
platforms	array[6]	Dynamic: first 6 platforms from `getPlatforms()` (excluding 'multi'), with workflow counts from `getWorkflowsByPlatform()`
Related features	array[3]	AI Automation (/features/ai-automation), Embed Buttons (/features/embed-buttons), Integrations (/integrations)
SEO schemas	array[2]	BreadcrumbList (Home > Features > SideButton Workflows), HowTo (3-step: define YAML, add AI steps, run/trigger)

States & Variations

State	Trigger	Visual Indicator
Default	Page load	All sections visible, code block shown, copy button ready
Code copied	Click `#copy-workflow-btn`	Button text changes to "Copied!", adds text-primary + border-primary classes
Code copy reset	2000ms after copy	Button text reverts to "Copy", removes primary classes
Cookie dialog	First visit	Cookie Notice dialog overlay
SideButton FAB	Extension installed	Green "S" + "Click" button bottom-right
Hero badge pulse	Continuous	Teal dot pulses via animate-pulse
Building block card hover	Hover on category card	Default border-slate-200, no explicit hover effect (static cards)
Platform card hover	Hover on platform link	border -> border-primary + shadow-md
Related card hover	Hover on card	border-primary + shadow-md, h3 text primary
Browse All hover	Hover on link	border -> border-primary, text -> text-primary
Responsive mobile (<= 768px)	Small viewport	Building blocks 1 column, platform grid 2 columns, CTA buttons stack
Responsive tablet (768-1024px)	Medium viewport	Building blocks 2 columns, platform grid 3 columns
Responsive desktop (>= 1024px)	Large viewport	Platform grid 6 columns
Screenshot lazy load	Scroll to library section	Library image loads when entering viewport
Dynamic platform data	Build time	Platform cards and workflow counts come from marketplace.ts module at build time

Common Tasks

Verify Page Loads Correctly

Navigate to /features/workflow-engine
Verify hero heading "SideButton Workflows" is visible
Verify "Workflow Engine" badge with pulsing teal dot
Scroll through all 6 sections and verify none are missing
Check that library screenshot loads properly

Verify Building Blocks Grid

Scroll to "What You Can Build" section
Verify 4 category cards in 2x2 grid layout
Verify Browser Actions card: blue icon header, 6 code items (navigate, click, type, extract, scroll, wait)
Verify AI Steps card: purple icon header, 4 items (generate, classify, summarize, extract_entities)
Verify Control Flow card: orange icon header, 4 items (if/else, for loops, retry, error handling)
Verify Data Handling card: green icon header, 4 items (Variables, JSON output, CSV export, Templates)
Verify each item has monospace code pill + description text

Test YAML Copy Button

Scroll to "Example Workflow" section
Verify dark code panel shows "draft-reply.yaml" filename
Verify YAML content is visible in pre/code block
Click #copy-workflow-btn ("Copy")
Verify button text changes to "Copied!" with primary color styling
Wait 2000ms and verify button reverts to "Copy" with default styling
Verify clipboard contains the complete YAML workflow string

Verify Platform Cards

Scroll to "Growing Workflow Library" section
Verify library screenshot image loads
Count platform cards (should be 6, from marketplace data)
Verify each card has: logo or initial letter, platform name, workflow count
Click a platform card and verify it navigates to /integrations/{slug}
Click "Browse All Workflows" and verify navigation to /integrations

Verify All Links Work

Check hero "Get Started Free" -> docs.sidebutton.com/installation
Check hero "Documentation" -> docs.sidebutton.com
Check platform cards -> /integrations/{slug} for each
Check "Browse All Workflows" -> /integrations
Check Related Features: /features/ai-automation, /features/embed-buttons, /integrations
Check CTA "Get Started Free" -> docs install
Check CTA "View Documentation" -> docs.sidebutton.com/workflows

Verify Responsive Layout

Set viewport to 375px (mobile)
Verify building blocks grid collapses to single column
Verify platform grid becomes 2 columns
Set viewport to 768px (tablet) and verify building blocks 2-column, platforms 3-column
Set viewport to 1280px+ and verify platforms expand to 6-column row

Tips

Building block items use code elements for function names, styled as slate-100 pills with monospace font — these are not interactive, just styled inline code
Each category card has a unique color scheme: blue (Browser Actions), purple (AI Steps), orange (Control Flow), green (Data Handling) — icon background and icon color match
The example YAML includes 3 workflow steps: extract (CSS selector), generate (AI prompt with template variable), type (fill input with AI output) — this is a real workflow pattern
Platform cards are dynamically generated from getPlatforms() in ../../lib/marketplace — the first 6 non-multi platforms are shown with their actual workflow counts
Platform logo fallback: if platform.logoUrl is null, a colored square with the first letter of the platform name is shown
The copy button uses navigator.clipboard.writeText with the full workflow YAML string duplicated in the inline script
The CTA "View Documentation" links specifically to docs.sidebutton.com/workflows (not just docs root)
Three bg-slate-50 sections run consecutively (Library, Related Features) creating a continuous slate background area

Gotchas

Platform data is build-time dynamic: The platform cards and workflow counts are computed at build time from the marketplace module — they reflect the state of the data when the site was built, not live data
Copy button script is inline: The copy button JavaScript is in a <script> tag at the bottom of the page (not a component) — it uses document.getElementById('copy-workflow-btn') which only works after DOM load
YAML content duplicated: The workflow YAML exists in two places: the frontmatter exampleWorkflow variable (rendered in the template) and the inline script string (used for clipboard copy) — these must stay in sync manually
Library screenshot is lazy-loaded: /screenshots/library.png uses loading="lazy" — may not be visible immediately when scrolling to the section
Platform grid responsive breakpoints: The grid uses three breakpoints (grid-cols-2 / md:grid-cols-3 / lg:grid-cols-6) — at exactly 768px the jump from 2 to 3 columns can cause layout shifts
Building block cards have no hover effect: Unlike platform cards and related feature cards, the 4 category cards in the building blocks section have no explicit hover state — they are static display cards