Frontend

design

rshankras/claude-code-apple-skills · updated Apr 10, 2026

$npx skills add https://github.com/rshankras/claude-code-apple-skills --skill design
summary

Skills for implementing Apple's modern design systems across platforms.

skill.md

Design Skills

Skills for implementing Apple's modern design systems across platforms.

When This Skill Activates

Use this skill when the user:

  • Asks about Liquid Glass design
  • Wants to implement modern Apple UI effects
  • Needs guidance on visual design patterns
  • Asks about materials, transparency, or blur effects
  • Wants to create fluid animations
  • Asks about spring, bounce, or snappy animations
  • Wants PhaseAnimator or KeyframeAnimator help
  • Needs view transitions, matched geometry, or hero transitions
  • Wants SF Symbol effects (bounce, pulse, wiggle, breathe)
  • Asks about animation completions or withAnimation

Available Skills

liquid-glass/

Comprehensive Liquid Glass implementation for iOS 26+, macOS 26+.

  • SwiftUI .glassEffect() API
  • AppKit NSGlassEffectView
  • GlassEffectContainer patterns
  • Morphing transitions
  • Interactive effects
  • Button styles

animation-patterns/

SwiftUI animation patterns for iOS 13–18+.

  • Spring configurations (3 API generations)
  • PhaseAnimator and KeyframeAnimator (iOS 17+)
  • View transitions, matched geometry, navigation transitions
  • SF Symbol effects
  • Animation completions, transactions, timing curves

Key Principles

1. Platform Consistency

  • Follow Apple Human Interface Guidelines
  • Use system-provided APIs
  • Respect user appearance preferences

2. Performance

  • Use GlassEffectContainer for multiple effects
  • Limit number of glass effects per view
  • Consider GPU resources

3. Visual Hierarchy

  • Glass effects create depth and layering
  • Use tints to indicate prominence
  • Combine with appropriate shadows

Reference Documentation

  • /Users/ravishankar/Downloads/docs/SwiftUI-Implementing-Liquid-Glass-Design.md
  • /Users/ravishankar/Downloads/docs/AppKit-Implementing-Liquid-Glass-Design.md
general reviews

Ratings

4.510 reviews
  • Shikha Mishra· Oct 10, 2024

    design is among the better-maintained entries we tried; worth keeping pinned for repeat workflows.

  • Piyush G· Sep 9, 2024

    Keeps context tight: design is the kind of skill you can hand to a new teammate without a long onboarding doc.

  • Chaitanya Patil· Aug 8, 2024

    Registry listing for design matched our evaluation — installs cleanly and behaves as described in the markdown.

  • Sakshi Patil· Jul 7, 2024

    design reduced setup friction for our internal harness; good balance of opinion and flexibility.

  • Ganesh Mohane· Jun 6, 2024

    I recommend design for anyone iterating fast on agent tooling; clear intent and a small, reviewable surface area.

  • Oshnikdeep· May 5, 2024

    Useful defaults in design — fewer surprises than typical one-off scripts, and it plays nicely with `npx skills` flows.

  • Dhruvi Jain· Apr 4, 2024

    design has been reliable in day-to-day use. Documentation quality is above average for community skills.

  • Rahul Santra· Mar 3, 2024

    Solid pick for teams standardizing on skills: design is focused, and the summary matches what you get after install.

  • Pratham Ware· Feb 2, 2024

    We added design from the explainx registry; install was straightforward and the SKILL.md answered most questions upfront.

  • Yash Thakker· Jan 1, 2024

    design fits our agent workflows well — practical, well scoped, and easy to wire into existing repos.