skills.rest
RyoMa99
RyoMa99COMMUNITY
Explore all skills by this author →
GitHub

screen-spec

Generates Markdown screen specification documents for UI screens and components.

Updated Jan 30, 2026
Search Tags:#markdown#frontend#requirements#validation rules#ui documentation#rdra#screen specification
One-click install
npx skills add https://github.com/RyoMa99/chezmoi_dotfiles --skill screen-spec-ryoma99
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: screen-spec
Source: https://github.com/RyoMa99/chezmoi_dotfiles/tree/main/dot_claude/skills/screen-spec
Command: npx skills add https://github.com/RyoMa99/chezmoi_dotfiles --skill screen-spec-ryoma99

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? It removes ambiguity between frontend and backend teams by producing structured Markdown screen specifications that capture data fields, validations, interactions, and error handling for each UI screen. ## Core Features & Use Cases - Structured Spec Template: Generates per-screen documents covering URL path, related requirements (REQ/BUC), display data tables, validation rules, actions, and error handling. - RDRA Traceability: Links each screen spec back to upstream RDRA business use cases and EARS requirements. - Post-Implementation Maintenance: Replaces code-duplicated details with links to source code while keeping validation rules and error messages in the spec. - Use Case: When designing a new user registration screen, run the skill to produce a spec with field types, validation rules, error messages, and transition behavior, then save it to docs/specs/screens/. ## Quick Start Ask the AI to create a screen specification for the user registration screen and save it under docs/specs/screens/.

Frequently Asked Questions about screen-spec

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

FAQPage Schema
How do I write a screen specification document for a UI?▼

Use a structured Markdown template covering URL path, related requirements, display data tables with types and examples, validation rules, action behaviors, and error handling. Save each screen as a kebab-case file under docs/specs/screens/.

What should a UI screen spec include for frontend development?▼

A screen spec should include the URL path, data fields with types and examples, input validation rules with error messages, action behaviors with success and failure transitions, and error handling per status code. Design details like colors and layout stay in Figma.

How do I link screen specs to requirements in RDRA?▼

Reference the related EARS requirements (REQ-xxx) and business use cases (BUC-xxx) in a dedicated section of the spec. This keeps traceability from upstream requirements definition down to screen-level behavior.

Should screen specs duplicate information already in code?▼

No. After implementation, replace code-duplicated details such as data type definitions with links to the source files. Keep information that code expresses poorly, like validation rules and user-facing error messages, in the spec.

When should I not write a detailed screen specification?▼

Avoid documenting visual design details such as colors, fonts, and layout, since those belong in Figma. The spec should focus on structure and behavior that developers need for implementation.

Related Skills

Explore More Product & Management Skills→
k2worksk2works

analyzing-usecases

Extract business and system use cases from requirements documents.

Community
Intermediate
santanapolsantanapol

backend-service-spec-bootstrap

Reverse-engineer backend service source code into verified specifications.

Community
Advanced
kanopikanopi
16

design-analyzer

Extract design specifications from Figma URLs, screenshots, or mockups for WordPress blocks or Drupal paragraphs.

Official
Advanced
curiositechcuriositech
181

openapi-spec-writer

Generate OpenAPI 3.0/3.1 YAML or JSON specifications for REST APIs.

Official
Advanced