-------------------------------------------------------------------------------- DOCUMENT CONTROL -------------------------------------------------------------------------------- Document ID : DARX-TECH-SOP-001 Title : Development Workflow — VS Code Local Testing, Claude Sitewide Deployment, and DARXSITE Save Protocol Version : 1.0 Status : ACTIVE Date Created : 2026-05-25 Prepared by : PYB / Daralbeida Style : BPGP Department : TECH Classification: Internal Related Docs : DAB-SOP-GITHUB-001, DARX-COMM-BPGP-001 -------------------------------------------------------------------------------- OUTLINE -------------------------------------------------------------------------------- 1. Purpose and Scope 2. Tool Requirements 3. Workflow Overview 4. Phase 1 — Local Feature Development in VS Code 4.1 Folder Structure for Local Work 4.2 Editing and Previewing a Single Page 4.3 Testing Checklist Before Handoff 5. Phase 2 — Sitewide Deployment with Claude 5.1 What to Upload to Claude 5.2 Briefing Claude on the Change 5.3 Claude Integration Tasks 5.4 Review Before Saving 6. Phase 3 — SAVE DARXSITE 6.1 Definition of SAVE DARXSITE 6.2 How to Trigger a Save 6.3 What Claude Produces 6.4 Manifest Structure 7. Phase 4 — Upload to Server 7.1 The Upload Folder 7.2 Upload to GoDaddy cPanel 7.3 Commit to GitHub 8. Failure and Rollback Protocol 9. Acronyms ================================================================================ 1. PURPOSE AND SCOPE ================================================================================ This SOP defines the end-to-end development workflow for the Daralbeida web platform. It covers single-page feature testing in VS Code, integration of changes sitewide via Claude, the SAVE DARXSITE packaging protocol, and final deployment to the live server. Applies to: the founder and any contracted webmaster/system administrator. This workflow assumes GoDaddy/cPanel Apache hosting, with production at public_html/ and development at public_html/_devt/ (the canonical working tree). All development work targets the _devt/ tree only. Production changes are handled separately and deliberately. ================================================================================ 2. TOOL REQUIREMENTS ================================================================================ The following tools are required before starting any development session. Tool Purpose --------------------- ------------------------------------------------------- VS Code Local file editing and feature preview Live Server VS Code extension; browser auto-reload on file save A web browser Preview target (Chrome or Firefox recommended) A local _devt/ copy Working copy of the full site tree (see Section 4.1) Claude (claude.ai) Sitewide integration and DARXSITE packaging GoDaddy cPanel File Manager for live server upload GitHub Desktop Optional; for committing after confirmed deployment VS Code installation: https://code.visualstudio.com Live Server extension: install from VS Code Extensions panel, search "Live Server" by Ritwick Dey. No Node.js, no npm, no terminal commands are required for this workflow. ================================================================================ 3. WORKFLOW OVERVIEW ================================================================================ The workflow has four sequential phases. Do not skip phases. Phase Activity Tool --------- ------------------------------------- ---------------------------- Phase 1 Edit and test a single page locally VS Code + Live Server Phase 2 Upload full tree to Claude for Claude (claude.ai) sitewide integration Phase 3 Trigger SAVE DARXSITE; receive zip Claude (claude.ai) and manifest Phase 4 Upload zip to cPanel; extract; GoDaddy cPanel + GitHub commit to GitHub Each phase has a gate. Do not proceed to the next phase until the gate condition is met. Phase 1 gate: feature looks and behaves correctly in local browser preview. Phase 2 gate: Claude confirms all affected files have been updated. Phase 3 gate: zip and manifest received; manifest reviewed and approved. Phase 4 gate: live site confirmed working after extraction. ================================================================================ 4. PHASE 1 — LOCAL FEATURE DEVELOPMENT IN VS CODE ================================================================================ 4.1 FOLDER STRUCTURE FOR LOCAL WORK Keep a local copy of the full _devt/ tree on the desktop or in a dedicated project folder. Suggested path: Desktop/DARXSITE/_devt/ This local folder mirrors exactly what is deployed at public_html/_devt/ on the server. Never work directly on the live server files. The folder structure inside _devt/ follows this pattern: _devt/ index.php (or index.html — homepage) css/ darx_style_master.css [page-specific css files] api/ form_handler.php [other html/php pages] 4.2 EDITING AND PREVIEWING A SINGLE PAGE Step 1. Open VS Code. Step 2. File > Open Folder > select the local _devt/ folder. Step 3. Open the specific page to be modified (e.g. index.php). Step 4. Make the targeted change. Step 5. Right-click the file in the VS Code explorer panel > select "Open with Live Server." Step 6. A browser tab opens automatically. Every time the file is saved (Cmd+S / Ctrl+S), the browser reloads to reflect the change. Step 7. Test the feature in the browser. Verify layout, behavior, and responsiveness (use browser DevTools to simulate mobile widths). Note: Live Server serves files over localhost (127.0.0.1). PHP will not execute locally unless a local PHP server is running. For PHP-dependent pages, test the logic path separately or note the PHP dependency for Claude to verify before deployment. 4.3 TESTING CHECKLIST BEFORE HANDOFF Complete all items before moving to Phase 2. Item Done ------------------------------------------------------------- ---- Feature renders correctly on desktop width (1280px+) [ ] Feature renders correctly on mobile width (390px) [ ] No layout breaks visible at intermediate widths [ ] Links and buttons behave as expected [ ] No console errors visible in browser DevTools [ ] CSS changes confined to the intended scope (no regressions) [ ] PHP dependencies noted if applicable [ ] ================================================================================ 5. PHASE 2 — SITEWIDE DEPLOYMENT WITH CLAUDE ================================================================================ 5.1 WHAT TO UPLOAD TO CLAUDE Upload the full current _devt/ tree as a DARXSITE zip. The zip must be rooted at _devt/ (see Section 6 for packaging rules). If the local tree was modified in Phase 1, the zip must reflect those modifications. To create the zip for upload: a. On Mac: right-click the _devt/ folder > Compress "_devt" b. Rename the resulting zip to the DARXSITE naming format: DARXSITE_MMDD_HHMM.zip (Pacific time) c. Upload to the Claude conversation. 5.2 BRIEFING CLAUDE ON THE CHANGE Provide a clear, specific brief. Include: a. The name of the page where the feature was developed and tested. b. A plain-language description of what the feature does. c. Which other pages or files need to receive the same change, if any. d. Any CSS changes and whether they belong in darx_style_master.css or in a page-specific CSS file. e. Any PHP or api/ dependencies. Example brief format: "I tested a sticky nav bar on index.php. Apply the same nav to all .php pages. The CSS is in a new block I added at the bottom of darx_style_master.css — keep it there. No PHP changes." 5.3 CLAUDE INTEGRATION TASKS Claude will: a. Unpack the zip and read the relevant files. b. Apply the change consistently across all affected pages. c. Verify relative path integrity (no leading slashes; sibling references only within _devt/). d. Check for conflicts with darx_style_master.css. e. Report a list of all files modified before packaging. Do not request SAVE DARXSITE until Claude has reported the file list and the changes have been reviewed. 5.4 REVIEW BEFORE SAVING Before triggering SAVE DARXSITE, confirm: a. The list of modified files matches what was expected. b. No unexpected files were modified. c. No file was deleted. d. Claude has not introduced leading slashes in any path reference. ================================================================================ 6. PHASE 3 — SAVE DARXSITE ================================================================================ 6.1 DEFINITION OF SAVE DARXSITE SAVE DARXSITE is the command that triggers Claude to repack the full _devt/ working tree into a deployment-ready archive. It produces: a. A zip file named: DARXSITE_MMDD_HHMM.zip b. A manifest file named: DARXSITE_MMDD_HHMM_MANIFEST.txt All timestamps are in LA/Pacific time (PT, UTC-7 currently). The zip is always rooted at the _devt/ folder. This means when the zip is extracted inside public_html/ on the server, it produces: public_html/_devt/ index.php css/ api/ ... The zip must never be contents-rooted. A contents-rooted zip would extract index.php, css/, and api/ directly into public_html/, scattering files into the production root and potentially overwriting production files. This is a server-damaging error. The zip structure is verified by Claude before delivery. 6.2 HOW TO TRIGGER A SAVE Type the following in the Claude conversation after Phase 2 review is complete: "save DARXSITE" Claude will package and deliver both files in the same response. 6.3 WHAT CLAUDE PRODUCES File Contents --------------------------------- ----------------------------------------- DARXSITE_MMDD_HHMM.zip Full _devt/ tree, rooted at _devt/ DARXSITE_MMDD_HHMM_MANIFEST.txt Session record with changes and file list Download both files from the Claude response before closing the session. 6.4 MANIFEST STRUCTURE The manifest contains three sections in order: Section 1 — Header Date, time (PT), total file count in the archive. Section 2 — CHANGES IN THIS SAVE New and modified files listed first, one per line, with a one-line description of what changed. Unchanged files are not listed here. Section 3 — Full File List All files in the archive grouped by folder, with date, time, and size. The manifest is the session record. Keep it alongside the zip. Never discard a manifest without first confirming the corresponding deployment was successful and the site is stable. ================================================================================ 7. PHASE 4 — UPLOAD TO SERVER ================================================================================ 7.1 THE UPLOAD FOLDER Maintain a dedicated local folder for ready-to-deploy DARXSITE zips: Desktop/DARXSITE_UPLOADS/ After downloading the zip and manifest from Claude, move both files into this folder immediately. Do not leave them in the Downloads folder. Naming inside DARXSITE_UPLOADS/: DARXSITE_MMDD_HHMM.zip DARXSITE_MMDD_HHMM_MANIFEST.txt Keep the two most recent saves in the folder at all times. Archive older saves to a dated subfolder rather than deleting them (they are the rollback resource — see Section 8). Desktop/DARXSITE_UPLOADS/ DARXSITE_0525_1430.zip (current deploy) DARXSITE_0525_1430_MANIFEST.txt DARXSITE_0524_0915.zip (previous deploy — kept for rollback) DARXSITE_0524_0915_MANIFEST.txt archive/ [older saves] 7.2 UPLOAD TO GODADDY CPANEL Step 1. Log in to GoDaddy > My Products > cPanel. Step 2. Open File Manager. Step 3. Navigate to public_html/. Step 4. Click Upload. Select the DARXSITE_MMDD_HHMM.zip file. Step 5. Once uploaded, right-click the zip in File Manager > Extract. Step 6. Confirm the extraction target is public_html/ (not a subfolder). Step 7. The zip will extract to public_html/_devt/ — verify this is the result before proceeding. Step 8. Delete the zip file from public_html/ after successful extraction. Step 9. Open the live site in a browser and verify the change. Critical check at Step 7: if extraction scattered files directly into public_html/ (index.php visible at the root level alongside the existing production files), stop immediately. Do not delete anything. Contact the webmaster/system administrator. The zip was contents-rooted — an error in the packaging step. 7.3 COMMIT TO GITHUB After confirming the live site is stable: Step 1. Copy the extracted _devt/ folder from the local working copy (already updated from Phase 1). Step 2. Open GitHub Desktop. Step 3. Confirm the changed files match the manifest. Step 4. Write a commit message referencing the DARXSITE timestamp: Example: "Deploy DARXSITE_0525_1430 — sticky nav applied sitewide" Step 5. Commit to main branch and push. The repository stays private at all times. See DAB-SOP-GITHUB-001. ================================================================================ 8. FAILURE AND ROLLBACK PROTOCOL ================================================================================ If the live site shows errors after deployment: Step 1. Do not attempt to fix files directly on the server. Step 2. Open GoDaddy cPanel File Manager. Step 3. Delete the contents of public_html/_devt/. Step 4. Upload the previous DARXSITE zip (the one kept in DARXSITE_UPLOADS/ as the prior save). Step 5. Extract to public_html/ — this restores _devt/ to the last known good state. Step 6. Verify the site is stable. Step 7. Open a new Claude session, upload the prior zip, and describe the failure for diagnosis. Never attempt to diagnose or repair files on the live server directly. The rollback zip is the recovery tool. ================================================================================ 9. ACRONYMS ================================================================================ BPGP Business Plan / General Purpose (Daralbeida document format) cPanel Control Panel (GoDaddy web hosting management interface) CSS Cascading Style Sheets DARX Daralbeida document prefix HTML HyperText Markup Language PHP PHP Hypertext Preprocessor (server-side scripting language) PT Pacific Time SOP Standard Operating Procedure TECH Technology and Systems (department code) VS Code Visual Studio Code (source code editor by Microsoft) -------------------------------------------------------------------------------- DOCUMENT CONTROL (FOOTER) -------------------------------------------------------------------------------- Document ID : DARX-TECH-SOP-001 Version : 1.0 Status : ACTIVE Style : BPGP Department : TECH Last Modified : 2026-05-25 Review Cycle : Upon any change to hosting environment, Claude session tooling, or DARXSITE zip protocol Retention : Duration of Daralbeida web operations; minimum 3 years Owner : PYB / Daralbeida Distribution : Internal; share with webmaster/system administrator contractor upon engagement -------------------------------------------------------------------------------- END OF DOCUMENT