← ClaudeAtlas

frontend-apple-designlisted

Design or review Apple-inspired web interfaces with clear hierarchy, consistent typography and materials, restrained motion, and accessible interactions. Use when Apple-style visual direction or fluid gestures are requested; adapt to the approved reference and existing design system.
reagin/agent-skills · ★ 0 · Web & Frontend · score 62
Install: claude install-skill reagin/agent-skills
# Frontend Apple Design Prioritize legibility, spatial consistency, and direct feedback. Follow the user's approved reference and the project's design system; an Apple-inspired direction does not prescribe glass, springs, or extra animation for every control. ## Establish the Visual Baseline Inspect the affected screen, neighboring screens, shared components, and design tokens before choosing styles. Identify the task users perform and the hierarchy that supports it. Preserve an approved visual direction unless the request changes it. For an existing interface, refine the owning styles and components. Avoid adding a competing set of local colors, dimensions, or override selectors. Use representative content, including long labels and empty or loading states, to judge the result. ## Hierarchy, Density, and Typography - Establish alignment, spacing, and grouping before adding borders, shadows, or cards. Repeated rows and related form fields rarely need an independent surface each. - Reuse the project's type scale and font. For a new Apple-inspired baseline, system fonts are a useful starting point; do not replace an established face without a design reason. - Balance size, weight, line height, and contrast together. Tune tracking for the actual font, script, and size rather than applying a global letter-spacing recipe. - Keep primary actions easy to find and secondary details near their subject or in an existing detail view. Remove duplicate summaries and labels only when