ios

Name: ios
Availability: InStock
Author: Kitty

Maps Swift files to CSS to keep Apple UI in sync with web design.

43|2|Updated Jan 25, 2024

Search Tags:#design tokens #swift #ios #visual regression #xcodebuild #ui parity #web-to-native mapping

Ready to run

npx skills add https://github.com/glowingkitty/OpenMates --skill ios-glowingkitty

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ios
Source: https://github.com/glowingkitty/OpenMates/tree/main/.agents/skills/ios
Command: npx skills add https://github.com/glowingkitty/OpenMates --skill ios-glowingkitty

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Prevents iOS/macOS UI implementation from drifting away from the web app’s design spec by forcing you to read the authoritative Apple UI rules and the mapped web CSS before writing Swift.

Core Features & Use Cases

Spec-first Swift implementation: Loads iOS/macOS design rules and implementation notes, then maps Swift files to the corresponding web source so the web CSS is treated as the source of truth.
Build-ready session setup: Verifies and sets Xcode build defaults (project, scheme, simulator) via the session defaults mechanism.
Tight visual verification loop: Builds and runs the app, screenshots the simulator, scrapes the equivalent web page, and iterates until the UI matches.

Quick Start

Start an iOS/macOS Apple app development session to implement the feature described in your task and iteratively verify the simulator UI against the equivalent web page.

Frequently Asked Questions about ios

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I maintain UI parity between my iOS app and web design tokens?▼

To maintain UI parity between iOS app and web, map modified Swift files to their corresponding Svelte and CSS sources, treating the web CSS as the authoritative spec before writing native Swift code.

How do I verify Swift UI changes against web CSS using Xcode?▼

Verify Swift UI changes by running a build-run-screenshot-compare loop using xcodebuild and the provided session tools, scraping the equivalent web page to iterate until the simulator UI matches the web spec.

What do I need to set up before starting iOS UI implementation to match web spec?▼

Before starting iOS UI implementation, read the Apple UI rules in .claude/rules, set Xcode build defaults like project, scheme, and simulator, and load the mapped web CSS sources to establish the design baseline.

Can I use this approach for both iOS and macOS feature work?▼

Yes, you can use this spec-first mapping approach for both iOS and macOS feature work, bug fixes, and UI parity updates by applying the authoritative web CSS and design-token rules to the Swift implementation.

Why does my iOS visual regression loop fail to match the web page?▼

Visual regression loops fail when Xcode build defaults are missing or the web CSS source mapping is ignored, requiring you to configure the session defaults and read the authoritative Apple UI rules before screenshotting.