ilyasibrahim/design
claude-user/skills/design/SKILL.md
Unified design system for data/ML dashboards. Quick reference for brand vs data color decisions, component patterns, typography, spacing. Auto-invokes on styling, CSS, design, colors, UI, visualization keywords. Tiered loading - core always, philosophy/implementation on-demand.
$ install --global
skillsauthnpx skillsauth add ilyasibrahim/claude-agents-coordination designInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 30, 2026, 1:45 PM5.2s1 file scanned
SKILL.md
- name:
- design
- description:
- Unified design system for data/ML dashboards. Quick reference for brand vs data color decisions, component patterns, typography, spacing. Auto-invokes on styling, CSS, design, colors, UI, visualization keywords. Tiered loading - core always, philosophy/implementation on-demand.
- allowed-tools:
- Read, Grep, Glob
Design System (Core)
Quick Decision
UI element or data visualization?
- UI Element → Brand Colors (#0176D3, #032D60)
- Data Visualization → Data Colors (#33BBEE, #0077BB, sequence)
Never mix brand and data colors in same context.
Brand Colors (UI Only)
--tableau-blue: #0176D3; /* Primary CTA */
--tableau-navy: #032D60; /* Headings, nav */
--tableau-green: #00A651; /* Success */
--tableau-bg-light: #EAF5FE; /* Backgrounds */
--tableau-text: #333333; /* Body text */
--tableau-border: #EBEBEB; /* Borders */
Data Colors (Charts Only)
--data-1: #33BBEE; /* Primary cyan */
--data-2: #0077BB; /* Primary blue */
--data-3: #66CCEE; /* Light cyan */
--data-4: #4477AA; /* Light blue */
--data-5: #44AA99; /* Teal */
--data-error: #EE6677; /* Red (errors) */
--data-neutral: #BBBBBB; /* Grey (baseline) */
Sequence: ['#33BBEE', '#0077BB', '#66CCEE', '#4477AA', '#44AA99']
Typography
--font-heading: 'Space Grotesk', sans-serif;
--font-body: 'Inter', sans-serif;
--font-code: 'Fira Code', monospace;
--text-hero: 2.25rem; /* 36px */
--text-h1: 1.875rem; /* 30px */
--text-h2: 1.5rem; /* 24px */
--text-body: 1rem; /* 16px */
--text-small: 0.875rem; /* 14px */
Spacing
--space-2: 0.5rem; /* 8px */
--space-4: 1rem; /* 16px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px - card padding */
--space-12: 3rem; /* 48px - section gap */
Shadows (Dual-Layer)
--shadow-sm: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.1);
--shadow-md: 0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.1);
--shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
Component Patterns
Button (Brand)
.btn-primary {
background: var(--tableau-blue);
color: white;
padding: 14px 32px;
border-radius: 6px;
}
.btn-primary:hover { transform: translateY(-2px); }
Card (Brand)
.card {
background: white;
border: 1px solid var(--tableau-border);
border-radius: 16px;
padding: var(--space-8);
box-shadow: var(--shadow-sm);
}
Data Card (Data Colors)
.data-card {
border-top: 4px solid var(--data-1);
}
.data-card__value {
color: var(--data-2);
font-size: var(--text-h1);
font-family: var(--font-heading);
}
Chart.js Setup
const chartColors = ['#33BBEE', '#0077BB', '#66CCEE', '#4477AA', '#44AA99'];
new Chart(ctx, {
data: {
datasets: [
{ backgroundColor: chartColors[0] },
{ backgroundColor: chartColors[1] }
]
},
options: {
plugins: {
legend: { labels: { color: '#333333' } } // Brand for UI
}
}
});
Accessibility
- Contrast: 4.5:1 minimum (WCAG AA)
- Focus: 3px outline, brand blue
- Touch: 44x44px minimum targets
Extended Reference
For philosophy and full implementation details:
- Philosophy:
skills/design/philosophy.md - Full implementation:
skills/design/implementation.md
Version: 3.0.0
Related Skills
ilyasibrahim/ux-writing
documentation
VerifiedTrustedCommunity
Voice, tone, and content guidelines for data/ML dashboards. Covers microcopy, error messages, success states, and data presentation language. Auto-invokes on copy, messaging, content, labels, error messages keywords.
52SKILL.mdUpdated Apr 21, 2026
ilyasibrahim/agent-coordination
development
VerifiedTrustedCommunity
Coordination protocol for main Claude Code agent. Explicit user invocation required ("mobilize agents", "coordinate", "check registry"). Provides agent orchestration, registry management, and handoff protocols. Subagents never access this - main agent provides context in task prompts.
52SKILL.mdUpdated Apr 21, 2026
ilyasibrahim/model-evaluation-framework
development
VerifiedTrustedCommunity
Model evaluation metrics, testing protocols, and performance assessment for Somali dialect classification. Covers accuracy, F1-score, confusion matrix analysis, per-dialect performance, and evaluation best practices for multi-class classification tasks.
52SKILL.mdUpdated Apr 21, 2026
ilyasibrahim/mlops-best-practices
testing
VerifiedTrustedCommunity
MLOps best practices for model versioning, experiment tracking, deployment, monitoring, and retraining workflows. Covers reproducibility, CI/CD for ML, model registry, and production ML system design.
52SKILL.mdUpdated Apr 21, 2026