Platform Design Skills

Install

npx skills add ehmo/platform-design-skills

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.

Example request

Review this SwiftUI view for Apple HIG compliance and list the violations

Limitations

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.

Security check

• The skills consist only of instructions and reference rules

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.

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
    )
}
```

Related