Shadcn flutter

Skill Poorgramer-Zack/dart-expert-skills/skills/shadcn-flutter

A comprehensive library of modular Agent Skills for Flutter & Dart development

Install

npx -y skills add Poorgramer-Zack/dart-expert-skills --skill shadcn-flutter

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
6 stars6 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

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.

SKILL.md

2.2 KB, as published. Nobody here has run it

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.