New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Sidecar Website

by marcus in marcus/sidecar

Writing and maintaining the Sidecar Docusaurus documentation site, including page structure, doc authoring, blog posts, styling, images, and deployment workflow.

MITAuto-check passedWriting & Content

Install Sidecar Website

skills CLI
$ npx skills add marcus/sidecar --skill sidecar-website -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install marcus/sidecar sidecar-website --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/marcus/sidecar.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/sidecar-website .claude/skills/sidecar-website && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
sidecar-website
GitHub stars
1.1k
Token cost
~1.7k tokens
SKILL.md length
386 words
Files
2 (incl. references)
Skills in repo
19
Repo updated
First seen
Licence
MIT

At a glance

Writing and maintaining the Sidecar Docusaurus documentation site, including page structure, doc authoring, blog posts, styling, images, and deployment workflow.

  • Writing documentation
  • SKILL.md covers Quick Start, Project Structure, Writing Documentation and Front Page, plus 7 more sections
  • Calls npm
  • Updating the docs site

What it does

Sidecar Website is an agent skill from marcus/sidecar. Writing and maintaining the Sidecar Docusaurus documentation site, including page structure, doc authoring, blog posts, styling, images, and deployment workflow. Use when writing documentation, updating the docs site, adding pages or blog posts, or working with Docusaurus configuration.

Its SKILL.md is about 1.7k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files, including reference files (for example `references/site-configuration.md`).

It sits in Writing & Content, covering Static sites and blogs and Blog and article writing. The repository describes itself as: Use sidecar next to CLI agents for diffs, file trees, conversation history, and task management with td. The licence is MIT.

When your agent uses it

  • Writing documentation
  • Updating the docs site
  • Working with Docusaurus configuration

Example prompts

  • “/sidecar-website”

Requirements

  • Node.js

What it can do on your machine

Read from SKILL.md and the folder at commit 3792a4e. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npm

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • lucide.dev
    • marcus.github.io

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Sidecar Website loads about 1.7k tokens when it runs, and up to ~2.1k if it reads all its reference files. Until then it costs about 76 tokens; SKILL.md has 386 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~76
When it runs · the whole SKILL.md, loaded when a task matches
~1.7k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~2.1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from marcus/sidecar at commit 3792a4e, republished under its MIT licence (© marcus). 386 words, ~1,662 tokens.

Download SKILL.mdSave it as .claude/skills/sidecar-website/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
sidecar-website
description
Writing and maintaining the Sidecar Docusaurus documentation site, including page structure, doc authoring, blog posts, styling, images, and deployment workflow. Use when writing documentation, updating the docs site, adding pages or blog posts, or working with Docusaurus configuration.

Docusaurus Documentation Site

The documentation site lives in website/. It uses Docusaurus with Node.js >= 20.

Quick Start

bash
cd website
npm install    # First time only
npm start      # Dev server at http://localhost:3000

Project Structure

website/
├── docs/                    # Markdown documentation pages
├── blog/                    # Blog posts (date-prefixed markdown)
│   ├── authors.yml         # Blog author definitions
│   └── tags.yml            # Blog tag definitions
├── src/
│   ├── pages/              # Custom React pages (non-docs)
│   │   ├── index.js        # Front page (/)
│   │   └── index.module.css
│   ├── components/         # Reusable React components
│   └── css/
│       └── custom.css      # Global style overrides
├── static/                  # Static assets (copied as-is to build)
│   └── img/                # Images
├── docusaurus.config.js    # Main site configuration
├── sidebars.js             # Docs sidebar structure
└── package.json

Writing Documentation

Principles
  • User-first: Answer "what can I do?" before "how does it work?"
  • Scannable: Use headers, code blocks, tables for keyboard shortcuts
  • Progressive disclosure: Quick overview -> detailed usage -> full reference
  • Working examples: Every feature needs runnable code, not ... placeholders
Creating a New Doc

