widget-based-design

Design widget-based interfaces for modular dashboards and mini-app blocks.

41|5|Updated Sep 30, 2025
One-click install
npx skills add https://github.com/efekrbas/discord-hypesquad-manager --skill widget-based-design
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: widget-based-design
Source: https://github.com/efekrbas/discord-hypesquad-manager/tree/main/.agents/skills/design-it/widget-based-design
Command: npx skills add https://github.com/efekrbas/discord-hypesquad-manager --skill widget-based-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you design polished widget-style interfaces that feel compact, glanceable, and easy to rearrange across dashboards, mobile home screens, and mini-app surfaces.

Core Features & Use Cases

  • Strict widget sizing: Defines 1x1, 2x1, and 2x2 style layouts with consistent spacing and rounded corners.
  • Cross-platform implementation guidance: Shows how to build the pattern in web CSS, SwiftUI, Flutter, React Native, and Jetpack Compose.
  • Visual system guidance: Emphasizes full-bleed backgrounds, strong contrast, bold data, and nested corner radii for a native widget feel.
  • Use case: Create a weather, fitness, or status dashboard where each card communicates one key piece of information at a glance.

Quick Start

Describe a widget-based dashboard screen with one large hero widget and two smaller glanceable widgets, following the styling and layout rules in this Skill.

Frequently Asked Questions about widget-based-design

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

FAQPage Schema
How do I design a modular dashboard with strict aspect ratios and glanceable widgets?

To design a modular dashboard with glanceable widgets, define strict 1x1, 2x1, and 2x2 style layouts with consistent spacing, full-bleed backgrounds, and nested corner radii to ensure each card communicates one key piece of information effectively.

Can I use the same widget design layout for SwiftUI, Flutter, and React Native?

Yes, you can apply the same widget design layout across SwiftUI, Flutter, React Native, and Jetpack Compose, because the pattern provides cross-platform implementation guidance for building modular mini-app blocks with strict sizing.

What is the best way to structure a home-screen style UI with multiple widget blocks?

The best way to structure a home-screen style UI is to combine a large hero widget with smaller glanceable widgets, applying strong visual contrast, bold data presentation, and safe widget composition rules for a native feel.

Does this widget layout guidance support responsive grids and full-bleed backgrounds?

Yes, this widget layout guidance fully supports responsive grids and full-bleed backgrounds, providing specific styling rules to help you build gradient cards and compact mini-app blocks that adapt cleanly across different screen sizes.

When should I use nested corner radii in mobile widget design?

You should use nested corner radii in mobile widget design when creating compact dashboard cards, because it establishes a polished, native widget feel by visually separating full-bleed background images from the foreground content blocks.