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

homepage/_skill.md

20.5 KB

What This Is

The SideButton homepage — the main landing page at sidebutton.com. A 8-section marketing page built with Astro, targeting developers and engineering teams. Features: two-column hero with demo video placeholder, "Three layers of agent intelligence" explainer cards, 3-step quick-start terminal commands, knowledge packs showcase with browse link, community role templates grid (6 roles), MCP client compatibility pills, dual-CTA section (For Teams / Open Source), and testimonial quotes. The page emphasizes AI agents and knowledge packs rather than the previous browser automation / embed buttons framing.

URL Patterns

Pattern	Description
`/`	Homepage

Note: /demo no longer exists as a standalone page — it previously redirected to /. As of 2026-03-23 navigating to /demo lands on /.

Page Structure

[Skip to main content — hidden, keyboard-only]
+--[Header: sticky, z-50]----------------------------------------------+
|  Logo | Knowledge Packs | Docs | Contribute | [Book a Demo] [GitHub]  |
|  (< md: Logo | [☰ Hamburger])                                        |
+--[Mobile menu: hidden by default, slides down on hamburger click]----+
|  Book a Demo | Knowledge Packs | Docs | Contribute | GitHub          |
+----------------------------------------------------------------------+
|                                                                      |
|  [1. HERO — 2-column layout]                                         |
|  Left:                                                               |
|    "AI agents that don't need onboarding" (H1)                       |
|    "Self-learning agents that actually get stuff done."              |
|    [Quick Start] [Install Extension]                                 |
|    Trust badges: Free & open source | Runs locally |                 |
|                  Works with Claude Code, Cursor & more               |
|  Right:                                                              |
|    Demo video player (dark, "Demo video coming soon")               |
|    [Play demo video] button (play icon overlay)                      |
|    "3 bugs found in 4 min" badge (green, below video)               |
|                                                                      |
|  [2. WHAT IS SIDEBUTTON]                                             |
|  Label: "WHAT IS SIDEBUTTON"                                         |
|  H2: "Three layers of agent intelligence"                            |
|  3 cards: Knowledge Packs | Browser MCP | 40 Step Types              |
|                                                                      |
|  [3. QUICK START]                                                    |
|  Label: "QUICK START"                                                |
|  H2: "Up and running in 60 seconds"                                  |
|  3 terminal command blocks (each with label + command + copy button):  |
|    1. Install & start       → npx sidebutton@latest                  |
|    2. Add to Claude Code    → claude mcp add sidebutton ...          |
|    3. Install a knowledge pack → sidebutton install github.com       |
|                                                                      |
|  [4. KNOWLEDGE PACKS]                                                |
|  Label: "KNOWLEDGE PACKS"                                            |
|  H2: "Domain knowledge, packaged"                                    |
|  Description + "Browse all knowledge packs →" link → /skills        |
|  "Publish knowledge packs for free — sidebutton init → sidebutton publish" |
|                                                                      |
|  [5. COMMUNITY ROLES]                                                |
|  Label: "COMMUNITY ROLES"                                            |
|  H2: "Reusable role templates for AI agents"                         |
|  6 role cards: SE | QA | PM | SD | HR | Sales                        |
|                                                                      |
|  [6. COMPATIBILITY]                                                  |
|  Label: "COMPATIBILITY"                                              |
|  H2: "Works with any MCP client"                                     |
|  4 pills: Claude Code | Cursor | ChatGPT | Any MCP client            |
|                                                                      |
|  [7. CTA — "Ready to get started?"]                                  |
|  H2: "Ready to get started?"                                         |
|  2 cards: FOR TEAMS (Book a Demo) | OPEN SOURCE (Quick Start)        |
|                                                                      |
|  [8. TESTIMONIALS]                                                   |
|  3 quote cards (Engineering Lead | Senior Developer | QA Manager)    |
|                                                                      |
+--[Footer]------------------------------------------------------------+
|  Logo + "© 2026 SideButton. Free & open source under Apache 2.0."   |
|  GitHub | Docs | Knowledge Packs | Contribute |                      |
|  Privacy | Terms | Content Policy | Imprint | [email protected]    |
+----------------------------------------------------------------------+

Key Elements

Accessibility

Element	Selector	Notes
Skip to main content	`link "Skip to main content"`	Hidden link, first element in DOM; visible on keyboard focus

Header

