Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

FORGE DASHBOARD — Data-Dense SaaS Design Skill · bekhruztursunboev | DecimalAI

frontendby bekhruztursunboev

FORGE DASHBOARD — Data-Dense SaaS Design Skill

bekhruztursunboev/bexa-dashboard

Source bekhruztursunboev/bexa-professional-frontend-design-skills-for-ai-agents ↗License MIT

Data-dense dashboard and admin panel design skill for AI agents. Enforces information hierarchy, data visualization clarity, high-density layouts, and professional SaaS-grade UI patterns.

SkillScore77Maintained

Automatic

Frontend / UI pack

Last verified 8/4/2026

What it changes

Passed 17 of 22 test cases with the skill, and 10 of 22 without it.

Without skill45%

With skill77%

Checks it passed that the model alone missed

Sets header height to exactly 56px.
Uses font-mono for numeric data displays.
Uses optimistic UI updates before server confirmation.

and 9 more in the full report

8 fixed9 passed either way4 still failing1 broke

Pass-rate lift: +32 pp
Tokens: +53%
Agent turns: 0%
Response time: +6%

Model gemini-3.6-flashMeasured 8/4/2026v117 of 22 cases passed with skill

Tokens, turns and time describe resource use, not a dollar price.

Use this skill

Save it into your project's skills folder. Claude Code picks it up in its next session.

curl -fsSL --create-dirs -o .claude/skills/bekhruztursunboev-bexa-dashboard/SKILL.md https://app.decimal.ai/s/bekhruztursunboev-bexa-dashboard/SKILL.md

Want it pinned and updatable? pip install "decimalai>=0.15", then decimalai skills add bekhruztursunboev-bexa-dashboard, and start Claude Code with claude --plugin-dir "$(git rev-parse --show-toplevel)/.agents"

1 · One-time — install the CLI (docs ↗)

pip install "decimalai>=0.15"

2 · Get the skill — writes .agents/skills/bekhruztursunboev-bexa-dashboard/ and pins it in .decimal/skills.lock

decimalai skills add bekhruztursunboev-bexa-dashboard

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/bekhruztursunboev-bexa-dashboard/SKILL.md https://app.decimal.ai/s/bekhruztursunboev-bexa-dashboard/SKILL.md

Raw file: /s/bekhruztursunboev-bexa-dashboard/SKILL.md ↗ · machine-readable summary at /s/bekhruztursunboev-bexa-dashboard.json ↗

Safety checks: 3 of 3 passed

Code scan CleanIntent PassedContent Clean

See it in action

One of 8 test cases the skill fixed. Same model, same prompt, with and without the skill.

1 of 8

Prompt

Our high-frequency metrics view receives real-time updates via WebSockets when INTERACTION_DEPTH is set to 7 or higher. What interaction pattern should be applied to updated metric values and newly inserted table rows?

What was checked, without and with the skill
Checked	Without skill	With skill
Uses optimistic UI updates before server confirmation.	Missed	Passed
Animates new row additions with top slide-in motion.	Passed	Passed

case-16 · gemini-3.6-flash · 8/4/2026 · answers are capped and redacted

What's inside

The instructions your model reads when the skill loads.

SKILL.md154 linessingle file

FORGE DASHBOARD — Data-Dense SaaS Design Skill

Dashboards fail in two ways: too much clutter, or too little clarity. This skill enforces the third path: information architecture that makes data readable at a glance.

DIAL CONFIGURATION

DATA_DENSITY:     8   (1=Airy metrics / 10=Cockpit-level data saturation)
VISUAL_CLARITY:   8   (1=Decorative charts / 10=Precision data tables)
INTERACTION_DEPTH:6   (1=Static view / 10=Drill-down, filter, real-time)

SECTION 1 — DASHBOARD IDENTITY RULES

Typography for Data UIs

Display font: Satoshi or Geist. NEVER serif on dashboards.
Numeric data: ALWAYS font-mono (Geist Mono or JetBrains Mono).
Label text: 0.6875rem uppercase, letter-spacing: 0.1em, muted color.
Table data: 0.875rem, regular weight, tabular-nums (font-variant-numeric: tabular-nums).

Color for Data

Background: hsl(220 14% 97%) (not pure white — reduces eye strain)
Card surface: hsl(0 0% 100%) with 1px solid hsl(220 13% 91%)
Positive delta: hsl(158 60% 40%) — no neon green
Negative delta: hsl(0 72% 50%) — no neon red
Neutral: hsl(220 8% 58%)
Chart palette: accent + 4 harmonious HSL rotations (±40° hue steps)

SECTION 2 — LAYOUT ARCHITECTURE

Grid System

Dashboard uses CSS Grid sidebar + main layout:

Track record

Benchmark

17 / 22

test cases passed, vs 10 / 22 without

Adoption

Users: 0
Times used: 0

Safety and source details

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/1/2026

View 15 scanner checks

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

bekhruztursunboev / bexa-professional-frontend-design-skills-for-ai-agents

skills/bexa-dashboard/SKILL.md

View on GitHub ↗

License MITImported 8/1/2026Version v1

Other skills for the same job

Published skills whose descriptions closely match this one, with their headline benchmark lift.

educlopez/ui-craft-dense-dashboardDense dashboard / admin / Bloomberg / Retool / data-heavy internal tools. Locked knobs: CRAFT=7, MOTION=3, DENSITY=9. IBM Plex + mono numbers, semantic palette, 4/8px grid, sparklines, tabular-nums. Trigger on: dashboard, admin panel, data-dense, analytics, Bloomberg-like, Retool-like.Close match-14 pp pass-rate lift

More skills from the same source and nearby in the registry, with their headline benchmark lift.

Ready to supercharge your AI agents?

See it in action

What's inside

FORGE DASHBOARD — Data-Dense SaaS Design Skill

DIAL CONFIGURATION

SECTION 1 — DASHBOARD IDENTITY RULES

Typography for Data UIs

Color for Data

SECTION 2 — LAYOUT ARCHITECTURE

Grid System

Track record

Benchmark

Adoption

SkillSafety

Source

Other skills for the same job

Related skills