CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

frame-data-chart-nyt

NYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band).

62

Quality

78%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./plugins/_official/examples/frame-data-chart-nyt/SKILL.md

The canonical home for this skill is frame-data-chart-nyt in nexu-io/open-design

SKILL.md
Quality
Evals
Security

Quality

Content

86%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

A lean, token-efficient design spec that gives Claude everything needed to produce an NYT-style chart frame: exact colors, typography, layout proportions, animation timings, and per-chart-type rules. Main gaps are the absence of a minimal executable HTML/SVG starter and any explicit output-file step (the frontmatter preview expects index.html, which the body never names).

Suggestions

Add a minimal executable HTML/SVG starter skeleton (matching the '≤80 lines inline SVG' rule) so the output is copy-paste ready.

State the font-loading mechanism (e.g., Google Fonts CDN link) since 'single-file HTML' with Source Serif Pro / IBM Plex requires it.

Name the output file explicitly (index.html, per the frontmatter preview entry) as a final step.

DimensionReasoningScore

Conciseness

The body is pure design specification — exact hex colors ('#a91d1d', '#f7f5ee'), px sizes (11px, 2.5px), vw units, font stacks, and animation timings (200ms, 1.2s ease-out) with zero padding or explanation of concepts Claude already knows. Every line carries a constraint.

5 / 5

Actionability

Concrete, executable guidance throughout: canvas dims '1920×1080', '单文件 HTML', '手写 SVG, 不超过 80 行 inline', an HTML snippet '<text class="annot">2024 · 412M</text>', and per-chart-type specs. Minor gaps: no complete starter HTML/SVG skeleton and no font-loading mechanism (CDN link) specified for the single-file output.

4 / 5

Workflow Clarity

Sections follow the build order (kicker → title → chart → source → animation) and the input branch ('如果输入是文本结论, 自动估算合理坐标…如果是 CSV/JSON, 直接绘制') is explicit. Not 5: there are no validation checkpoints (e.g., verifying data sufficiency or output renders), though the task is non-destructive so the cap doesn't apply.

4 / 5

Progressive Disclosure

The body is ~23 lines, single-purpose, references no external files (and no references/ bundle exists), and is cleanly sectioned (模板/意图/画布/布局/设计细节). Per the under-50-lines guideline, well-organized sections with no need for external references score 5.

5 / 5

Total

18

/

20

Passed

Description

61%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A specific, differentiated description that clearly conveys the NYT-editorial aesthetic and chart types covered, written in third-person fragment style. Its weaknesses are the missing 'Use when...' trigger clause (which caps completeness) and the unstated core action — turning user data into a single animated chart frame.

Suggestions

Add an explicit trigger clause, e.g. 'Use when the user wants a New York Times-style chart, editorial data visualization, or an animated single-frame video chart.'

State the core action in the description: 'Turns user data (CSV/JSON or a conclusion) into a single-frame NYT-style animated chart video.'

Include common synonyms like 'New York Times' and 'data visualization' to improve trigger recall.

DimensionReasoningScore

Specificity

Names the domain and concrete deliverable features — 'staggered reveal animation', 'editorial-grade charts (line, bar, or range band)', 'NYT-newsroom typography' — but contains no action verbs, so what the skill actually does (turn user data into a single video frame) is never stated. Fits anchor 3; not 4 because several specific capabilities are listed but the core action itself is a gap.

3 / 5

Completeness

The 'what' is clear and specific (NYT-style typography + staggered reveal animation + editorial-grade charts in three types) and 'when' is only weakly implied by 'NYT-newsroom'. The judging guideline caps completeness at 3 for a missing 'Use when...' clause or equivalent, which applies here; not 2 because the 'what' is concrete rather than vague.

4 / 5

Trigger Term Quality

Natural terms users would say are present: 'NYT', 'typography', 'animation', 'charts', 'line', 'bar'. Missing common variations like 'New York Times', 'data visualization', or 'editorial chart'. Good coverage with a few gaps — anchor 4, not 5; not 3 because the chart-type synonyms go beyond a single generic keyword.

4 / 5

Distinctiveness Conflict Risk

'NYT-newsroom typography' and 'editorial-grade charts' carve a clear stylistic niche with distinct triggers, but 'charts (line, bar, or range band)' overlaps with generic charting/dataviz skills. Mostly distinct with minor overlap risk — anchor 4, not 5.

4 / 5

Total

15

/

20

Passed

Validation

93%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

Total

15

/

16

Passed

Repository

nexu-io/open-design

Path

plugins/_official/examples/frame-data-chart-nyt/SKILL.md

Revision

78d5637

Reviewed

Table of Contents

DiscoveryImplementationValidation

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.

Claim skill