Skills
.Work. You
Rest

shadcn_ui-responsive

Official

Adapt Flutter UI to screen size.

Software Engineering#layout#responsive design#flutter#ui development#breakpoints#shadcn_ui
Authorserverpod
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill helps developers build responsive user interfaces in Flutter applications using the shadcn_ui component library, ensuring a consistent and optimal user experience across various devices and screen sizes.

Core Features & Use Cases

  • Breakpoint Management: Utilizes predefined breakpoints (tn, sm, md, lg, xl, xxl) to define layout variations.
  • Responsive Layouts: Employs ShadResponsiveBuilder to conditionally render UI elements based on the current screen size.
  • Contextual Breakpoint Access: Allows direct access to the current breakpoint via context.breakpoint for dynamic UI adjustments.
  • Use Case: When building a dashboard, use this Skill to display a compact list view on small screens and a detailed table view on larger screens.

Quick Start

Use ShadResponsiveBuilder to show different widgets based on the current screen breakpoint.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: shadcn_ui-responsive
Download link: https://github.com/serverpod/skills-registry/archive/main.zip#shadcn-ui-responsive

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.