Article Summary Card

Turn an article into a concise summary bundle.

When to use

• - Summarize a webpage or article and deliver the result as an image.
• Convert long text into a reusable set of outputs: JSON, Markdown, HTML, PNG.
• Produce repeatable summary cards with a consistent layout and predictable sizing.

Runtime Requirements

• - INLINECODE4
• INLINECODE5
• Chrome or Chromium for headless screenshots
• Python package: INLINECODE6

If Chrome is not installed at the default path, adjust the browser candidate list in scripts/render_card.py.

Workflow

1. 1. Read the input article from a URL or local file.
2. Extract the title and article body; remove obvious page chrome when possible.
3. In the current session, run two prompt rounds:

- Round 1: create a summary plan that decides how the article should be divided into sections. - Round 1 must also generate 3 to 8 short tags for the article. - Round 2: write the final summary JSON according to that plan.

1. 4. Use the unified renderer to export the final summary JSON as Markdown, HTML, and PNG.
2. Verify the outputs exist and have a reasonable size.

Commands

Extract article text for the session workflow:

CODEBLOCK0

The extracted JSON contains:

• - INLINECODE11
• INLINECODE12
• INLINECODE13

Then in the current session:

• - Use references/prompts/plan-system.md and references/prompts/plan-user.md to design the summary structure.
• Use references/prompts/summary-system.md and references/prompts/summary-user.md to write the final summary JSON.
• Include tags in the final summary JSON and show them at the end of the rendered card and Markdown output.

Preferred final export:

CODEBLOCK1

This produces:

• - INLINECODE19
• INLINECODE20
• INLINECODE21

Optional lower-level renderers:

CODEBLOCK2

Adjust styles in:

CODEBLOCK3

The renderer keeps HTML and CSS separate:

CODEBLOCK4

The size system is based on a 375px design width multiplied by SCREEN_RATIO in CSS and Python.

Optional helper: generate a local heuristic draft JSON when you want a quick bootstrap, but do not treat it as the preferred path for high-quality output:

CODEBLOCK5

For final output, replace or rewrite that draft in-session and then use render_outputs.py.
summarize_article.py is a compatibility helper, not the main summarizer.

Cross-Platform Adapters

• - INLINECODE25

- Native entrypoint is this skill folder itself: article-summary-card/SKILL.md - Optional UI metadata: article-summary-card/agents/openai.yaml

• - INLINECODE28

- Project slash command: .claude/commands/article-summary-card.md - Usage pattern: /article-summary-card <url-or-file> [output-stem]

• - INLINECODE31

- OpenClaw uses skill folders containing SKILL.md, so this same directory is portable. - Install helper:

CODEBLOCK6

- Default destination: INLINECODE33

Notes

• - This skill prefers deterministic rendering over image-generation models so long Chinese text stays accurate.
• The preferred summarizer is the current session model, not an API call inside Python.
• Summary instructions are intentionally extracted into references/prompts/ so they can be revised without editing Python code.
• Cross-platform portability comes from keeping one shared skill core and only adding thin platform entrypoints.
• If a site is hard to extract, inspect the HTML and add a site-specific extraction rule in scripts/summarize_article.py.
• For very long articles, keep the summary short enough to fit on one card. If it still overflows, shorten section points before re-rendering.
• INLINECODE36 no longer performs LLM calls; it only generates a heuristic draft JSON.
• When DOM height measurement succeeds, the renderer trusts that height and skips whitespace auto-cropping to avoid cutting off low-contrast tags or footer content.
• The renderer uses overscan-then-crop for long screenshots to avoid incomplete bottom rendering in headless Chrome.