flutter-skeleton-gen

Generates Flutter skeleton shimmer widgets from target page layout.

Updated Apr 10, 2026
One-click install
npx skills add https://github.com/dus2183-commits/flutter-skills --skill flutter-skeleton-gen
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: flutter-skeleton-gen
Source: https://github.com/dus2183-commits/flutter-skills/tree/main/flutter-skeleton-gen
Command: npx skills add https://github.com/dus2183-commits/flutter-skills --skill flutter-skeleton-gen

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This tool automatically replaces loading indicators with skeleton shimmer widgets by analyzing the target Flutter page layout and theme cues, enabling faster UI prototyping and a smoother user perception during data loading.

Core Features & Use Cases

  • Analyzes page structure (lists, images, text blocks) to generate corresponding skeleton placeholders.
  • Outputs a reusable skeleton widget file at lib/features/{module}/presentation/widgets/{page_name}_skeleton.dart, ready for integration.
  • Adapts styles to your app theme and supports common skeleton layouts such as list, card, and detail views.

Quick Start

Provide a path to the target page source and optional preferences to generate the skeleton.

Frequently Asked Questions about flutter-skeleton-gen

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

FAQPage Schema
How do I generate Flutter skeleton shimmer widgets for a page layout?

To generate Flutter skeleton shimmer widgets, provide the target page source path and optional preferences. The tool analyzes the page structure and outputs a ready-to-use skeleton widget file at lib/features/{module}/presentation/widgets/{page_name}_skeleton.dart.

Do I need a shimmer dependency to create skeleton loading widgets in Flutter?

Yes, you need a Flutter project with a shimmer dependency already configured to create skeleton loading widgets. The tool parses your page source and generates skeleton placeholders that rely on this existing shimmer package.

Can I auto-generate skeleton placeholders for Flutter detail views and media cards?

Yes, you can auto-generate skeleton placeholders for Flutter detail views and media cards. The tool analyzes various layout structures including lists, detail views, and media cards, adapting the placeholder shapes accordingly.

What is the best way to adapt skeleton placeholders to my Flutter app theme?

The best way to adapt skeleton placeholders to your Flutter app theme is using an auto-generation tool that reads your theme cues. It automatically applies your app's visual styles to the generated shimmer widgets.

Can I configure item counts and styles for generated Flutter skeleton widgets?

Yes, you can configure item counts and styles for generated Flutter skeleton widgets. When providing the target page source path, you can supply optional preferences to adjust the skeleton layout and item quantities.

Where does the generated skeleton shimmer widget file get saved in a Flutter project?

The generated skeleton shimmer widget file is saved at lib/features/{module}/presentation/widgets/{page_name}_skeleton.dart in your Flutter project. This standardized output path ensures the skeleton component integrates cleanly into your feature-driven architecture.