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.