android-compose-ui

Name: android-compose-ui
Author: fandhe-ai

github.com/fandhe-aiDevelopment447 installsUpdated 2d ago

About android-compose-ui

android-compose-ui is a reference skill for Android developers building interfaces with Jetpack Compose. It organizes official guidance on Compose foundations, state, layouts, adaptive UI, text input, and interaction by task.

Key features

01Task-to-reference category mapping
02Composable, Modifier, and state guidance
03Layout and adaptive UI references
04Text input and interaction guidance

Use cases

01Understanding recomposition and state
02Arranging content with Compose layouts
03Building adaptive multi-pane interfaces
04Handling text input, gestures, and accessibility

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/fandhe-ai/agent-reference-skills --skill android-compose-ui

After installing, type/android-compose-uiin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/adaptive-layout/

animated-pane.md

back-navigation-behavior.md

canonical-layouts.md

folding-feature.md

list-detail-pane-scaffold.md

navigable-list-detail-pane-scaffold.md

navigable-supporting-pane-scaffold.md

navigation-suite-scaffold.md

pane-adapted-value.md

pane-scaffold-directive.md

posture.md

README.md

supporting-pane-scaffold.md

three-pane-scaffold-navigator.md

window-adaptive-info.md

window-info-tracker.md

window-size-class.md

references/fundamentals/

composable-functions.md

compositionlocalof.md

compositionlocalprovider.md

custom-modifiers.md

modifier.md

movablecontentof.md

phases.md

README.md

recomposition.md

snapshotmutationpolicy.md

stability.md

staticcompositionlocalof.md

references/layout/

alignment-lines.md

Details

From the project README

Android Compose UI リファレンス

Jetpack Compose (androidx.compose) の UI 基盤に関する公式ドキュメントを蒸留したスキル。ユーザーのタスクに応じて適切な README.md を読み、そこから個別ファイルへ辿ること。

対象バージョン: Compose BOM 2026.09.00（compose foundation / foundation-layout / ui / ui-text / runtime 1.12.1、material3.adaptive 1.3.0）。Compose 1.12 は compileSdk 37、AGP 9.2.0 以降が必要。1.13 系（最新 1.13.0-beta01）はプレリリースのため各ページ Notes の 1 行記載のみ（出典: https://developer.android.com/develop/ui/compose/bom/bom-mapping 、取得 2026-10-16）。

ディレクトリ構成

skills/android-compose-ui/
  SKILL.md
  references/
    fundamentals/
      README.md
      composable-functions.md
      recomposition.md
      modifier.md
      phases.md
      compositionlocalof.md
      staticcompositionlocalof.md
      compositionlocalprovider.md
      snapshotmutationpolicy.md
      movablecontentof.md
      custom-modifiers.md
      stability.md
    state-lifecycle/
      README.md
      remember.md
      remembersaveable.md
      mutablestateof.md
      mutablestatelistof.md
      mutablestatemapof.md
      mutablestatesetof.md
      mutablestate.md
      state.md
      derivedstateof.md
      snapshotflow.md
      producestate.md
      collectasstate.md
      rememberupdatedstate.md
      launchedeffect.md
      disposableeffect.md
      sideeffect.md
      remembercoroutinescope.md
      saver.md
      state-hoisting.md
      state-lifespans.md
    layout/
      README.md
      column.md
      row.md
      box.md
      spacer.md
      boxwithconstraints.md
      arrangement-alignment.md
      intrinsicsize.md
      modifier-layout.md
      lazycolumn.md
      lazyrow.md
      lazy-list-scope.md
      rememberlazyliststate.md
      lazy-layout-cache-window.md
      lazyverticalgrid.md
      lazyhorizontalgrid.md
      lazyverticalstaggeredgrid.md
      pager.md
      flow-layout.md
      constraintlayout.md
      layout.md
      subcomposelayout.md
      scroll.md
      alignment-lines.md
      intrinsic-measurements.md
      visibility-tracking.md
      flexbox-grid.md
      styles.md
      media-query.md
    adaptive-layout/
      README.md
      window-size-class.md
      window-adaptive-info.md
      posture.md
      pane-scaffold-directive.md
      list-detail-pane-scaffold.md
      navigable-list-detail-pane-scaffold.md
      supporting-pane-scaffold.md
      navigable-supporting-pane-scaffold.md
      three-pane-scaffold-navigator.md
      back-navigation-behavior.md
      animated-pane.md
      pane-adapted-value.md
      navigation-suite-scaffold.md
      folding-feature.md
      window-info-tracker.md
      canonical-layouts.md
    text-input/
      README.md
      basictext.md
      basicmarquee.md
      basictextfield.md
      textfieldstate.md
      annotatedstring.md
      spanstyle.md
      paragraphstyle.md
      textstyle.md
      fontfamily.md
      textalign.md
      keyboardoptions.md
      visualtransformation.md
      selectioncontainer.md
      textmeasurer.md
      autofill.md
      clipboard.md
      emoji.md
    touch-input/
      README.md
      clickable.md
      combined-clickable.md
      pointer-input.md
      detect-tap-gestures.md
      detect-drag-gestures.md
      detect-transform-gestures.md
      draggable.md
      anchored-draggable.md
      scrollable.md
      nested-scroll.md
      transformable.md
      toggleable.md
      selectable.md
      interaction-source.md
      indication.md
      focusable.md
      keyboard-input.md
      hover.md
      semantics.md
      test-tag.md
      haptic-feedback.md
      drag-and-drop.md
      stylus-input.md

