Apple Ui Design

{
  "schema_version": "2.0",
  "meta": {
    "generated_at": "2026-01-16T17:35:36.907Z",
    "slug": "barissozen-apple-ui-design",
    "source_url": "https://github.com/BarisSozen/claude/tree/main/.claude/skills/apple-ui-design",
    "source_ref": "main",
    "model": "claude",
    "analysis_version": "3.0.0",
    "source_type": "community",
    "content_hash": "539cf23c272015bc101b9cedb0b54918b1d44b376471019897f7621d8f2b3b64",
    "tree_hash": "c1997c75c844e92f4f057373a3edf45a7d87ec5a27f6cb9b0c556406dd95b31a"
  },
  "skill": {
    "name": "apple-ui-design",
    "description": "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.",
    "summary": "Apple-inspired clean, minimal, premium UI design. Use when building modern interfaces requiring exce...",
    "icon": "🎨",
    "version": "1.0.0",
    "author": "BarisSozen",
    "license": "MIT",
    "category": "design",
    "tags": [
      "Apple",
      "UI Design",
      "UX",
      "Modern",
      "Minimal"
    ],
    "supported_tools": [
      "claude",
      "codex",
      "claude-code"
    ],
    "risk_factors": [
      "network",
      "filesystem",
      "external_commands"
    ]
  },
  "security_audit": {
    "risk_level": "safe",
    "is_blocked": false,
    "safe_to_publish": true,
    "summary": "This is a pure documentation skill containing only design guidelines and CSS examples. All 58 static findings are FALSE POSITIVES. The scanner misidentified CSS hex color codes as cryptographic algorithms and markdown backticks as shell execution. No executable code, file access, network calls, or system operations exist.",
    "risk_factor_evidence": [
      {
        "factor": "network",
        "evidence": [
          {
            "file": "skill-report.json",
            "line_start": 6,
            "line_end": 6
          }
        ]
      },
      {
        "factor": "filesystem",
        "evidence": [
          {
            "file": "skill-report.json",
            "line_start": 6,
            "line_end": 6
          }
        ]
      },
      {
        "factor": "external_commands",
        "evidence": [
          {
            "file": "SKILL.md",
            "line_start": 45,
            "line_end": 53
          },
          {
            "file": "SKILL.md",
            "line_start": 53,
            "line_end": 56
          },
          {
            "file": "SKILL.md",
            "line_start": 56,
            "line_end": 68
          },
          {
            "file": "SKILL.md",
            "line_start": 68,
            "line_end": 71
          },
          {
            "file": "SKILL.md",
            "line_start": 71,
            "line_end": 78
          },
          {
            "file": "SKILL.md",
            "line_start": 78,
            "line_end": 83
          },
          {
            "file": "SKILL.md",
            "line_start": 83,
            "line_end": 91
          },
          {
            "file": "SKILL.md",
            "line_start": 91,
            "line_end": 94
          },
          {
            "file": "SKILL.md",
            "line_start": 94,
            "line_end": 107
          },
          {
            "file": "SKILL.md",
            "line_start": 107,
            "line_end": 110
          },
          {
            "file": "SKILL.md",
            "line_start": 110,
            "line_end": 119
          }
        ]
      }
    ],
    "critical_findings": [],
    "high_findings": [],
    "medium_findings": [],
    "low_findings": [],
    "dangerous_patterns": [],
    "files_scanned": 2,
    "total_lines": 316,
    "audit_model": "claude",
    "audited_at": "2026-01-16T17:35:36.907Z"
  },
  "content": {
    "user_title": "Design Apple-inspired interfaces",
    "value_statement": "Building premium interfaces requires understanding typography hierarchy, spacing rhythm, and subtle animations. This skill provides Apple design principles to create clean, minimal, user-friendly interfaces that feel native to Apple platforms.",
    "seo_keywords": [
      "Apple UI Design",
      "iOS Design",
      "macOS Interface",
      "Clean UI",
      "Modern Design",
      "Minimal UI",
      "UX Design",
      "Claude",
      "Claude Code",
      "Premium Interface"
    ],
    "actual_capabilities": [
      "Apply SF Pro typography hierarchy for clear content structure",
      "Implement light and dark mode color systems with proper contrast",
      "Use 4/8/16/24/48/96px spacing rhythm for consistent layout",
      "Create cards with backdrop blur and subtle shadows",
      "Design pill-shaped buttons with smooth hover animations",
      "Validate touch targets and contrast ratios for accessibility"
    ],
    "limitations": [
      "Does not generate complete design files or assets",
      "Does not integrate with design tools like Figma or Sketch",
      "Does not provide interaction prototypes or animations",
      "Requires manual implementation of suggested patterns"
    ],
    "use_cases": [
      {
        "target_user": "Frontend Developers",
        "title": "Component Development",
        "description": "Build React, Vue, or HTML components that follow Apple design guidelines for consistent user experience."
      },
      {
        "target_user": "UX Designers",
        "title": "Design System Creation",
        "description": "Establish typography, color, and spacing foundations for design systems inspired by Apple aesthetics."
      },
      {
        "target_user": "Product Managers",
        "title": "Quality Review",
        "description": "Evaluate existing interfaces against Apple design standards for premium quality assessment."
      }
    ],
    "prompt_templates": [
      {
        "title": "Basic Button",
        "scenario": "Creating a primary action button",
        "prompt": "Design a primary button using Apple UI principles. Include pill shape, blue accent color, smooth hover transition, and proper padding."
      },
      {
        "title": "Card Component",
        "scenario": "Building a content card",
        "prompt": "Create a card component with backdrop blur, rounded corners, subtle shadow, and proper spacing. Include dark mode support."
      },
      {
        "title": "Typography System",
        "scenario": "Setting up type hierarchy",
        "prompt": "Define a typography system using SF Pro with hero, title, body, and caption styles. Include line heights and font weights."
      },
      {
        "title": "Full Page Layout",
        "scenario": "Designing a landing page",
        "prompt": "Design a landing page following Apple principles: 680px max content width, generous whitespace, one primary CTA, and smooth fade animations."
      }
    ],
    "output_examples": [
      {
        "input": "Create a primary button using Apple design principles",
        "output": [
          "Pill-shaped button (border-radius: 980px) for Apple authenticity",
          "Blue accent color (#0071e3) with white text",
          "12px vertical / 24px horizontal padding for comfortable touch target",
          "Smooth scale and brightness transition on hover",
          "500 font weight for clear visual hierarchy"
        ]
      },
      {
        "input": "Design a content card with dark mode support",
        "output": [
          "White background with 80% opacity for light glass effect",
          "20px backdrop blur for depth and focus",
          "18px border radius for modern rounded corners",
          "Subtle 6% black shadow for elevation without harshness",
          "Dark mode: black background with #1d1d1f secondary"
        ]
      }
    ],
    "best_practices": [
      "Use system fonts (-apple-system, SF Pro) for native feel and performance",
      "Maintain consistent spacing rhythm using 4px base unit multipliers",
      "Limit content width to ~680px for optimal readability and focus"
    ],
    "anti_patterns": [
      "Using decorative fonts that compete with content",
      "Cramming multiple competing call-to-action buttons",
      "Applying jarring animations that distract from content"
    ],
    "faq": [
      {
        "question": "Which Apple platforms does this support?",
        "answer": "Design patterns work for iOS, macOS, iPadOS, and watchOS. Core principles apply across all Apple platforms."
      },
      {
        "question": "What font sizes should I use?",
        "answer": "Use 48px for hero text, 32px for titles, 17px for body, and 13px for captions with SF Pro font family."
      },
      {
        "question": "How do I implement dark mode?",
        "answer": "Swap primary background from #ffffff to #000000, secondary from #f5f5f7 to #1d1d1f, and text colors accordingly."
      },
      {
        "question": "Is this skill safe to use?",
        "answer": "Yes. This is a prompt-based design guide with no executable code, file access, or network operations."
      },
      {
        "question": "What minimum touch target size?",
        "answer": "Apple recommends 44x44pt minimum touch targets for interactive elements. Use 12px padding for button sizing."
      },
      {
        "question": "How does this compare to Material Design?",
        "answer": "Apple design emphasizes content-first approach with subtle depth. Material uses bolder elevation and motion. Apple prioritizes system fonts and minimal visual weight."
      }
    ]
  },
  "file_structure": [
    {
      "name": "SKILL.md",
      "type": "file",
      "path": "SKILL.md",
      "lines": 139
    }
  ]
}