Run any Skill in Manus with one click

building-shadcn-flutter-ui

Stars34

Forks2

UpdatedApril 15, 2026 at 01:55

shadcn_flutter UI component library for building accessible, themed Flutter interfaces. Use when integrating shadcn components, configuring design system theming, or building consistent widget layouts.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

Poorgramer-Zack

Poorgramer-Zack/flutter-agent-panel

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Software DevelopersComputer and Mathematical Occupations·SOC 15-1252

File Explorer

3 files

SKILL.md

readonly

name	building-shadcn-flutter-ui
description	shadcn_flutter UI component library for building accessible, themed Flutter interfaces. Use when integrating shadcn components, configuring design system theming, or building consistent widget layouts.
metadata	{"last_modified":"2026-04-01 14:35:00 (GMT+8)"}

Shadcn UI Architecture Guide

Goal

Build beautiful, accessible, and highly customizable user interfaces in Flutter using the Shadcn UI design system. This skill ensures proper framework integration (Pure, Material, or Cupertino), consistent theming, and effective use of the 30+ responsive components available in the library.

Process

🚀 High-Level Workflow

Implementing Shadcn UI involves setting up the design tokens first, then consuming specific components for layout and logic.

Phase 1: Foundation & Theming

Install: Add shadcn_ui to dependencies.
Initialize: Choose between ShadApp (Standalone) or ShadApp.custom (Material/Cupertino bridge).
Configure: Define ShadColorScheme and customize ShadThemeData.

Phase 2: Component Implementation

Typography: Strictly use ShadTextTheme styles for consistent font scaling and semantics.
Forms: Use ShadForm and specialized Shad*FormField widgets for unified validation.
Interactions: Leverage Sonner, Dialog, and Sheet for standardized overlays and user feedback.

📚 Documentation Library

Refer to these detailed guides for implementation:

🎨 Setup & Theming Guide - Framework integration, dynamic color schemes, and responsive breakpoints.
🧱 Component Reference - Detailed API and code examples for all 30+ Shadcn UI components.

Constraints

Theme Integrity: Never bypass the ShadTheme variables by hardcoding magic colors or spacing values.
Form Safety: Always use ShadForm and unique ids for form fields to ensure reliable state management and validation.
Accessibility: Provide proper labels and descriptions for all interactive elements using built-in properties.
Native Alignment: When using Material/Cupertino integration, always wrap with ShadAppBuilder to ensure overlays (Toasts/Dialogs) render correctly.

More from this repository

same repository

applying-effective-dart

Poorgramer-Zack/flutter-agent-panel

Dart 3 modern features (through 3.10) and Effective Dart best practices including records, patterns, sealed classes, dot shorthands, null-aware collection elements, and wildcard variables. Use when adopting Dart 3.7+ syntax, using dot shorthands for enums or static members, using null-aware elements in lists or maps, using wildcard _ parameters, improving code quality, or reviewing Dart code conventions.

2026-04-1534

routing-with-autoroute

Poorgramer-Zack/flutter-agent-panel

Implements type-safe Flutter routing using AutoRoute v11 with code generation and @RoutePage annotations. Activates when setting up AutoRoute navigation, configuring AutoRouterConfig or RootStackRouter, generating route files with build_runner, using @RoutePage, @PathParam, or @QueryParam annotations, implementing AutoTabsRouter for bottom navigation tabs, adding navigation guards with AutoRouteGuard, setting up nested or child routes, handling type-safe route parameters, or migrating from string-based Navigator routing to compile-time-verified routes. Ideal for large apps requiring refactoring confidence and zero string-based routing errors.

2026-04-1534

implementing-flutter-bloc

Poorgramer-Zack/flutter-agent-panel

Implements BLoC (v9.x) event-driven state management for Flutter with unidirectional data flow using the flutter_bloc package. Use when implementing Bloc/Cubit classes, mapping Events to States, consuming state with BlocBuilder/BlocListener/BlocConsumer, applying event transformers (restartable/droppable/sequential) for concurrency control, setting up BlocProvider/MultiBlocProvider DI, integrating Freezed for sealed union types and exhaustive pattern matching, or testing with blocTest. Ideal for enterprise apps requiring business logic separation, precise concurrency control (search debouncing, form deduplication), or event replay debugging.

