page-claw

Simplified Chinese

Turn a Markdown story into a polished static HTML page, with design intelligence baked in.

page-claw is an AI agent skill collection for turning page-story-*.md files into single-file static HTML pages. It supports personal academic pages, professional profiles, and project pages, and can be extended to other Markdown-to-page work.

How It Works

page-story.md
    │
    ▼
[1. design context] → gathers direction through dialogue
    │
    ▼
[2. design system]  → establishes palette, typography, and style
    │
    ▼
[3. implementation plan] → describes the build
    │
    ▼
[4. build]          → index.html (single file, no build step)
    │
    ▼
[5. quality pass]   → polish and audit

Prerequisites

• An AI coding agent that can load Markdown skill instructions.
• Python 3 and Node.js for the scripts used by the bundled design Skills.

All sub-skills required by page-claw, pageclaw-batch, and DeepShow Creation are included in this repository. Installation does not rely on Skills already present in the user's environment. DeepShow provides one complete-journey entry point, four independently callable stage Skills, and independent document-restoration and restoration-review entry points; PageCreator internally invokes bundled ui-ux-pro-max, writing-plans, polish, audit, quieter, critique, and Impeccable resources.

Installation

git clone https://github.com/XY-Showing/pageclaw
cd pageclaw

# Codex
sh install-skills.sh ~/.codex/skills

# Claude Code: use this instead
# sh install-skills.sh ~/.claude/skills

The installer copies the complete skills/ bundle, including all sub-skills and their required resources. It refuses to overwrite an existing same-named path; use an empty Skill destination or resolve collisions before installing. For other agents, pass that agent's Skill directory as the only argument.

Quick Start

1. Create a page-story-*.md file with your content.
2. Open your AI coding agent in the project directory.
3. Invoke the page-claw skill with that file.
4. Follow its visual-direction prompts; the output is index.html, which opens directly in a browser.

Skills

Skill	Purpose
page-claw	Orchestrates the original Markdown-to-page pipeline.
audit, polish, quieter, critique	Accessibility, quality, visual restraint, and design review.
impeccable	Bundled design context, craft, and review knowledge used by the quality Skills.
writing-plans	Bundled implementation-planning Skill required by PageClaw and DeepShow PageCreator.
ui-ux-pro-max	UI/UX design intelligence.
ckm:design-system, ckm:design, ckm:ui-styling	ClaudeKit design-system, presentation, and UI guidance.
pageclaw-batch, pageclaw-batch-test	Batch page-claw workflows.

DeepShow Creation MVP

DeepShow Creation is a creation-only loop:

DeepShow is centered on showing. It helps users show what needs to be shown and show it better.

Source Materials + conversation → PageStory → conversational review
→ Design Context → Implementation Plan → HTML → conversational review

It supports Scroll Pages and HTML Decks. It does not provide publishing, deployment, approval, governance, or workflow state.

Public Skills:

• deepshow completes or resumes the full creation journey through the four stage Skills.
• deepshow-storycreator creates or revises pagestory.md.
• deepshow-storyauditor independently reviews PageStory in chat and hands accepted changes back to StoryCreator.
• deepshow-pagecreator runs the complete design-context, design-system, implementation-plan, build, and quality pipeline, producing assets/*-design.md, assets/*-impl.md, and index.html.
• deepshow-pageauditor reviews rendered HTML in chat and hands accepted changes back to PageCreator.
• deepshow-storyextractor faithfully restores one source document as a complete, editable pagestory.md that can proceed to downstream DeepShow work.
• deepshow-extractionauditor independently checks a PageStory against its source document for restoration loss or distortion.

PageStory is semantic Markdown and the source for factual and editorial page content. Creators infer evident Story Presets and Render Targets. Blank-slate page creation resolves reference treatment, visual direction, aesthetic style, and layout before building. PageCreator then persists the Design Context and UI/UX Pro Max system in assets/<name>-design.md, invokes the bundled writing-plans Skill to create assets/<name>-impl.md, executes that plan, and runs the complete polish → audit → conditional quieter / critique quality pass with Impeccable as the bundled craft foundation. Independent StoryAuditor and PageAuditor reviews remain conversational by default; audit files are created only when explicitly requested.

Shared references: Story Presets and Render Targets.

Examples: academic Scroll Page, creative-portfolio Scroll Page, and conference HTML Deck.

File Structure

pageclaw/
├── README.md
├── README.zh-CN.md
├── docs/
├── skills/
│   ├── page-claw/          # Original page pipeline
│   ├── deepshow/           # Complete-journey entry point
│   ├── deepshow-*/        # Four stage skills plus extraction tools
│   ├── shared/            # DeepShow presets and targets
│   └── audit/, polish/, critique/, quieter/, impeccable/, writing-plans/, ui-ux-pro-max/
└── examples/deepshow/     # Three end-to-end DeepShow examples

License

MIT

Acknowledgements

This project vendors or incorporates Skills from four open-source libraries:

• Impeccable, by Paul Bakaus (impeccable, audit, polish, quieter, and critique; Apache 2.0).
• Superpowers, by Jesse Vincent (writing-plans; MIT).
• UI/UX Pro Max (ui-ux-pro-max).
• ClaudeKit (ckm:design-system, ckm:design, and ckm:ui-styling).