Platform Design Skills
Skills with Apple HIG, Material Design 3 and WCAG 2.2 rules for reviewing interfaces on iOS, macOS, Android, the web and more
- 631 ★ on the repository
- Last commit
- MIT
Minimal access
Why this level
- The skills consist only of instructions and reference rules
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/platform-design-skillsDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skills consist only of instructions and reference rules
This is third-party code. Review the repository files before installing.
What it does
A pack of eight skills, one per platform: iOS, iPadOS, macOS, watchOS, visionOS, tvOS, Android and the web. Each skill condenses official guidelines into numbered rules with code examples in SwiftUI, Compose, XML or HTML and CSS. The agent loads the matching skill when it sees a UI task for that platform and checks navigation, layout, accessibility, dark mode and typography. The web skill is based on WCAG 2.2 and MDN.
Who it is for. For mobile and web developers and designers who want the agent to follow platform rules.
Good fit when
- Checking a SwiftUI or UIKit screen against the HIG
- Reviewing a Jetpack Compose screen against Material Design 3
- Auditing a web page for accessibility
- Choosing a navigation pattern for iPad, Mac or Watch
Not a fit when
- You need a distinctive brand style rather than guideline compliance
- You need automated accessibility testing tools rather than rule-based review
Example request
Review this SwiftUI view for Apple HIG compliance and list the violationsLimitations
The rules restate guidelines as of the build date and may lag behind new Apple and Google releases. The skills do not run the app or take screenshots; they work with code and descriptions.
How to disable. Delete the corresponding skill folders from your agent's skills directory.
FAQ
Can I install just one skill, say for Android?
Yes, the installer lets you pick individual skills, or you can copy a single folder from skills by hand.
What are the rules based on?
Apple Human Interface Guidelines, Material Design 3, WCAG 2.2 and MDN, with a few HCI papers as secondary sources.
Discussion
No questions or reviews yet.
Related
SkillsSkills for design engineers: quick UI cleanup, accessibility, metadata and animation performance fixes
A skill with 152 rules on animation, typography, sound and laws of UX: reviews CSS and components with findings as file and line
A skill that bans the stock AI interface with floating cards, gradients and glass and sets plain sizes, radii and shadows like Linear
A skill with a searchable base of styles, palettes, font pairings and UX rules that generates a design system per product type
Apple Design Skill
apple-design-skill
A design reviewer by Apple HIG for Flutter, React Native, Tauri, Electron, SwiftUI, UIKit and AppKit. Not affiliated with Apple, includes HIG pages
Make interfaces feel better
make-interfaces-feel-better
A skill about the small interface details: animations, typography, icons, shadows, radii, optical alignment and hit areas
README in short
The author compiled Apple's guidelines (a PDF is included in the repo), Material Design 3 and WCAG and split them into a skill per platform. The README describes what each skill covers and which tasks it suits. Each skill has SKILL.md, metadata.json, a rules folder with examples and AGENTS.md. Installs with a single npx skills add command, MIT licensed.
README badge
Original SKILL.md
---
name: android-design-guidelines
description: Material Design 3 and Android platform guidelines. Use when building Android apps with Jetpack Compose or XML layouts, implementing Material You, navigation, or accessibility. Triggers on tasks involving Android UI, Compose components, dynamic color, or Material Design compliance.
license: MIT
metadata:
author: platform-design-skills
version: "1.0.0"
---
# Android Platform Design Guidelines — Material Design 3
## 1. Material You & Theming [CRITICAL]
### 1.1 Dynamic Color
Enable dynamic color derived from the user's wallpaper. Dynamic color is the default on Android 12+ and should be the primary theming strategy.
```kotlin
// Compose: Dynamic color theme
@Composable
fun AppTheme(
darkTheme: Boolean = isSystemInDarkTheme(),
dynamicColor: Boolean = true,
content: @Composable () -> Unit
) {
val colorScheme = when {
dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
val context = LocalContext.current
if (darkTheme) dynamicDarkColorScheme(context)
else dynamicLightColorScheme(context)
}
darkTheme -> darkColorScheme()
else -> lightColorScheme()
}
MaterialTheme(
colorScheme = colorScheme,
typography = AppTypography,
content = content
)
}
```