SideButton Create a Skill for Agentic AI (Publish Skills) — Knowledge Module

Create a Skill for Agentic AI (Publish Skills)

What This Is

Public-facing publishing guide for SideButton skill packs. The page explains what a skill is for an agentic AI, why anyone would create one, what files live inside a pack (_skill.md, _roles/*.md, *.yaml workflows, skill-pack.json), and walks through a 4-step CLI flow (init → document → validate → publish). It also includes authoring guidelines, a frequently-asked-questions accordion, and a Related links cluster.

The page is SEO-targeted at the keyword "agentic AI skill" — title and H1 both lead with that phrase. It is the canonical landing page for prospective pack authors and is reachable from three on-site entry points: footer "Create a skill", homepage "CREATE — Create a skill for agentic AI" CTA, and /skills directory bottom CTA.

URL Patterns

Pattern	HTTP	Description
/create-agentic-ai-skill	200	Publishing guide (static page)
/contribute	404	Removed late-April 2026. No redirect — direct hit returns the standard 404 page (<main> with heading "404: Not found"). Tests asserting 200/redirect on /contribute will fail.

Page Title & Meta

• <title>: Create Skills for Agentic AI — SideButton MCP
• H1: Create Skills for Agentic AI
• Lede: "Author installable skill packs that teach AI coding agents how to operate any web app. Scaffold, validate, and publish in under 30 minutes with the SideButton CLI — free, open-source, and ready to run on Claude Code, OpenAI Codex, Cursor, and every other MCP client."

Page Structure

+--[Header: standard marketing layout — banner > nav]----+
|                                                         |
|  [Breadcrumb: Home / Create a Skill for Agentic AI]     |
|                                                         |
|  H1: Create Skills for Agentic AI                       |
|  Lede paragraph                                         |
|  [← Browse all skills] (pill)  [How to use → ] (pill)   |
|                                                         |
|  region: H2 "What is a skill for agentic AI?"           |
|     2 paragraphs, link to /mcp                          |
|                                                         |
|  region: H2 "Why create a skill?"                       |
|     2 paragraphs (the pitch)                            |
|                                                         |
|  region: H2 "What's inside a skill pack"                |
|     4 H3 cards: _skill.md / _roles/*.md /               |
|                  *.yaml workflows / skill-pack.json     |
|                                                         |
|  region: H2 "How to create and publish a skill"         |
|     4 numbered steps:                                   |
|       1. Scaffold the skill pack [Copy command]         |
|       2. Document the web app and add workflows        |
|          (inline YAML example: example_summarize_…)     |
|       3. Validate                       [Copy command]  |
|       4. Publish                        [Copy command]  |
|                                                         |
|  region: H2 "Skill authoring guidelines"                |
|     7-bullet <ul>                                       |
|                                                         |
|  region: H2 "After you publish"                         |
|     2 paragraphs                                        |
|                                                         |
|  region: H2 "Frequently asked questions"                |
|     5 <details> accordions (1st open by default)        |
|                                                         |
|  region: H2 "Related"                                   |
|     7-link <ul>                                         |
|                                                         |
+--[Footer: standard marketing layout]--------------------+
+--[Cookie consent dialog (first visit only)]-------------+
+--[Floating "Report a Bug" button (bottom-right)]--------+

Key Elements

Header / Breadcrumb / Hero

Element	Selector	Notes
Breadcrumb nav	navigation[aria-label="Breadcrumb"]	Contains a single link (Home → /) plus current-page label
Home crumb	nav[aria-label="Breadcrumb"] a	→ /
H1	heading "Create Skills for Agentic AI"	Primary page heading
Lede paragraph	First <p> after H1	Pitch + "30 minutes" claim
Browse-skills pill	link "← Browse all skills"	→ /skills
How-to-use pill	link "How to use agentic AI skills →"	→ /agentic-ai-skills (sibling marketing page; not documented yet)

Section H2/H3 anchors (each section is a <region>)

Section	H2 selector	Sub-headings
About	heading "What is a skill for agentic AI?"	(none) — 2 paragraphs, anchor link to /mcp ("SideButton MCP server")
Pitch	heading "Why create a skill?"	(none) — 2 paragraphs
Pack contents	heading "What's inside a skill pack"	4 H3 cards: _skill.md, _roles/*.md, *.yaml workflows, skill-pack.json
How-to	heading "How to create and publish a skill"	4 H3 step headings (see "How-to step controls" below)
Guidelines	heading "Skill authoring guidelines"	(none) — 7-bullet <ul>
Post-publish	heading "After you publish"	(none) — anchor link to /skills ("SideButton skills registry")
FAQ	heading "Frequently asked questions"	5 <details> (see "FAQ accordion" below)
Related	heading "Related"	7-link <ul>

How-to step controls

#	Step heading (H3)	Code shown	Copy button selector
1	heading "Scaffold the skill pack"	sidebutton init example.com	button "Copy command" (1st in DOM)
2	heading "Document the web app and add workflows"	Inline YAML: example/summarize_article.yaml (full workflow with id, inputs, steps, output)	—
3	heading "Validate"	sidebutton validate	button "Copy command" (2nd)
4	heading "Publish"	sidebutton publish	button "Copy command" (3rd)

Step 2 also mentions sidebutton install ./your-skill-dir and the local dashboard at http://localhost:9876 for previewing in-progress packs.

Skill authoring guidelines (7-bullet <ul>, exact order)

1. One domain per pack — name your pack after the domain: github.com, linear.app, jira.atlassian.com.
2. Document real selectors — actual CSS, data-testid, or ARIA labels. Synthetic selectors age faster.
3. Keep modules focused — one module per page or feature area; smaller modules = cheaper context.
4. Include automations — YAML workflows for CRUD/navigation/extraction; what makes the pack useful beyond docs.
5. Test with a real agent — verify end-to-end with Claude Code or Codex before publishing.
6. Choose public or private — set visibility in skill-pack.json. Contains 2 inline links: link "public packs" → registry context, link "login" → auth.
7. No credentials or API keys in any pack — public OR private. Inject secrets at runtime via env vars.

FAQ accordion (<details> × 5, exact order)

#	Summary text	Default state
0	What is agentic AI and how does a skill pack fit in?	open
1	Do I need to run my own MCP server to create a skill?	closed
2	Is publishing free? What about private skill packs?	closed
3	How do I test my skill before publishing?	closed
4	Who owns a published skill?	closed

Each item is a native <details> element with <summary>. Clicking the summary toggles open (browser default). Each summary has its own ref in snapshots; refs change on toggle re-renders.

Related (7-link <ul>, exact order)

#	Link text	Href
1	How to use agentic AI skills	/agentic-ai-skills
2	Browse existing skills	/skills
3	SideButton MCP Server overview	/mcp
4	Install SideButton in Claude Code	/mcp/claude-code
5	Install SideButton in OpenAI Codex	/mcp/codex
6	Content Policy	/content-policy
7	Latest news and releases	/media

Floating / global

Element	Selector	Notes
Cookie consent dialog	dialog[aria-label="Cookie Notice"]	First visit only; Accept/Reject; links to Privacy Policy
Report-a-Bug widget	Floating button bottom-right	Third-party widget (visible in screenshots, not in accessibility tree as a snapshot ref)

Data Model

Pack file structure (canonical, as documented on the page)

File	Purpose
_skill.md	Per-module domain knowledge: UI selectors, data model, page states, gotchas. The agent reads this during reasoning.
_roles/*.md	Role playbooks: qa.md, se.md, pm.md, sd.md, or any custom role. Test plans, dev guides, verification criteria.
*.yaml (pack root)	Workflows. Become MCP tools automatically — the file id becomes the tool ID, inputs: becomes the typed argument schema.
skill-pack.json	Manifest: domain, version, module list, license, description. Validated by the registry on publish.

CLI commands referenced

Command	Purpose	Step on page
sidebutton init <domain>	Scaffold skill-pack.json + empty _skill.md template + _roles/ dir	1
sidebutton validate	Check manifest, verify referenced _skill.md exist, parse YAML workflows, warn on missing roles	3
sidebutton install <pack-or-path>	Local install (dir path during dev, <domain> post-publish)	2 (preview) / post-publish
sidebutton publish	Validate → package → push to community registry	4
sidebutton publish --private	Push to your private namespace; requires login	4 (variant)

YAML workflow shape (inline example on page)

id: example_summarize_article          # becomes MCP tool ID
title: Summarize Article
description: Fetch a URL and return a bullet summary in a given style.
inputs:                                # becomes typed argument schema
  url:
    type: string
    description: Article URL to summarize
  style:
    type: string
    description: 'tldr | executive | detailed'
steps:
  - id: fetch
    action: browser.navigate           # one of 40 step types
    with:
      url: "{{ inputs.url }}"
  - id: read
    action: browser.snapshot
    with:
      selector: article, main
  - id: summarize
    action: llm.generate
    with:
      prompt: |
        Summarize the following article in {{ inputs.style }} style.
        Return 3-6 bullet points.

        {{ steps.read.output }}
output: "{{ steps.summarize.output }}"

The page claims 40 step types total, grouped as: browser primitives (navigate, snapshot, click, type), control flow (loop.for, if, retry), LLM (llm.generate, llm.classify, llm.decide), shell, terminal, workflow composition.

States

State	Trigger	Indicator
Default	First load of /create-agentic-ai-skill	All sections rendered, FAQ #0 open, others closed
FAQ-expanded	Click any <summary>	details.open === true; sibling content visible. Browser-native, no JS dependency.
FAQ-collapsed	Click an open <summary>	details.open === false
Cookie-consent shown	First visit (no consent cookie)	dialog[aria-label="Cookie Notice"] fixed bottom-of-viewport
Cookie-consent dismissed	Accept or Reject clicked	Dialog hidden via CSS translate (element stays in DOM)
Copy-command pressed	Click any "Copy command" button	Writes the adjacent shell command (sidebutton init example.com / sidebutton validate / sidebutton publish) to clipboard via Clipboard API. No data-attribute payload — copy text is read from the rendered code block. Visual feedback (label flip / checkmark) is implementation-specific; verify via snapshot diff after click.
404 (/contribute)	Direct navigation to legacy URL	<title> = 404: Not Found; <main> contains heading "404: Not found". No redirect, no canonical link to the new URL.

Common Tasks

1. Reach the page from anywhere on the site

1. Click footer link "Create a skill" (selector: footer a[href="/create-agentic-ai-skill"]); OR
2. Click homepage CREATE-card link "Create a skill for agentic AI" (visible in the homepage Ready-to-get-started + role-playbooks band); OR
3. Click /skills bottom CTA link "Create a skill for agentic AI →".
4. Lands on /create-agentic-ai-skill (HTTP 200, breadcrumb shows Home / Create a Skill for Agentic AI).

2. Copy a CLI command

1. Scroll to "How to create and publish a skill" (H2).
2. Click button "Copy command" next to the desired step (1 = init, 2 = validate, 3 = publish).
3. Paste into a terminal — value is the literal command shown above the button.

3. Open a FAQ item

1. Scroll to "Frequently asked questions" (H2).
2. Click the desired <summary> (snapshot ref or details:nth-of-type(N) > summary).
3. Verify details.open === true via evaluate if needed (snapshot ref tree does not expose the open state — use evaluate for assertions).

4. Navigate to a related page

1. Scroll to "Related" (H2).
2. Click the desired <li> > a by visible text (see Related table above).
3. The 7 destinations cover skill consumption (/agentic-ai-skills, /skills), MCP setup (/mcp, /mcp/claude-code, /mcp/codex), policy (/content-policy), and news (/media).

5. Verify the legacy /contribute URL is gone

1. curl -sI https://sidebutton.com/contribute → expect HTTP/2 404.
2. Browser navigate → expect <title> 404: Not Found and heading "404: Not found" in <main>.

Tips

• URL changed late-April 2026 from /contribute → /create-agentic-ai-skill. The page was also rewritten from a developer-doc tone ("Publish Knowledge Packs") to a marketing-SEO tone ("Create Skills for Agentic AI"). Old in-codebase tests / curl checks pinned to /contribute will silently 404.
• Three on-site entry points (footer, homepage CREATE card, /skills bottom CTA). The header nav does not link here — the header has only MCP Server / Skills / Media / Docs as of late-April 2026.
• First FAQ is open by default ("What is agentic AI and how does a skill pack fit in?") — handy as a default-content fixture; the other 4 require a click.
• The page references /agentic-ai-skills as a sibling marketing page ("How to use agentic AI skills"). It is not yet a tracked module in this skill pack — capture it next pass.
• The page references /mcp, /mcp/claude-code, /mcp/codex (sibling marketing pages). Also not yet tracked modules.
• Code-sample selectors in the inline YAML example are stable text — agents can extract by pre > code with no class dependency.
• The "30 minutes" claim in the lede is the public marketing promise — note for QA copy checks.

Gotchas

• No /contribute → /create-agentic-ai-skill redirect. The legacy URL returns a hard 404. Anything (search result, blog backlink, README) pointing to /contribute is now broken. If you need the new URL, do not rely on a 301 — link directly.
• FAQ open/closed state is invisible in snapshot ref trees. The <details> and <summary> show up but open is not in the YAML output. Use mcp__sidebutton__evaluate with document.querySelectorAll('details') to read .open.
• Three buttons share the label "Copy command" — button "Copy command" is not unique. Index by DOM order (1=init, 2=validate, 3=publish) or scope by parent step heading.
• Copy buttons have no data-clipboard-text / data-copy attribute. The clipboard payload is read from the adjacent rendered <code> text on click. To predict the payload, query the sibling code block, not a button attribute.
• Floating "Report a Bug" widget covers content at narrow widths. It is a third-party overlay; not present in the accessibility tree as a stable snapshot ref. Screenshot tests should mask the bottom-right region.
• Cookie consent dialog covers the footer on first visit. Dismiss (Accept or Reject) before snapshotting/screenshotting the footer or any element near the bottom of the viewport.
• Page title leads with "Create Skills for Agentic AI — SideButton MCP", not "Publish Knowledge Packs" (the old /contribute title). Update any title-pinned regression tests.
• H1 ≠ breadcrumb label. H1 = Create Skills for Agentic AI; breadcrumb current-page label = Create a Skill for Agentic AI (singular vs plural). Watch for selector-by-text mismatches.
• Inline YAML example uses 2-space indentation and double-quoted Mustache ("{{ inputs.url }}"). If you copy/paste it as a real workflow, keep both — validate is whitespace-sensitive.

Cross-references

• Module homepage — The "CREATE" card on the homepage is one of three entry points to this page; selector homepage a[href="/create-agentic-ai-skill"].
• Module skills — The /skills directory page has a bottom CTA linking here; selectors in skills/_skill.md still mention the old /contribute href and need updating in a future pass.
• Module media — Intro paragraph link "create a skill for agentic AI" → here. Already noted in media/_skill.md.
• Root _skill.md — Footer table row "Create a skill" → here; URL Patterns table needs /contribute flipped from 200 to 301/404 (currently still says 200).