Anthony Cardinale
34bd90e30d
Combines frontend-design aesthetics with swiftui-pro correctness, grounded in Apple's Human Interface Guidelines (134 articles). Includes curated HIG reference files for typography, color, layout, materials, motion, icons, and components, plus full HIG JSON data for deep lookups. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
60 lines
3.0 KiB
Markdown
60 lines
3.0 KiB
Markdown
# swift-front
|
|
|
|
A Claude Code skill for building distinctive, production-grade SwiftUI interfaces. Combines bold aesthetic direction from [frontend-design](https://github.com/anthropics/claude-code-plugins/tree/main/skills/frontend-design) with modern SwiftUI correctness from [swiftui-pro](https://github.com/nicklama/swiftui-pro), grounded in Apple's Human Interface Guidelines.
|
|
|
|
## What it does
|
|
|
|
When invoked (via `/swift-front` or automatically when building SwiftUI views), this skill guides Claude to:
|
|
|
|
1. **Design Think** — commit to a bold aesthetic direction before writing code
|
|
2. **Check HIG compliance** — load relevant Apple HIG references for the design domain
|
|
3. **Implement with correctness** — modern SwiftUI APIs (iOS 26, Swift 6.2), proper data flow, accessibility
|
|
4. **Avoid AI slop** — explicit anti-patterns checklist to prevent generic, forgettable interfaces
|
|
|
|
## Install
|
|
|
|
Clone into your Claude Code skills directory:
|
|
|
|
```bash
|
|
git clone https://github.com/cardinale/swift-front.git ~/.claude/skills/swift-front
|
|
```
|
|
|
|
## Structure
|
|
|
|
```
|
|
swift-front/
|
|
├── SKILL.md # Main skill (loaded when invoked)
|
|
├── references/ # Curated HIG extracts (loaded on demand)
|
|
│ ├── hig-typography.md # Text styles, Dynamic Type, font specs
|
|
│ ├── hig-color.md # System colors, dark mode, contrast
|
|
│ ├── hig-layout.md # Device dimensions, size classes, safe areas
|
|
│ ├── hig-materials.md # Liquid Glass, standard materials, vibrancy
|
|
│ ├── hig-motion.md # Animation principles, Reduce Motion
|
|
│ ├── hig-icons.md # App icons, SF Symbols, rendering modes
|
|
│ └── hig-components.md # Component taxonomy, modality, search
|
|
└── data/ # Machine-readable HIG data
|
|
├── apple-hig-compact.json # 45 articles — tips/notes only (39KB)
|
|
├── apple-hig-index.json # 134 articles — navigation index (65KB)
|
|
└── categories/ # Full HIG articles by category (~2.2MB)
|
|
├── foundations.json
|
|
├── components.json
|
|
├── patterns.json
|
|
├── technologies.json
|
|
├── inputs.json
|
|
├── general.json
|
|
└── getting-started.json
|
|
```
|
|
|
|
## HIG Data
|
|
|
|
The `data/` directory contains a structured JSON extraction of [Apple's Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/) (134 articles). The curated `references/` files distill the most design-relevant content into scannable markdown. For edge cases, the skill instructs Claude to search the index and read from the full category files.
|
|
|
|
## Pairs with
|
|
|
|
- **[swiftui-pro](https://github.com/nicklama/swiftui-pro)** — After building with swift-front, use swiftui-pro for full API correctness review
|
|
- **[frontend-design](https://github.com/anthropics/claude-code-plugins/tree/main/skills/frontend-design)** — The web equivalent; swift-front adapts its design philosophy for Apple platforms
|
|
|
|
## License
|
|
|
|
MIT
|