Add a Markdown file in website/docs/ with YAML frontmatter:

markdown
---
sidebar_position: 2
title: My New Page
---

# My New Page

Content here. Supports **Markdown** and MDX.

Frontmatter options:

  • sidebar_position: Order in sidebar (lower = higher)
  • sidebar_label: Override sidebar text
  • title: Page title
  • description: Meta description for SEO
  • slug: Custom URL path
Plugin Documentation Pattern
markdown
# Plugin Name

One-line description.

![Screenshot](../../docs/screenshots/plugin-name.png)

## Overview
Brief explanation of UI layout and core purpose.

## Feature Section
Description with keyboard shortcut table:

| Key | Action |
|-----|--------|
| `s` | Stage file |
| `d` | View diff |

## Navigation
How to move around.

## Command Reference
Complete shortcut list by context.
Organizing Docs in Folders
docs/
├── intro.md
├── guides/
│   ├── _category_.json    # Folder metadata
│   ├── installation.md
│   └── configuration.md

_category_.json controls folder appearance:

json
{
  "label": "Guides",
  "position": 2,
  "collapsible": true,
  "collapsed": false
}
Sidebar Configuration

Auto-generates from docs/ folder structure. To customize, edit sidebars.js:

javascript
const sidebars = {
  tutorialSidebar: [
    'intro',
    {
      type: 'category',
      label: 'Guides',
      items: ['guides/installation', 'guides/usage'],
    },
  ],
};
Using MDX

Docs support MDX (Markdown + JSX):

mdx
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

<Tabs>
  <TabItem value="npm">npm install</TabItem>
  <TabItem value="yarn">yarn add</TabItem>
</Tabs>

Front Page

The front page is at website/src/pages/index.js -- a React component using Docusaurus Layout and theming.

jsx
export default function Home() {
  return (
    <Layout title="Home" description="...">
      <HomepageHeader />
      <main className="container">
        {/* Add content here */}
      </main>
    </Layout>
  );
}

Styling: index.module.css for page-specific, src/css/custom.css for global overrides.

Images and Screenshots

Website doc screenshots (for pages in website/docs/):

  • Store in: docs/screenshots/ (project root)
  • Reference: ![Alt text](../../docs/screenshots/filename.png)

README / repo doc screenshots:

  • Store in: docs/screenshots/ (project root)
  • Reference: ![Alt text](docs/screenshots/filename.png) (from repo root)

General website images (logos, icons):

  • Store in: website/static/img/
  • Reference: ![Alt text](/img/filename.png)

In JSX:

jsx
import screenshot from '@site/static/img/logo.png';
<img src={screenshot} alt="Logo" />

Blog Posts

Date-prefixed Markdown files in blog/:

markdown
---
slug: my-post
title: Post Title
authors: [default]
tags: [announcement, release]
---

Preview text shown in list.

<!-- truncate -->

Full content below the fold.

Style Guidelines

No Emoji Policy

Never use emoji in site content, components, or documentation. Use Lucide icons instead.

Show full SKILL.md (166 more words)Show less
Icons (Lucide)

The site uses Lucide icon font (CDN import in docusaurus.config.js).

jsx
<i className="icon-terminal" />
<i className="icon-check" />
<i className="icon-git-branch" />

Common icons: icon-eye, icon-terminal, icon-rocket, icon-check, icon-copy, icon-external-link, icon-git-branch, icon-zap, icon-keyboard, icon-layers, icon-code.

Browse all: https://lucide.dev/icons

Terminal Aesthetic
  • Monospace fonts (JetBrains Mono, Google Sans Code)
  • Dark backgrounds with muted colors
  • Bright accents from Monokai palette (green, blue, pink, yellow)
  • Clean 1px borders, subtle gradients and glows

Building and Deploying

bash
cd website
npm run build      # Outputs to website/build/
npm run serve      # Preview built site locally

