Initial commit

commands/webflow-convert.md

@@ -0,0 +1,120 @@
+---
+description: Convert Webflow export to self-served page with dynamic CSV content loading
+argument-hint: [optional-directory-path]
+allowed-tools: Read, Write, Edit, Bash, Glob, Grep, Task
+---
+
+You are running the Webflow to Self-Served Page conversion workflow.
+
+**Task**: Convert a Webflow landing page export (with CSV CMS data) into a self-served static page with dynamic content loading.
+
+**Target Directory**: $ARGUMENTS (if provided, otherwise current directory)
+
+## Conversion Workflow
+
+### Step 1: Analyze the Webflow Export
+1. Scan for CSV files in the target directory
+2. Identify all HTML files
+3. Validate this is a Webflow export (check for .w-dyn-list, .w-dyn-bind-empty classes)
+
+### Step 2: Set Up Directory Structure
+1. Create `data/` directory for JSON files
+2. Create `scripts/` directory for converter script
+3. Create `js/` directory if it doesn't exist
+
+### Step 3: Analyze CSV Structure
+For each CSV file found:
+1. Read the CSV headers to understand the data structure
+2. Detect the collection type based on field names:
+   - Has "Comentario" or "testimonial" → testimonials
+   - Has "Logo" or "school" → schools
+   - Has "Instagram" or "ambassador" → ambassadors
+   - Has "profesor" or "teacher" → teachers
+   - Otherwise → generic collection
+3. Map CSV fields to JSON structure intelligently
+
+### Step 4: Generate CSV to JSON Converter
+1. Copy the Python converter template from `${CLAUDE_PLUGIN_ROOT}/scripts/templates/csv-to-json.py`
+2. Customize it based on detected CSV structures
+3. Make it generic to handle any CSV format
+4. Save to `scripts/csv-to-json.py`
+
+### Step 5: Run CSV Conversion
+1. Execute: `python3 scripts/csv-to-json.py`
+2. Verify JSON files are created in `data/` directory
+3. Report number of items converted per collection
+
+### Step 6: Analyze HTML Structure
+1. Search for dynamic content containers:
+   - Elements with class `.w-dyn-list`
+   - Elements with class `.w-dyn-items`
+   - Elements with class `.w-dyn-bind-empty`
+   - Text containing "No items found"
+2. Map HTML sections to CSV/JSON collections
+3. Identify the CSS selectors needed for injection
+
+### Step 7: Generate CMS Loader JavaScript
+1. Copy the CMS loader template from `${CLAUDE_PLUGIN_ROOT}/scripts/templates/cms-loader.js`
+2. Customize based on detected HTML structure and collections
+3. Create rendering functions for each collection type
+4. Add debug mode and error handling
+5. Save to `js/cms-loader.js`
+
+### Step 8: Update HTML Files
+1. Find all HTML files that need the CMS loader
+2. Add script reference before closing `</body>` tag:
+   ```html
+   <!-- CMS Data Loader -->
+   <script src="js/cms-loader.js"></script>
+   ```
+3. Report which HTML files were updated
+
+### Step 9: Generate Documentation
+1. Create a README.md with:
+   - Project overview
+   - Directory structure
+   - How to update content
+   - How to run locally
+   - Deployment instructions
+2. Include CSV field documentation for each collection
+
+### Step 10: Set Up Local Preview
+1. Start a Python HTTP server on available port (try 8080, 8081, etc.)
+2. Display the URL for preview
+3. Provide instructions for testing
+
+## Success Criteria
+- ✅ All CSV files converted to JSON
+- ✅ CMS loader JavaScript generated
+- ✅ HTML files updated with script references
+- ✅ Documentation created
+- ✅ Local server running for preview
+
+## Output Format
+Provide a summary at the end:
+```
+🎉 Webflow Conversion Complete!
+
+📊 Results:
+- CSV Files Processed: X
+- JSON Files Generated: X
+- Total Items: X
+- HTML Files Updated: X
+
+📁 Generated Files:
+- data/cms-*.json
+- scripts/csv-to-json.py
+- js/cms-loader.js
+- README.md
+
+🚀 Next Steps:
+1. Preview: http://localhost:XXXX
+2. Review: Check browser console for CMS loader logs
+3. Test: Verify all sections display content
+4. Deploy: Upload all files to your web server
+
+Run '/webflow-preview' to open the preview again anytime.
+Run '/webflow-update' to regenerate JSON after CSV changes.
+```
+
+**Important**: Use the webflow-converter subagent for this task by explicitly invoking it for complex analysis and generation tasks.