探索手順

タスクからカテゴリを引き、カテゴリの README.md で目的のページを特定する:

下記マッピング表でタスクに対応するカテゴリを探す
そのカテゴリの references/{category}/README.md を参照して目的のページを特定する
該当ページの .md を Read して詳細を確認する

タスク → カテゴリマッピング

タスク	カテゴリ	参照 README
`@Composable` 関数の設計・再コンポジションの仕組みを知りたい	fundamentals	references/fundamentals/README.md
`Modifier` チェーンの挙動・順序を確認したい	fundamentals	references/fundamentals/README.md
`CompositionLocal` でスコープ内に値を伝搬したい	fundamentals	references/fundamentals/README.md
`remember` / `mutableStateOf` で状態を保持したい	state-lifecycle	references/state-lifecycle/README.md
`LaunchedEffect` / `DisposableEffect` / `SideEffect` で副作用を扱いたい	state-lifecycle	references/state-lifecycle/README.md
Flow / StateFlow を Compose の `State` に変換したい（`collectAsState` / `produceState` / `snapshotFlow`）	state-lifecycle	references/state-lifecycle/README.md
`Column` / `Row` / `Box` で子要素を並べたい	layout	references/layout/README.md
`LazyColumn` / `LazyRow` / `LazyVerticalGrid` で大量データをスクロール表示したい	layout	references/layout/README.md
`LazyLayoutCacheWindow` で `LazyColumn` / `LazyVerticalGrid` のプリフェッチ・キャッシュを調整したい	layout	references/layout/README.md
`HorizontalPager` / `FlowRow` / `ConstraintLayout` / カスタム `Layout` を使いたい	layout	references/layout/README.md
`Style` / `StyleScope` で CSS ライクに状態別スタイルを定義したい、`mediaQuery` で環境シグナルに応じて UI を切り替えたい	layout	references/layout/README.md
`WindowSizeClass` で画面幅に応じたレイアウトを切り替えたい	adaptive-layout	references/adaptive-layout/README.md
`ListDetailPaneScaffold` / `SupportingPaneScaffold` でマルチペイン UI を作りたい	adaptive-layout	references/adaptive-layout/README.md
折りたたみデバイスの `FoldingFeature` / `Posture` に対応したい	adaptive-layout	references/adaptive-layout/README.md
`BasicText` / `BasicTextField` でテキスト表示・入力を実装したい	text-input	references/text-input/README.md
`AnnotatedString` / `SpanStyle` / `TextStyle` でリッチテキストを装飾したい	text-input	references/text-input/README.md
`KeyboardOptions` / IME アクション・入力変換を制御したい	text-input	references/text-input/README.md
`Modifier.clickable` / `combinedClickable` でタップを処理したい	touch-input	references/touch-input/README.md
`detectDragGestures` / `draggable` / `transformable` でジェスチャを扱いたい	touch-input	references/touch-input/README.md
`Modifier.focusable` / `semantics` / `testTag` でフォーカス・アクセシビリティ・テストを扱いたい	touch-input	references/touch-input/README.md
Material3 コンポーネント（Button/Card/TextField 等）を使いたい	-	android-compose-components スキルの担当
アニメーション・描画を扱いたい	-	android-compose-graphics-animation スキルの担当

Comments

Markdown supported

Details

Author: fandhe-ai
Repository: fandhe-ai/agent-reference-skills
Category: Development
Installs: 47
GitHub stars: 4

Report

More skills

All skills

remotion-render

github.com/inference-sh

1.6M

Render videos from React/Remotion component code via inference.sh. Pass TSX code, get MP4. Supports all Remotion APIs: useCurrentFrame, useVideoConfig, spring, interpolate, AbsoluteFill, Sequence. Configurable resolution, FPS, duration, codec. Use for: programmatic video generation, animated graphics, motion design, data-driven videos, React animations to video. Triggers: remotion, render video from code, tsx to video, react video, programmatic video, remotion render, code to video, animated video, motion graphics code, react animation video

improve-codebase-architecture

github.com/mattpocock

1.2M

Scan a codebase for architecture improvement opportunities, present them as a visual HTML report, then dive deep into whichever one you pick.

design-mobile-apps

github.com/designed-by-ai

1.1M

Design mobile app screens with Sleek, edit Sleek projects, and implement their designs in React Native or HTML

vercel-react-best-practices

github.com/vercel-labs

852.5k

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

android-compose-ui

About android-compose-ui

Key features

Use cases

Install

Bundled files

Details

Android Compose UI リファレンス

ディレクトリ構成

探索手順

タスク → カテゴリ マッピング

Comments

タスク → カテゴリマッピング