skills.rest
glowingkitty
glowingkittyCOMMUNITY
Explore all skills by this author →
GitHub

ios

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
One-click install
npx skills add https://github.com/glowingkitty/OpenMates --skill ios-glowingkitty
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
obadasemaryobadasemary

xcodebuildmcp

Automate Apple platform build, test, run, debug, and UI workflows for Xcode projects.

Community
Advanced
xashggxashgg
1

qa-quarto

Compare and correct visual and content parity between Quarto HTML and Beamer PDF slides.

Community
Intermediate
mschuerigmschuerig

ios-debugger-agent

Build, launch, and inspect iOS apps on a booted simulator.

Community
Advanced
shin0720shin0720

auto-verify

Automate visual regression testing by capturing and comparing UI screenshots with Playwright.

Community
Basic