Element	Selector	Notes
Logo	`banner > link` (first)	SideButton "S" logo + "SideButton" text → `/`
Knowledge Packs	`link "Knowledge Packs"`	→ `/skills`
Docs	`link "Docs"`	External → `docs.sidebutton.com`
Contribute	`link "Contribute"`	→ `/contribute`
Book a Demo	`link "Book a Demo"` (in banner)	Green button → Typeform external link
GitHub	`link "View SideButton on GitHub"`	Dark button → github.com/sidebutton/sidebutton
Mobile menu button	`button[aria-label="Open menu"]` (`#mobile-menu-button`)	Hamburger icon (3-line SVG); hidden on desktop (`display:none`), visible below `md` breakpoint

Mobile Navigation (< md breakpoint)

Element	Selector	Notes
Mobile menu panel	`#mobile-menu`	Hidden by default (`class="hidden md:hidden"`); toggled by hamburger button
Book a Demo (mobile)	`#mobile-menu link "Book a Demo"`	First link in mobile panel
Knowledge Packs (mobile)	`#mobile-menu link "Knowledge Packs"`	→ `/skills`
Docs (mobile)	`#mobile-menu link "Docs"`	→ `docs.sidebutton.com`
Contribute (mobile)	`#mobile-menu link "Contribute"`	→ `/contribute`
GitHub (mobile)	`#mobile-menu link "GitHub"`	→ GitHub repo

1. Hero Section

Element	Selector	Notes
H1 heading	`heading "AI agents that don't need onboarding"`	Two-line heading
Subtitle	text "Self-learning agents that actually get stuff done."	Below H1
Quick Start button	`link "Quick Start"`	Dark/primary button → docs quick start
Install Extension	`link "Install Extension"`	Outline button with download icon → Chrome Web Store
Trust: Open source	text "Free & open source"	Green checkmark badge
Trust: Local	text "Runs locally"	Green checkmark badge
Trust: AI tools	text "Works with Claude Code, Cursor & more"	Green checkmark badge
Demo video thumbnail	`#hero-video-thumb` (`div[role="button"][aria-label="Play demo video"]`)	Dark placeholder with play icon overlay + "Demo video coming soon" text; clicking hides thumbnail and swaps to inline iframe
Demo video iframe	`iframe` inside `.hero-video-wrap`	Loads `about:blank` (no real video yet); appears after clicking Play; not in accessibility tree
Demo result badge	`.hero-outcome-badge`	"3 bugs found in 4 min" green badge below video player; non-interactive

2. What Is SideButton Section

Element	Selector	Notes
Section label	text "WHAT IS SIDEBUTTON"	Uppercase teal/green label
Section heading	`heading "Three layers of agent intelligence"`	H2
Knowledge Packs card	`heading "Knowledge Packs"`	"Domain knowledge, automations, and role playbooks packaged per web app."
Browser MCP card	`heading "Browser MCP"`	"MCP tools + Chrome extension give AI agents real browser control — navigate, click, type, extract, snapshot."
40 Step Types card	`heading "40 Step Types"`	"YAML workflows with browser automation, shell commands, LLM integration, and control flow — bundled inside knowledge packs."

3. Quick Start Section

Element	Selector	Notes
Section label	text "QUICK START"	Uppercase teal/green label
Section heading	`heading "Up and running in 60 seconds"`	H2
Install command	text `npx sidebutton@latest`	Label: "Install & start"; dark terminal block
MCP add command	text `claude mcp add sidebutton --transport sse http://localhost:9876/mcp`	Label: "Add to Claude Code"
Knowledge pack command	text `sidebutton install github.com`	Label: "Install a knowledge pack"
Copy buttons (×3)	`button "Copy command"`	One per terminal block; ref=23, ref=24, ref=25

4. Knowledge Packs Section

Element	Selector	Notes
Section label	text "KNOWLEDGE PACKS"	Uppercase teal/green label
Section heading	`heading "Domain knowledge, packaged"`	H2
Description	text "Each knowledge pack teaches agents how to work with a specific web app..."	Centered paragraph
Browse link	`link "Browse all knowledge packs →"`	→ `/skills`
Publish hint	text "Publish knowledge packs for free" + code `sidebutton init` → `sidebutton publish`	Below browse link

5. Community Roles Section

Element	Selector	Notes
Section label	text "COMMUNITY ROLES"	Uppercase teal/green label
Section heading	`heading "Reusable role templates for AI agents"`	H2
Subtitle	text "Each role teaches an AI agent a specific job function."	Below H2
SE card	text "Software Engineer"	Colored square icon + role label
QA card	text "Quality Assurance"	Colored square icon + role label
PM card	text "Project Manager"	Colored square icon + role label
SD card	text "Skill Discovery"	Colored square icon + role label
HR card	text "Human Resources"	Colored square icon + role label
Sales card	text "Sales"	Colored square icon + role label