2026-04-1534

building-flutter-production-apps

Poorgramer-Zack/flutter-agent-panel

Expert-level guidance for Flutter production applications: architecture decisions (Clean/Layered/Hexagonal/Feature-First), advanced state management (BLoC/Riverpod/GetX), performance optimization (eliminating jank, memory profiling, reducing rebuild overhead), code review with design pattern enforcement, scalability assessments, native platform integration (MethodChannel/EventChannel/FFI), complex UI challenges (custom render objects, slivers), testing strategies (unit/widget/integration/golden), CI/CD pipeline architecture, build optimization, and accessibility compliance. Triggers: 'architecture decision', 'design pattern', 'performance issue', 'code review', 'production problem', 'scaling concerns', 'best practices', 'technical debt', 'refactoring strategy'. Essential for complex enterprise apps, critical production debugging, architectural refactors, or when choosing between competing technical approaches.

2026-04-1534

running-flutter-isolates

Poorgramer-Zack/flutter-agent-panel

Background processing and heavy computations using Dart Isolates with Isolate.run(), compute() function, and platform channels. Use this skill when performing CPU-intensive operations without blocking UI (image processing, data parsing, encryption), implementing background tasks that prevent jank or frame drops, handling large file operations (JSON parsing, database migrations), running parallel computations, fixing UI freezes caused by main thread blocking, using compute() for one-off background work, creating long-lived Isolates with ReceivePort/SendPort, implementing multi-threaded algorithms, debugging isolate communication issues, or preventing memory leaks from unclosed ReceivePorts. Covers isolate spawn, message passing, ReceivePort cleanup (CRITICAL for leak prevention), SendPort communication patterns, error handling, serialization rules, and performance optimization for compute-heavy operations.

2026-04-1534

implementing-responsive-layouts

Poorgramer-Zack/flutter-agent-panel

Implements responsive and adaptive layouts in Flutter using flutter_screenutil v5.9.x (pixel-perfect scaling from Figma), sizer v3.1.x (percentage-based viewport), and responsive_framework v1.1.x (breakpoint-driven structure changes). Use this skill when building apps for multiple screen sizes (phones, tablets, foldables, desktop, web), fixing layout overflow or sizing issues, implementing breakpoint-based adaptive UI, creating pixel-perfect designs from Figma specs, handling orientation changes, supporting Flutter web or desktop responsive layouts, or any time the words 'responsive', 'screenutil', 'sizer', 'breakpoint', 'adaptive layout', or 'screen size' appear in the request. Includes a decision matrix for selecting the correct package per scenario.

2026-04-1534

name	building-shadcn-flutter-ui
description	shadcn_flutter UI component library for building accessible, themed Flutter interfaces. Use when integrating shadcn components, configuring design system theming, or building consistent widget layouts.
metadata	{"last_modified":"2026-04-01 14:35:00 (GMT+8)"}

Shadcn UI Architecture Guide

Goal

Process

🚀 High-Level Workflow

Implementing Shadcn UI involves setting up the design tokens first, then consuming specific components for layout and logic.

Phase 1: Foundation & Theming

Install: Add shadcn_ui to dependencies.
Initialize: Choose between ShadApp (Standalone) or ShadApp.custom (Material/Cupertino bridge).
Configure: Define ShadColorScheme and customize ShadThemeData.

Phase 2: Component Implementation

Typography: Strictly use ShadTextTheme styles for consistent font scaling and semantics.
Forms: Use ShadForm and specialized Shad*FormField widgets for unified validation.
Interactions: Leverage Sonner, Dialog, and Sheet for standardized overlays and user feedback.

📚 Documentation Library

Refer to these detailed guides for implementation:

🎨 Setup & Theming Guide - Framework integration, dynamic color schemes, and responsive breakpoints.
🧱 Component Reference - Detailed API and code examples for all 30+ Shadcn UI components.

Constraints

Theme Integrity: Never bypass the ShadTheme variables by hardcoding magic colors or spacing values.
Form Safety: Always use ShadForm and unique ids for form fields to ensure reliable state management and validation.
Accessibility: Provide proper labels and descriptions for all interactive elements using built-in properties.
Native Alignment: When using Material/Cupertino integration, always wrap with ShadAppBuilder to ensure overlays (Toasts/Dialogs) render correctly.