frontend-design-pro

Name: frontend-design-pro
Author: QinghongLin

146stars19forks

How to install frontend-design-pro?

qinghonglin/data2story-skill/frontend-design-pro

$npx -y skills add QinghongLin/data2story-skill --skill frontend-design-pro

Installs into the current project.

Summary

Shared UI/visual-design rule library for building polished, distinctive, multimedia-rich self-contained HTML stories. The Data2Story Designer and Programmer read it to choose a visual language (theme, type pairing, layout, components, motion) and implement it so every blog looks

Files · 1

View on GitHub

SKILL.md

1	# Frontend Design
2
3	A shared design system for building beautiful, distinctive, multimedia-rich HTML stories. This is not a pipeline stage; it is a library the Designer reads to choose a visual language and the Programmer reads to implement it, so output looks like an editorial product, not a default template.
4
5	## When to use
6
7	- Designer: before writing `page_rhythm` and per-section visuals, pick a theme and component vocabulary from here. Borrow tokens, layout, and component recipes; record the chosen theme in `designer.json` `page_rhythm`.
8	- Programmer: implement the chosen theme's tokens as CSS `:root` variables and build each visual with the matching component recipe and motion/accessibility rules here.
9
10	## Core principles
11
12	1. Editorial, not generic. Avoid the default-AI look (bootstrap blue, purple gradient hero, everything centered, one system font, evenly-spaced soulless cards). Commit to one bold idea per story. See [`references/themes.json`](references/themes.json) → `anti_patterns`.
13	2. Rich media by default. A story should use multiple channels well — charts, images, video, audio, interactives/maps — each presented with craft, not dumped in. See [`references/media_presentation.json`](references/media_presentation.json).
14	3. One system, themed per story. All color/type/space/shadow flow from CSS `:root` tokens so the whole page is coherent and re-themeable. See [`references/design_tokens.json`](references/design_tokens.json) for tokens and [`references/typography.json`](references/typography.json) for concrete `file://`-safe font-pairing stacks.
15	4. Structure carries the reading. A clear content column, deliberate full-bleed moments, and consistent section rhythm. See [`references/layout.json`](references/layout.json).
16	5. Motion and access are part of the design. Subtle scroll reveals and transitions, always respecting `prefers-reduced-motion`, AA contrast, focus states, and "never autoplay sound." See [`references/motion.json`](references/motion.json) for motion tokens, choreography, accessibility, and the anti-slop checklist.
17	6. Self-contained. Single HTML file; allowed CDNs only (Vega-Embed, Leaflet, optionally D3/PDF.js); inline data; works on `file://`.
18
19	## References
20
21	- [`references/design_tokens.json`](references/design_tokens.json) — color roles, data-color scales, fluid type scale, spacing/radius/shadow, themed via `:root`.
22	- [`references/layout.json`](references/layout.json) — content column, full-bleed breakout, section rhythm, responsive grid, sticky patterns.
23	- [`references/components.json`](references/components.json) — recipes: hero/teaser, stat callouts, card deck, pull quote, chart/map frames, audio players, scrollytelling, before/after, guess-reveal, data table, references footer.
24	- [`references/media_presentation.json`](references/media_presentation.json) — how to present each channel (image, video, audio, chart, map, instance) richly, and the "all five channels by default" doctrine.
25	- [`references/themes.json`](references/themes.json) — ready-made distinctive themes (token presets) and the anti-patterns to avoid.
26	- [`references/interaction_playbook.json`](references/interaction_playbook.json) — the deep interaction/craft playbook: craft principles, centerpiece doctrine, the universal engine (state + render + steps[]), and recipes for explorables/scrollytelling/guess-reveal.
27	- [`references/pitfalls.json`](references/pitfalls.json) — the 错题本 (mistakes-never-to-repeat ledger): real bugs from shipped runs, each with how a role detects it. Read before building.
28	- [`references/exemplars/cinematic_flagship.md`](references/exemplars/cinematic_flagship.md) — a proven cinematic-blog blueprint with copy-paste recipes (pick-a-side hero, accuracy scorecard, cinemagraph hero, continuous backdrop, publish-gate manifest).
29	- [`references/abstract_excellence.json`](references/abstract_excellence.json) — the positive flagship playbook for the dry / abstract / computational topic (chart-led / statistical / non-photographic): reframe hook, signature annotated chart, the reader's own position, disciplined typography, and the runnable-verify layer. Read whenever the topic resolves `is_visual=false` (especially `is_computational=true`) — th

