ReddRadar
Agent skill
apple-ui-design
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.
Install this agent skill to your Project
npx add-skill https://github.com/aiskillstore/marketplace/tree/main/skills/barissozen/apple-ui-design
SKILL.md
Apple UI Design
Apple-inspired clean, minimal, premium UI design system.
When to Use
- Building modern interfaces requiring exceptional UX
- Creating clean, minimal aesthetics
- Implementing Apple-like polish and animations
- Designing premium user experiences
- Reviewing UI/UX for design quality
Workflow
Step 1: Apply Typography System
Use SF Pro Display with proper hierarchy (hero, title, body, caption).
Step 2: Apply Color Philosophy
Use light/dark mode variables with proper contrast.
Step 3: Apply Spacing System
Follow 4/8/16/24/48/96px spacing rhythm.
Step 4: Verify Checklist
Ensure touch targets, contrast, and animations meet standards.
Core Principles
- Clarity - Content is king, UI disappears
- Deference - UI serves content, never competes
- Depth - Layering creates hierarchy
Typography
font-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 */
Color Philosophy
/* 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;
Spacing System
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 48px;
--space-2xl: 96px; /* Section gaps */
Key Patterns
Cards
.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);
}
Buttons
.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);
}
Subtle Animations
/* 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); }
}
UX Rules
| 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 |
Checklist
- Touch targets ≥ 44px
- Contrast ratio ≥ 4.5:1
- Max content width ~680px
- Consistent spacing rhythm
- Dark mode support
- Smooth 60fps animations
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
aiskillstore/marketplace
perigon-backend
Perigon ASP.NET Core + EF Core + Aspire conventions
aiskillstore/marketplace
perigon-agent
Pointers for Copilot/agents to apply Perigon conventions
aiskillstore/marketplace
perigon-angular
Angular 21+ standalone/Material/signal conventions for Perigon WebApp
aiskillstore/marketplace
fastapi-mastery
Comprehensive FastAPI development skill covering REST API creation, routing, request/response handling, validation, authentication, database integration, middleware, and deployment. Use when working with FastAPI projects, building APIs, implementing CRUD operations, setting up authentication/authorization, integrating databases (SQL/NoSQL), adding middleware, handling WebSockets, or deploying FastAPI applications. Triggered by requests involving .py files with FastAPI code, API endpoint creation, Pydantic models, or FastAPI-specific features.
aiskillstore/marketplace
context7-efficient
Token-efficient library documentation fetcher using Context7 MCP with 86.8% token savings through intelligent shell pipeline filtering. Fetches code examples, API references, and best practices for JavaScript, Python, Go, Rust, and other libraries. Use when users ask about library documentation, need code examples, want API usage patterns, are learning a new framework, need syntax reference, or troubleshooting with library-specific information. Triggers include questions like "Show me React hooks", "How do I use Prisma", "What's the Next.js routing syntax", or any request for library/framework documentation.
aiskillstore/marketplace
browser-use
Browser automation using Playwright MCP. Navigate websites, fill forms, click elements, take screenshots, and extract data. Use when tasks require web browsing, form submission, web scraping, UI testing, or any browser interaction.
Didn't find tool you were looking for?