editorial-card-screenshot

Name: editorial-card-screenshot
Author: shaom

497stars32forks

How to install editorial-card-screenshot?

shaom/infocard-skills/editorial-card-screenshot

$npx -y skills add shaom/infocard-skills --skill editorial-card-screenshot

Installs into the current project.

Summary

Generate high-density editorial HTML info cards in a modern magazine and Swiss-international style, then capture them as ratio-specific screenshots. Use when the user provides text or core information and wants: (1) a complete responsive HTML info card, (2) the design to follow t

Files · 1

View on GitHub

SKILL.md

1	# Editorial Card Screenshot
2
3	## Overview
4
5	Turn source text into a compact, high-contrast HTML information card that follows the user's editorial prompt, then render a screenshot in one of the supported aspect ratios.
6	The goal is not just density but editorial quality: clear hierarchy, strong visual anchors, and screenshot-stable rendering without accidental cropping or dead space.
7
8	Always preserve three output stages unless the user explicitly asks to skip one:
9	1. Write one sentence judging the information density as high, medium, or low.
10	2. Output the complete HTML with embedded CSS.
11	3. Self-check that body text remains readable on mobile.
12
13	## Workflow
14
15	### 1. Analyze Content Density
16
17	Read [references/content-fit.md](references/content-fit.md). Inventory semantic units, estimate density, and choose layout strategy from both density and ratio:
18	- Use "big-character" composition when content is sparse and a single phrase, number, or hook can carry the page.
19	- Use a two-column or three-column editorial grid when content is dense and needs stronger hierarchy.
20	- Use oversized numbers, heavy rules, tinted blocks, and pull-quote scale to avoid dead space.
21	- Do not force dense content into evenly weighted tiles. Build primary blocks, secondary blocks, and lighter supporting blocks.
22	- Match structure to content type:
23	- Ranking / recommendation content: allow asymmetric hero + structured list.
24	- Tutorial / analysis / interpretation content: group into overview, core judgment, interpretation, boundary, and conclusion.
25	- Write a short space-allocation plan before final HTML. Assign approximate area to hero, primary module, support area, and footer.
26	- Do not use the starter template's current arrangement as evidence that it is the right skeleton.
27
28	Before compressing content, first change the layout skeleton.
29	- Ratio changes should primarily change reading path, hierarchy, and module arrangement.
30	- Do not treat ratio changes as a reason to delete content by default.
31	- Only compress, group, or summarize when the current ratio cannot hold the content clearly after layout has already been restructured.
32
33	### 2. Apply the Stored Editorial Rules
34
35	Use these defaults unless the user overrides them:
36	- Import Google Fonts:
37	```html
38	<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@700;900&family=Noto+Sans+SC:wght@400;500;700&family=Oswald:wght@500;700&family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
39	```
40	- Keep body text at `18px` to `20px` on a 900px-wide composition.
41	- Keep meta/tag text at `13px` minimum.
42	- Use compact spacing: container padding `40px` to `50px`, component gaps `30px` to `40px`, line-height `1.5` to `1.6`.
43	- Add visual weight with `4px` to `6px` accent rules, subtle gray planes, and `4%` noise overlays.
44	- Favor `#f5f3ed` or similar warm-paper backgrounds unless the user supplies another palette.
45	- Preserve breathing room. Do not shrink outer margins so much that the card loses composure.
46	- For title zones, prefer larger line-height and clearer separation from subtitle / summary blocks.
47	- In dense right-side modules, reduce font weight slightly so the page stays clear without feeling heavy.
48	- Use stronger internal structure inside blocks: subheads, bullets, numbered lines, compare rows, or secondary labels.
49	- Avoid equal-weight boxes when the card is dense. At least one module should feel visually heavier than the others.
50	- Avoid making every module use the exact same visual language. Differentiate at least one or two areas through tone, scale, background treatment, or typographic weight.
51	- Default to a calm editorial mode with selective highlights. If the user asks for stronger expression, you may push toward:
52	- `Bold`: more cover-like, stronger anchors, larger weak-background text, heavier accents.
53	- `Refined`: lighter contrast, quieter accents, more restrained paper-like atmosphere.
54	- `Hybrid`: the recommended default when style is not specified; refined overall with a few bold anchor moments.
55	- Keep Google Fonts imports, but always provide local fallback stacks so the rendered PNG stays structurally stable when remote fonts fail to load.
56	- If the user explicitly provides a title, use that exact title as the main headline by default. Only compress or reinterpret it when the user asks or when the ratio cannot hold it clearly after layout changes.
57	- Put interpretation

