flutter-design-skill

What problem does it solve?

Flutter UI in apps often lacks a cohesive visual language, leading to inconsistent screens and duplicated styling work. This Skill provides a complete Comic design language plus a library of reusable Flutter widgets to ensure a consistent, maintainable UI across all screens.

Core Features & Use Cases

• Reusable Flutter Widgets: centralize common elements like ComicButton, ComicTextFormField, and compact list items to reduce duplication.
• Design Guidelines: enforce border rules (2.0px primary outlines, no elevation/shadows), rounded corners, and theme-driven color usage for primary, secondary, surface, and on-surface text.
• Use Case: when designing or updating multiple pages to align with a single Comic style, rely on the provided components and guidelines to accelerate delivery.

Quick Start

Apply the Comic theme to your app, then scaffold screens using prebuilt components such as ComicButton, ComicTextFormField, and comic-themed cards. Refer to comic-theme.md for detailed styling rules, border conventions, and spacing guidelines. Build a simple screen with a ComicButton and a ComicTextFormField to see the guidelines in action.