adilkalam/design-deepthink
skills/design-deepthink/SKILL.md
Distilled design wisdom for /deepthink --design exploration
$ install --global
skillsauthnpx skillsauth add adilkalam/orca design-deepthinkInstall 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: Mar 30, 2026, 4:28 PM58.7s1 file scanned
SKILL.md
- name:
- design-deepthink
- description:
- Distilled design wisdom for /deepthink --design exploration
- license:
- internal
Design-Deepthink Skill
Loaded by /deepthink --design or /think --design for structured design exploration.
1. AI Slop Anti-Patterns (7 Patterns)
Detect and flag these in design analysis:
| Pattern | Detection Criteria | |---------|-------------------| | Generic dashboards | Centered hero + 2-3 gradient cards + charts with no identity | | Copy-paste template feel | Obvious clone of library defaults without customization | | Color soup | 3+ accents, uncoordinated hues, no semantic meaning | | Flattened hierarchy | Same weight/size throughout, sections only separated by whitespace | | Over-animated UI | Every hover zooms/bounces, 300ms+ transitions | | Generic AI aesthetics | Overused fonts (Inter, Roboto), cliched purple gradients | | Same design across projects | Output could belong to any project (lacks identity) |
2. Design QA Criteria
Visual Hierarchy Scoring
- Pass: Clear heading/body/meta distinctions, 3+ type weights in use
- Fail: Flat hierarchy, no clear entry point, competing focal points
Spacing/Alignment Checklist
- 4px or 8px base grid adherence
- Consistent vertical rhythm between sections
- Optical vs mathematical alignment considered
- No arbitrary pixel values outside spacing scale
Color/Contrast Requirements
- Token compliance: No raw hex when tokens exist
- WCAG AA minimum (4.5:1 body, 3:1 large text)
- Semantic usage: Accent means something, not decoration
Responsive Breakpoints
- 375px (mobile), 768px (tablet), 1440px (desktop), 1920px (wide)
- Touch targets: 44px minimum
- Layout reflow without horizontal scroll
3. Design-DNA Priority Rules
When multiple design sources exist:
| Priority | Source | Notes |
|----------|--------|-------|
| 1 (highest) | JSON | .claude/design-dna/*.json, design-dna.json |
| 2 | Markdown | design-system.md, .claude/design-dna/README.md |
| 3 | CSS comments | Files with @design-token: or @design-rule: |
Enforcement:
- Where tokens exist, ad-hoc values are FORBIDDEN
- Token naming:
--color-<role>,--space-<scale>,--font-<role> - JSON rules are machine-parseable law; Markdown is advisory
4. Context Instructions
Project Design Files (Auto-Read in DESIGN Mode)
design-dna.json(project root).claude/design-dna/directory (all files)design-system.md(project root)css/design-system-tokens.css(if exists)
Interpreting design-dna.json
colors: Semantic roles (primary, secondary, accent, surface)typography: Scale and roles (display, heading, body, caption)spacing: Base grid and named values (section, component, gap)patterns: Named layouts (hero, card-grid, dashboard-shell)
When No Design-DNA Exists
- Note absence as a constraint
- Use
frontend-aestheticsskill principles - Recommend design-dna creation as a next step
- Document choices made for future codification
Related: design-qa-skill, design-dna-skill, frontend-aesthetics
Related Skills
adilkalam/ui-quality-audit
testing
VerifiedTrustedCommunity
Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review.
2SKILL.mdUpdated Jun 6, 2026
adilkalam/typeset
tools
VerifiedTrustedCommunity
Improves typography by fixing font choices, hierarchy, sizing, weight, and readability so text feels intentional. Use when the user mentions fonts, type, readability, text hierarchy, sizing looks off, or wants more polished, intentional typography.
2SKILL.mdUpdated Jun 6, 2026
adilkalam/threejs-animation
tools
VerifiedTrustedCommunity
Three.js animation - keyframe animation, skeletal animation, morph targets, animation mixing. Use when animating objects, playing GLTF animations, creating procedural motion, or blending animations.
2SKILL.mdUpdated Jun 6, 2026
adilkalam/shape
development
VerifiedTrustedCommunity
Plan the UX and UI for a feature before writing code. Runs a structured discovery interview, then produces a design brief that guides implementation. Use during the planning phase to establish design direction, constraints, and strategy before any code is written.
2SKILL.mdUpdated Jun 6, 2026