Deploys automatically via GitHub Actions when changes to website/ merge to main.

  • .github/workflows/deploy-docs.yml -- Deploys to GitHub Pages
  • .github/workflows/test-docs.yml -- Validates PR builds
  • Live site: https://marcus.github.io/sidecar

Common Tasks

TaskSteps
Add docs sectionCreate folder in website/docs/, add _category_.json, add Markdown files
Change theme colorsEdit src/css/custom.css (:root and [data-theme='dark'] variables)
Add custom componentCreate in src/components/MyComponent/index.js, import with @site/src/components/MyComponent

Troubleshooting

  • Build fails with broken links: Config uses onBrokenLinks: 'throw'. Temporarily change to 'warn' for local dev.
  • Styles not updating: npm run clear && npm start
  • GitHub Pages 404: Verify baseUrl matches repo name (/sidecar/).

Reference

For detailed site configuration (navbar, footer, theme config, future compatibility), see references/site-configuration.md.

© marcus, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 1 other file (references) in .claude/skills/sidecar-website of marcus/sidecar.

  • SKILL.md
  • references/site-configuration.md

Open the folder on GitHubat commit 3792a4e

Compare with similar skills

Sidecar Website next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Sidecar Website compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Sidecar Website this skillmarcus/sidecar1.1k—~1.7kAutomated safety check: PassMIT
Publishone-ie/one131—~940Automated safety check: PassCustom licence
Figurevectorize-io/hindsight47k—~1.9kAutomated safety check: PassMIT
Blog Post ProcessorJustin3go/justin3go.com173—~1.5kAutomated safety check: PassCustom licence
Blog Cost Chartsakitaonrails/my-skills212—~2kAutomated safety check: PassNone
BlogAgriciDaniel/claude-blog2.3k1 repos~8.6kAutomated safety check: WarnMIT

Similar skills

  • Publish

    one-ie/one

    Put words on this site — a blog post, a docs page, a product, or a live page from ONE's editor.

    131 GitHub stars~940 tokensUpdated 10 days ago
    Writing & ContentAuto-check passed

  • Figure

    vectorize-io/hindsight

    Draw an animated figure (boxes, arrows, moving data) as one self-contained SVG for a GitHub README, PR, issue or blog post.

    47k GitHub stars~1.9k tokensUpdated today
    Writing & ContentAuto-check passed

  • Blog Post Processor

    Justin3go/justin3go.com

    Process Chinese blog posts for the justin3go.com VitePress blog: rename to English slug, add frontmatter and AI summary, and translate to English.

    173 GitHub stars~1.5k tokensUpdated 16 days ago
    Writing & ContentAuto-check passed

  • Blog Cost Charts

    akitaonrails/my-skills

    Generate dark-themed cost-vs-score bubble scatter charts and score/(costtime) value-ranking bar charts for a blog post comparing LLM benchmark results (or any dataset with a score/cost/time shape)…

    212 GitHub stars~2k tokensUpdated 14 days ago
    Writing & ContentAuto-check passed

  • Blog

    AgriciDaniel/claude-blog

    Full-lifecycle blog engine with 31 sub-skills, 12 content templates, 5-category 100-point scoring, and 5 specialized agents.

    2.3k GitHub starsUsed in 1 repo~8.6k tokens
    Writing & ContentAuto-check: warnings

  • Blog

    AgriciDaniel/claude-blog

    Full-lifecycle blog engine with 31 sub-skills, 12 templates, 100-point scoring, and 5 agents.

    2.3k GitHub stars~6.2k tokensUpdated today
    Writing & ContentAuto-check passed

More from marcus/sidecar

