Agent Skills › chrisbanes/skills › compose-component-design

compose-component-design

GitHub

用于设计和审查可复用的 Jetpack Compose 组件 API，涵盖修饰符参数、根布局放置及内容槽位设计。指导开发者构建 caller-placeable 和 caller-composable 的组件结构，优化可变区域与不变结构的分离。

skills/compose-component-design/SKILL.md chrisbanes/skills

Trigger Scenarios

设计或审查 Jetpack Compose 组件 API 处理修饰符参数与根布局放置优化组件的内容槽位与布尔标志

Install

npx skills add chrisbanes/skills --skill compose-component-design -g -y

More Options

Use without installing

npx skills use chrisbanes/skills@compose-component-design

指定 Agent (Claude Code)

npx skills add chrisbanes/skills --skill compose-component-design -a claude-code -g -y

安装 repo 全部 skill

npx skills add chrisbanes/skills --all -g -y

预览 repo 内 skill

npx skills add chrisbanes/skills --list

SKILL.md

Frontmatter

{
    "name": "compose-component-design",
    "description": "Use when designing or reviewing reusable Jetpack Compose component APIs with modifier parameters, root layout placement, caller-provided variable content, primitive content parameters, optional content, or boolean shape flags."
}

Compose component design

Core principle

Make reusable components caller-placeable and caller-composable: the component owns its invariant structure while callers retain placement, content, and policy choices that vary by use.

Procedure

State the requested API concern and keep the edit within it. A focused slot review does not authorize unrelated modifier, naming, or cleanup changes.
State the component's invariant visual structure and identify every varying region, placement concern, and policy choice.
When root placement is part of the requested work or a broad component API design, accept and apply a caller modifier at the component root unless a concrete API boundary makes another placement correct.
Represent caller-controlled, unconstrained visual regions with slots rather than proliferating primitive content parameters or Boolean shape flags. Keep semantic and design-system constraints as primitive parameters.
Keep simple conditional structure inline; extract only a coherent reusable contract.
Read the relevant focused reference below before editing public signatures.
Finish with no edit when the existing API already satisfies the requested concern. Otherwise finish when callers can position the component, supply variable content, and understand ownership without hidden switches.

Topic router

Signal	Read
Modifier parameter, root layout placement, modifier ordering, or conditional layout wrappers	Modifier and layout
Caller-controlled variable visual regions, optional content, primitive content parameters, or Boolean shape flags	Slot APIs
Animation belongs to the public component contract	Compose animations
State ownership changes while designing the component	Compose state and effects
Semantics or screenshot coverage is needed	Compose UI testing patterns