People who liked this also viewed

6 picks

Type

editorial-card-screenshot

497stars32forks

View on GitHub

How to install editorial-card-screenshot?

shaom/infocard-skills/editorial-card-screenshot

$npx -y skills add shaom/infocard-skills --skill editorial-card-screenshot

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Editorial Card Screenshot
2
3	## Overview
4
5	Turn source text into a compact, high-contrast HTML information card that follows the user's editorial prompt, then render a screenshot in one of the supported aspect ratios.
6	The goal is not just density but editorial quality: clear hierarchy, strong visual anchors, and screenshot-stable rendering without accidental cropping or dead space.
7
8	Always preserve three output stages unless the user explicitly asks to skip one:
9	1. Write one sentence judging the information density as high, medium, or low.
10	2. Output the complete HTML with embedded CSS.
11	3. Self-check that body text remains readable on mobile.
12
13	## Workflow
14
15	### 1. Analyze Content Density
16
17	Read [references/content-fit.md](references/content-fit.md). Inventory semantic units, estimate density, and choose layout strategy from both density and ratio:
18	- Use "big-character" composition when content is sparse and a single phrase, number, or hook can carry the page.
19	- Use a two-column or three-column editorial grid when content is dense and needs stronger hierarchy.
20	- Use oversized numbers, heavy rules, tinted blocks, and pull-quote scale to avoid dead space.
21	- Do not force dense content into evenly weighted tiles. Build primary blocks, secondary blocks, and lighter supporting blocks.
22	- Match structure to content type:
23	- Ranking / recommendation content: allow asymmetric hero + structured list.
24	- Tutorial / analysis / interpretation content: group into overview, core judgment, interpretation, boundary, and conclusion.
25	- Write a short space-allocation plan before final HTML. Assign approximate area to hero, primary module, support area, and footer.
26	- Do not use the starter template's current arrangement as evidence that it is the right skeleton.
27
28	Before compressing content, first change the layout skeleton.
29	- Ratio changes should primarily change reading path, hierarchy, and module arrangement.
30	- Do not treat ratio changes as a reason to delete content by default.
31	- Only compress, group, or summarize when the current ratio cannot hold the content clearly after layout has already been restructured.
32
33	### 2. Apply the Stored Editorial Rules
34
35	Use these defaults unless the user overrides them:
36	- Import Google Fonts:
37	```html
38	<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@700;900&family=Noto+Sans+SC:wght@400;500;700&family=Oswald:wght@500;700&family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
39	```
40	- Keep body text at `18px` to `20px` on a 900px-wide composition.
41	- Keep meta/tag text at `13px` minimum.
42	- Use compact spacing: container padding `40px` to `50px`, component gaps `30px` to `40px`, line-height `1.5` to `1.6`.
43	- Add visual weight with `4px` to `6px` accent rules, subtle gray planes, and `4%` noise overlays.
44	- Favor `#f5f3ed` or similar warm-paper backgrounds unless the user supplies another palette.
45	- Preserve breathing room. Do not shrink outer margins so much that the card loses composure.
46	- For title zones, prefer larger line-height and clearer separation from subtitle / summary blocks.
47	- In dense right-side modules, reduce font weight slightly so the page stays clear without feeling heavy.
48	- Use stronger internal structure inside blocks: subheads, bullets, numbered lines, compare rows, or secondary labels.
49	- Avoid equal-weight boxes when the card is dense. At least one module should feel visually heavier than the others.
50	- Avoid making every module use the exact same visual language. Differentiate at least one or two areas through tone, scale, background treatment, or typographic weight.
51	- Default to a calm editorial mode with selective highlights. If the user asks for stronger expression, you may push toward:
52	- `Bold`: more cover-like, stronger anchors, larger weak-background text, heavier accents.
53	- `Refined`: lighter contrast, quieter accents, more restrained paper-like atmosphere.
54	- `Hybrid`: the recommended default when style is not specified; refined overall with a few bold anchor moments.
55	- Keep Google Fonts imports, but always provide local fallback stacks so the rendered PNG stays structurally stable when remote fonts fail to load.
56	- If the user explicitly provides a title, use that exact title as the main headline by default. Only compress or reinterpret it when the user asks or when the ratio cannot hold it clearly after layout changes.
57	- Put interpretation

People who liked this also viewed

6 picks

Type