Knowledge Packs Directory — SideButton Marketing Website Knowledge Module

What This Is

The Knowledge Packs directory at /skills is the public-facing catalog of installable skill packs for SideButton AI agents. It lets users browse 21 available packs and 35 coming-soon packs, search by name/description, filter by category, and view detail pages with module lists, roles, and install commands. A "Publish knowledge packs for free" banner encourages community contributions via /contribute. No authentication required.

URL Patterns

Route	Purpose
/skills	Directory listing — all available + coming soon packs
/skills/{slug}	Detail page for a single pack (e.g., /skills/github, /skills/sidebutton)

No query params observed — search and filters are client-side state only.

Page Structure — Directory (/skills)

+--[Header: logo, nav, Book a Demo, GitHub]--+
|                                             |
|  [H1: Knowledge Packs]                     |
|  [Description paragraph]                   |
|                                             |
|  [Publish CTA banner: init → publish]      |
|                        [Learn how button]   |
|                                             |
|  [Search box]  [All][devops][marketing]...  |
|                                             |
|  AVAILABLE (N)                              |
|  [Card] [Card] [Card]  ← 3-column grid     |
|  [Card] [Card] [Card]                       |
|  ...                                        |
|                                             |
|  COMING SOON (35)                           |
|  [Card] [Card] [Card]  ← 3-column grid     |
|  ...                                        |
|                                             |
|  [Missing a knowledge pack? CTA]           |
|                                             |
+--[Footer]-----------------------------------+

Page Structure — Detail (/skills/{slug})

+--[Header]-----------------------------------+
|                                             |
|  [Breadcrumb: Knowledge Packs / {Name}]    |
|                                             |
|  [Logo] [Pack Name]                        |
|         [Description]                       |
|         [Status badge] [N modules] [Free]  |
|                                             |
|  [Install command block — dark background] |
|                                             |
|  [Modules list]        | [Sidebar]         |
|  - module card         | ROLES             |
|  - module card         |   [badge] [badge] |
|  - module card         | LINKS             |
|                        |   Website →       |
|                        |   Source code →    |
|                        |   Documentation → |
|                                             |
+--[Footer]-----------------------------------+

Key Elements — Directory

Element	Selector / Ref	Notes
Page heading	heading "Knowledge Packs"	H1, top of main
Description	Paragraph below H1	Static text about installable domain knowledge
Publish CTA banner	Container with "Publish knowledge packs for free"	Shows sidebutton init → sidebutton publish command
Learn how link	link "Learn how"	Green button in CTA banner → /contribute
Search box	searchbox "Search knowledge packs..."	Filters Available cards in real-time against data-searchable (name + description + module names); Coming Soon unaffected
Category: All	button "All"	Shows all available packs (default active). CSS: filter-btn class, is-active when selected
Category: devops	button "devops"	Filters to devops-tagged packs (SideButton)
Category: marketing	button "marketing"	Filters to marketing-tagged packs (Reddit)
Category: operations	button "operations"	Filters to operations-tagged packs (GitHub, Jira, Slack)
Category: personal	button "personal"	Filters to personal-tagged packs (Spotify, YouTube Music)
Category: research	button "research"	Filters to research-tagged packs (Wikipedia)
Category: sales	button "sales"	Filters to sales-tagged packs (LinkedIn)
Available heading	heading "Available (N)"	Count updates dynamically with search/filter
Pack card (Available)	link containing heading "{Pack Name}"	Entire card is a link to /skills/{slug}
Card: logo	img inside card link	App icon or letter-initial avatar
Card: name	heading inside card link	Pack name as H3
Card: status badge	Text "Featured" or "Available"	Green badge on each card
Card: module/role count	Text like "3 modules · 2 roles"	Below name
Card: description	Paragraph text	One-line description
Card: install command	Code text sidebutton install {name}	Monospace, gray background
Card: version + date	Text like "v1.0.0 · Mar 2026"	Bottom of card
Card: install count	Text like "Installed 47 times"	Bottom of card
Card: data-category	data-category attribute on .pack-card	Single category string for curated packs; empty for domain packs
Card: data-searchable	data-searchable attribute on .pack-card	Contains name + description + module names; used by search filter
Coming Soon heading	heading "Coming soon (35)"	Static count, unaffected by search/filter
Coming Soon card	Non-link card with heading + description	Not clickable, shows "Coming soon" badge
Missing CTA heading	heading "Missing a knowledge pack?"	Bottom of page
Contribute link	link "Learn how to contribute"	→ /contribute

