SuperAPI AI Directory
Partner中文AI newsFavorites
Skillsscreen-spec-generator

screen-spec-generator

Coding & development

View repository

Updated 10-16 10:16

About this skill

Screen Specification Generator Skill

This skill provides functionality to set up an environment for creating screen specifications in a Flutter project and to generate and update individual screen specifications.

Activation Triggers

It is triggered by statements such as the following:

  • "I want to create a screen specification," "generate a screen spec," "I want to write a screen specification document"
  • "Set up the screen specification environment," "I want to introduce screen spec"
  • "Create a specification for the XX screen," "spec for the XX page"
  • "I want to document the screen specifications"
  • "Update the screen specification," "bring the specification up to date"

Feature Overview

This skill does the following:

  1. Automatically analyzes and checks the project structure
  2. Selects the necessary sections through conversation
  3. Generates templates and custom commands
  4. Generates individual screen specifications
  5. Detects differences in existing screen specifications and updates them

Important: How to Conduct the Conversation

At each step, be sure to wait for the user's response before proceeding to the next step.

  • After asking a question in step 1, wait for the user's response
  • Once the user responds, proceed to the next step
  • Do not ask multiple questions at once

This allows the user to proceed with configuration step by step without confusion.

Operation Modes

This skill has three operation modes:

Mode 1: Initial Setup (when the environment has not been set up)

In the project, docs/screen_specs/template.md If does not exist, it operates in setup mode.

Mode 2: Screen Specification Generation (when the environment is set up but no specification has been created)

In the project, docs/screen_specs/template.md If exists and no specification for the target screen exists, it operates in new generation mode.

Mode 3: Screen Specification Update (when a specification already exists)

If a specification for the target screen already exists, it operates in update mode. It re-analyzes the code, detects differences, and presents them to the user.

Mode 1: Initial Setup Procedure

Step 1: Project Analysis

First, analyze the project structure.

If CLAUDE.md exists

  1. Read CLAUDE.md and obtain the following information:

    • Framework (Flutter)
    • State management (Riverpod, BLoC, Provider, etc.)
    • Routing library (auto_route, go_router, etc.)
    • Architecture pattern

  2. Automatically analyze the specific path structure:

    • UI layer paths (lib/ui/, lib/presentation/ etc.)
    • ViewModel/State paths
    • Router file location
    • API definition location

  3. Briefly confirm the analysis results:

    「CLAUDE.mdを確認しました。Flutter + Riverpod + auto_route のプロジェクトですね。

プロジェクト構造を解析したところ、以下のようになっています：
- UI層: lib/ui/{module}/widgets/
- ViewModel: lib/ui/{module}/view_models/
- ルーター: lib/routing/routes/app_router.dart

この認識で合っていますか？」

  4. Wait for the user's response here. Do not proceed to the next step.

If CLAUDE.md does not exist

  1. Read pubspec.yaml and detect the following:

    • Framework (flutter SDK)
    • State management (flutter_riverpod, flutter_bloc, provider, etc.)
    • Routing (auto_route, go_router, etc.)
    • HTTP communication (dio, retrofit, http, etc.)

  2. Analyze the directory structure:

    • UI layer paths (lib/ui/, lib/presentation/, lib/features/, etc.)
    • Router file (router.dart）
    • API definitions (api.dart）

  3. Confirm all detection results with the user:

    「画面定義書の作成をお手伝いします。
プロジェクトの構造を解析しました。

pubspec.yaml から以下を検出しました：
- フレームワーク: Flutter
- 状態管理: flutter_riverpod
- ルーティング: auto_route

ディレクトリ構造から以下を推測しました：
- UI層: lib/ui/{module}/widgets/
- ViewModel: lib/ui/{module}/view_models/
- ルーター: lib/routing/routes/app_router.dart

この認識で合っていますか？修正点があれば教えてください。」

  4. Wait for the user's response here. Do not proceed to the next step.

Step 2: Section selection

If the user responds with "Yes," "OK," etc. in Step 1, proceed to this step.

Select the sections to include in the screen specification through conversation.

「では、画面定義書に含めるセクションを選びましょう。
デフォルトは以下の通りです：

1. ✅ 基本情報（必須）- 画面ID、画面名、ファイルパス、最終更新日
2. ✅ スクリーンショット - 画面キャプチャの配置領域
3. ✅ 表示項目 - 静的な表示要素の一覧
4. ✅ イベント項目 - ユーザー操作によるイベント
5. ⬜ 本画面遷移時イベント - 画面表示時の自動イベント
6. ⬜ 処理フロー - API通信等の詳細フロー
7. ✅ 備考 - 特記事項

変更したい項目はありますか？」

Wait for the user's response here. Do not proceed to the next step.

Step 3: Customization confirmation

If the user responds in Step 2, proceed to this step.

「他に追加したいセクションや、テーブルの列をカスタマイズしたい点はありますか？

例：
- イベント項目に analytics 列を追加
- 表示項目にデザイントークン列を追加
- 独自のセクションを追加
」

Wait for the user's response here. Do not proceed to the next step.

Step 4: File generation

If the user responds in Step 3, proceed to this step.

Once confirmation is complete, generate the following files:

  1. .claude/commands/screen-spec.md - Custom command
  2. docs/screen_specs/template.md - Template
  3. docs/screen_specs/README.md - Usage guide
「以下のファイルを生成しました：
- .claude/commands/screen-spec.md
- docs/screen_specs/template.md
- docs/screen_specs/README.md

これで `/screen-spec lib/ui/xxx/widgets/xxx_page.dart` で
画面定義書を生成できるようになりました。

是非、実際に1つ画面定義書を作成してみてください。
作成後、修正点があったら教えてください。」

Mode 2: Screen specification generation procedure

Prerequisites

  • docs/screen_specs/template.md That exists
  • .claude/commands/screen-spec.md That exists
  • The specification for the target screen does not exist

Generation method

If the user says the following:

  • "Create a specification for the XX screen"
  • "Generate a screen specification for lib/ui/xxx/widgets/xxx_page.dart"
  1. Identify the target file
  2. docs/screen_specs/template.md Read
  3. .claude/commands/screen-spec.md Generate according to the procedure in

Mode 3: Screen specification update procedure

Prerequisites

  • The specification for the target screen already exists

Update method

If the user says the following:

  • "Update the specification for the XX screen"
  • /screen-spec lib/ui/xxx/widgets/xxx_page.dart(For an existing file)
  1. Parse the existing specification
  2. Re-analyze the code
  3. Detect differences (additions, deletions, changes)
  4. Present the differences to the user
  5. After confirmation, update the specification document
  6. Also update the HTML version in sync

Force new creation

If you want to create a new one while ignoring the existing specification document:

/screen-spec lib/ui/xxx/widgets/xxx_page.dart --new

Reference to template files

For section-specific templates, refer to the following:

  • Basic template: templates/base_template.md
  • Generation command template: templates/screen_spec_command.md
  • Display items section: templates/sections/display_items.md
  • Event items section: templates/sections/event_items.md
  • Event on transition to this screen section: templates/sections/navigation_events.md
  • Processing flow section: templates/sections/process_flow.md

Notes

  • Always confirm with the user before overwriting an existing file
  • Project-specific settings (dictionary DB, etc.) are not handled by the general-purpose skill
  • The generated specification document is output in Japanese
  • In update mode, always present the differences to the user and obtain confirmation