Visual Design And Contrast
HIG-first visual design audit for SwiftUI. Covers color systems, contrast, typography, spacing, icons, and accessibility visuals.
Install
$ agentstack add skill-mwd1234-ios-agentic-skills-visual-design-and-contrast ✓ scanned · ✓ verified, works with Claude Code, Cursor, and more.
Security review
✓ PassedNo issues found. Passed automated security review. · v0.1.0 How review works →
- ✓ Prompt-injection patterns
- ✓ Secret / credential exfiltration
- ✓ Dangerous shell & filesystem operations
- ✓ Untrusted network calls
- ✓ Known-malicious package signatures
What it can access
- ✓ Network access No
- ✓ Filesystem access No
- ✓ Shell / process execution No
- ✓ Environment & secrets No
- ✓ Dynamic code execution No
From automated source analysis of v0.1.0. “Used” means the capability is present in the source — more access means more to trust, not that it’s unsafe.
Verified badge
Passed review? Show it. Paste this badge into your README, it links to the public security report.
Links to your public security report.[](https://agentstack.voostack.com/security/report/skill-mwd1234-ios-agentic-skills-visual-design-and-contrast) Reliability & compatibility
Declared compatibility
Compatibility is declared by the source manifest. End-to-end runtime verification is coming, see below.
We're building live execution health for every listing: tool-call success rate, median latency, uptime, and last-checked timestamps, measured, not self-reported. It isn't live yet, so we don't show numbers we can't stand behind.
How agent discovery & health will work →About
Visual Design & Contrast (HIG-First)
Audit visual consistency and accessibility against Apple’s Human Interface Guidelines (HIG).
When to use this skill
- Before App Store submission
- After large UI updates or new themes
- When introducing new colors or typography
- When users report readability issues
Required Guidance
Always use Apple’s Human Interface Guidelines (HIG) as the source of truth for design decisions. For documentation lookup, use the sosumi.ai MCP server. The sosumi.ai site has an “MCP Usage” section that explains how to connect the MCP server in your IDE/Claude Code/etc.
Step 1: Color System Audit
- Use semantic colors (not hard-coded RGB)
- Ensure Dark Mode parity
- Avoid color-only status indicators
Checks:
- All custom colors defined in asset catalogs
- No hard-coded
Color(.sRGB, …)in views
Step 2: Contrast & Readability
Manual checks:
- Accessibility Inspector contrast checks
- 4.5:1 contrast for body text, 3:1 for large text
Avoid:
- Light text on bright backgrounds
- Thin fonts at small sizes
Step 3: Typography Consistency
- Prefer semantic fonts:
.body,.headline,.title2 - Respect Dynamic Type
- Avoid fixed font sizes unless absolutely necessary
Step 4: Spacing & Layout Rhythm
- Use consistent spacing tokens (8/12/16/24)
- Avoid arbitrary per-view padding
- Use alignment guides consistently
Step 5: Iconography & SF Symbols
- Use SF Symbols where possible
- Avoid mixing styles (outline vs filled) in same context
- Ensure icon meaning is obvious without color
Step 6: Visual States
- Distinct states for normal/selected/disabled
- Clear focus ring / selection treatment
- Hover / pressed feedback where applicable
Output Format
| Category | Issues | Status | |----------|--------|--------| | Color system | X | ✅/❌ | | Contrast | X | ✅/❌ | | Typography | X | ✅/❌ | | Spacing | X | ✅/❌ | | Iconography | X | ✅/❌ | | Visual states | X | ✅/❌ |
Source & license
This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.
- Author: mwd1234
- Source: mwd1234/ios-agentic-skills
- License: MIT
Install and usage instructions live in the source repository linked above.
Reviews
No reviews yet, be the first.
Write a review
Versions
- v0.1.0 Imported from the upstream source.