Data-Dense Dashboard Designer
plugin87/ux-ui-agent-skills
Lays out dense analytics or trading-terminal screens in banded sections with hand-drawn SVG charts, instead of a wall of identical stat cards.
Colorblind-friendly palettes and accessible visualization design
$ npx skills add wentorai/research-plugins --skill color-accessibility-guide -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install wentorai/research-plugins color-accessibility-guide --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/wentorai/research-plugins.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/analysis/dataviz/color-accessibility-guide .claude/skills/color-accessibility-guide && 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 "color-accessibility-guide" agent skill from https://github.com/wentorai/research-plugins/tree/main/skills/analysis/dataviz/color-accessibility-guide into .claude/skills/color-accessibility-guide/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "color-accessibility-guide", 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/wentorai/research-plugins/tree/main/skills/analysis/dataviz/color-accessibility-guideType 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 wentorai/research-plugins --skill color-accessibility-guide -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install wentorai/research-plugins color-accessibility-guide --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/wentorai/research-plugins.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/analysis/dataviz/color-accessibility-guide .agents/skills/color-accessibility-guide && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "color-accessibility-guide" agent skill from https://github.com/wentorai/research-plugins/tree/main/skills/analysis/dataviz/color-accessibility-guide into .agents/skills/color-accessibility-guide/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "color-accessibility-guide", 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 wentorai/research-plugins --skill color-accessibility-guide -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install wentorai/research-plugins color-accessibility-guide --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/wentorai/research-plugins.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/analysis/dataviz/color-accessibility-guide .cursor/skills/color-accessibility-guide && 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 "color-accessibility-guide" agent skill from https://github.com/wentorai/research-plugins/tree/main/skills/analysis/dataviz/color-accessibility-guide into .cursor/skills/color-accessibility-guide/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "color-accessibility-guide", 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/wentorai/research-plugins.git --path skills/analysis/dataviz/color-accessibility-guide--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 wentorai/research-plugins --skill color-accessibility-guide -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install wentorai/research-plugins color-accessibility-guide --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/wentorai/research-plugins.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/analysis/dataviz/color-accessibility-guide .gemini/skills/color-accessibility-guide && 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 "color-accessibility-guide" agent skill from https://github.com/wentorai/research-plugins/tree/main/skills/analysis/dataviz/color-accessibility-guide into .gemini/skills/color-accessibility-guide/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "color-accessibility-guide", 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 wentorai/research-plugins color-accessibility-guideInstalls 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 wentorai/research-plugins --skill color-accessibility-guide -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/wentorai/research-plugins.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/analysis/dataviz/color-accessibility-guide .github/skills/color-accessibility-guide && 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 "color-accessibility-guide" agent skill from https://github.com/wentorai/research-plugins/tree/main/skills/analysis/dataviz/color-accessibility-guide into .github/skills/color-accessibility-guide/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "color-accessibility-guide", 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 wentorai/research-plugins --skill color-accessibility-guide -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install wentorai/research-plugins color-accessibility-guide --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/wentorai/research-plugins.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/analysis/dataviz/color-accessibility-guide .opencode/skills/color-accessibility-guide && 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 "color-accessibility-guide" agent skill from https://github.com/wentorai/research-plugins/tree/main/skills/analysis/dataviz/color-accessibility-guide into .opencode/skills/color-accessibility-guide/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "color-accessibility-guide", 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.
color-accessibility-guideColorblind-friendly palettes and accessible visualization design
Color Accessibility Guide is an agent skill from wentorai/research-plugins. Colorblind-friendly palettes and accessible visualization design
Its SKILL.md is about 1.8k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Frontend & Design, covering Accessibility and Data visualization. The repository describes itself as: 350+ academic research skills, MCP configs, and plugins for Research-Claw and AI agents. The licence is MIT.
3 steps, taken from the step headings in SKILL.md.
Read from SKILL.md and the folder at commit bf44b3c. It shows what the files ask for, not the result of running them.
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.
No scripts in the folder and no shell commands in SKILL.md (its code samples are python).
From the folder's file list and the shell code blocks in SKILL.md.
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Color Accessibility Guide loads about 1.8k tokens when it runs. Until then it costs about 23 tokens; SKILL.md has 370 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.
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.
The full file from wentorai/research-plugins at commit bf44b3c, republished under its MIT licence (© wentorai). 370 words, ~1,845 tokens.
.claude/skills/color-accessibility-guide/SKILL.md (or your agent's skills folder).Design data visualizations that are accessible to colorblind readers and follow best practices for clarity, using tested palettes and encoding principles.
Approximately 8% of males and 0.5% of females have some form of color vision deficiency (CVD). The most common types:
| Type | Prevalence (Male) | Affected Colors | Commonly Confused |
|---|---|---|---|
| Deuteranomaly (green-weak) | 5% | Green | Red and green |
| Protanomaly (red-weak) | 1% | Red | Red and green |
| Deuteranopia (no green) | 1% | Green | Red and green |
| Protanopia (no red) | 1% | Red | Red and green |
| Tritanopia (no blue) | 0.003% | Blue | Blue and yellow |
| Monochromacy | Very rare | All | All colors |
Key takeaway: Never rely solely on a red-green distinction to convey information. About 1 in 12 male readers cannot distinguish them.
Widely recommended for scientific publications:
# Wong's colorblind-friendly palette
wong_palette = {
"black": "#000000",
"orange": "#E69F00",
"sky_blue": "#56B4E9",
"bluish_green":"#009E73",
"yellow": "#F0E442",
"blue": "#0072B2",
"vermillion": "#D55E00",
"reddish_purple":"#CC79A7"
}okabe_ito = ["#E69F00", "#56B4E9", "#009E73", "#F0E442",
"#0072B2", "#D55E00", "#CC79A7", "#000000"]# Paul Tol's qualitative palette (up to 12 distinct colors)
tol_qualitative = ["#332288", "#88CCEE", "#44AA99", "#117733",
"#999933", "#DDCC77", "#CC6677", "#882255",
"#AA4499", "#661100", "#6699CC", "#888888"]For continuous data, use perceptually uniform colormaps:
import matplotlib.pyplot as plt
# Recommended sequential colormaps
# These are perceptually uniform and colorblind-safe:
good_cmaps = ["viridis", "plasma", "inferno", "magma", "cividis"]
# Avoid these (not perceptually uniform, not colorblind-safe):
bad_cmaps = ["jet", "rainbow", "hsv"] # NEVER use these
# Example usage
import numpy as np
data = np.random.randn(10, 10)
fig, ax = plt.subplots(figsize=(8, 6))
im = ax.imshow(data, cmap="viridis")
plt.colorbar(im)
plt.title("Use viridis, not jet")
plt.savefig("heatmap.pdf", dpi=300, bbox_inches="tight")# Colorblind-safe diverging palettes
# Blue-to-Red via white (good for temperature, correlation)
import matplotlib.colors as mcolors
# Built-in matplotlib options:
diverging_safe = ["RdBu_r", "PuOr_r", "BrBG"]
# Custom two-color diverging (Tol):
tol_diverging = ["#364B9A", "#4A7BB7", "#6EA6CD", "#98CAE1", "#C2E4EF",
"#EAECCC", "#FEDA8B", "#FDB366", "#F67E4B", "#DD3D2D", "#A50026"]Edward Tufte's principle: maximize the proportion of ink used to display actual data.
import matplotlib.pyplot as plt
fig, (ax1, ax2) = plt.subplots(1, 2, figsize=(12, 5))
# BAD: Low data-ink ratio (chartjunk)
ax1.bar(range(5), [3, 7, 2, 5, 8], color="blue", edgecolor="black",
linewidth=2)
ax1.set_facecolor("#EEEEEE")
ax1.grid(True, color="white", linewidth=2)
ax1.set_title("Before: Low Data-Ink Ratio")
# GOOD: High data-ink ratio
ax2.bar(range(5), [3, 7, 2, 5, 8], color="#0072B2", edgecolor="none")
ax2.spines["top"].set_visible(False)
ax2.spines["right"].set_visible(False)
ax2.set_title("After: High Data-Ink Ratio")
plt.tight_layout()
plt.savefig("data_ink_ratio.pdf", dpi=300)Never use color as the sole channel for conveying information. Combine color with at least one other visual channel:
| Channel | Examples |
|---|---|
| Shape | Circles, squares, triangles for different groups |
| Pattern | Solid, dashed, dotted lines |
| Fill pattern | Hatching, cross-hatching for bar charts |
| Label | Direct text labels on or near data points |
| Position | Separate panels (facets) for each group |
| Size | Varying point sizes |
import matplotlib.pyplot as plt
markers = ['o', 's', '^', 'D'] # Different shapes
colors = ['#0072B2', '#D55E00', '#009E73', '#CC79A7']
labels = ['Group A', 'Group B', 'Group C', 'Group D']
fig, ax = plt.subplots(figsize=(8, 6))
for i in range(4):
ax.scatter(x[i], y[i], c=colors[i], marker=markers[i],
s=80, label=labels[i], edgecolors='black', linewidth=0.5)
ax.legend()
ax.set_xlabel("X Variable")
ax.set_ylabel("Y Variable")
plt.savefig("redundant_encoding.pdf", dpi=300)line_styles = ['-', '--', '-.', ':', (0, (3, 1, 1, 1))]
colors = ['#0072B2', '#D55E00', '#009E73', '#CC79A7', '#E69F00']
fig, ax = plt.subplots(figsize=(8, 5))
for i in range(5):
ax.plot(x, data[i], color=colors[i], linestyle=line_styles[i],
linewidth=2, label=f"Method {i+1}")
ax.legend()| Tool | Platform | URL |
|---|---|---|
| Coblis | Web | color-blindness.com/coblis |
| Color Oracle | Desktop (Win/Mac/Linux) | colororacle.org |
| Sim Daltonism | macOS | michelf.ca/projects/sim-daltonism |
| Colorblindly | Chrome extension | Chrome Web Store |
| Matplotlib CVD simulation | Python | See code below |
from colorspacious import cspace_convert
import numpy as np
def simulate_cvd(rgb_hex, deficiency="deuteranomaly", severity=100):
"""Simulate how a color appears to someone with CVD."""
# Convert hex to RGB [0,1]
rgb = np.array([int(rgb_hex[i:i+2], 16)/255 for i in (1, 3, 5)])
# Convert using colorspacious
cvd_space = {"name": "sRGB1+CVD",
"cvd_type": deficiency,
"severity": severity}
rgb_cvd = cspace_convert(rgb, cvd_space, "sRGB1")
rgb_cvd = np.clip(rgb_cvd, 0, 1)
return "#{:02x}{:02x}{:02x}".format(*[int(c*255) for c in rgb_cvd])
# Test your palette
for color in ["#FF0000", "#00FF00", "#0072B2", "#D55E00"]:
sim = simulate_cvd(color)
print(f"{color} -> {sim} (deuteranomaly)")| Do | Don't |
|---|---|
| Use Wong or Okabe-Ito palettes | Use red vs. green to distinguish categories |
| Use viridis/cividis colormaps | Use jet/rainbow colormaps |
| Add shape/pattern as redundant encoding | Rely on color alone |
| Use direct labels when possible | Force readers to match colors to legend repeatedly |
| Test with CVD simulators | Assume your color choices work for everyone |
| Use high contrast (WCAG AA: 4.5:1 ratio) | Use light colors on white backgrounds |
| Keep maximum 7-8 colors in categorical charts | Use 15+ colors that are impossible to distinguish |
© wentorai, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Just SKILL.md in skills/analysis/dataviz/color-accessibility-guide of wentorai/research-plugins.
Open the folder on GitHubat commit bf44b3c
We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in wentorai/research-plugins, which our catalogue first saw on October 7, 2026.
Color Accessibility Guide 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 |
|---|---|---|---|---|---|---|
| Color Accessibility Guide this skillwentorai/research-plugins | 298 | 1 repos | ~1.8k | Automated safety check: Pass | MIT | |
| Data-Dense Dashboard Designerplugin87/ux-ui-agent-skills | 1.6k | — | ~2.6k | Automated safety check: Pass | MIT | |
| Blog ChartAgriciDaniel/claude-blog | 2.3k | — | ~2.4k | Automated safety check: Pass | MIT | |
| Visualizing Dataancoleman/ai-design-components | 525 | — | ~2.4k | Automated safety check: Pass | MIT | |
| Md Reviewborghei/Claude-Skills | 891 | — | ~3.8k | Automated safety check: Pass | MIT | |
| Kb Data Visualization AccessibilityCommunity-Access/accessibility-agents | 423 | — | ~1.8k | Automated safety check: Pass | MIT |
plugin87/ux-ui-agent-skills
Lays out dense analytics or trading-terminal screens in banded sections with hand-drawn SVG charts, instead of a wall of identical stat cards.
AgriciDaniel/claude-blog
Generate dark-mode-compatible inline SVG data visualization charts for blog posts.
ancoleman/ai-design-components
Builds dashboards, reports, and data-driven interfaces requiring charts, graphs, or visual analytics.
borghei/Claude-Skills
Pre-publication quality gate for authored Markdown — heading structure, on-disk link resolution, readability, accessibility, terminology.
Community-Access/accessibility-agents
Reference data, not a reviewer. An agent skill from Community-Access/accessibility-agents.
Community-Access/accessibility-agents
Charts, graphs and dashboards: SVG ARIA, table alternatives, safe palettes.
wentorai/research-plugins
Craft structured research abstracts that maximize clarity and journal acceptance
wentorai/research-plugins
Manage academic citations across BibTeX, APA, MLA, and Chicago formats
wentorai/research-plugins
Summarize academic papers with structured extraction of key elements
wentorai/research-plugins
Evidence-based study techniques for academic learning and retention
wentorai/research-plugins
Adjust writing tone and register for academic audiences and venues
wentorai/research-plugins
Academic translation, post-editing, and Chinglish correction guide
Categories
Colorblind-friendly palettes and accessible visualization design. Color Accessibility Guide is an agent skill from wentorai/research-plugins.
Color Accessibility Guide fits situations like: tasks that involve Accessibility; tasks that involve Data visualization.
Run `npx skills add wentorai/research-plugins --skill color-accessibility-guide -a claude-code`. Or copy the skill folder (skills/analysis/dataviz/color-accessibility-guide in wentorai/research-plugins) into .claude/skills/color-accessibility-guide in your project. Claude Code loads it when a task matches its description.
Run `npx skills add wentorai/research-plugins --skill color-accessibility-guide -a codex`. Or copy the skill folder (skills/analysis/dataviz/color-accessibility-guide in wentorai/research-plugins) into .agents/skills/color-accessibility-guide in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add wentorai/research-plugins --skill color-accessibility-guide -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/color-accessibility-guide, .gemini/skills/color-accessibility-guide, .github/skills/color-accessibility-guide and .opencode/skills/color-accessibility-guide in your project.
SKILL.md names no scripts, command-line tools or credentials: Color Accessibility Guide is instructions for the agent only. Our summary lists: Python 3.
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.
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.
Color Accessibility Guide is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
About 1.8k tokens (SKILL.md is roughly 7.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
Skills that share tags, products or a category with Color Accessibility Guide: Data-Dense Dashboard Designer (plugin87/ux-ui-agent-skills, 1.6k stars), Blog Chart (AgriciDaniel/claude-blog, 2.3k stars), Visualizing Data (ancoleman/ai-design-components, 525 stars) and Md Review (borghei/Claude-Skills, 891 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
wentorai (a GitHub user) maintains it in wentorai/research-plugins, which has 298 GitHub stars. The repository holds 405 skills in this directory. The repository was last updated on June 19, 2026.
Source: wentorai/research-plugins on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.