Does it require a specific project directory structure?

No, it performs a deep analysis of your project to identify where UI, ViewModels, and Routers are located, making it adaptable to various architectural patterns.

Which state management libraries are supported?

The skill automatically detects and supports common Flutter libraries including Riverpod, BLoC, and Provider by analyzing your pubspec.yaml and project structure.

How does the skill handle updates to existing screens?

It enters an 'Update Mode' where it parses the existing specification, re-analyzes the source code, and presents you with a list of changes to approve before updating the file.

Can I customize the layout of the generated specifications?

Yes, during the interactive setup, you can select specific sections to include and even customize table columns for things like analytics tags or design tokens.

Flutter Screen Spec Generator

Name: Flutter Screen Spec Generator
Author: xtone

byxtone

•

Mobile Development

Automatically generates and manages detailed screen specifications for Flutter projects by analyzing project structure and source code.

The Flutter Screen Spec Generator streamlines the documentation process by automating the creation and maintenance of comprehensive screen specification documents. It intelligently analyzes your Flutter project's architecture, state management patterns (like Riverpod or BLoC), and routing logic to set up customized templates. By parsing your UI code, the skill generates Markdown-based documentation covering display items, user events, and navigation flows. It features a robust update mode that detects diffs between your code and existing documentation, ensuring your project specs never fall out of sync with your implementation.

Key Features

01Interactive, step-by-step setup for custom documentation templates

023 GitHub stars

03Generates detailed Markdown specs including event tables and process flows

04Automated project analysis for UI, ViewModels, and routing paths

05Seamless integration with Claude Code via custom .claude/commands

06Intelligent diff detection for updating existing screen specifications

Use Cases

01Generating technical specs for existing screens during project handovers

02Standardizing documentation workflows for enterprise Flutter teams

03Maintaining living documentation that stays updated with UI code changes

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add xtone/ai_development_tools screen-spec-generator

For use in Claude.ai and ChatGPT

Download Skill