تشغيل أي مهارة في Manus بنقرة واحدة

building-shadcn-flutter-ui

النجوم٦

التفرعات٢

آخر تحديث١ أبريل ٢٠٢٦ في ٠٧:٢٤

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.

التثبيت

التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.

تشغيل في Manus

المصدر

Poorgramer-Zack

Poorgramer-Zack/dart-expert-skills

فتح مستودع GitHub عرض مستودعات المنشئ

تنزيل

تشغيل في Manus

المهن ذات الصلةSOC

استنادا إلى تصنيف SOC المهني

مطوّرو البرمجياتمهن الحاسوب والرياضيات·SOC 15-1252

مستكشف الملفات

3 ملفات

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.

المزيد من هذا المستودع

نفس المستودع

routing-with-autoroute

Poorgramer-Zack/dart-expert-skills

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-276

implementing-flutter-bloc

Poorgramer-Zack/dart-expert-skills

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-276

persisting-data-with-drift

Poorgramer-Zack/dart-expert-skills

Implements type-safe reactive SQL persistence in Flutter using Drift v2.32 (formerly Moor) built on SQLite with automatic code generation. Activates when defining table schemas with Drift DSL, writing type-safe join or subquery operations, handling schema migrations with MigrationStrategy, using reactive watch() streams for live UI updates, implementing ACID transactions, defining foreign key constraints or cascade deletes, enabling WAL mode for write performance, troubleshooting generated .g.dart type mismatches, migrating from sqflite or sqlite3 v2 to v3, using DAOs for query separation, or building offline-first apps requiring strong relational data integrity and compile-time SQL verification.

2026-04-276

routing-with-gorouter

Poorgramer-Zack/dart-expert-skills

Implements declarative Flutter routing using GoRouter v17 with URL-based navigation, deep linking, and authentication guards. Activates when configuring GoRoute path patterns, setting up StatefulShellRoute for persistent bottom navigation state, implementing ShellRoute for shared nested layouts, adding redirect guards with loop prevention (idempotent redirects), configuring deep links for iOS (FlutterDeepLinkingEnabled) or Android (intent-filters), debugging redirect loops or navigation stack issues, handling 404 error routes with errorBuilder, using named routes with path/query/extra parameters, or migrating from imperative Navigator.push to declarative routing. Ideal for Flutter web apps requiring URL bar synchronization, mobile apps with universal links or app links, or multi-level navigation hierarchies.

2026-04-276

managing-hive-storage

Poorgramer-Zack/dart-expert-skills

Hive CE (Community Edition v2.19.x) NoSQL object database for Flutter providing blazing-fast key-value and object storage with TypeAdapters. Use this skill when implementing offline-first architecture, high-performance local data caching, NoSQL document-style object stores, custom TypeAdapter serialization for complex objects, lazy loading boxes for memory efficiency, encrypted boxes (HiveAES encryption), database compaction for size optimization, storing large datasets without SQL schema overhead, implementing local-first sync patterns, or migrating from SQLite to NoSQL. Supports primitive types, custom objects, lists, and maps. Ideal for apps requiring ultra-fast read/write operations (microsecond latency), object persistence without ORM complexity, or local-first data architecture.

2026-04-276

implementing-riverpod

Poorgramer-Zack/dart-expert-skills

Implements Riverpod (v3.3.x) compile-safe state management for Flutter apps. Use when implementing @riverpod code generation providers, handling AsyncValue loading/error/data states, using ref.watch/ref.read/ref.listen, setting up ProviderScope, writing Notifier/AsyncNotifier classes, using FutureProvider/StreamProvider, applying autoDispose and family modifiers, combining providers, testing providers in isolation, scoping rebuilds with Consumer instead of ConsumerWidget, using ref.watch with select() for field-level precision, migrating from StateNotifierProvider or Riverpod 2.x patterns, handling Notifier resource lifecycle with ref.onDispose, or using experimental Mutation and offline persistence APIs.

2026-04-276

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.