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

Official agent skill

Docs Design

by github in github/gh-aw

Design rules for the docs site and landing page (docs/). An agent skill from github/gh-aw.

OfficialMITAuto-check passedFrontend & Design

Install Docs Design

skills CLI
$ npx skills add github/gh-aw --skill docs-design -a claude-code

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

GitHub CLI
$ gh skill install github/gh-aw docs-design --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/github/gh-aw.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.github/skills/docs-design .claude/skills/docs-design && 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
docs-design
GitHub stars
5.4k
Token cost
~1.1k tokens
SKILL.md length
661 words
Files
1
Skills in repo
54
Repo updated
First seen
Licence
MIT

At a glance

Design rules for the docs site and landing page (docs/). An agent skill from github/gh-aw.

  • Works in 3 steps: Find the problem the requester actually… → Implement a fix for that problem that… → In the PR description, name the rule,…
  • Tasks that involve Landing pages
  • SKILL.md covers When a request breaks a rule, Reading measure, Gutters and Header navigation: keep it short, plus 2 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Docs Design is an agent skill from github/gh-aw, published by the product's own GitHub organization. Design rules for the docs site and landing page (docs/). Use before any visual change there — layout, widths, spacing, colour, typography, header navigation, or new page chrome.

Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering Landing pages, Static sites and blogs and Typography. The repository describes itself as: GitHub Agentic Workflows. The licence is MIT.

When your agent uses it

  • Tasks that involve Landing pages
  • Tasks that involve Static sites and blogs
  • Tasks that involve Typography

Example prompts

  • “/docs-design”

Workflow steps

3 steps, taken from the first numbered list in SKILL.md.

  1. Find the problem the requester actually has (the page feels empty, a feature is hard to find).
  2. Implement a fix for that problem that stays inside the rules.
  3. In the PR description, name the rule, give its reason in a sentence or two, and say what you did instead.

What it can do on your machine

Read from SKILL.md and the folder at commit 957aa80. 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

    No scripts in the folder and no shell commands in SKILL.md.

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

  • Network

    No URLs in SKILL.md.

    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

Docs Design loads about 1.1k tokens when it runs. Until then it costs about 47 tokens; SKILL.md has 661 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~47
When it runs · the whole SKILL.md, loaded when a task matches
~1.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 github/gh-aw at commit 957aa80, republished under its MIT licence (© github). 661 words, ~1,063 tokens.

