frontend-design-pro
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 intentional and editorial, never templated. Use when designing or reshaping a story's look, picking fonts/colors/themes, building a hero/chart/card/map/audio component, adding motion or an interactive, or fixing a visual defect (invisible chart, overflow, broken media, AI-slop look). Not a pipeline stage — a design sou
npx skills add QinghongLin/data2story-skill --skill frontend-design-pro --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Frontend Design 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. ## When to use - **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`. - **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. ## Core principles 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`. 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 [`re
- When to use
- Core principles
- References
What does the frontend-design-pro skill do?
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 intentional and editorial, never templated. Use when designing or reshaping a story's look, picking fonts/colors/themes, building a hero/chart/card/map/audio component, adding motion or an interactive, or fixing a visual defect (invisible chart, overflow, broken media, AI-slop look). Not a pipeline stage — a design sou
How do I install it?
Run `npx skills add QinghongLin/data2story-skill --skill frontend-design-pro --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From QinghongLin/data2story-skill, a repository with 149 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.