Key Elements — Detail Page

Element	Selector / Ref	Notes
Breadcrumb nav	navigation containing link "Knowledge Packs"	Breadcrumb trail at top; page title = "{Pack Name} Knowledge Pack | SideButton"
Back link	link "Knowledge Packs" (in breadcrumb)	Returns to directory listing
Pack logo	img before heading	Large icon; packs without logo show no img (letter-initial on card only)
Pack name	heading "{Pack Name}"	H1 in main
Description	p below heading	One-line pack description (not in accessibility tree — use JS document.querySelector('main p'))
Status badge	span with text "Available"	Always "Available" on detail pages — "Featured" badge only appears on directory cards
Module count	span with text like "2 modules"	Not in accessibility tree
Price label	span with text "Free"	Not in accessibility tree
Install block	code containing sidebutton install {name}	Dark background container; $ prefix is a separate span
Modules heading	heading "Modules"	Section in region landmark
Module card	H3 heading + sibling paragraph	Module name as H3, description in next sibling paragraph; 0-module packs show heading with empty list
Roles heading	heading "Roles"	In complementary sidebar (sticky top-24)
Role badges	span with classes rounded-full capitalize	Pill-style badges (e.g., "software engineer", "qa", "sd") — lowercase in DOM
Links heading	heading "Links"	In complementary sidebar
Website link	link "{Name} website →"	External link to app site
Source code link	link "Source code →"	External link to repo
Documentation link	link "Documentation →"	External link to docs

Data Model

Pack Types

The directory contains two types of Available packs:

Type	Count	Slug Pattern	Category	Example
Curated	10	Short name (github)	Assigned (one per pack)	GitHub → /skills/github
Domain	10	Domain name (github.com)	None (empty data-category)	GitHub → /skills/github.com
Standalone	1	Varies	None	sidebutton-website → /skills/sidebutton.com

Curated packs have friendly names, categories, and enriched data-searchable (includes module names). Domain packs use the registry domain as slug and have minimal searchable content. Only curated packs appear under category filters; domain packs show under "All" only.

Category → Pack Mapping

Category	Curated Packs
devops	SideButton
operations	GitHub, Jira, Slack
marketing	Reddit
sales	LinkedIn
personal	Spotify, YouTube Music
research	Wikipedia
(none)	Agent Ops, SideButton Dashboard, Skill Discovery, sidebutton-website + all 10 domain packs

Knowledge Pack (Available)

Field	Type	Values	Example
name	string	Pack display name	"GitHub"
slug	string	URL-safe identifier	"github" (curated) or "github.com" (domain)
description	string	One-line summary	"Automate pull requests, issues, and releases"
status	enum	Featured, Available	"Available" (only SideButton curated is "Featured" on directory)
logo	image	App icon or letter initial	GitHub octocat (some packs use text-based letter avatar)
modules	array	List of {name, description}	[{name: "pull-requests", desc: "Review, create, and merge pull requests"}]
module_count	number	Count of modules	2
roles	array	Role names	["Software Engineer"]
role_count	number	Count of roles	1
category	string	Single category or empty	"operations" (curated only; domain packs always empty)
install_command	string	CLI install command	"sidebutton install github"
version	string	Semver	"v1.0.0"
date	string	Publish month	"Mar 2026"
install_count	number	Total installs	47
price	string	Always "Free" currently	"Free"

Knowledge Pack (Coming Soon)

Field	Type	Values	Example
name	string	App name	"Asana"
logo	image	App icon or letter initial	Asana icon (Wave, Workday use text-based avatars)
module_count	number	Always 0	0
status	enum	Always "Coming soon"	"Coming soon"
description	string	One-line summary	"Work management platform for teams"

States

