The screen design document template can be used for the following use cases.

Below is an explanation based on the case of creating a screen definition document from requirements.

Prompt 1: Execute template modification

Agent: Document Agent

💡 When using this template, instruct the Document Agent to modify it according to your language or framework as follows before use. "@Screen Design Document Template, modify for {language/framework name}" In this document, the template is modified for React and utilized.

<aside> <img src="notion://custom_emoji/be6005d7-8302-4c8e-93fe-03d0d3d71970/12f3c107-d7a8-8009-8054-007a9b09b0b8" alt="notion://custom_emoji/be6005d7-8302-4c8e-93fe-03d0d3d71970/12f3c107-d7a8-8009-8054-007a9b09b0b8" width="40px" />

@Screen Design Document Template, modify for React

</aside>

Prompt 2: Execute screen definition document creation

Agent: Document Agent

After executing the "template modification prompt," specify the created template and instruct as follows:

<aside> <img src="notion://custom_emoji/be6005d7-8302-4c8e-93fe-03d0d3d71970/12f3c107-d7a8-8009-8054-007a9b09b0b8" alt="notion://custom_emoji/be6005d7-8302-4c8e-93fe-03d0d3d71970/12f3c107-d7a8-8009-8054-007a9b09b0b8" width="40px" />

Refer to the use case document for @Member Information Update, design the necessary frontend screens, and output them according to the @Screen Design Document Template format.

</aside>

Template

> 💡Save this template as "Screen Design Document Template". Adjust for your language/framework as needed.
> Example: "Please modify @Screen Design Document Template for {language/framework name}"

## 1. Basic Information

- Screen ID:
- Screen Name:
- Function Overview: (about 400 characters)

## 2. Screen Layout

### 2.1 Screen Structure

Create the screen structure using Mermaid. Use the legend below.

```mermaid
%%{init: {'theme': 'neutral', 'themeVariables': { 'fontFamily': 'arial', 'fontSize': '16px'}}}%%
flowchart TD
    A["Screen/Page"]
    B>"Component"]
    C{"Conditional Branch"}
    D[["Form Element"]]
    E[("Data Display")]
    F(["Action/Button"])
    classDef page fill:#d0d1ff,stroke:#333,stroke-width:2px,color:#000
    classDef component fill:#ffe680,stroke:#333,stroke-width:2px,color:#000
    classDef condition fill:#c2e0c2,stroke:#333,stroke-width:2px,color:#000
    classDef form fill:#ffcce0,stroke:#333,stroke-width:2px,color:#000
    classDef data fill:#c6c6ff,stroke:#333,stroke-width:2px,color:#000
    classDef action fill:#ffb3b3,stroke:#333,stroke-width:2px,color:#000
    class A page
    class B component
    class C condition
    class D form
    class E data
    class F action
    style A text-align:center
    style B text-align:center
    style C text-align:center
    style D text-align:center
    style E text-align:center
    style F text-align:center

3. Input Item Definition

3.1 Form Item List

3.2 Input Rules & Validation

Validation List

4. Button & Action Definition

4.1 Button List

4.2 Action Definition

5. Error & Message Definition

5.1 Validation Error

5.2 System Error

6. Screen Transition

6.1 Screen Transition

• Previous Screen:
• Next Screen:

### **Output image (template change)**

```markdown
# Screen Design Document Template (for React)

> 💡 This template is for "Screen Design Document (for React)". It is tailored for React (SPA/SSR) development workflows, with headings and samples adjusted accordingly. Please adapt it as needed to your project policies and design rules.

## 1. Basic Information

- Screen ID:
- Screen Name:
- Functional Overview: Describe in about 400 characters

## 2. Screen Layout

### 2.1 Component Structure

Using the Mermaid notation below, illustrate the main React component structure, parent-child relationships, responsibilities, and dependencies. Specify file separation examples for each page/main component (e.g., `PageName.jsx`, `Header.jsx`, `FormSection.jsx`, etc.).

```mermaid
%%{init: {'theme': 'neutral', 'themeVariables': { 'fontFamily': 'arial', 'fontSize': '16px'}}}%%
flowchart TD
  Page["Page (Root Component)"]
  Header["Header"]
  Content["Content"]
  FormSection["FormSection"]
  Footer["Footer"]
  
  Page --> Header
  Page --> Content
  Content --> FormSection
  Page --> Footer

  classDef page fill:#76d7c4,stroke:#333,stroke-width:2px,color:#000
  classDef component fill:#f7ca18,stroke:#333,stroke-width:2px,color:#000

  class Page page
  class Header,Content,FormSection,Footer component

  style Page text-align:center
  style Header text-align:center
  style Content text-align:center
  style FormSection text-align:center
  style Footer text-align:center

Other Events and State Management (Context, Redux, Hook, etc.) Integration:

• Use of Context/Redux and its purpose:
• Overview of main custom Hooks:

3. Input Item Definition

3.1 Form Item List

3.2 Input Rules & Validation

4. Button & Action Definition

4.1 Button List

4.2 Action (Event) Definition

5. Error & Message Definition

5.1 Validation Errors

5.2 System Errors

6. Screen Transition & URL

6.1 URL Path, Transition

• Example URL Path: /xxxx
• Previous Screen (From):
• Next Screen (To):

\[Main Changes for React Projects]

• The granularity is based on "pages" and "components" rather than "screens".
• Hierarchy, reusable components, and state management relationships are expressed with Mermaid diagrams.
• Validation examples assume usage of Yup or React Hook Form.
• Action definitions include event lists and API integration columns.

### **Output image (creation of screen design document)**

```markdown
# Screen Design Document: Member Information Update Screen (React)

## 1. Basic Information

- Screen ID: MemberProfileEdit
- Name: Member Information Update Screen
- Overview: Authenticated users can update email, password, and profile image securely. Validation・エラー/結果表示あり。

## 2. Screen Layout

### 2.1 Component Structure

```mermaid
flowchart TD
  MemberProfileEditPage["MemberProfileEditPage"]
  EmailForm["EmailUpdateForm"]
  PasswordForm["PasswordUpdateForm"]
  ProfileImageForm["ProfileImageUpdateForm"]
  SaveSection["SaveSection"]
  MessageBar["MessageBar"]
  MemberProfileEditPage --> EmailForm
  MemberProfileEditPage --> PasswordForm
  MemberProfileEditPage --> ProfileImageForm
  MemberProfileEditPage --> SaveSection
  MemberProfileEditPage --> MessageBar

• Files: MemberProfileEditPage.jsx, EmailUpdateForm.jsx, PasswordUpdateForm.jsx, ProfileImageUpdateForm.jsx, SaveSection.jsx, MessageBar.jsx
• State: Auth Context, Message Context, useState/useReducer, useProfileUpdate, useFormErrors

3. Input Items

3.1 Form Items

3.2 Validation

4. Buttons & Actions

4.1 Buttons

4.2 Actions

5. Error & Message

5.1 Validation Errors

5.2 System Errors

6. Screen Transition & URL

• URL: /member/profile/edit
• Previous: /member/profile
• Next: After save, go to Member Info or show completion

\[Reference & Design Basis]

• UI design: "Member Information Update" (@document.69022)
• Format: "Screen Design Document Template (React)" (@document.68153)
• Validation, notification, security policies included