Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →Apple-inspired clean, minimal, premium UI design. Use when building modern interfaces requiring exceptional UX, clean aesthetics, or Apple-like polish. Triggers on: clean UI, modern design, Apple style, minimal, premium, user-friendly, UX.
.claude/skills/aiskillstore-apple-ui-design/SKILL.md| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-10 | ✗→✓ | ▲ Improved | 34% | 0% |
| case-11 | ✗→✓ | ▲ Improved | -29% | 0% |
| case-02 | ✗→✓ | ▲ Improved | -29% | 0% |
| case-07 | ✗→✓ | ▲ Improved | 33% | 0% |
| case-08 | ✗→✓ | ▲ Improved | -5% | 0% |
Apple-inspired clean, minimal, premium UI design system.
Use SF Pro Display with proper hierarchy (hero, title, body, caption).
Use light/dark mode variables with proper contrast.
Follow 4/8/16/24/48/96px spacing rhythm.
Ensure touch targets, contrast, and animations meet standards.
cssfont-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif; /* Hierarchy */ --text-hero: 600 48px/1.1; /* Bold statements */ --text-title: 600 32px/1.2; /* Section headers */ --text-body: 400 17px/1.5; /* Readable content */ --text-caption: 400 13px/1.4; /* Secondary info */
css/* Light mode */ --bg-primary: #ffffff; --bg-secondary: #f5f5f7; --text-primary: #1d1d1f; --text-secondary: #86868b; --accent: #0071e3; /* Dark mode */ --bg-primary: #000000; --bg-secondary: #1d1d1f; --text-primary: #f5f5f7;
css--space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 48px; --space-2xl: 96px; /* Section gaps */
css.card { background: rgba(255,255,255,0.8); backdrop-filter: blur(20px); border-radius: 18px; border: 1px solid rgba(0,0,0,0.05); box-shadow: 0 4px 24px rgba(0,0,0,0.06); }
css.btn-primary { background: var(--accent); color: white; padding: 12px 24px; border-radius: 980px; /* Pill shape */ font-weight: 500; transition: all 0.2s ease; } .btn-primary:hover { transform: scale(1.02); filter: brightness(1.1); }
css/* Micro-interactions */ transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); /* Page elements */ @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
| Do | Don't | |----|-------| | Generous whitespace | Cramped layouts | | One primary action | Multiple competing CTAs | | Progressive disclosure | Everything visible | | Subtle feedback | Jarring animations | | System fonts | Decorative fonts |
| Case | Status | Duration (ms) | Turns | Tokens | Tool calls | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Without | With | Δ | Without | With | Δ | Without | With | Δ | Without | With | Δ | ||
case-09 | fail→fail | 11,386 | 19,222 | +69% | 1 | 1 | 0% | 2,430 | 3,732 | +54% | 0 | 0 | — |
case-10 | fail→pass | 13,120 | 6,440 | -51% | 1 | 1 | 0% | 1,544 | 2,071 | +34% | 0 | 0 | — |
case-11 | fail→pass | 15,225 | 7,380 | -52% | 1 | 1 | 0% | 1,952 | 1,391 | -29% | 0 | 0 | — |
case-01 | fail→fail | 37,363 | 27,556 | -26% | 1 | 1 | 0% | 6,748 | 6,259 | -7% | 0 | 0 | — |
case-02 | fail→pass | 44,068 | 23,530 | -47% | 1 | 1 | 0% | 7,437 | 5,304 | -29% | 0 | 0 | — |
case-03 | fail→fail | 30,897 | 25,880 | -16% | 1 | 1 | 0% | 7,221 | 5,621 | -22% | 0 | 0 | — |
case-04 | pass→pass | 23,327 | 23,646 | +1% | 1 | 1 | 0% | 3,395 | 4,713 | +39% | 0 | 0 | — |
case-05 | pass→pass | 27,508 | 22,344 | -19% | 1 | 1 | 0% | 4,101 | 4,349 | +6% | 0 | 0 | — |
case-06 | pass→pass | 18,044 | 20,060 | +11% | 1 | 1 | 0% | 3,602 | 4,291 | +19% | 0 | 0 | — |
case-07 | fail→pass | 11,274 | 14,249 | +26% | 1 | 1 | 0% | 2,046 | 2,729 | +33% | 0 | 0 | — |
case-08 | fail→pass | 15,751 | 9,274 | -41% | 1 | 1 | 0% | 2,913 | 2,753 | -5% | 0 | 0 | — |
case-12 | fail→pass | 17,266 | 5,191 | -70% | 1 | 1 | 0% | 2,283 | 1,949 | -15% | 0 | 0 | — |
case-13 | fail→pass | 9,640 | 15,592 | +62% | 1 | 1 | 0% | 1,854 | 2,427 | +31% | 0 | 0 | — |
case-14 | fail→fail | 15,283 | 17,021 | +11% | 1 | 1 | 0% | 2,813 | 3,351 | +19% | 0 | 0 | — |
case-15 | fail→pass | 11,739 | 7,204 | -39% | 1 | 1 | 0% | 2,018 | 2,549 | +26% | 0 | 0 | — |
case-16 | fail→fail | 18,817 | 13,063 | -31% | 1 | 1 | 0% | 2,372 | 2,446 | +3% | 0 | 0 | — |
case-17 | fail→pass | 11,850 | 5,197 | -56% | 1 | 1 | 0% | 1,323 | 1,835 | +39% | 0 | 0 | — |
case-18 | fail→pass | 8,062 | 4,229 | -48% | 1 | 1 | 0% | 1,413 | 1,349 | -5% | 0 | 0 | — |
case-19 | pass→pass | 5,700 | 6,689 | +17% | 1 | 1 | 0% | 955 | 1,212 | +27% | 0 | 0 | — |
case-20 | fail→pass | 18,631 | 8,368 | -55% | 1 | 1 | 0% | 2,337 | 2,287 | -2% | 0 | 0 | — |
case-21 | pass→pass | 16,988 | 13,269 | -22% | 1 | 1 | 0% | 1,948 | 2,312 | +19% | 0 | 0 | — |
case-22 | fail→pass | 20,111 | 13,883 | -31% | 1 | 1 | 0% | 2,287 | 1,813 | -21% | 0 | 0 | — |
case-23 | fail→pass | 14,498 | 3,099 | -79% | 1 | 1 | 0% | 2,218 | 1,563 | -30% | 0 | 0 | — |
case-24 | pass→pass | 7,420 | 19,729 | +166% | 1 | 1 | 0% | 1,207 | 1,488 | +23% | 0 | 0 | — |
case-25 | fail→pass | 13,000 | 9,596 | -26% | 1 | 1 | 0% | 1,107 | 1,649 | +49% | 0 | 0 | — |
DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 25 cases were attempted. The headline lift of +56 percentage points is the difference between those two pass rates over the 25 comparable cases. 1 case got worse with the skill loaded, and it is included in that figure.
Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.
Other measured skills in the registry, with their headline benchmark lift.