docs-page

Name: docs-page
Author: mphinance

15stars3forks

How to install docs-page?

mphinance/alpha-skills/docs-page

$npx -y skills add mphinance/alpha-skills --skill docs-page

Installs into the current project.

Summary

A documentation page — left nav, scrollable article body, right-rail table of contents. Use when the brief mentions "docs", "documentation", "guide", "API reference", or "tutorial".

Files · 1

View on GitHub

SKILL.md

1	# Docs Page Skill
2
3	Produce a single, three-column documentation page in one HTML file.
4
5	## Workflow
6
7	1. Read the active DESIGN.md (injected above). Use the body type token for
8	prose; the mono token for code; respect line-height and max-width rules.
9	2. Pick a topic from the brief — the page should look like real docs, not
10	a generic wireframe. Concrete API names, command examples, plausible
11	parameters.
12	3. Lay out three regions:
13	- Left nav (240–280px, sticky): grouped link list, current page bolded
14	with a left-edge accent stripe. 3–5 groups of 4–8 links.
15	- Article body (max-width ~720px, centered in the middle column):
16	H1, lede paragraph, H2 sections, code blocks, callout boxes (note /
17	warning), inline links, lists.
18	- Right TOC (200–240px, sticky): "On this page" with the H2/H3
19	anchors, current section highlighted as the user scrolls.
20	4. Write a single HTML document:
21	- `<!doctype html>` through `</html>`, all CSS inline.
22	- CSS Grid for the three columns; sticky positioning for the rails.
23	- Code blocks: monospace token, soft surface fill, copy-button affordance
24	(visual only — no JS needed).
25	- Anchor IDs on every H2/H3 so the TOC links work.
26	- `data-od-id` on the nav, article, and TOC.
27	5. Prose: write at least 350 words of believable docs. Include at least
28	one shell command, one code snippet (5–15 lines), one callout, one table.
29	6. Self-check:
30	- Body text wraps at the DS line-length sweet spot (60–75 chars).
31	- Code uses the DS mono token, not generic `monospace`.
32	- Accent is restrained — used for active nav item, links, one callout
33	border. Not on body text.
34	- Page is readable at 1280w and collapses gracefully below 900w (TOC drops
35	out, nav becomes a top drawer).
36
37	## Output contract
38
39	Emit between `<artifact>` tags:
40
41	```
42	<artifact identifier="docs-slug" type="text/html" title="Docs — Page Title">
43	<!doctype html>
44	<html>...</html>
45	</artifact>
46	```
47
48	One sentence before the artifact, nothing after.

People who liked this also viewed

6 picks

Type

grill-with-docsA relentless interview to sharpen a plan or design, which also creates docs (ADR's and glossary) as we go.SkillsJul 2026537k182k
lark-minutes飞书妙记：搜索妙记、查看妙记基础信息、下载/上传音视频、读取或编辑妙记的产物内容、改标题、替换说话人/关键词、申请妙记查看/编辑权限。当给出minute_token、本地音视频文件，要查/改/转妙记产物，或用户明确要主动申请妙记权限时使用；本地音视频转纪要/逐字稿优先走本 skill，不要用 ffmpeg/whisper 本地转写。不负责：获取会议关联妙记，或仅按自然语言标题定位纪要SkillsJul 2026379k16k
lark-markdown飞书 Markdown：查看、创建、上传、编辑和比较 Markdown 文件。当用户需要创建或编辑 Markdown 文件、读取、修改、局部 patch 或比较差异时使用。不负责将 Markdown 导入为飞书在线文档，也不负责文件搜索、权限、评论、移动、删除等云空间管理操作。SkillsJul 2026295k16k
docxUse this skill whenever the user wants to create, read, edit, or manipulate Word documents (.docx files) or Word templates (.dotx files). Triggers include: any mention of 'Word doc', 'word document', SkillsJul 2026157k163k
edit-articleSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026154k181k
lark-note飞书会议纪要（Note）直查：已知 note_id 时查询纪要详情、展示类型、关联文档 token，并读取 unified 原始逐字记录。当用户已持有 note_id，或从文档显式 vc-node-id 获得 note_id 时使用。不负责会议/日程/妙记定位、文档标题搜索或 Docx 正文读取。SkillsJul 2026154k16k

docs-page

15stars3forks

View on GitHub

How to install docs-page?

mphinance/alpha-skills/docs-page

$npx -y skills add mphinance/alpha-skills --skill docs-page

Installs into the current project.

Summary

A documentation page — left nav, scrollable article body, right-rail table of contents. Use when the brief mentions "docs", "documentation", "guide", "API reference", or "tutorial".

Files · 1

View on GitHub

SKILL.md

1	# Docs Page Skill
2
3	Produce a single, three-column documentation page in one HTML file.
4
5	## Workflow
6
7	1. Read the active DESIGN.md (injected above). Use the body type token for
8	prose; the mono token for code; respect line-height and max-width rules.
9	2. Pick a topic from the brief — the page should look like real docs, not
10	a generic wireframe. Concrete API names, command examples, plausible
11	parameters.
12	3. Lay out three regions:
13	- Left nav (240–280px, sticky): grouped link list, current page bolded
14	with a left-edge accent stripe. 3–5 groups of 4–8 links.
15	- Article body (max-width ~720px, centered in the middle column):
16	H1, lede paragraph, H2 sections, code blocks, callout boxes (note /
17	warning), inline links, lists.
18	- Right TOC (200–240px, sticky): "On this page" with the H2/H3
19	anchors, current section highlighted as the user scrolls.
20	4. Write a single HTML document:
21	- `<!doctype html>` through `</html>`, all CSS inline.
22	- CSS Grid for the three columns; sticky positioning for the rails.
23	- Code blocks: monospace token, soft surface fill, copy-button affordance
24	(visual only — no JS needed).
25	- Anchor IDs on every H2/H3 so the TOC links work.
26	- `data-od-id` on the nav, article, and TOC.
27	5. Prose: write at least 350 words of believable docs. Include at least
28	one shell command, one code snippet (5–15 lines), one callout, one table.
29	6. Self-check:
30	- Body text wraps at the DS line-length sweet spot (60–75 chars).
31	- Code uses the DS mono token, not generic `monospace`.
32	- Accent is restrained — used for active nav item, links, one callout
33	border. Not on body text.
34	- Page is readable at 1280w and collapses gracefully below 900w (TOC drops
35	out, nav becomes a top drawer).
36
37	## Output contract
38
39	Emit between `<artifact>` tags:
40
41	```
42	<artifact identifier="docs-slug" type="text/html" title="Docs — Page Title">
43	<!doctype html>
44	<html>...</html>
45	</artifact>
46	```
47
48	One sentence before the artifact, nothing after.

People who liked this also viewed

6 picks

Type