dev-screen-spec

Generate and maintain markdown screen specs from source code and git diffs.

Updated May 5, 2026
One-click install
npx skills add https://github.com/seiei-sogen/tumigi --skill dev-screen-spec
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: dev-screen-spec
Source: https://github.com/seiei-sogen/tumigi/tree/main/skills/dev-screen-spec
Command: npx skills add https://github.com/seiei-sogen/tumigi --skill dev-screen-spec

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Manually creating and maintaining screen specification documents is time-consuming and prone to drift as source code changes or acceptance criteria evolve. This skill automates the full lifecycle of screen spec management to ensure documentation stays accurate and aligned with your project's current state.

Core Features & Use Cases

  • Source Code Generation: Automatically generate full screen specification documents by parsing your project's routing definitions, page components, form elements, and interaction logic.
  • Plan-Driven Creation: Build screen specs directly from acceptance criteria and plan documents before implementation, ensuring design alignment before writing any code.
  • Incremental Sync: Detect source code changes via git diff and update only the affected sections of existing screen specs, eliminating tedious manual updates.
  • Use Case: When you add a new user profile feature, use this skill to generate the initial screen spec from your acceptance criteria, then automatically sync it as you implement and modify the profile UI.

Quick Start

Ask the AI to generate a screen specification document for your new checkout page from the existing source code, or update all changed screen specs after you commit modifications to the payment flow.

Frequently Asked Questions about dev-screen-spec

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

FAQPage Schema
How do I generate screen specification documents from source code?

You can generate screen specification documents from source code by parsing routing definitions, page components, form elements, validation rules, and interaction logic to produce structured markdown with source file traceability.

How do I keep screen spec docs in sync with web application changes?

To keep screen spec docs in sync with web application changes, the skill detects source code modifications via git diff and incrementally updates only the affected sections of existing markdown documents to eliminate manual maintenance.

Can I create screen specs from acceptance criteria before writing code?

Yes, you can create screen specs from acceptance criteria and plan documents before implementation, allowing you to establish design alignment and structured documentation prior to writing any source code.

Does this screen spec generator support grouped screen management for large web projects?

Yes, this screen spec generator supports grouped screen management for large web projects, organizing generated markdown specifications and maintaining traceability across complex application structures.

How do screen specification documents integrate with web test planning?

Screen specification documents integrate with downstream web test planning workflows by providing structured markdown outputs that detail routing, page components, and interaction logic needed for test generation.