skills.rest
thruthesky
thrutheskyCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

flutter-design-skill

Provide reusable Flutter widgets and design guidelines for a Comic UI.

Updated Dec 3, 2025
Search Tags:#flutter#design-system#component-library#ui-guidelines#comic-theme#reusable-widgets
One-click install
npx skills add https://github.com/thruthesky/flutter-design-skill --skill flutter-design-skill
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: flutter-design-skill
Source: https://github.com/thruthesky/flutter-design-skill/tree/main
Command: npx skills add https://github.com/thruthesky/flutter-design-skill --skill flutter-design-skill

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about flutter-design-skill

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a consistent comic theme UI in Flutter?▼

A comic theme UI in Flutter requires a reusable design system enforcing 2.0px primary outlines, no elevations, rounded corners, and theme-driven colors, using prebuilt widgets like ComicButton and ComicTextFormField to ensure visual consistency across screens.

How do I stop duplicating styling work across multiple Flutter screens?▼

Stop duplicating styling work across Flutter screens by centralizing common UI elements in a reusable component library. Using prebuilt widgets like ComicButton and comic-themed cards eliminates redundant styling and enforces a cohesive visual language throughout the application.

What are the design guidelines for Flutter comic-style components?▼

Flutter comic-style components follow strict design guidelines: 2.0px primary outlines for borders, no elevation or shadows, rounded corners, and theme-driven color usage for primary, secondary, surface, and on-surface text to maintain a cohesive aesthetic.

Can I use prebuilt Flutter widgets for comic-themed inputs and cards?▼

Yes, you can use prebuilt Flutter widgets like ComicTextFormField and comic-themed cards to quickly compose screens. These reusable components centralize styling, enforce design rules, and accelerate delivery of pages requiring a comic aesthetic.

Does this comic design system support custom primary and secondary colors?▼

Yes, the comic design system supports custom colors by using theme-driven color usage for primary, secondary, surface, and on-surface text. Applying the Comic theme to your app ensures these colors are consistently applied across all prebuilt components.

Related Skills

Explore More Design & Creative Skills→
dus2183-commitsdus2183-commits

flutter-theme-design

Centralize colors, typography, and spacing in Flutter theme files.

Community
Intermediate
K9i-0K9i-0
1

ui-theming

Extract design tokens from reference images and apply them to Flutter ThemeData.

Community
Intermediate
xtonextone
3

flutter-widget-assistant

Guide Flutter widget architecture decisions through structured interview questions.

Official
Intermediate
QunnnnQunnnn

flutter-theming-apps

Configure Flutter application theming with Material 3 ThemeData and component APIs.

Community
Intermediate