android-compose-components

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

github.com/fandhe-aiDevelopment447 installsUpdated 2d ago

About android-compose-components

A reference skill for Android developers using Jetpack Compose Material3. Task mappings and category indexes lead to component documentation for inputs, containers, navigation, feedback, and theming.

Key features

01Find component categories by task
02Cover buttons and input components
03Index containers, pickers, and navigation
04Reference feedback components and theming

Use cases

01Implement form inputs and selection controls
02Build dialogs, sheets, or navigation bars
03Add messages, progress, and badges
04Configure a Material3 theme

Install

Copy the command and run it in a terminal.

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

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

Bundled files

References and scripts installed along with SKILL.md.

references/buttons/

button.md

buttongroup.md

elevatedbutton.md

extendedfloatingactionbutton.md

filledtonalbutton.md

floatingactionbutton.md

floatingactionbuttonmenu.md

iconbutton.md

icontogglebutton.md

outlinedbutton.md

README.md

segmentedbutton.md

splitbutton.md

textbutton.md

togglebutton.md

references/containers/

alertdialog.md

bottomsheetscaffold.md

card.md

carousel.md

dialog.md

divider.md

listitem.md

modalbottomsheet.md

navigationdrawer.md

noninteractivescrollbar.md

pulltorefreshbox.md

README.md

scaffold.md

segmentedlistitem.md

surface.md

Details

From the project README

Jetpack Compose Material3 コンポーネントリファレンス

Jetpack Compose Material3 (androidx.compose.material3) コンポーネント API を網羅したスキル。ユーザーのタスクに応じて適切な README.md を読み、そこから個別ファイルへ辿ること。

ディレクトリ構成

skills/android-compose-components/
  SKILL.md
  references/
    buttons/
      README.md
      button.md
      filledtonalbutton.md
      elevatedbutton.md
      outlinedbutton.md
      textbutton.md
      iconbutton.md
      icontogglebutton.md
      floatingactionbutton.md
      extendedfloatingactionbutton.md
      segmentedbutton.md
      splitbutton.md
      buttongroup.md
      floatingactionbuttonmenu.md
      togglebutton.md
    inputs/
      README.md
      checkbox.md
      tristatecheckbox.md
      radiobutton.md
      switch.md
      slider.md
      rangeslider.md
      textfield.md
      outlinedtextfield.md
      securetextfield.md
      scrollfield.md
      rememberscrollfieldstate.md
      searchbar.md
      dockedsearchbar.md
      expandedfullscreensearchbar.md
      expandeddockedsearchbar.md
      dropdownmenu.md
      dropdownmenuitem.md
      exposeddropdownmenubox.md
      exposeddropdownmenu.md
      assistchip.md
      filterchip.md
      inputchip.md
      suggestionchip.md
    pickers/
      README.md
      datepicker.md
      rememberdatepickerstate.md
      datepickerdialog.md
      dateinput.md
      daterangepicker.md
      daterangeinput.md
      rememberdaterangepickerstate.md
      timepicker.md
      timeinput.md
      remembertimepickerstate.md
      timepickerdialog.md
    containers/
      README.md
      card.md
      scaffold.md
      surface.md
      listitem.md
      segmentedlistitem.md
      divider.md
      modalbottomsheet.md
      bottomsheetscaffold.md
      navigationdrawer.md
      alertdialog.md
      dialog.md
      carousel.md
      swipetodismissbox.md
      pulltorefreshbox.md
      tooltipbox.md
      verticaldraghandle.md
      noninteractivescrollbar.md
    navigation-components/
      README.md
      topappbar.md
      topappbarscrollbehavior.md
      bottomappbar.md
      horizontalfloatingtoolbar.md
      verticalfloatingtoolbar.md
      appbarrow.md
      navigationbar.md
      navigationbaritem.md
      shortnavigationbar.md
      shortnavigationbaritem.md
      navigationrail.md
      navigationrailitem.md
      widenavigationrail.md
      widenavigationrailitem.md
      navigationdraweritem.md
      primarytabrow.md
      tab.md
      leadingicontab.md
      appbarcolumn.md
    feedback/
      README.md
      snackbar.md
      snackbarhost.md
      snackbarhoststate.md
      snackbardata.md
      linearprogressindicator.md
      linearwavyprogressindicator.md
      circularprogressindicator.md
      circularwavyprogressindicator.md
      loadingindicator.md
      badge.md
      badgedbox.md
      icon.md
      text.md
    theming/
      README.md
      material-theme.md
      material-expressive-theme.md
      color-scheme.md
      dynamic-color-scheme.md
      typography.md
      shapes.md
      content-color.md
      motion-scheme.md
      surface-tonal-elevation.md
      theme-anatomy.md
      custom-design-system.md
      material2-material3-migration.md
      material-shapes.md