People who liked this also viewed

6 picks

Type

frontend-design-pro

146stars19forks

View on GitHub

How to install frontend-design-pro?

qinghonglin/data2story-skill/frontend-design-pro

$npx -y skills add QinghongLin/data2story-skill --skill frontend-design-pro

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Frontend Design
2
3	A shared design system for building beautiful, distinctive, multimedia-rich HTML stories. This is not a pipeline stage; it is a library the Designer reads to choose a visual language and the Programmer reads to implement it, so output looks like an editorial product, not a default template.
4
5	## When to use
6
7	- Designer: before writing `page_rhythm` and per-section visuals, pick a theme and component vocabulary from here. Borrow tokens, layout, and component recipes; record the chosen theme in `designer.json` `page_rhythm`.
8	- Programmer: implement the chosen theme's tokens as CSS `:root` variables and build each visual with the matching component recipe and motion/accessibility rules here.
9
10	## Core principles
11
12	1. Editorial, not generic. Avoid the default-AI look (bootstrap blue, purple gradient hero, everything centered, one system font, evenly-spaced soulless cards). Commit to one bold idea per story. See [`references/themes.json`](references/themes.json) → `anti_patterns`.
13	2. Rich media by default. A story should use multiple channels well — charts, images, video, audio, interactives/maps — each presented with craft, not dumped in. See [`references/media_presentation.json`](references/media_presentation.json).
14	3. One system, themed per story. All color/type/space/shadow flow from CSS `:root` tokens so the whole page is coherent and re-themeable. See [`references/design_tokens.json`](references/design_tokens.json) for tokens and [`references/typography.json`](references/typography.json) for concrete `file://`-safe font-pairing stacks.
15	4. Structure carries the reading. A clear content column, deliberate full-bleed moments, and consistent section rhythm. See [`references/layout.json`](references/layout.json).
16	5. Motion and access are part of the design. Subtle scroll reveals and transitions, always respecting `prefers-reduced-motion`, AA contrast, focus states, and "never autoplay sound." See [`references/motion.json`](references/motion.json) for motion tokens, choreography, accessibility, and the anti-slop checklist.
17	6. Self-contained. Single HTML file; allowed CDNs only (Vega-Embed, Leaflet, optionally D3/PDF.js); inline data; works on `file://`.
18
19	## References
20
21	- [`references/design_tokens.json`](references/design_tokens.json) — color roles, data-color scales, fluid type scale, spacing/radius/shadow, themed via `:root`.
22	- [`references/layout.json`](references/layout.json) — content column, full-bleed breakout, section rhythm, responsive grid, sticky patterns.
23	- [`references/components.json`](references/components.json) — recipes: hero/teaser, stat callouts, card deck, pull quote, chart/map frames, audio players, scrollytelling, before/after, guess-reveal, data table, references footer.
24	- [`references/media_presentation.json`](references/media_presentation.json) — how to present each channel (image, video, audio, chart, map, instance) richly, and the "all five channels by default" doctrine.
25	- [`references/themes.json`](references/themes.json) — ready-made distinctive themes (token presets) and the anti-patterns to avoid.
26	- [`references/interaction_playbook.json`](references/interaction_playbook.json) — the deep interaction/craft playbook: craft principles, centerpiece doctrine, the universal engine (state + render + steps[]), and recipes for explorables/scrollytelling/guess-reveal.
27	- [`references/pitfalls.json`](references/pitfalls.json) — the 错题本 (mistakes-never-to-repeat ledger): real bugs from shipped runs, each with how a role detects it. Read before building.
28	- [`references/exemplars/cinematic_flagship.md`](references/exemplars/cinematic_flagship.md) — a proven cinematic-blog blueprint with copy-paste recipes (pick-a-side hero, accuracy scorecard, cinemagraph hero, continuous backdrop, publish-gate manifest).
29	- [`references/abstract_excellence.json`](references/abstract_excellence.json) — the positive flagship playbook for the dry / abstract / computational topic (chart-led / statistical / non-photographic): reframe hook, signature annotated chart, the reader's own position, disciplined typography, and the runnable-verify layer. Read whenever the topic resolves `is_visual=false` (especially `is_computational=true`) — th

People who liked this also viewed

6 picks

Type