adilkalam/design-qa-skill
skills/design-qa-skill/SKILL.md
Skill providing design QA checklists and principles for visual review across lanes. Used by design-review agents to enforce hierarchy, spacing, color, and responsiveness.
$ install --global
skillsauthnpx skillsauth add adilkalam/orca design-qa-skillInstall 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:29 PM55.6s1 file scanned
SKILL.md
- name:
- design-qa-skill
- description:
- >
Design QA Skill – Visual Review Checklists
This skill equips design-review agents (e.g. nextjs-design-reviewer) with
structured design QA knowledge without bloating their prompts.
It draws on established UX/UI best practices and visual design principles.
Core QA Areas
Design review should cover:
-
Visual Hierarchy & Typography
- Clear heading/body/meta distinctions,
- Appropriate type scales and weights,
- Legibility and line height.
-
Spacing & Alignment
- Consistent spacing grid adherence,
- Optical vs mathematical alignment,
- Visual rhythm and breathing room.
-
Color & Contrast
- Design token compliance,
- Sufficient contrast (WCAG AA/AAA),
- Semantic color usage.
-
Responsive Behavior
- Common breakpoints: 375px (mobile), 768px (tablet), 1440px (desktop), 1920px (wide),
- Layout reflow and component adaptation,
- Touch targets and mobile usability.
-
Accessibility: See
skills/web-interface-guidelines/SKILL.mdfor interaction and accessibility rules.
Usage Pattern
When performing design QA:
-
Load this skill and build a short internal checklist for this task based on the areas above.
-
Apply that checklist to:
- Live UI (via Puppeteer/browser tools),
- Screenshots or visual artifacts,
- Code-level hints (where necessary).
-
Score issues by severity:
- Blocker: Breaks core functionality or accessibility
- High: Major design violations or UX problems
- Medium: Noticeable inconsistencies
- Nit: Minor polish issues
-
Provide a
design_score(0-100) based on:- Adherence to design system tokens
- Visual hierarchy and clarity
- Responsive behavior
- Overall polish and attention to detail
This skill centralizes design QA knowledge so that visual review agents remain lightweight and focused on applying these checklists to the implementation.
Related Skills
adilkalam/enhance-prompt
testing
VerifiedTrustedCommunity
Transforms vague UI ideas into polished, Stitch-optimized prompts. Enhances specificity, adds UI/UX keywords, injects design system context, and structures output for better generation results.
2SKILL.mdUpdated Jun 6, 2026
adilkalam/youtube-transcript
content-media
VerifiedTrustedCommunity
Download YouTube video transcripts when user provides a YouTube URL or asks to download/get/fetch a transcript from YouTube. Also use when user wants to transcribe or get captions/subtitles from a YouTube video.
2SKILL.mdUpdated Mar 27, 2026
adilkalam/web-interface-guidelines
development
VerifiedTrustedCommunity
Web UI quality rules: interactions, forms, loading, animations, layout, content, performance, accessibility, design. Apply to all web UI work. Adapted from Vercel Design Guidelines.
2SKILL.mdUpdated Mar 27, 2026
adilkalam/ui-typography-spacing
testing
VerifiedTrustedCommunity
Typography hierarchy and spacing scale fallbacks. Yields to project design-dna when present.
2SKILL.mdUpdated Mar 27, 2026