6. Compatibility Section

Element	Selector	Notes
Section label	text "COMPATIBILITY"	Uppercase teal/green label
Section heading	`heading "Works with any MCP client"`	H2
Claude Code pill	text "Claude Code"	Orange "C" icon + label
Cursor pill	text "Cursor"	Yellow "C" icon + label
ChatGPT pill	text "ChatGPT"	Green "G" icon + label
Any MCP client pill	text "Any MCP client"	"+" icon + label

7. CTA Section

Element	Selector	Notes
Section heading	`heading "Ready to get started?"`	H2
Teams card label	text "FOR TEAMS"	Uppercase green label
Teams description	text "See SideButton in action for your engineering team."	Below label
Book a Demo button	`link "Book a Demo"` (in main)	Dark/primary button → Typeform
Open source card label	text "OPEN SOURCE"	Uppercase green label
Open source description	text "Install and start using SideButton in 60 seconds."	Below label
Quick Start link	`link "Quick Start"` (in main)	Outline button → docs/quick start

8. Testimonials Section

Element	Selector	Notes
Quote 1	text "The QA agent found bugs our manual testing missed."	— Engineering Lead
Quote 2	text "It figured out our legacy app in minutes, no docs needed."	— Senior Developer
Quote 3	text "We pointed it at our CMS and it just… worked."	— QA Manager

Footer

Element	Selector	Notes
Logo	`contentinfo > link` (first)	SideButton "S" logo + text → `/`
Copyright	text "© 2026 SideButton. Free & open source under Apache 2.0."	Below logo
GitHub link	`link "GitHub"` (in contentinfo)	→ GitHub repo
Docs link	`link "Docs"` (in contentinfo)	→ docs.sidebutton.com
Knowledge Packs link	`link "Knowledge Packs"` (in contentinfo)	→ `/skills`
Contribute link	`link "Contribute"` (in contentinfo)	→ `/contribute`
Privacy	`link "Privacy"`	→ `/privacy`
Terms	`link "Terms"`	→ `/terms`
Content Policy	`link "Content Policy"`	→ `/content-policy`
Imprint	`link "Imprint"`	→ `/imprint`
Email	`link "[email protected]"`	mailto link

Floating Elements

Element	Selector	Notes
Cookie consent dialog	`#cookie-consent` (`div[role="dialog"]`)	Fixed bottom bar; shows on first visit; contains Accept/Reject buttons + `link "Privacy Policy"`

Data Model

Page Sections (render order)

#	Section Label	H2	Notes
1	—	"AI agents that don't need onboarding" (H1)	Hero, 2-column
2	WHAT IS SIDEBUTTON	"Three layers of agent intelligence"	3 feature cards
3	QUICK START	"Up and running in 60 seconds"	3 terminal commands
4	KNOWLEDGE PACKS	"Domain knowledge, packaged"	Browse + publish
5	COMMUNITY ROLES	"Reusable role templates for AI agents"	6 role cards
6	COMPATIBILITY	"Works with any MCP client"	4 MCP client pills
7	—	"Ready to get started?"	Dual CTA cards
8	—	—	Testimonials (3 quotes)

Quick Start Commands

Step	Label	Command
1	Install & start	`npx sidebutton@latest`
2	Add to Claude Code	`claude mcp add sidebutton --transport sse http://localhost:9876/mcp`
3	Install a knowledge pack	`sidebutton install github.com`

Community Roles

Role	Description
SE	Software Engineer
QA	Quality Assurance
PM	Project Manager
SD	Skill Discovery
HR	Human Resources
Sales	Sales

MCP Clients Shown

Client	Icon Color	Notes
Claude Code	Orange "C"	First pill
Cursor	Yellow "C"	Second pill
ChatGPT	Green "G"	Third pill
Any MCP client	"+" icon	Fourth pill

External Links

Target	Destination
Install Extension	chromewebstore.google.com (Chrome Web Store)
Book a Demo	Typeform (lf5572kiznk.typeform.com/to/vBCInKQ8)
GitHub	github.com/sidebutton/sidebutton
Docs	docs.sidebutton.com

States

Header

State	Trigger	Visual Indicator
Sticky	Always	`position: sticky; top: 0; z-index: 50` — header stays visible on scroll
Mobile menu closed	Default (< md breakpoint)	Hamburger icon visible; `#mobile-menu` has `class="hidden"`
Mobile menu open	Click hamburger button	`#mobile-menu` panel slides down with 5 nav links (Book a Demo, Knowledge Packs, Docs, Contribute, GitHub)

Hero Section

