Impeccable
bestofjs/bestofjs
A skill your agent uses when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a…
Pick the right way to represent a dataset so a reader gets the finding in three seconds — a catalog of 20+ chart and diagram forms with when-to-use and failure modes, plus the encoding decisions…
Install Data Forms
$ npx skills add huytieu/COG-second-brain --skill data-forms -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install huytieu/COG-second-brain data-forms --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/huytieu/COG-second-brain.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/data-forms .claude/skills/data-forms && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "data-forms" agent skill from https://github.com/huytieu/COG-second-brain/tree/main/skills/data-forms into .claude/skills/data-forms/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "data-forms", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/huytieu/COG-second-brain/tree/main/skills/data-formsType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add huytieu/COG-second-brain --skill data-forms -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install huytieu/COG-second-brain data-forms --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/huytieu/COG-second-brain.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/data-forms .agents/skills/data-forms && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "data-forms" agent skill from https://github.com/huytieu/COG-second-brain/tree/main/skills/data-forms into .agents/skills/data-forms/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "data-forms", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add huytieu/COG-second-brain --skill data-forms -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install huytieu/COG-second-brain data-forms --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/huytieu/COG-second-brain.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/data-forms .cursor/skills/data-forms && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "data-forms" agent skill from https://github.com/huytieu/COG-second-brain/tree/main/skills/data-forms into .cursor/skills/data-forms/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "data-forms", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/huytieu/COG-second-brain.git --path skills/data-forms--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add huytieu/COG-second-brain --skill data-forms -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install huytieu/COG-second-brain data-forms --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/huytieu/COG-second-brain.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/data-forms .gemini/skills/data-forms && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "data-forms" agent skill from https://github.com/huytieu/COG-second-brain/tree/main/skills/data-forms into .gemini/skills/data-forms/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "data-forms", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install huytieu/COG-second-brain data-formsInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add huytieu/COG-second-brain --skill data-forms -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/huytieu/COG-second-brain.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/data-forms .github/skills/data-forms && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "data-forms" agent skill from https://github.com/huytieu/COG-second-brain/tree/main/skills/data-forms into .github/skills/data-forms/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "data-forms", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add huytieu/COG-second-brain --skill data-forms -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install huytieu/COG-second-brain data-forms --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/huytieu/COG-second-brain.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/data-forms .opencode/skills/data-forms && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "data-forms" agent skill from https://github.com/huytieu/COG-second-brain/tree/main/skills/data-forms into .opencode/skills/data-forms/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "data-forms", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
data-forms- GitHub stars
- 1.3k
- Token cost
- ~1.7k tokens
- SKILL.md length
- 967 words
- Files
- 2 (incl. references)
- Skills in repo
- 37
- Repo updated
- First seen
- Licence
- MIT
At a glance
Pick the right way to represent a dataset so a reader gets the finding in three seconds — a catalog of 20+ chart and diagram forms with when-to-use and failure modes, plus the encoding decisions…
- Works in 6 steps: State the takeaway in one sentence. → Classify what the data does… → Read that form's entry in… → …
- Charting survey results
- SKILL.md covers Start here: the picker, Six decisions that matter more…, Encoding rules of thumb and Workflow, plus 2 more sections
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Data Forms is an agent skill from huytieu/COG-second-brain. Pick the right way to represent a dataset so a reader gets the finding in three seconds — a catalog of 20+ chart and diagram forms with when-to-use and failure modes, plus the encoding decisions that make any of them readable (takeaway headline, direct labels, kill the axis, highlight-and-mute, show the caveat). Style-agnostic — use with whatever palette or design system the destination already has. Use when charting survey results, benchmark data, usage metrics, or research findings for a post, brief, deck, or…
Its SKILL.md is about 1.7k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files, including reference files (for example `references/forms.md`).
It sits in Frontend & Design, covering Design systems. The repository describes itself as: Self-evolving second brain with 35 AI skills, 10 agents, and people CRM. Closed-loop harness: a V-model verification lifecycle where the worker never grades its own homework… The licence is MIT.
When your agent uses it
- Charting survey results
- Research findings for a post
- Whenever the default bar chart feels like its burying the point
Example prompts
- “/data-forms”
Workflow steps
6 steps, taken from the first numbered list in SKILL.md.
- State the takeaway in one sentence.
- Classify what the data does (distribution / ranking / comparison / trend /
- Read that form's entry in references/forms.md — especially its failure mode. If your
- Apply the six decisions and the encoding rules.
- Build it in whatever the destination uses.
- Render it and look at the image. Not the DOM, not the spec — the pixels. Run the
What it can do on your machine
Read from SKILL.md and the folder at commit 36ac9d7. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Data Forms loads about 1.7k tokens when it runs, and up to ~9k if it reads all its reference files. Until then it costs about 151 tokens; SKILL.md has 967 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from huytieu/COG-second-brain at commit 36ac9d7, republished under its MIT licence (© huytieu). 967 words, ~1,746 tokens.
Download SKILL.mdSave it as
.claude/skills/data-forms/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.- name
- data-forms
- description
- Pick the right way to represent a dataset so a reader gets the finding in three seconds — a catalog of 20+ chart and diagram forms with when-to-use and failure modes, plus the encoding decisions that make any of them readable (takeaway headline, direct labels, kill the axis, highlight-and-mute, show the caveat). Style-agnostic — use with whatever palette or design system the destination already has. Use when charting survey results, benchmark data, usage metrics, or research findings for a post, brief, deck, or report, and whenever the default bar chart feels like it's burying the point.
data-forms
A repertoire, not a style. Distilled from Lenny's Newsletter data illustrations (2025-2026 survey issues) — what makes those charts work is not the palette, it's the form selection and the encoding discipline. Both are portable to any visual language.
For the visual layer, use whatever the destination already has: your product's brand
tokens for in-product surfaces, the built-in dataviz skill for palette construction and
accessibility, your house style for personal sites. This skill decides what shape the data
takes — the layer above color.
Start here: the picker
| What the data does | Reach for | Form # |
|---|---|---|
| One question, 3-6 ordered answers | Ordered column · Waffle · Nested bands | 1 · 6 · 7 |
| One question, many multi-select answers | Ranked bar · Valence bar | 3 · 4 |
| Same metric, two points in time | Paired columns · Slope | 2 · 9 |
| Same metric, 3+ points in time | Time-series area · Bump | 13 · 18 |
| One metric across 7-10 ordered buckets | Staircase column | 14 |
| One metric across many unordered segments | Small multiples · Dot plot | 8 · 17 |
| Signed score (-100…+100, net, delta) | Diverging bar | 5 |
| Two groups compared across many rows | Dumbbell | 16 |
| Agreement / Likert across several statements | Centered stacked row | 19 |
| Segments × several metrics | Pill matrix | 10 |
| Open-text answers | Word cloud · Coded theme bar | 11 · 3 |
| A relationship the numbers can't carry | Metaphor diagram · Two-column flow | 12 · 20 |
| A named segmentation from clustering | Persona cards | 15 |
| Two dimensions, few labeled points | Named-quadrant scatter | 21 |
Full catalog with mockups and failure modes: references/forms.md.
Six decisions that matter more than the form
1. Write the takeaway before you pick a form. Finish the sentence "The point of this chart is ___." If you can't, you have a table, not a chart, and no form will save it. That sentence becomes the headline. Two legal headline modes:
- Claim, for comparisons and analysis — "Burnout is surging, and optimism is fading"
- Question verbatim, when the chart is the answer distribution — "How worried are you about layoffs?"
Never a field name. "Burnout by company size" is a spreadsheet tab.
2. Print every value. The reader should never estimate against an axis. Number sits adjacent to its mark. This is what earns you the right to do #3.
3. Delete the axis. Baseline only — no y-axis, no gridlines, no ticks. Exceptions: time series and slope charts, where the shape is the message and needs a reference grid. Everywhere else the axis is scaffolding you forgot to remove.
4. No legend when a direct label fits. Category name goes on or beside its mark. A legend is justified only when one key serves several panels (small multiples) or encodes a dimension orthogonal to position (valence, group membership).
5. Highlight two, mute the rest. In a nine-category comparison, only the one or two subjects named in the headline get emphasis; everyone else recedes. The chart should argue the headline, not present the table. If the highlighted subject isn't actually the outlier, the chart just disproved your headline — change the headline, not the data.
6. Show the caveat in-frame. Small n, margin of error, non-response, "percentages sum past 100 because multi-select" — put it in the chart, not a footnote. A dashed outline on a non-significant bar with a bracket reading "difference within margin of error" is more credible than a clean chart plus a disclaimer nobody reads.
And one restraint: at most one annotation. Point at the thing a reader would otherwise miss. Zero is fine. Two is clutter.
Show full SKILL.md (404 more words)Show less
Encoding rules of thumb
- Color means something or it isn't there. Don't color bars that a label already distinguishes. Reserve saturation for the subject of the headline.
- Sequential ramp = magnitude or rank. Diverging ramp = signed. Categorical = identity. Mixing these is the most common way a chart lies.
- Per-column scales in a matrix. In form 10, each metric gets its own ramp and its own direction, otherwise "dark = high" fights "dark = bad."
- Neutral is an unfilled outline, not grey. Grey reads as missing data.
- Redundant encoding is fine where there's no axis — a word cloud can size and color by frequency; nothing is being wasted.
- Order carries meaning. Sort by value unless the categories are inherently ordered (time, buckets, Likert). Keep the same order across every panel of a small multiple.
- Bars start at zero, always. If zero isn't meaningful for the metric, you wanted a dot plot (form 17), not a bar.
- Anthropomorphize only when the subject is human. Waffle grids of people, emoji anchors, persona illustrations — these earn their keep for sentiment and headcount, and read as cheap for latency and revenue.
Workflow
- State the takeaway in one sentence.
- Classify what the data does (distribution / ranking / comparison / trend / correlation / composition / qualitative) and pick from the picker table.
- Read that form's entry in
references/forms.md— especially its failure mode. If your data triggers the failure mode, take the alternative listed there. - Apply the six decisions and the encoding rules.
- Build it in whatever the destination uses.
- Render it and look at the image. Not the DOM, not the spec — the pixels. Run the checklist. Fix what you see and re-render.
Pre-ship checklist
Read the rendered image and answer each. A "no" is a fix, not a note.
- Headline states a finding or asks the literal question — not a field name
- Every mark carries its value, legible at 50% zoom
- No legend that direct labels could have replaced
- Emphasis lands on the subject of the headline; everything else recedes
- Longest label doesn't collide with, wrap under, or overflow its mark
- Bars start at zero; no truncated scale
- ≤1 annotation
- Squint test: at 25% zoom the shape of the answer still reads
- Caveats (n, margin of error, multi-select) visible in-frame
- The form's own failure mode from
references/forms.mddoes not apply
Reference
references/forms.md — 21 forms, each with an ASCII mockup, when to use it, and the
condition under which it stops working.
© huytieu, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 1 other file (references) in skills/data-forms of huytieu/COG-second-brain.
- SKILL.md
- references/forms.md
Open the folder on GitHubat commit 36ac9d7
Compare with similar skills
Data Forms next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Data Forms this skillhuytieu/COG-second-brain | 1.3k | — | ~1.7k | Automated safety check: Pass | MIT | |
| Impeccablebestofjs/bestofjs | 3.1k | 27 repos | ~2.6k | Automated safety check: Pass | MIT | |
| Figma Design System Builderwarpdotdev/warp | 65k | 2 repos | ~4.4k | Automated safety check: Pass | AGPL-3.0 | |
| Figma use_figma Plugin API Ruleswarpdotdev/warp | 65k | 4 repos | ~4.4k | Automated safety check: Pass | AGPL-3.0 | |
| UI StylingOhh-889/skyroc | 795 | 13 repos | ~2.5k | Automated safety check: Pass | MIT | |
| Shadcnsupabase/evals | 143 | 42 repos | ~4.5k | Automated safety check: Pass | Apache-2.0 |
Similar skills
Figma Design System Builder
warpdotdev/warp
Builds or updates a design system in Figma from a codebase in ordered phases: discovery, variables and tokens, components, theming and documentation, with checkpoints.
Figma use_figma Plugin API Rules
warpdotdev/warp
Required groundwork before any use_figma call: the rules and reference files for running JavaScript in a Figma file through the Plugin API without common failures.
UI Styling
Ohh-889/skyroc
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs.
- Official
Shadcn
supabase/evals
Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI.
Design System
Ohh-889/skyroc
Token architecture, component specifications, and slide generation.
More from huytieu/COG-second-brain
All 37 skills in this repoVoice Baseline
huytieu/COG-second-brain
Measure your own writing corpus for the words and sentence shapes you over-use, so an agent writing in your voice stops amplifying your tics into a style.
Daily Journal
huytieu/COG-second-brain
A passive daily work journal that Claude keeps FOR you so you never have to write it yourself.
Editorial Illustrations
huytieu/COG-second-brain
Generate meaning-carrying editorial data-illustrations in the monotykamary / Linear aesthetic (near-black grayscale, Inter display + mono labels, hairline framed figures) with a single coral accent.
Loop Engineering
huytieu/COG-second-brain
Shared loop-engineering reference for COG skills - the agent loop, deterministic verifiers, termination conditions, in-loop context management, and named patterns.
Knowledge Consolidation
huytieu/COG-second-brain
Build frameworks from scattered insights across all braindumps and notes
Release Video
huytieu/COG-second-brain
Turn a product release (the list of shipped items plus real screen recordings) into a motion recap video and one explained demo per feature, with sound effects tied to on-screen motion and a…
Related
Categories
Questions about Data Forms
What does Data Forms do?
Pick the right way to represent a dataset so a reader gets the finding in three seconds — a catalog of 20+ chart and diagram forms with when-to-use and failure modes, plus the encoding decisions…. Data Forms is an agent skill from huytieu/COG-second-brain. Pick the right way to represent a dataset so a reader gets the finding in three seconds — a catalog of 20+ chart and diagram forms with when-to-use and failure modes, plus the encoding decisions that make any of them readable (takeaway headline, direct labels, kill the axis, highlight-and-mute, show the caveat).
When should I use Data Forms?
Data Forms fits situations like: charting survey results; research findings for a post; whenever the default bar chart feels like its burying the point.
How do I install Data Forms in Claude Code?
Run `npx skills add huytieu/COG-second-brain --skill data-forms -a claude-code`. Or copy the skill folder (skills/data-forms in huytieu/COG-second-brain) into .claude/skills/data-forms in your project. Claude Code loads it when a task matches its description.
How do I install Data Forms in Codex?
Run `npx skills add huytieu/COG-second-brain --skill data-forms -a codex`. Or copy the skill folder (skills/data-forms in huytieu/COG-second-brain) into .agents/skills/data-forms in your project. Codex loads it when a task matches its description.
Can I use Data Forms in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add huytieu/COG-second-brain --skill data-forms -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/data-forms, .gemini/skills/data-forms, .github/skills/data-forms and .opencode/skills/data-forms in your project.
What does Data Forms need to run?
SKILL.md names no scripts, command-line tools or credentials: Data Forms is instructions for the agent only.
Does Data Forms access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Data Forms safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Data Forms use?
Data Forms is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Data Forms use?
About 1.7k tokens (SKILL.md is roughly 7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 7.3k tokens, read only when the agent opens those files.
What are the alternatives to Data Forms?
Skills that share tags, products or a category with Data Forms: Impeccable (bestofjs/bestofjs, 3.1k stars), Figma Design System Builder (warpdotdev/warp, 65k stars), Figma use_figma Plugin API Rules (warpdotdev/warp, 65k stars) and UI Styling (Ohh-889/skyroc, 795 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Data Forms?
huytieu (a GitHub user) maintains it in huytieu/COG-second-brain, which has 1,260 GitHub stars. The repository holds 37 skills in this directory. The repository was last updated on October 2, 2026.
Source: huytieu/COG-second-brain on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.