widgetbook

Generates and serves a Widgetbook catalog for Flutter UI components with interactive previews.

Updated Feb 21, 2026

Search Tags:#frontend development #storybook #ui components #flutter #component catalog #widgetbook

Ready to run

npx skills add https://github.com/titabash/gemini-hackathon-game --skill widgetbook

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: widgetbook
Source: https://github.com/titabash/gemini-hackathon-game/tree/main/.claude/skills/widgetbook
Command: npx skills add https://github.com/titabash/gemini-hackathon-game --skill widgetbook

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a dedicated environment for previewing, testing, and documenting Flutter UI components in isolation, streamlining the UI development and review process.

Core Features & Use Cases

Component Cataloging: Organizes and displays UI components like a Storybook.
Interactive Previews: Allows for live interaction with components under various states and themes.
Use Case: A developer needs to ensure a new AppButton component looks and behaves correctly across different themes (light/dark) and text lengths before integrating it into the main application.

Quick Start

Run the command to launch the Widgetbook UI for previewing Flutter components.

Frequently Asked Questions about widgetbook

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

FAQPage Schema

How do I preview and test Flutter UI components in isolation?▼

You can preview and test Flutter UI components in isolation by generating a Widgetbook catalog, which serves components like a Storybook for interactive visualization and live state testing.

How do I set up interactive knobs for Flutter widget variations?▼

Setting up interactive knobs for Flutter widget variations requires using `widgetbook_annotation` to define use cases, enabling live state adjustments and theme previews within the generated catalog.

What is the best way to organize a Flutter component catalog for different themes?▼

Organizing a Flutter component catalog for different themes involves using a Widgetbook generator to structure UI components, allowing you to visualize and toggle localization and theme variations during isolated development.

Can I use Widgetbook for testing Flutter widgets across light and dark modes?▼

Yes, you can use Widgetbook for testing Flutter widgets across light and dark modes by defining use cases with annotations, which enables interactive previews under various theme and state configurations.

Do I need widgetbook_annotation to define use cases for my Flutter app?▼

Yes, you need `widgetbook_annotation` to define use cases for your Flutter app, as it integrates with the Widgetbook generator to catalog UI components and enable isolated interactive previews.