State	Trigger	Visual Indicator
Default	Page load	H1 + subtitle + buttons + trust badges visible; video thumbnail shows placeholder with play icon
Video playing	Click `#hero-video-thumb`	Thumbnail hidden (`display: none`); inline `<iframe>` replaces it (currently loads `about:blank` — no real video yet)

Quick Start Copy Buttons

State	Trigger	Visual Indicator
Idle	Default	Copy icon (clipboard SVG) visible in each terminal block
Copied	Click copy button	Icon changes briefly (check icon); reverts after ~2s; button text remains "Copy command" in accessibility tree

Cookie Consent

State	Trigger	Visual Indicator
Visible	First visit (no cookie set)	Fixed bottom bar slides up; `#cookie-consent` has no `translate-y-full` class
Dismissed	Click Accept or Reject	Bar slides down via CSS `transform: translate-y-full`; element remains in DOM but off-screen; preference saved in cookie

Common Tasks

1. Get started (developer path)

Navigate to /
Click link "Quick Start" (hero) → docs quick start guide

2. Install the Chrome extension

Navigate to /
Click link "Install Extension" in hero → Chrome Web Store

3. Copy quick start commands

Scroll to heading "Up and running in 60 seconds"
Three terminal blocks visible — click button "Copy command" on any block
Paste into terminal

4. Browse knowledge packs

Navigate to /
Click link "Browse all knowledge packs →" → /skills OR click link "Knowledge Packs" in header → /skills

5. Book a team demo

Navigate to /
Click link "Book a Demo" in header OR in the CTA section "FOR TEAMS" card
Opens Typeform in new tab

6. View GitHub repo

Click link "View SideButton on GitHub" in header OR click link "GitHub" in footer

Tips

The /demo page no longer exists — navigating to /demo redirects to /
The hero video player shows "Demo video coming soon" placeholder text; clicking Play swaps to a blank iframe — no real video content yet
Three copy buttons on the quick start section all use button "Copy command" selector — disambiguate by ref or sequential position
Section labels (QUICK START, KNOWLEDGE PACKS, etc.) use uppercase monospace styling with teal/green color
"Book a Demo" appears in both the header and the CTA section — both link to the same Typeform
Footer nav is a single row, not the previous 6-column grid
Community Role cards (SE, QA, PM, SD, HR, Sales) are non-interactive — no links or click handlers; display-only
Mobile menu has a different link order than desktop: Book a Demo first, followed by Knowledge Packs, Docs, Contribute, GitHub
The header is position: sticky with z-index: 50 — it never scrolls out of view
A link "Skip to main content" exists as the first DOM element — standard accessibility pattern, visible only on keyboard focus

Gotchas

/demo redirects to /: The standalone interactive demo page no longer exists as of the 2026 redesign. Links or tests targeting /demo will land on the homepage.
Removed sections: The following sections from the previous homepage are GONE: pricing link in nav, "Automate your browser in seconds" hero, Embed Buttons feature, "Try Live Workflows" section, MCP tabbed config panel (Claude/Cursor/Windsurf), Workflow Marketplace role grid, SideButton Cloud waitlist, "How It Works" 2-step section, "Build Share & Install" section.
Removed nav items: Chat, Browser MCP, AI Automations dropdown, Integrations dropdown, Pricing, Solutions are no longer in the navigation. Current nav: Knowledge Packs | Docs | Contribute | Book a Demo | GitHub.
No Report a Bug FAB: Contrary to previous documentation, there is NO "Report a Bug" floating action button on the homepage or public pages. The only fixed elements are the sticky header and the cookie consent bar.
Two "Book a Demo" links: Both the header and the CTA section card link to the same Typeform. Use link "Book a Demo" — but there are two; use ref to disambiguate if needed.
Two "Quick Start" links: One in hero, one in CTA card — both same selector link "Quick Start".
Demo video iframe is blank: Clicking #hero-video-thumb hides the thumbnail and inserts an <iframe src="about:blank">. The iframe is not in the accessibility tree — snapshot won't show it. No real video content loads.
Cookie consent stays in DOM: After Accept/Reject, #cookie-consent is NOT removed — it's hidden via CSS translate-y-full transform. Tests checking dialog existence will still find it; check visibility or translate-y-full class instead.
Mobile menu link order differs from desktop: Desktop nav: Knowledge Packs | Docs | Contribute | Book a Demo | GitHub. Mobile menu: Book a Demo | Knowledge Packs | Docs | Contribute | GitHub (Book a Demo promoted to first position).
Copy button state is visual-only: After clicking, the button icon changes briefly but the accessible name stays "Copy command" — don't assert on text change for copied state.