| name | pgts-android |
| description | Apply Pretty Good Type Scale (PGTS) in Android projects using the generated Jetpack Compose Material 3 typography export. Use when a coding agent needs to map PGTS roles to Compose TextStyle, Material Typography, sp units, Android font scaling, or native Android design-system typography. |
PGTS Android
Use this skill when the target is an Android project. Use platforms/android/PGTSTypography.kt as the generated starter export and tokens/pgts.tokens.json as the canonical source.
Canonical roles: editorial-mega-display, display-large, display, headline-large, headline, title-large, title, body, footnote, caption, legal.
Lean roles for product UI: display, headline-large, title-large, title, body, footnote.
Integration
Copy or import the generated Kotlin file into the host app module. Add a package declaration and font-family wiring as required by the host project.
Use PGTSRole for semantic identity, PGTSContext for mobile, desktop, or print contexts, and PGTS.style(role).toTextStyle() for Compose:
val displayStyle = PGTS.style(PGTSRole.DISPLAY).toTextStyle()
Use PGTSTypography as the Material 3 starter mapping when the app wants the lean ladder mapped into Typography.
Android Text Scaling
Keep screen typography in sp. Do not convert PGTS Android values to fixed pixels. The generated file uses sp so the user font-scale setting can still affect rendered text.
Apply the host app's font family separately through Compose typography or copied TextStyle values.
Role Mapping
display maps to displayLarge.headline-large maps to headlineLarge.title-large maps to titleLarge.title maps to titleMedium.body maps to bodyLarge.footnote maps to labelSmall.
Use the full anchor set directly from PGTS.styles when a surface needs editorial-mega-display, display-large, headline, caption, or legal.
Verification
- Test default Android font scale and at least one larger accessibility font scale.
- Confirm display roles do not overflow common compact widths.
- Confirm dense roles remain readable.
- Confirm the app's Material theme still owns color, weight, and font family.
- Run
npm run build after token changes and npm run validate before returning work.
