Build UI components from widget-based design patterns

Widget-Based Design is a design-it sub-style modeled on iOS/home-screen widgets: strict aspect ratios (1x1 square, 2x1 rectangle, 2x2 large square), glanceability (each widget surfaces its single most important data point instantly, with deeper interaction deferred to opening the full app), and corner-radius matching so inner content nests cleanly within the widget's outer rounded corner. It is a child reference of design-it, applied only when a request matches this functional, app-let-focused aesthetic - similar to Bento UI but specifically about miniature functional apps rather than general content layout.

Use this sub-style for dashboards or home screens made of small, glanceable, rearrangeable functional blocks - a weather tile showing a large temperature number, a fitness tile, a music-player tile - each using bright solid colors or full-bleed photography to visually separate one widget from another. The style's own rule draws a hard line on scope: never put complex forms or scrollable lists inside a 1x1 widget - that data belongs in the full app, not the glanceable summary.

On web, a CSS grid with grid-auto-rows: 160px and grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) forces square base units, with widget-small/widget-medium/widget-large classes spanning 1, 2, or 2x2 cells, all using the "classic iOS widget radius" of 24px. SwiftUI's LazyVGrid and Jetpack Compose's LazyVerticalGrid (with GridItemSpan) both natively support the mixed-size widget grid and are described as matching Apple's default widget styling closely. Flutter is the outlier: its standard GridView.count does not easily support widgets spanning multiple rows or columns, so the skill recommends the flutter_staggered_grid_view package for any real production widget layout rather than fighting the built-in grid. React Native builds the same layout with flexWrap: 'wrap' and percentage widths (47% for two columns with a gap), and requires StyleSheet.absoluteFillObject on any LinearGradient background so it sits correctly behind the widget's text content.

.widget-large { grid-column: span 2; grid-row: span 2; }
.widget { border-radius: 24px; }

As a design-it sub-style, it's applied through the parent skill's aesthetic matching, with the mixed-size widget grid expected across web CSS and the four listed native frameworks - noting that Flutter alone needs a third-party package where the others rely on native grid span support.

Designers and developers building a widget-style dashboard or home-screen surface - glanceable, rearrangeable, functionally-scoped tiles rather than a general content grid - who need the mixed-size grid layout reproduced across web and native platforms, including Flutter's specific need for flutter_staggered_grid_view to handle spanning widgets that its other frameworks support out of the box.