skills.rest
ronjunevaldoz
ronjunevaldozCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

kmp-shadcn-compose-layouts

Composes shadcn-compose components into verified login, form, table, and dashboard layouts.

2|Updated Jun 6, 2026
Search Tags:#layout#audit#dashboard#form#compose#kotlin multiplatform#shadcn-compose
One-click install
npx skills add https://github.com/ronjunevaldoz/kmp-agent-skills --skill kmp-shadcn-compose-layouts-ronjunevaldoz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: kmp-shadcn-compose-layouts
Source: https://github.com/ronjunevaldoz/kmp-agent-skills/tree/main/skills/kmp-shadcn-compose-layouts
Command: npx skills add https://github.com/ronjunevaldoz/kmp-agent-skills --skill kmp-shadcn-compose-layouts-ronjunevaldoz

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve? Building full page layouts in Kotlin Multiplatform with shadcn-compose often leads to hand-rolled Row/Column structures, hallucinated component parameters copied from React shadcn/ui blocks, and underused library primitives like ShadcnField, ShadcnTable, and ShadcnSidebar. ## Core Features & Use Cases - Four verified layout recipes: login/auth form, generic data-entry form, data table screen, and admin/dashboard shell, each built only from signatures checked against the real shadcn-compose 0.2.6 source. - Layout gap auditing: the scan_shadcn_layout_gaps.py script detects hand-rolled form fields, hand-rolled tables, admin shells missing ShadcnSidebar, and login screens missing a ShadcnCard wrapper. - Disclosed limitation handling: documents real gaps such as no password masking on ShadcnTextField and no built-in sorting/filtering on ShadcnTable, so callers implement that state themselves. - Use Case: A developer needs an admin dashboard in a KMP app already using shadcn-compose; the skill provides the ShadcnSidebarProvider/ShadcnSidebar/ShadcnSidebarInset shell recipe plus stat-card rows, then audits the result for structural gaps. ## Quick Start Ask the agent to build a login screen with shadcn-compose in my KMP project and audit the existing screens for layout gaps.

Frequently Asked Questions about kmp-shadcn-compose-layouts

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

FAQPage Schema
How do I build a login form with shadcn-compose in Kotlin Multiplatform?▼

Center a width-capped ShadcnCard containing a ShadcnFieldGroup with ShadcnField wrappers pairing ShadcnFieldLabel and ShadcnTextField, plus a full-width ShadcnButton submit. This mirrors real shadcn/ui's login-01 block and needs no extra Column wrapper.

How do I create a data table screen in shadcn-compose?▼

Use ShadcnTable with ShadcnTableHeaderRow and ShadcnTableRow, sizing columns with Modifier.weight on ShadcnTableHeadCell and ShadcnTableCell. Sorting, filtering, and row selection are not built in as of 0.2.6, so manage that state yourself before rendering rows.

Does ShadcnSidebar support responsive drawer collapse on small screens?▼

No, ShadcnSidebar only animates width between 0.dp and its fixed width with no breakpoint behavior. For responsive collapse, hand-roll a Row layout with BoxWithConstraints and swap to a ShadcnSheet below your chosen breakpoint, as the library's own catalog app does.

Does ShadcnTextField support password masking?▼

No, ShadcnTextField has no password-masking or singleLine parameter as of shadcn-compose 0.2.6. Treat masked input as a real gap to flag rather than assuming a visualTransformation parameter exists; verify with fetch_component_signature.py first.

When should I not use these shadcn-compose layout recipes?▼

Skip them when the project lacks shadcn-compose entirely, when you only need individual component signatures, or when translating a generic HTML/React wireframe. Those cases belong to kmp-shadcn-compose setup and kmp-layout-system respectively.

Related Skills

Explore More Software Engineering Skills→
rnettrnett
57

verifying_compose_ui

Render Compose UI components to images via a JVM-based Kotlin REPL.

Community
Intermediate
subroh0508subroh0508
18

ui-snapshot

Detect missing Compose previews, screenshot baselines, and hard-coded design values in Kotlin UI repositories.

Community
Advanced
tonone-aitonone-ai
69

atlas-map

Scan codebases to generate C4 System Context and Component diagrams in Mermaid.

Official
Advanced
nexu-ionexu-io
93.2k

web-prototype

Generate self-contained HTML prototypes using predefined design system layouts and seed templates.

Official
Intermediate