home/roleplay/ui-implementation-prompt-person

UI Implementation Prompt Person

GPTClaudeGemini··776 copies·updated 2026-07-14
ui-implementation-prompt-person.prompt
You are going to implement the **`<PAGE_NAME>` UI** using the mockup at:  
`<MOCKUP_PATH>`

Follow these rules carefully:

1. **Mockup replication**:
    
    - Replicate the mockup exactly as it is, with the exception of the sidebar.
        
    - If the implemented sidebar differs from the mockup sidebar, intelligently copy only the relevant section/tile/icon and insert it gracefully into the correct location.
        
    - Some sidebar sections are hierarchical (e.g. _User Management → Lead Magnet Lab_).
        
        - Clicking the parent (User Management) should take the user to its overview.
            
        - Child sections (Lead Magnet Lab, etc.) should then appear and be directly accessible.
            
2. **Guidelines to follow**:
    
    - Coding: `@/docs/coding_guidelines.md`
        
    - Styling: `@/docs/Styling-in-Next-and-Tailwind-v4.md`
        
    - Responsiveness: `@/docs/features/MobileFirstResponsiveDesign.md`
        
3. **Project context**:
    
    - Read: `@/docs/J StaR Personal Platform PRD.md` (to understand the project scope).
        
    - Routes: `@/docs/AdminPageRoutes.md` (to know where to implement this page).
        
4. **Behavior**:
    
    - If anything is unclear, ask questions before proceeding.


---


You are going to implement the **`<PAGE_NAME>` UI** using the mockup at:  
`<MOCKUP_PATH>`

Follow these rules carefully:

1. **Mockup replication**:
    
    - Replicate the mockup exactly as it is, with the exception of the sidebar.
        
    - If the implemented sidebar differs from the mockup sidebar, intelligently copy only the relevant section/tile/icon and insert it gracefully into the correct location.
        
    - Some sidebar sections are hierarchical (e.g. _User Management → Lead Magnet Lab_).
        
        - Clicking the parent (User Management) should take the user to its overview.
            
        - Child sections (Lead Magnet Lab, etc.) should then appear and be directly accessible.
            
2. **Guidelines to follow**:
	1. All guidelines in one file: '@/docs/combo_guidelines.md'
    
    - Coding: `@/docs/coding_guidelines.md`
        
    - Styling: `@/docs/Styling-in-Next-and-Tailwind-v4.md`
        
    - Responsiveness: `@/docs/features/MobileFirstResponsiveDesign.md`
        
3. **Project context**:
    
    - Read: `@/docs/J StaR Personal Platform PRD.md` (to understand the project scope).
        
    - Routes: `@/docs/AdminPageRoutes.md` (to know where to implement this page).
        
4. **Behavior**:
    
    - If anything is unclear, ask questions before proceeding.


---

You are going to implement the **`<PAGE_NAME>` UI** using the mockup at:
`<MOCKUP_PATH>`

Follow these rules carefully:

1.  **Core Task: Implement Page Content & Integrate Navigation**
    *   **Content Implementation**: Replicate the **main content area** of the page exactly as shown in the mockup.
    *   **Navigation**: **You MUST completely IGNORE the header, sidebar, or any other navigation elements shown in the mockup.** This project uses a new, centralized navigation system. Your task is to integrate this new page into that system, not to build the navigation UI yourself.

2.  **Navigation System Integration**:
    *   The new navigation is managed by the `<SharedNavigation>` and `<AdminNavigation>` components. All navigation links are defined as a list of `NavigationItem` objects.
    *   **Your task**:
        1.  Locate the primary navigation configuration file (e.g., an `adminItems` array in a layout, constants, or navigation-specific file).
        2.  Add a new `NavigationItem` object for `<PAGE_NAME>`.
        3.  Set the `href` property to the correct path, as defined in `@/docs/AdminPageRoutes.md`.
        4.  If `<PAGE_NAME>` is a sub-page of an existing section (e.g., *User Management → Lead Magnet Lab*), place its `NavigationItem` object inside the `children` array of the parent item.
    *   **Reference for the navigation system**: `@/docs/feature_navigation_system.md` *(Assuming you save the new nav logic there)*

3.  **Guidelines to Follow**:
    *   All guidelines in one file: `@/docs/combo_guidelines.md`
    *   Coding: `@/docs/coding_guidelines.md`
    *   Styling: `@/docs/Styling-in-Next-and-Tailwind-v4.md`
    *   Responsiveness: `@/docs/features/MobileFirstResponsiveDesign.md`

4.  **Project Context**:
    *   Read: `@/docs/J StaR Personal Platform PRD.md` (to understand the project scope).
    *   Routes: `@/docs/AdminPageRoutes.md` (this is the source of truth for the page's path).

5.  **Behavior**:
    *   If anything is unclear, especially the location of the navigation configuration, ask questions before proceeding.

when to use it

Community prompt sourced from the open-source GitHub repo J-StaR-Films-Studios/VibeCode-Protocol-Suite (no explicit license). A "UI Implementation Prompt Person" style prompt — adapt the placeholders and specifics to your task. Imported as-is and not independently retested here, so check the output before relying on it.

tags

roleplaycommunitygeneral

source

J-StaR-Films-Studios/VibeCode-Protocol-Suite · no explicit license