SideButton Knowledge Module

SideButton Knowledge Packs Directory — Knowledge Module

SideButton knowledge module — UI selectors, data model, and page states documenting Knowledge Packs Directory.

Available free v1.1.0 Browser

$ sidebutton install sidebutton

Download ZIP

Knowledge Packs Directory

What This Is

The Knowledge Packs directory at /skills is the public-facing catalog of installable knowledge packs ("skills") for SideButton AI agents. As of late-April 2026 it shows one flat list of 16 available packs with two side-by-side CTA cards (USE / CREATE) at the top, a client-side search input below, and a "Missing a skill for your app?" footer block.

The module also covers two sub-routes:

/skills/{slug} — pack detail pages that render the full installed pack content (H1 = {Pack Name} Skill for MCP Agent, then the pack's _skill.md tree). Includes Copy install command button, Download ZIP link, in-page table-of-contents nav, and a sticky right-side complementary sidebar with source/docs/coverage links.
/skills/{slug}/roles/{role} — role playbook pages that render an individual role file from a pack (H1 = {Role Display Name} — {Pack Name} Role Playbook). Includes the same install + download buttons, breadcrumb nav, and bottom links to siblings (← All {Pack} roles, {Pack} overview).

No authentication required for any /skills* route.

URL Patterns

Route	HTTP	Purpose
`/skills`	200	Directory listing — flat grid of all available packs
`/skills/{slug}`	200	Pack detail page (e.g., `/skills/sidebutton`, `/skills/agents`)
`/skills/{slug}/roles/{role}`	200	Role playbook page (e.g., `/skills/agents/roles/se`)
`/skills/{nonexistent-slug}`	302 → `/skills`	Unknown pack slugs redirect to the directory (not a 404)

No query params observed — search state is purely client-side (not reflected in URL).

Page Title & Meta

Page	`<title>`	H1
`/skills`	`AI Agent Tools & Knowledge Packs — MCP Server`	`Knowledge Packs for Coding Agents`
`/skills/{slug}`	`{Pack Name} Skill for MCP Agent` (e.g. `SideButton Skill for MCP Agent`)	`{Pack Name} Skill for MCP Agent`
`/skills/{slug}/roles/{role}`	`{Role Display Name} · {Pack Name}` (e.g. `Software Engineer · Autonomous Agents`)	`{Role Display Name} — {Pack Name} Role Playbook`

Page Structure — Directory (`/skills`)

+--[Header: marketing layout]----------------------------+
|                                                        |
|  H1: Knowledge Packs for Coding Agents                 |
|  Subtitle: "AI agent tools and installable knowledge   |
|             packs for the SideButton MCP server.       |
|             Each pack teaches coding agents how to     |
|             operate a specific web app — selectors,    |
|             data models, workflows, and role           |
|             playbooks."                                |
|                                                        |
|  +--[USE card]----------+  +--[CREATE card]---------+  |
|  | USE                  |  | CREATE                 |  |
|  | How to use agentic   |  | Create a skill for     |  |
|  | AI skills →          |  | agentic AI →           |  |
|  | "Install a skill,    |  | "Scaffold, validate,   |  |
|  |  invoke its          |  |  publish — 30 minutes, |  |
|  |  workflows, inspect  |  |  no fee."              |  |
|  |  run logs."          |  |                        |  |
|  | → /agentic-ai-skills |  | → /create-agentic-ai-  |  |
|  |                      |  |   skill                |  |
|  +----------------------+  +------------------------+  |
|                                                        |
|  [Search box: "Search knowledge packs..."]             |
|                                                        |
|  AVAILABLE (16)        ← uppercase label, dynamic count|
|  +---+ +---+ +---+                                     |
|  | A | | A | | G |   (3-column grid of pack cards;     |
|  +---+ +---+ +---+    each card = letter avatar +      |
|  | G | | J | | L |    name + slug · domain · N         |
|  +---+ +---+ +---+    modules · M roles + description) |
|  | P | | R | | S |                                     |
|  +---+ +---+ +---+                                     |
|  ...                                                   |
|                                                        |
|  H3: Missing a skill for your app?                     |
|  "Skill packs are just markdown and YAML. Build one    |
|   for your favorite web app and publish it for free."  |
|  [Create a skill for agentic AI] → /create-agentic-    |
|   ai-skill                                             |
+--------------------------------------------------------+
[Footer: standard]
[Floating: Report a Bug button (bottom-right)]

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

+--[Header: marketing layout]----------------------------+
|                                                        |
|  [breadcrumb: Knowledge Packs]                         |
|  [Letter avatar]                                       |
|  Subtitle pill: MCP Agent Skill — {slug}               |
|  H1: {Pack Name} Skill for MCP Agent                   |
|  Pack description (from skill-pack.json)               |
|                                                        |
|  Status pills: [Available] [free] [v{ver}] [{capability}]|
|  Install command card:                                 |
|    $ sidebutton install {slug}     [Copy] button       |
|  [Download ZIP] link → /api/skill-packs/{domain}/zip   |
|                                                        |
|  +--[Pack navigation: in-page TOC]--+                  |
|  | Section / Module links             | (4-6 links)   |
|  +-----------------------------------+                  |
|                                                        |
|  H2: {Pack root H1 mirror}                             |
|  H3: What This Is                                      |
|  ... full _skill.md content rendered as markdown ...   |
|                                                        |
+----------------------------+---------------------------+
                             | [complementary sidebar]   |
                             | (icon links — share?)     |
                             | link "{domain}"           |
                             | link "Source"             |
                             | link "Docs"               |
                             | div ".md 100%" (coverage) |
                             +---------------------------+
[Footer: standard]

Page Structure — Role Playbook (`/skills/{slug}/roles/{role}`)

+--[Header: marketing layout]----------------------------+
|                                                        |
|  [breadcrumb: Knowledge Packs / {Pack} / Roles]        |
|  H1: {Role Display Name} — {Pack Name} Role Playbook   |
|  [Copy install command]  [Download ZIP]                |
|  [Pack navigation: in-page TOC]                        |
|                                                        |
|  H2: {Role doc H1 mirror}                              |
|  ... role file content rendered as markdown ...        |
|                                                        |
|  ← All {Pack} roles                                    |
|  {Pack} overview                                       |
|                                                        |
+----------------------------+---------------------------+
                             | [complementary sidebar]   |
                             | (icon links)              |
                             +---------------------------+
[Footer: standard]

Key Elements

Directory page (`/skills`)

Page header

Element	Selector	Notes
H1	`heading "Knowledge Packs for Coding Agents"`	Primary page title
Subtitle	text below H1	Three-sentence intro

Top CTA cards (UPDATED late-April 2026)

Element	Selector	Notes
USE card link	first `link` in main after H1	Pill label "USE"; → `/agentic-ai-skills`
CREATE card link	second `link` in main after H1	Pill label "CREATE"; → `/create-agentic-ai-skill`

⚠️ Old "Publish knowledge packs for free" banner with sidebutton init / sidebutton publish code blocks has been REMOVED. Tests that snapshot for those code blocks will fail.

Element	Selector	Notes
Search input	`searchbox "Search knowledge packs..."`	Client-side filter; matches name AND description AND slug AND domain (verified by typing `linkedin` → 1 result)

Available section

Element	Selector	Notes
Section heading	`heading "Available (16)"` (H2)	Count is dynamic — reflects filtered total. Empty filter shows "Available (0)".
Pack card	`link "{Pack Name}"`	Entire card is a single link → `/skills/{slug}`
Pack letter avatar	First character of name in colored badge (img/div)	Visual only; not exposed in a11y tree
Pack metadata text	text "{slug} · {domain} · {N} modules · {M} roles"	Below name; `· {domain}` segment omitted when pack has no domain
Pack description	text (truncated with `…` ellipsis at end)	Short blurb

Footer CTA (UPDATED late-April 2026)

Element	Selector	Notes
Heading	`heading "Missing a skill for your app?"` (H3)	Was previously "Missing a knowledge pack?"
Create link	`link "Create a skill for agentic AI"`	→ `/create-agentic-ai-skill` (was: "Learn how to contribute" → `/contribute`)

16 currently available packs (verified 2026-04-26)

Pack Name	Slug	Domain	Modules	Roles
Autonomous Agents	`agents`	—	1	4
AICTPO AI Coding Agents	`aictpo`	aictpo.com	7	0
GitHub Platform	`github`	github.com	0	1
Google Ads Search Platform	`google-ads`	ads.google.com	0	1
Jira Cloud	`jira`	atlassian.net	0	1
LinkedIn Outreach Platform	`linkedin`	linkedin.com	0	1
Performance Marketing	`marketing`	—	6	2
Reddit Community	`reddit`	reddit.com	0	1
Scoopd Mobile App	`scoopd`	—	0	1
SideButton	`sidebutton`	sidebutton.com	13	1
SideButton Dashboard	`sidebutton-dashboard`	sidebutton.local	7	0
Slack Workspace	`slack`	slack.com	0	1
Spotify Music	`spotify`	spotify.com	0	0
Wikipedia	`wikipedia`	wikipedia.org	0	0
Writing Standards	`writing`	—	5	2
YouTube Music	`youtube-music`	music.youtube.com	0	0

⚠️ The sidebutton pack module count dropped from 21 to 13 — the published pack has been re-scoped vs older verifications. Don't assert a constant module count.

Pack detail page (`/skills/{slug}`)

Element	Selector	Notes
Breadcrumb	`navigation > link "Knowledge Packs"`	First in main; → `/skills`
Letter avatar	text/div with first letter (e.g. "S")	Visual only
Subtitle pill	text "MCP Agent Skill — {slug}"	Above H1
H1	`heading "{Pack Name} Skill for MCP Agent"`	Primary heading
Description	paragraph below H1	From `skill-pack.json` `description` field
Status pills	inline text/spans	Sequence: `Available`, `free`, `v{version}`, `{capability}` (e.g. `Browser`)
Install command	code block with `$` prefix and `sidebutton install {slug}`
Copy install button	`button "Copy install command"`	Copies the `sidebutton install` command — no toast confirmed
Download ZIP	`link "Download ZIP"`	→ `/api/skill-packs/{domain}/zip` (e.g. `/api/skill-packs/sidebutton.com/zip` for sidebutton pack — note `domain` segment, not slug)
Pack navigation	`navigation "Pack navigation"`	In-page TOC; 4-6 anchor links to module sections
Body content	nested `heading`s + `table`s + `list`s	Renders the entire installed `_skill.md` tree (H1 → H2 → H3 → ...)
Right sidebar	`complementary` (after main content)	Icon links + `link "{domain}"` + `link "Source"` + `link "Docs"` + `div ".md 100%"` (coverage badge)

Role playbook page (`/skills/{slug}/roles/{role}`)

Element	Selector	Notes
Breadcrumb	3-link `navigation`: "Knowledge Packs" / "{Pack Name}" / "Roles"
H1	`heading "{Role Display Name} — {Pack Name} Role Playbook"`	E.g. `Software Engineer — Autonomous Agents Role Playbook`
Copy install	`button "Copy install command"`	Same install command as pack detail
Download ZIP	`link "Download ZIP"`	Same as pack detail
Pack navigation	`navigation "Pack navigation"`	Same in-page TOC
Body content	nested headings + tables + lists	Renders the role `.md` file
Sibling roles link	`link "← All {Pack} roles"`	E.g. `← All Autonomous Agents roles` — back to pack detail's roles section
Pack overview link	`link "{Pack Name} overview"`	E.g. `Autonomous Agents overview` → `/skills/{slug}`
Right sidebar	`complementary` × 2 (often empty/icon-only)	Same pattern as pack detail

Cross-page elements

The marketing header on /skills* shows MCP Server / Skills / Media / Docs in that order (no "Knowledge Packs" link in header anymore — it became "Skills"). The footer label is also "Skills". The "Report a Bug" floating pill is rendered bottom-right on every /skills* page.

Data Model

Pack card (directory)

Field	Type	Notes
name	string	Display name (rendered as link text)
slug	string	URL segment under `/skills/`
domain	string \| null	nullable (e.g., `agents`, `marketing`, `writing`, `scoopd` have none)
modules	int	Module count
roles	int	Role count
description	string	Short blurb (truncated with `…`)
href	string	`/skills/{slug}`

Pack detail (renders `skill-pack.json` + installed `_skill.md` content)

Field	Source	Example
Pack name	`skill-pack.json` `title`	`SideButton`
Slug	URL	`sidebutton`
Description	`skill-pack.json` `description`	"Knowledge pack for sidebutton.com — public marketing site …"
Version	`skill-pack.json` `version`	`v1.1.0`
Capability tags	`skill-pack.json` `requires` (browser/llm)	`Browser` (when `requires.browser` is true)
Install command	derived from slug	`sidebutton install sidebutton`
ZIP URL	derived from `domain`	`/api/skill-packs/sidebutton.com/zip`
Body	rendered `_skill.md`	Full markdown tree
Coverage badge	computed	`.md 100%` (in right sidebar)

Role playbook page

Field	Source	Example
Role slug	URL	`se`
Role display name	role file frontmatter	`Software Engineer`
Pack name	parent pack	`Autonomous Agents`
Body	rendered role `.md`	Full markdown tree

States

State	Trigger	Visual Indicator
Default (directory)	`/skills` page load	All 16 pack cards visible; `Available (16)` count
Filtered (search)	Type in search box	Cards not matching query are hidden; `Available (N)` count updates live
Filtered — empty	Search query matches nothing (e.g. "zzzzzznoresult")	`Available (0)` heading + no cards; bottom CTA still visible; no special "no results" message
Pack detail — default	`/skills/{slug}`	Header + install card + TOC nav + rendered content + sidebar
Pack detail — unknown slug	`/skills/{nonexistent-slug}`	HTTP 302 → `/skills` (NOT 404 — silently redirects to directory)
Role page — default	`/skills/{slug}/roles/{role}`	Breadcrumb + H1 + install card + rendered content + sibling links
Role page — unknown role	`/skills/{slug}/roles/{nonexistent}`	Not yet verified — assume similar 302 redirect to pack detail
Cookie consent	First visit (no cookie set)	Bottom `dialog "Cookie Notice"` with Accept/Reject

Common Tasks

1. Browse all available packs

Navigate to /skills
Scroll through the "AVAILABLE (16)" grid (3 cards per row on desktop)

2. Search/filter packs

Click searchbox "Search knowledge packs..."
Type part of a name, slug, domain, or description
Grid filters in real-time; Available (N) count updates immediately

3. Open a pack detail page

From /skills, click any pack card — entire card is a single link
Lands on /skills/{slug}
Verify H1 = {Pack Name} Skill for MCP Agent

4. Copy a pack install command

From /skills/{slug}, click button "Copy install command"
Clipboard contains sidebutton install {slug} (no visible toast)

5. Download a pack as ZIP

From /skills/{slug}, click link "Download ZIP"
Browser downloads from /api/skill-packs/{domain}/zip
Note: ZIP URL uses the pack's domain field, not slug — for slug-only packs (no domain), URL form needs separate verification

6. Open a role playbook

From /skills/{slug} (a pack with roles), find the role link in body content
OR navigate directly: /skills/{slug}/roles/{role} (e.g. /skills/agents/roles/se)
Verify H1 = {Role Display Name} — {Pack Name} Role Playbook

7. Return from role to pack overview

From a role page, scroll to bottom
Click link "{Pack Name} overview" → /skills/{slug}

8. Reach the "use" or "create" guides from the directory

From /skills, click the USE card (top-left) → /agentic-ai-skills
OR click the CREATE card (top-right) → /create-agentic-ai-skill
OR click the bottom link "Create a skill for agentic AI" → /create-agentic-ai-skill

9. Navigate from header

Click header link "Skills" (the second nav item, between "MCP Server" and "Media") → /skills

Tips

Search filters multiple fields: matches on name, slug, domain, AND description (typing linkedin returns the LinkedIn pack; typing common words may return many hits).
Available (N) count is dynamic — count reflects current filter, not the static total. Empty filter shows (16).
Pack sort order: alphabetical by display name (Autonomous Agents → AICTPO → GitHub → ... → YouTube Music). Note AICTPO sorts after Autonomous Agents because the comparison treats the full display name.
Domain-less packs (agents, marketing, writing, scoopd) omit the · {domain} · segment in the metadata row.
Pack detail H1 vs subtitle: subtitle is MCP Agent Skill — {slug}, H1 is {Pack Name} Skill for MCP Agent. Use H1 for the human-readable title.
Role page H1 vs <title> differ in separator: <title> uses · (middle dot), H1 uses — (em-dash). Don't assert equality.
Install command pattern: every pack uses sidebutton install {slug} — not npm install or npx. The Copy install command button label is constant across all packs and roles.
Pack page is server-rendered — full reload on navigation, snapshot refs change after each navigation.
Skills header link replaces the older "Knowledge Packs" label — the page title still says "Knowledge Packs for Coding Agents" but the nav uses "Skills". Match nav by the short label.

Gotchas

Unknown pack slug returns 302 → /skills, NOT 404. Tests expecting a "pack not found" page will silently land on the directory and may then incorrectly assert against directory elements.
Old publish banner is gone: tests that snapshot sidebutton init or sidebutton publish code blocks at the top of /skills will fail — those have been replaced by the USE/CREATE card pair.
Bottom CTA renamed: heading is now Missing a skill for your app? (was Missing a knowledge pack?); link is now Create a skill for agentic AI → /create-agentic-ai-skill (was Learn how to contribute → /contribute).
Search input does NOT auto-clear between automation calls — the type browser tool appends to the existing value. To search a fresh term, first issue press_key("Ctrl+A") then press_key("Backspace") (or use fill to replace the value).
No toast confirmation on "Copy install command" — assert via clipboard read or trust the click.
Letter avatar and pack-card hierarchy aren't separate links — clicking the avatar, name, metadata, OR description all navigate to /skills/{slug}. Don't try to disambiguate sub-elements.
Available (N) count text is the only "empty state" indicator — when filter returns 0 results, there's no special message, just the heading reading Available (0) and the bottom CTA. Tests should check the count text, not look for a "No results" phrase.
Pack detail body contains nested heading elements at every level (H1, H2, H3, H4) because the rendered markdown preserves the source's heading hierarchy. Use specific heading text (not level alone) to find sections.
Right-side complementary sidebar appears on detail and role pages but its links use icons only (no text). The text-bearing links inside it are {domain}, Source, Docs, plus a .md {N}% coverage div. Match by complementary parent + role.
Pack modules count is mutable — the sidebutton pack went from 21 → 13 between successive verifications. Treat module counts as data points, not invariants.
/skills/{slug}/roles/{role} requires the pack to declare that role — even though /skills/{slug} may show no role names, attempting an invented role slug isn't verified to behave like a 404 vs a 302.
Cookie consent dialog can intercept clicks on first visit; accept/reject before any card click.

← All SideButton modules SideButton overview