State	Trigger	Visual Indicator
Default	Page load /skills	"All" button active (is-active class), all 21 available packs shown in 3-column grid, 35 coming soon below
Search filtered	Type in search box	Available count updates (e.g., "Available (2)"), only matching cards shown; Coming Soon unaffected. Matches against data-searchable (name + description + module names)
Category filtered	Click category button (devops/marketing/etc.)	Active button gets is-active class (green border/text), Available count updates, only curated packs with matching data-category shown; domain packs hidden; Coming Soon unaffected
Search + category combined	Type in search while a category is active	AND logic — pack must match both category AND search term. E.g., "operations" + "jira" = Available (1)
Empty search results	Search with no matches	"Available (0)" heading + "No knowledge packs match your search." message; Coming Soon still shown
Empty category results	Category with search that has no overlap	Same empty state as above
Detail page	Click an Available pack card	Navigates to /skills/{slug} with breadcrumb, pack header, install command, modules list, sidebar
Detail page (0 modules)	View pack with 0 modules	"Modules" heading shown with empty content area — no "no modules" message
Detail page (no logo)	View pack without logo image	No logo img element rendered (unlike directory card which shows letter-initial avatar)
Cookie dialog	First visit	Modal dialog with "Cookie Notice", Accept/Reject buttons, Privacy Policy link

Common Tasks

1. Search for a knowledge pack

1. Navigate to /skills
2. Click the search box (searchbox "Search knowledge packs...")
3. Type the pack name (e.g., "github")
4. Available cards filter in real-time; count in heading updates
5. Click a matching card to view details

2. Filter by category

1. On /skills, click a category button (e.g., button "sales")
2. Available section filters to matching packs; count updates
3. Click button "All" to reset filter

3. View pack details

1. Click any Available pack card (entire card is a link)
2. Detail page loads with breadcrumb, pack info, install command
3. Review modules list and roles in sidebar
4. Click link "Knowledge Packs" in breadcrumb to return to directory

4. Copy install command

1. On detail page, locate the dark "Install" block
2. The command is displayed as $ sidebutton install {name}
3. Select and copy the command text

5. Navigate to contribute guide

1. Click link "Learn how" in the publish CTA banner, OR
2. Click link "Learn how to contribute" at bottom of page
3. Both navigate to /contribute

Tips

• Search is client-side and filters instantly — no debounce or Enter key needed
• Search and category filters use AND logic when combined — a pack must match both to appear
• Category filters only affect curated packs (those with a data-category attribute); domain-based packs (slug = domain name) appear only under "All"
• Coming Soon cards are static and not filterable by search or category
• Available cards show the full install command directly on the card — no need to open detail page just to get it
• Pack cards with app icons use the real logo; packs without icons show a colored letter-initial avatar
• The "Featured" badge appears only on the SideButton curated pack in the directory; on detail pages, all packs show "Available"
• The active category button gets the is-active CSS class (filter-btn is-active) — detectable in DOM even though not exposed in accessibility tree
• Card filtering uses display: none on .pack-card elements (cards remain in DOM, just hidden)
• Search matches against data-searchable attribute which includes pack name, description, AND module names for curated packs

Gotchas

• Coming Soon section count (35) never changes regardless of search or filter input — only the Available section is dynamic
• Search matches against data-searchable which includes module names for curated packs but NOT for domain packs — domain pack searchable content is sparser (name + description only, no module names)
• Category filter buttons have no visible "active" state difference in the accessibility tree — the is-active CSS class is only detectable via DOM inspection or evaluate(), not via snapshot()
• Domain-based packs (slug = domain name) never appear under category filters — they have empty data-category. Only visible under "All"
• The install command on cards may be truncated with "..." for long package names (e.g., "sidebutton install github..." for "github.com") — the detail page shows the full command
• Detail page markdown content returns empty from snapshot(includeContent=true) — use evaluate() with DOM queries for description, badges, and install command text
• Detail page description, status badge, module count, price label, and install command are rendered as span/code elements not exposed in the accessibility tree — requires evaluate() or extract() to read
• Some Coming Soon cards (Wave, Workday) show letter initials without an img element — their logos are text-based avatars
• The sidebar on detail pages uses sticky top-24 positioning — it follows the viewport when scrolling through long module lists
• Cookie dialog may reappear in snapshot results even after accepting — snapshots can trigger a re-render that re-shows it