skills.rest
titabash
titabashCOMMUNITY
Explore all skills by this author →
𝕏@titabash0819GitHub

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
One-click install
npx skills add https://github.com/titabash/gemini-hackathon-game --skill widgetbook
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
telum-aitelum-ai
2

project-import

Create a Speck project structure with a skeleton project.md file.

Official
Basic
FaisalAlqarniFaisalAlqarni
5

flutter-verification

Verify Flutter applications through unit, integration, golden, performance, accessibility, and platform-specific testing.

Community
Advanced
ehtbantonehtbanton

flutter-widget-generator

Generate Flutter widget files with Dart code, state management, and theming.

Community
Basic
yash-gargyash-garg

flutter-add-widget-preview

Add interactive Flutter widget previews with annotations and configurations.

Community
Intermediate