devjarus/ui-design
skills/frontend/ui-design/SKILL.md
Visual design principles for building polished, professional UIs. Use when creating or styling frontend components to ensure they look intentional and refined, not generic or developer-default.
development
Updated Apr 25, 2026
$ install --global
skillsauthnpx skillsauth add devjarus/coding-agent ui-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 25, 2026, 7:38 PM131.9s2 files scanned
SKILL.md
- name:
- ui-design
- description:
- Visual design principles for building polished, professional UIs. Use when creating or styling frontend components to ensure they look intentional and refined, not generic or developer-default.
UI Design
Visual design principles that transform functional UI into polished, professional interfaces.
When to Apply
- Building new pages, dashboards, or component layouts
- Styling components with Tailwind or CSS
- Reviewing frontend output for visual quality
- Any work order that includes UI elements users will see
Rules (rules/design-rules.md)
CRITICAL
- DES-01: Visual hierarchy -- one primary focal point, supporting secondaries, de-emphasized tertiary
- DES-02: Spacing and rhythm -- 4px/8px base unit, tight grouping for related, generous between sections
- DES-03: Color usage -- limited palette, semantic colors, background hierarchy, sparing accents
HIGH
- DES-04: Typography -- 2 body sizes, 2-3 heading sizes, 1.5 line height, max 65-75ch width
- DES-05: Component polish -- consistent radii, sparing shadows, transitions on interactives, consistent icons
- DES-06: Layout patterns -- sidebar+main for dashboards, grid for cards, centered for content, space-y for forms
MEDIUM
- DES-07: Empty states -- illustration + message + CTA; skeleton screens over spinners
- DES-08: Design references -- model after Linear, Vercel, Stripe for the appropriate UI type
Anti-Patterns
- Flat hierarchy (everything same size/weight)
- Multiple competing primary buttons
- Cramped layouts with minimal padding
- Rainbow of unrelated colors
- Pure black on pure white (too harsh)
- No hover states on clickable elements
- Mixed border radii and icon families
- Full-width text on wide screens
Priority Summary
| ID | Rule | Priority | |----|------|----------| | DES-01 | Visual hierarchy | CRITICAL | | DES-02 | Spacing and rhythm | CRITICAL | | DES-03 | Color usage | CRITICAL | | DES-04 | Typography | HIGH | | DES-05 | Component polish | HIGH | | DES-06 | Layout patterns | HIGH | | DES-07 | Empty states | MEDIUM | | DES-08 | Design references | MEDIUM |
Related Skills
devjarus/deep-research
testing
VerifiedTrustedCommunity
Multi-source research method — decompose a question, fan out parallel investigators, interleaved-think each result, verify claims adversarially, synthesize a cited answer. Use for breadth-heavy research, stack comparisons, "which approach wins" questions.
SKILL.mdUpdated May 30, 2026
devjarus/test-doubles-strategy
testing
VerifiedTrustedCommunity
Decide when to use unit vs integration vs e2e tests, and when to mock vs use the real thing per dependency. Dependency injection is the enabler — without it you end up monkey-patching imports. Apply when writing tests of any kind.
SKILL.mdUpdated Apr 25, 2026
devjarus/tdd
development
VerifiedTrustedCommunity
Test-driven development process — write failing test, implement to pass, refactor. Use when implementing any feature or fixing bugs.
SKILL.mdUpdated Apr 25, 2026
devjarus/shared-contracts
development
VerifiedTrustedCommunity
Patterns for sharing types, API contracts, and validation schemas between frontend and backend. Use when multiple domains consume the same data shapes to prevent contract drift.
SKILL.mdUpdated Apr 25, 2026