All 19 skills in this repo

  • Create Adapter

    marcus/sidecar

    Create conversation adapters for importing AI chat history from different tools (Claude Code, Cursor, Warp, Codex, etc.).

    1.1k GitHub stars~4.8k tokensUpdated 3 days ago
    Auto-check passed

  • Create Modal

    marcus/sidecar

    Create declarative modals using the modal library API. An agent skill from marcus/sidecar.

    1.1k GitHub stars~2.6k tokensUpdated 3 days ago
    Auto-check passed

  • Create Plugin

    marcus/sidecar

    Create new sidecar plugins implementing the plugin.Plugin interface, rendering views with Bubble Tea, handling keyboard input via keymap contexts, and integrating with the app shell (footer hints…

    1.1k GitHub stars~2.3k tokensUpdated 3 days ago
    Auto-check passed

  • Project Switching

    marcus/sidecar

    Project switching implementation in sidecar: project discovery, state management, UI flow, modal rendering, filtering, theme preview, and plugin reinitialization.

    1.1k GitHub stars~1.8k tokensUpdated 3 days ago
    Auto-check passed

  • Shell Integration

    marcus/sidecar

    Interactive shell/TTY integration with tmux session management, shell command execution, control-mode output capture with polling fallback, native cursor rendering, lazy scrollback, selection, paste…

    1.1k GitHub stars~3.6k tokensUpdated 3 days ago
    Auto-check passed

  • UI Features

    marcus/sidecar

    Implementing UI/UX features in sidecar including modals (internal/modal library), keyboard shortcuts, mouse support, scrolling, pill/tab rendering, and pane resizing.

    1.1k GitHub stars~4.6k tokensUpdated 3 days ago
    Auto-check passed

Categories

Questions about Sidecar Website

What does Sidecar Website do?

Writing and maintaining the Sidecar Docusaurus documentation site, including page structure, doc authoring, blog posts, styling, images, and deployment workflow. Sidecar Website is an agent skill from marcus/sidecar. Writing and maintaining the Sidecar Docusaurus documentation site, including page structure, doc authoring, blog posts, styling, images, and deployment workflow.

When should I use Sidecar Website?

Sidecar Website fits situations like: writing documentation; updating the docs site; working with Docusaurus configuration.

How do I install Sidecar Website in Claude Code?

Run `npx skills add marcus/sidecar --skill sidecar-website -a claude-code`. Or copy the skill folder (.claude/skills/sidecar-website in marcus/sidecar) into .claude/skills/sidecar-website in your project. Claude Code loads it when a task matches its description.

How do I install Sidecar Website in Codex?

Run `npx skills add marcus/sidecar --skill sidecar-website -a codex`. Or copy the skill folder (.claude/skills/sidecar-website in marcus/sidecar) into .agents/skills/sidecar-website in your project. Codex loads it when a task matches its description.

Can I use Sidecar Website in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add marcus/sidecar --skill sidecar-website -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/sidecar-website, .gemini/skills/sidecar-website, .github/skills/sidecar-website and .opencode/skills/sidecar-website in your project.

What does Sidecar Website need to run?

Going by SKILL.md and its folder, Sidecar Website needs the command-line tools its instructions call (npm). Our summary lists: Node.js.

Does Sidecar Website access the network?

SKILL.md names 2 domains. As links in the text: lucide.dev and marcus.github.io. This is read from the text; nothing was executed.

Is Sidecar Website safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Sidecar Website use?

Sidecar Website is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Sidecar Website use?

About 1.7k tokens (SKILL.md is roughly 6.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 431 tokens, read only when the agent opens those files.

What are the alternatives to Sidecar Website?

Skills that share tags, products or a category with Sidecar Website: Publish (one-ie/one, 131 stars), Figure (vectorize-io/hindsight, 47k stars), Blog Post Processor (Justin3go/justin3go.com, 173 stars) and Blog Cost Charts (akitaonrails/my-skills, 212 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Sidecar Website?

marcus (a GitHub user) maintains it in marcus/sidecar, which has 1,085 GitHub stars. The repository holds 19 skills in this directory. The repository was last updated on October 5, 2026.

Source: marcus/sidecar on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.