Download SKILL.mdSave it as .claude/skills/docs-design/SKILL.md (or your agent's skills folder).
name
docs-design
description
Design rules for the docs site and landing page (docs/). Use before any visual change there — layout, widths, spacing, colour, typography, header navigation, or new page chrome.

Docs site and landing page design rules

The docs site and the landing page (docs/src/content/docs/index.mdx and docs/src/components/landing/) had a deliberate design pass. These rules hold that design in place on both. Each one exists for the reader, and each states its reason so you can explain it.

When a request breaks a rule

Requests like "there's too much white space" or "add X to the header" often point to a real problem with the wrong fix. When a requested visual change breaks a rule below:

  1. Find the problem the requester actually has (the page feels empty, a feature is hard to find).
  2. Implement a fix for that problem that stays inside the rules.
  3. In the PR description, name the rule, give its reason in a sentence or two, and say what you did instead.

A rule changes only when the designer who owns it agrees, and the change updates this file in the same PR.

Reading measure

On docs pages, body content is at most 620px wide (--aw-prose-width in docs/src/styles/custom.css). That includes the page title, prose, lists, asides, tabs, code blocks, the edit/last-updated row and the prev/next pager.

Why: line length decides how easy text is to read. The comfortable range is roughly 45–75 characters per line, and about 66 is ideal. Past that, the eye loses its place on the long sweep back to the start of the next line, rereads lines or skips them, and long pages become tiring. Body text is 16px Mona Sans, a narrow face averaging ~7.3px per character, so 620px holds about 80 characters per line: already at the top of what reads comfortably. Wider columns look fuller on a big monitor and read worse at every size.

  • Tables, mermaid diagrams and images may grow wider than 620px when their content needs it. They're scanned, not read line by line, so the measure doesn't apply to them.
  • Size the measure in rem, never ch. 1ch is the width of the "0" glyph (~10px here), so 70ch is ~700px, or ~92 real characters.
  • The landing page lays its sections out in a wider 72rem container, but its running text (intros, descriptions) still stays within a comfortable measure.
  • If a wide screen feels empty, that space is the cost of readable text. The column is centred between the sidebar and "On this page" so the space sits evenly on both sides.
Show full SKILL.md (263 more words)Show less

Gutters

Desktop docs keep at least 60px (--aw-content-gutter) between the content and the sidebar on the left, and between the content and "On this page" on the right.

Why: the gutter separates reading content from navigation. Without it, the TOC reads as part of the text, and the page feels cramped no matter how wide the screen is.

Header navigation: keep it short

The top navigation stays sparse. It holds three section links (Docs, Workflow examples, Blog), plus search, GitHub, the theme toggle and one "Get started" button. Keep that count fixed: a new item goes in only by replacing an existing one.

Why: the header is the most valuable space on the site, and every item in it competes with every other. Three links can be read at a glance. Twelve can't, so visitors skim past all of them, including the one they needed. Prioritising is the point: the header carries only the few destinations most visitors need, on every page.

New features, tools, demos, launchers, announcements and secondary links go in the docs sidebar, the footer, or a link on the page where they're relevant.

Visual direction

Near-monochrome: warm stone neutrals, near-black primary buttons, muted grey secondary text, hairline borders. The purple accent marks links, active states and focus, and is used sparingly. Colour is reserved for real product UI shown in mocks. Use the tokens in docs/src/styles/tokens.css rather than new hard-coded colours.

Enforcement

docs/scripts/check-reading-measure.mjs runs before every docs build and fails it if the measure or gutter values change, or if --sl-content-width is overridden elsewhere. docs/tests/content-width.spec.ts checks the rendered layout.

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

Files

Just SKILL.md in .github/skills/docs-design of github/gh-aw.

Open the folder on GitHubat commit 957aa80

Compare with similar skills

Docs Design 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.

Docs Design compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Docs Design this skillgithub/gh-aw5.4k—~1.1kAutomated safety check: PassMIT
Bryl Minimal Designbryllim/bryl-minimal-design115—~2.9kAutomated safety check: PassMIT
Impeccablebestofjs/bestofjs3.1k26 repos~2.6kAutomated safety check: PassMIT
UI UX Pro Maxsaoudi-h/solar-icons19018 repos~11kAutomated safety check: NotesCustom licence
Frontend Designanthropics/skills180k38 repos~2.3kAutomated safety check: PassApache-2.0
Kill AI Slopyetone/kill-ai-slop1.3k—~1.4kAutomated safety check: PassApache-2.0

Similar skills

  • Bryl Minimal Design

    bryllim/bryl-minimal-design

    Apply the bryl-minimal design language — a monochrome, typography-driven minimal aesthetic with halftone dot textures, pixel-font display headings, tiny uppercase monospace labels, soft large-radius…

    115 GitHub stars~2.9k tokensUpdated 3 mo ago
    Frontend & DesignAuto-check passed

  • Impeccable

    bestofjs/bestofjs

    A skill your agent uses when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a…

    3.1k GitHub starsUsed in 26 repos~2.6k tokens
    Frontend & DesignAuto-check passed

  • UI UX Pro Max

    saoudi-h/solar-icons

    UI/UX design intelligence for web and mobile. An agent skill from saoudi-h/solar-icons.

    190 GitHub starsUsed in 18 repos~11k tokens
    Frontend & DesignAuto-check: notes

  • Frontend Design

    anthropics/skills

    Official

    Pushes the agent toward distinctive visual design for new or reworked UI: a clear aesthetic direction, deliberate typography and choices rooted in the subject.

    180k GitHub starsUsed in 38 repos~2.3k tokens
    Frontend & DesignAuto-check passed

  • Kill AI Slop

    yetone/kill-ai-slop

    Find and remove AI slop — the generic, machine-default visual and copy tics of vibe-coded products — from a web project.

    1.3k GitHub stars~1.4k tokensUpdated 26 days ago
    Frontend & DesignAuto-check passed

  • UI/UX Design System Advisor

    Galaxy-Dawn/claude-scholar

    Turns a vague UI request into a concrete design system with style, palette, typography and layout guidance from a search script, plus stack-specific implementation advice.

    5.7k GitHub starsUsed in 1 repo~1.1k tokens
    Frontend & DesignAuto-check passed

More from github/gh-aw

All 55 skills in this repo

  • playwright-cli Browser Automation

    github/gh-aw

    Official

    Drives a real browser from the command line with playwright-cli to open pages, interact, mock requests, save state and work with Playwright tests.

    5.4k GitHub starsUsed in 25 repos~2.8k tokens
    Auto-check passed

  • Statistics Infographic

    github/gh-aw

    Official

    Generate a readable six-panel repository statistics infographic from validated JSON, with exact arithmetic and independent raw GitHub/Git reconciliation.

    5.4k GitHub stars~1.3k tokensUpdated today
    Auto-check passed

  • Operational Value Designer

    github/gh-aw

    Official

    Designs and verifies a deterministic grader that measures whether a GitHub Agentic Workflow run reached its real-world or repository outcome.

    5.4k GitHub stars~6.8k tokensUpdated today
    Auto-check passed

  • Copilot Canvas Extension Author

    github/gh-aw

    Official

    Scaffolds, edits, reloads and debugs a canvas extension that the GitHub Copilot CLI can open in its side panel.

    5.4k GitHub stars~3.7k tokensUpdated today
    Auto-check passed

  • GitHub Copilot PR Finisher

    github/gh-aw

    Official

    Drives an open pull request to merge-ready from inside a GitHub Copilot cloud agent, resolving review threads and local checks concurrently, without merging or retriggering CI.

    5.4k GitHub stars~3.9k tokensUpdated today
    Auto-check: warnings

  • gh-aw Firewall Release Integrator

    github/gh-aw

    Official

    Bumps gh-aw's pinned gh-aw-firewall version, rebuilds generated artifacts, and flags upstream spec or schema changes that need follow-up work.

    5.4k GitHub stars~899 tokensUpdated today
    Auto-check passed

Categories

Questions about Docs Design

What does Docs Design do?

Design rules for the docs site and landing page (docs/). An agent skill from github/gh-aw. Docs Design is an agent skill from github/gh-aw, published by the product's own GitHub organization. Design rules for the docs site and landing page (docs/).

When should I use Docs Design?

Docs Design fits situations like: tasks that involve Landing pages; tasks that involve Static sites and blogs; tasks that involve Typography.

How do I install Docs Design in Claude Code?

Run `npx skills add github/gh-aw --skill docs-design -a claude-code`. Or copy the skill folder (.github/skills/docs-design in github/gh-aw) into .claude/skills/docs-design in your project. Claude Code loads it when a task matches its description.

How do I install Docs Design in Codex?

Run `npx skills add github/gh-aw --skill docs-design -a codex`. Or copy the skill folder (.github/skills/docs-design in github/gh-aw) into .agents/skills/docs-design in your project. Codex loads it when a task matches its description.

Can I use Docs Design 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 github/gh-aw --skill docs-design -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/docs-design, .gemini/skills/docs-design, .github/skills/docs-design and .opencode/skills/docs-design in your project.

What does Docs Design need to run?

SKILL.md names no scripts, command-line tools or credentials: Docs Design is instructions for the agent only.

Does Docs Design access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Docs Design 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 Docs Design use?

Docs Design 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 Docs Design use?

About 1.1k tokens (SKILL.md is roughly 4.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Docs Design?

Skills that share tags, products or a category with Docs Design: Bryl Minimal Design (bryllim/bryl-minimal-design, 115 stars), Impeccable (bestofjs/bestofjs, 3.1k stars), UI UX Pro Max (saoudi-h/solar-icons, 190 stars) and Frontend Design (anthropics/skills, 180k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Docs Design?

github (a GitHub organization, an official publisher) maintains it in github/gh-aw, which has 5,372 GitHub stars. The repository holds 54 skills in this directory. The repository was last updated on October 10, 2026.

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