探索手順

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

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

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

タスク	カテゴリ	参照 README
Button / IconButton / FloatingActionButton などの操作ボタンを実装したい	buttons	references/buttons/README.md
SegmentedButton / SplitButton / ButtonGroup でボタン群を作りたい	buttons	references/buttons/README.md
Checkbox / RadioButton / Switch / Slider で選択・切り替え UI を作りたい	inputs	references/inputs/README.md
TextField / OutlinedTextField / SecureTextField でテキスト入力を実装したい	inputs	references/inputs/README.md
SearchBar / DropdownMenu / Chip 系コンポーネントを使いたい	inputs	references/inputs/README.md
DatePicker / DateRangePicker で日付選択 UI、または DisplayMode.Input でキーボード日付入力（DateInput / DateRangeInput ページ）を実装したい	pickers	references/pickers/README.md
TimePicker / TimeInput で時刻選択 UI を実装したい	pickers	references/pickers/README.md
rememberDatePickerState 等の State や DatePickerDialog / TimePickerDialog でダイアログ表示したい	pickers	references/pickers/README.md
Card / Surface / Scaffold / ListItem でコンテンツを表示したい	containers	references/containers/README.md
Dialog / AlertDialog / ModalBottomSheet / BottomSheetScaffold / NavigationDrawer でモーダル・シートを表示したい	containers	references/containers/README.md
Carousel / TooltipBox / SwipeToDismissBox / PullToRefreshBox でジェスチャ付きコンテナを使いたい	containers	references/containers/README.md
TopAppBar / BottomAppBar / FloatingToolbar で画面上下のバーを実装したい	navigation-components	references/navigation-components/README.md
NavigationBar / NavigationRail / ShortNavigationBar で主要ナビゲーションを実装したい	navigation-components	references/navigation-components/README.md
PrimaryTabRow / Tab / LeadingIconTab / AppBarRow / AppBarColumn でタブ・アクション行を実装したい	navigation-components	references/navigation-components/README.md
Snackbar / SnackbarHost / SnackbarHostState でメッセージ通知を実装したい	feedback	references/feedback/README.md
LinearProgressIndicator / CircularProgressIndicator / LoadingIndicator で進捗を表示したい	feedback	references/feedback/README.md
Badge / BadgedBox / Icon / Text で表示要素を組み立てたい	feedback	references/feedback/README.md
MaterialTheme / ColorScheme / Typography / Shapes / MaterialShapes / Dynamic color でテーマをカスタマイズしたい	theming	references/theming/README.md
Material2 から Material3 へ移行したい	theming	references/theming/README.md
レイアウト・状態管理・ジェスチャを扱いたい	—	別スキル `android-compose-ui` の担当
アニメーション・描画を扱いたい	—	別スキル `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-components

About android-compose-components

Key features

Use cases

Install

Bundled files

Details

Jetpack Compose Material3 コンポーネントリファレンス

ディレクトリ構成

探索手順

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

Comments

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