skills.rest
xchacha20-poly1305
xchacha20-poly1305COMMUNITY
Explore all skills by this author →
GitHub

husi-preference-ui

Enforces Compose Multiplatform preference UI conventions for Husi settings and profile-editor screens.

1.8k|107|Updated Dec 24, 2023
Search Tags:#kotlin#compose multiplatform#ui conventions#preference ui#settings screen#masked icon#husi
One-click install
npx skills add https://github.com/xchacha20-poly1305/husi --skill husi-preference-ui-xchacha20-poly1305
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: husi-preference-ui
Source: https://github.com/xchacha20-poly1305/husi/tree/main/.agents/skills/husi-preference-ui
Command: npx skills add https://github.com/xchacha20-poly1305/husi --skill husi-preference-ui-xchacha20-poly1305

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Editing settings or profile-editor preference rows in the Husi composeApp/ codebase without its conventions produces rows with missing backgrounds, divider lines, unmasked icons, and obsolete lazy-list platform hooks that break the native Android-style grouped look. ## Core Features & Use Cases - Row Import Rules: Mandates importing preference rows from fr.husi.compose wrappers (which apply PreferenceItemSurface) instead of upstream me.zhanghai.compose.preference composables. - Segmented Group Layout: Defines preferenceGroup structure, PreferenceGroupDefaults spacing/radius values, and rules for conditional sections via AnimatedVisibility with correct item arrangement. - Icon Masking and Semantics: Requires MaskedIcon with IconMaskColors for every row and semantic IconMaskShapes (risk, credential, route) for security-relevant settings. - Use Case: When adding a new DNS settings toggle to a Husi settings sub-page, use this Skill to place a SwitchPreference inside the existing preferenceGroup, give it a MaskedIcon, and run the prescribed ripgrep checks to confirm no upstream imports or dividers were introduced. ## Quick Start Use the husi-preference-ui skill to add a new masked SwitchPreference row to the general settings group in composeApp following the project conventions.

Frequently Asked Questions about husi-preference-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a preference row to Husi settings screens?▼

Add the row as a plain composable call inside a preferenceGroup, importing it from fr.husi.compose rather than me.zhanghai.compose.preference. Give it a MaskedIcon with an IconMaskColors entry, and never wrap it in its own Surface or Card.

Why import preference rows from fr.husi.compose instead of me.zhanghai?▼

The fr.husi.compose wrappers apply PreferenceItemSurface, which gives each row its own rounded container and background. Importing the upstream composable directly produces a row with no background that visually merges into neighboring rows.

Does Husi preference UI support dividers between rows?▼

No, dividers are not supported. PreferenceDivider was removed; rows are separated by a 2dp gap from PreferenceGroupDefaults.itemArrangement, and the group's clip rounds the first and last rows to the large outer radius.

How do I handle platform-specific settings rows in Compose Multiplatform?▼

Use composable expect/actual helpers such as PlatformGeneralOptions with matching actuals in Android and desktop source sets, or a narrow guard like if (PlatformInfo.isAndroid) return. Delete obsolete LazyListScope platform hooks and their unused imports after migrating.

When should I use IconMaskShapes like risk or credential?▼

Use IconMaskShapes.risk() for rows about reduced security or unsafe behavior, credential() for certificates and private keys, and route() for routing behavior. Ordinary rows keep the default shape; do not assign semantic shapes just because an icon exists.

Related Skills

Explore More Software Engineering Skills→
GLinnik21GLinnik21
39

setup-environment

Configures the webOS NDK cross-compile toolchain and Rust nightly build environment on macOS.

Community
Advanced
Zeyad-37Zeyad-37

kotlin-tooling-agp9-migration

Migrates Kotlin Multiplatform projects to Android Gradle Plugin 9.0 with DSL and module restructuring.

Community
Advanced
indranilbanerjeeindranilbanerjee
726

language-config

Configure multilingual brand settings and translation preferences via YAML frontmatter.

Community
Advanced
tazagametazagame

task-maker

Parse PRDs and generate Git-ready task files with push-level segmentation.

Official
Intermediate