Material 3
hamen/material-3-skill
Implement Google's Material Design 3 (Material You) UI system.
Design to iOS and Android conventions — what each OS mandates, where they diverge, and when to unify.
Install Platform Conventions
$ npx skills add Owl-Listener/designer-skills --skill platform-conventions -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install Owl-Listener/designer-skills platform-conventions --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/Owl-Listener/designer-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/ui-design/skills/platform-conventions .claude/skills/platform-conventions && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "platform-conventions" agent skill from https://github.com/Owl-Listener/designer-skills/tree/main/ui-design/skills/platform-conventions into .claude/skills/platform-conventions/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "platform-conventions", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/Owl-Listener/designer-skills/tree/main/ui-design/skills/platform-conventionsType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add Owl-Listener/designer-skills --skill platform-conventions -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install Owl-Listener/designer-skills platform-conventions --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Owl-Listener/designer-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/ui-design/skills/platform-conventions .agents/skills/platform-conventions && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "platform-conventions" agent skill from https://github.com/Owl-Listener/designer-skills/tree/main/ui-design/skills/platform-conventions into .agents/skills/platform-conventions/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "platform-conventions", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Owl-Listener/designer-skills --skill platform-conventions -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install Owl-Listener/designer-skills platform-conventions --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Owl-Listener/designer-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/ui-design/skills/platform-conventions .cursor/skills/platform-conventions && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "platform-conventions" agent skill from https://github.com/Owl-Listener/designer-skills/tree/main/ui-design/skills/platform-conventions into .cursor/skills/platform-conventions/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "platform-conventions", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/Owl-Listener/designer-skills.git --path ui-design/skills/platform-conventions--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add Owl-Listener/designer-skills --skill platform-conventions -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install Owl-Listener/designer-skills platform-conventions --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Owl-Listener/designer-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/ui-design/skills/platform-conventions .gemini/skills/platform-conventions && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "platform-conventions" agent skill from https://github.com/Owl-Listener/designer-skills/tree/main/ui-design/skills/platform-conventions into .gemini/skills/platform-conventions/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "platform-conventions", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install Owl-Listener/designer-skills platform-conventionsInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add Owl-Listener/designer-skills --skill platform-conventions -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/Owl-Listener/designer-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/ui-design/skills/platform-conventions .github/skills/platform-conventions && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "platform-conventions" agent skill from https://github.com/Owl-Listener/designer-skills/tree/main/ui-design/skills/platform-conventions into .github/skills/platform-conventions/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "platform-conventions", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Owl-Listener/designer-skills --skill platform-conventions -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install Owl-Listener/designer-skills platform-conventions --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Owl-Listener/designer-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/ui-design/skills/platform-conventions .opencode/skills/platform-conventions && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "platform-conventions" agent skill from https://github.com/Owl-Listener/designer-skills/tree/main/ui-design/skills/platform-conventions into .opencode/skills/platform-conventions/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "platform-conventions", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
platform-conventions- GitHub stars
- 2.9k
- Token cost
- ~1.6k tokens
- SKILL.md length
- 871 words
- Files
- 1
- Skills in repo
- 107
- Repo updated
- First seen
- Licence
- MIT
At a glance
Design to iOS and Android conventions — what each OS mandates, where they diverge, and when to unify.
- Shipping native apps
- SKILL.md covers What You Do, Why Platform Conventions Matter, Key Differences: iOS (HIG) vs.… and Cross-Platform Design Decisions, plus 2 more sections
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
- Tasks that involve Responsive design
What it does
Platform Conventions is an agent skill from Owl-Listener/designer-skills. Design to iOS and Android conventions — what each OS mandates, where they diverge, and when to unify. Use when shipping native apps. For breakpoint adaptation use responsive-design; for matching competitor patterns use jakobs-law (interaction-design).
Its SKILL.md is about 1.6k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Frontend & Design, covering Responsive design. It works with iOS and Android. The repository describes itself as: Designer Skills Collection: agentic skills, commands, and plugins for design — from research to systems, UI, interaction, and delivery. The licence is MIT.
When your agent uses it
- Shipping native apps
- Tasks that involve Responsive design
Example prompts
- “/platform-conventions”
What it can do on your machine
Read from SKILL.md and the folder at commit 9a6930c. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Platform Conventions loads about 1.6k tokens when it runs. Until then it costs about 69 tokens; SKILL.md has 871 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from Owl-Listener/designer-skills at commit 9a6930c, republished under its MIT licence (© Owl-Listener). 871 words, ~1,649 tokens.
Download SKILL.mdSave it as
.claude/skills/platform-conventions/SKILL.md (or your agent's skills folder).- name
- platform-conventions
- description
- Design to iOS and Android conventions — what each OS mandates, where they diverge, and when to unify. Use when shipping native apps. For breakpoint adaptation use `responsive-design`; for matching competitor patterns use `jakobs-law` (interaction-design).
Platform Conventions
You are an expert in iOS Human Interface Guidelines and Material Design, and in the trade-offs between platform-native and cross-platform product design.
What You Do
You identify which UI patterns are platform-mandated conventions, map the meaningful differences between iOS and Android, and help teams decide when to follow each platform vs. when a unified cross-platform design is appropriate.
Why Platform Conventions Matter
Users spend the vast majority of their time in the OS and its native apps. They build strong muscle memory for navigation, controls, and interaction patterns. When your product departs from platform convention without clear reason, users spend cognitive budget understanding your product rather than using it.
Key Differences: iOS (HIG) vs. Android (Material Design 3)
Navigation
| Pattern | iOS | Android |
|---|---|---|
| Back navigation | Swipe right from left edge; back button top-left | System back gesture (swipe from either edge) or predictive back; back arrow in app bar |
| Primary structure | Tab bar at bottom; sidebar on iPad | Navigation bar at bottom or Navigation drawer (hamburger) |
| Navigation history | Stack-based; each tab has its own stack | Single back stack across the app; tabs do not maintain independent history by default |
| Bottom navigation | Up to 5 tabs; no labels required | 3–5 tabs; labels required |
Design implication: iOS users expect swiping from the left edge to always go back; reserve that gesture zone. On Android, the system back gesture handles this — in-app swipe-from-left can be used for a drawer without conflicting.
Controls and Components
| Component | iOS convention | Android (Material 3) convention |
|---|---|---|
| Toggle switch | UISwitch — pill shape, right-aligned in lists | Switch — thumb-and-track, can appear inline or in lists |
| Destructive confirmation | Action sheet (bottom) with red destructive option | Dialog with text buttons; red/error tone for destructive |
| Date/time picker | Wheel picker or calendar inline | Calendar with text input alternative |
| Selection menus | Picker wheel or action sheet | Exposed dropdown or modal bottom sheet |
| Primary button | Filled rectangle, full-width in forms | Filled button (rounded corners by default in M3) |
| Floating action | Not a convention — use contextual buttons | FAB — primary surface action, bottom-right |
| Pull to refresh | Native UIRefreshControl | SwipeRefreshLayout — same gesture, different visual |
Typography
| Attribute | iOS | Android |
|---|---|---|
| System font | SF Pro (text) / SF Compact (watch) | Roboto / Google Sans |
| Dynamic type | Required — users control text size system-wide | Scalable pixels (sp) — must respect system font scale |
| Type scale | iOS text styles (Large Title, Title 1–3, Body, etc.) | Material type scale (Display, Headline, Title, Body, Label) |
Both platforms require apps to respect the user's system font size preference. Hardcoded point sizes that do not scale are an accessibility failure on both.
Interaction and Gesture Conventions
| Gesture | iOS behaviour | Android behaviour |
|---|---|---|
| Swipe to delete | Standard in table views | Swipe to dismiss/archive (context-dependent) |
| Long press | Peek / context menu (iOS 13+ context menus) | Contextual action mode; long press to select |
| Pull to refresh | Standard | Standard |
| Pinch to zoom | Standard in maps, images | Standard |
| Back swipe | Reserved — always navigates back | Predictive back gesture; apps can opt in to preview |
Visual and Iconography
| Area | iOS | Android |
|---|---|---|
| Icon library | SF Symbols (thousands, variable weight, auto-scale) | Material Symbols (rounded, outlined, sharp variants) |
| Corner radius | Larger, "squircle" curves (superellipse) | Moderate — Material 3 uses prominent rounding on components |
| System colours | Dynamic colors that adapt to dark/light automatically | Material You dynamic color — generated from wallpaper |
| Modal presentation | Sheet that slides up from bottom, with grab handle | Bottom sheet (standard or modal) or full-screen dialog |
Show full SKILL.md (319 more words)Show less
Cross-Platform Design Decisions
When to follow each platform strictly
- Native or near-native apps where platform fluency is a key quality signal (banking, health, utility apps)
- Apps that integrate deeply with OS features (share sheet, widgets, Siri/Google Assistant)
- Apps with a large base of platform-experienced power users
When a unified design is appropriate
- Products with high feature parity across platforms where design consistency reduces maintenance cost
- Products where cross-device continuity matters (e.g. users switch between iPhone and Android or web)
- B2B tools where users interact primarily with the product's own design system, not OS affordances
The hybrid approach
Most cross-platform products adopt a middle path: a unified visual and component language, but with platform-specific adaptations for navigation (system-level conventions), system controls, and gesture conflicts. The product looks like itself; it behaves like the OS.
What Not to Do
- Do not use a bottom tab bar on Android if it uses the gesture navigation that conflicts with a swipe-up action
- Do not suppress the iOS swipe-back gesture — users who trigger it and nothing happens will be confused and trust drops
- Do not use iOS action sheets on Android or Android dialogs on iOS as primary decision patterns
- Do not ignore Dynamic Type / SP scaling on either platform — fixed text sizes are an accessibility failure
- Do not transplant the FAB pattern to iOS without justification — it has no native precedent there
Best Practices
- Read the current platform guidelines before each major design phase; both iOS HIG and Material 3 update frequently
- Audit native apps on each platform for the interaction you are designing before proposing a solution
- Maintain a component mapping document: what the design system calls a thing, what iOS calls it, what Android calls it
- Test on real devices for each platform — simulator behaviour and gesture handling differ from physical devices
- When in doubt about a platform-specific pattern, use what ships in the OS: it is already tested, already familiar
© Owl-Listener, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in ui-design/skills/platform-conventions of Owl-Listener/designer-skills.
Open the folder on GitHubat commit 9a6930c
Compare with similar skills
Platform Conventions next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Platform Conventions this skillOwl-Listener/designer-skills | 2.9k | — | ~1.6k | Automated safety check: Pass | MIT | |
| Material 3hamen/material-3-skill | 1.5k | 2 repos | ~7.8k | Automated safety check: Pass | MIT | |
| AccessibilityGetStream/stream-chat-react-native | 1.2k | — | ~6.5k | Automated safety check: Pass | Custom licence | |
| Material Design 3 UI/UX Guideskydashnet/material-design-3-ui-skill | 130 | — | ~3k | Automated safety check: Pass | MIT | |
| AccessibilityVeryGoodOpenSource/vgv-ai-flutter-plugin | 169 | — | ~4.2k | Automated safety check: Pass | MIT | |
| Maui Accessibilitydavidortinau/maui-skills | 174 | — | ~974 | Automated safety check: Pass | MIT |
Similar skills
Accessibility
GetStream/stream-chat-react-native
Maintain VoiceOver/TalkBack-focused accessibility in stream-chat-react-native.
Material Design 3 UI/UX Guide
skydashnet/material-design-3-ui-skill
Guides designing, reviewing or implementing interfaces that follow Google's Material Design 3 system: semantic tokens, component states, adaptive layout and accessibility.
Accessibility
VeryGoodOpenSource/vgv-ai-flutter-plugin
Audits or remediates Flutter widgets against WCAG 2.2 conformance levels A, AA, or AAA across iOS, Android, Web, macOS, Windows, and Linux, covering Semantics labels and screen reader output under…
Maui Accessibility
davidortinau/maui-skills
Guide for making .NET MAUI apps accessible — screen reader support via SemanticProperties, heading levels, AutomationProperties visibility control, programmatic focus and announcements, and…
Android Material Guidelines
zoonk/zoonk
A skill your agent uses when designing, reviewing, or implementing Android UI or features for phones, tablets, foldables, ChromeOS, desktop windowing, Wear OS, Android TV, Android for Cars, Android…
More from Owl-Listener/designer-skills
All 107 skills in this repoA B Test Design
Owl-Listener/designer-skills
Design an A/B experiment — hypothesis, variants, primary metric, and sample size.
Accessibility Test Plan
Owl-Listener/designer-skills
Plan accessibility testing — assistive technologies, participant criteria, WCAG coverage, and session protocol.
Aesthetic Usability
Owl-Listener/designer-skills
Apply the Aesthetic-Usability Effect — polished, consistent interfaces are perceived as more usable and forgive minor friction.
Affinity Diagram
Owl-Listener/designer-skills
Cluster many qualitative data points into themes and insight statements.
Animation Principles
Owl-Listener/designer-skills
Apply animation principles — easing, staging, follow-through — to one specific UI motion.
Business Design
Owl-Listener/designer-skills
Read financials, map competitive landscapes, and argue design decisions in the language of value.
Related
Categories
Questions about Platform Conventions
What does Platform Conventions do?
Design to iOS and Android conventions — what each OS mandates, where they diverge, and when to unify. Platform Conventions is an agent skill from Owl-Listener/designer-skills. Design to iOS and Android conventions — what each OS mandates, where they diverge, and when to unify.
When should I use Platform Conventions?
Platform Conventions fits situations like: shipping native apps; tasks that involve Responsive design.
How do I install Platform Conventions in Claude Code?
Run `npx skills add Owl-Listener/designer-skills --skill platform-conventions -a claude-code`. Or copy the skill folder (ui-design/skills/platform-conventions in Owl-Listener/designer-skills) into .claude/skills/platform-conventions in your project. Claude Code loads it when a task matches its description.
How do I install Platform Conventions in Codex?
Run `npx skills add Owl-Listener/designer-skills --skill platform-conventions -a codex`. Or copy the skill folder (ui-design/skills/platform-conventions in Owl-Listener/designer-skills) into .agents/skills/platform-conventions in your project. Codex loads it when a task matches its description.
Can I use Platform Conventions in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add Owl-Listener/designer-skills --skill platform-conventions -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/platform-conventions, .gemini/skills/platform-conventions, .github/skills/platform-conventions and .opencode/skills/platform-conventions in your project.
What does Platform Conventions need to run?
SKILL.md names no scripts, command-line tools or credentials: Platform Conventions is instructions for the agent only.
Does Platform Conventions access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Platform Conventions safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Platform Conventions use?
Platform Conventions is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Platform Conventions use?
About 1.6k tokens (SKILL.md is roughly 6.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Platform Conventions?
Skills that share tags, products or a category with Platform Conventions: Material 3 (hamen/material-3-skill, 1.5k stars), Accessibility (GetStream/stream-chat-react-native, 1.2k stars), Material Design 3 UI/UX Guide (skydashnet/material-design-3-ui-skill, 130 stars) and Accessibility (VeryGoodOpenSource/vgv-ai-flutter-plugin, 169 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Platform Conventions?
Owl-Listener (a GitHub user) maintains it in Owl-Listener/designer-skills, which has 2,854 GitHub stars. The repository holds 107 skills in this directory. The repository was last updated on September 5, 2026.
Source: Owl-Listener/designer-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.