skills.rest
rotnitxe
rotnitxeCOMMUNITY
Explore all skills by this author →
GitHub

kpkn-compose-kpkn-ui

Translate product intent into mobile-first Android Jetpack Compose UI guidance.

Updated Feb 19, 2026
Search Tags:#jetpack compose#ui translation#android-native#ux hierarchy#kpkN visual language#spanish copy
One-click install
npx skills add https://github.com/rotnitxe/KPKNFit --skill kpkn-compose-kpkn-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: kpkn-compose-kpkn-ui
Source: https://github.com/rotnitxe/KPKNFit/tree/main/kpkn-compose-kpkn-ui
Command: npx skills add https://github.com/rotnitxe/KPKNFit --skill kpkn-compose-kpkn-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill guides you to translate and refine KPKN screens in Android Jetpack Compose so they feel native, mobile-first, and product-faithful rather than generic or like a direct web clone.

Core Features & Use Cases

  • Compose UI translation and refinement for screen structure, interaction flows, visual hierarchy, and state/readability in android-native.
  • KPKN visual-language preservation including rings/progress metaphors, hero sections, chips/micro-labels, Spanish product voice, and sectioned layout rhythm.
  • Mobile-appropriate UX decisions using Compose-native patterns (e.g., Scaffold, LazyColumn, sheets, compact cards) instead of mirroring PWA layouts.

Quick Start

Use this skill when you need to redesign or port a KPKN Compose screen’s UI so it preserves the intended user job, visual signatures, and Spanish copy, while staying consistent with the current repo’s Material 3 baseline and feature-local accents.

Frequently Asked Questions about kpkn-compose-kpkn-ui

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

FAQPage Schema
How do I port a PWA layout to Jetpack Compose without making it feel like a web clone?▼

To port a PWA layout to Jetpack Compose without a web-clone feel, translate product intent into mobile-first screen structures using native Compose patterns like Scaffold and LazyColumn. This approach enforces visual hierarchy and interaction patterns specific to Android.

What is the best way to maintain visual language consistency when redesigning Android UI in Compose?▼

Maintaining visual language consistency in Android Compose requires enforcing specific design constraints like rings/hero usage, sectioned layout rhythm, and Spanish product copy. These rules ensure the UI remains product-faithful across home, nutrition, and settings screens.

Does this UI translation approach support feature-local state ownership in Kotlin?▼

Yes, this UI translation approach supports feature-local state ownership in Kotlin by enforcing technical composable rules and leaf composable hygiene. It aligns directly with the repo's existing Kotlin targets and Material 3 baseline.

When should I use LazyColumn instead of mirroring PWA screen layouts for Android native apps?▼

Use LazyColumn instead of mirroring PWA screen layouts when building Android native apps to achieve mobile-appropriate UX decisions. LazyColumn provides native scrolling and section rhythm that compact mobile screens require, avoiding generic web-like structures.

Related Skills

Explore More Design & Creative Skills→
patlar104patlar104

Material Design 3 with Jetpack Compose

Implement Material Design 3 theming and components in Jetpack Compose.

Community
Advanced
msrivmsriv

mobile-ui-scaffold

Generate Kotlin/Jetpack Compose and SwiftUI screen scaffolds with MVVM structure.

Community
Advanced
shirulotshirulot

mobile-android-design

Implement Material Design 3 and Jetpack Compose patterns in Android apps.

Community
Intermediate
krutikJainkrutikJain
14

android-material3-design-system

Apply Material 3 design tokens and themes to Android apps.

Community
Intermediate