gh-gutitrombotto-webflow-to-self-served-page/commands/webflow-convert.md

description, argument-hint, allowed-tools

description	argument-hint	allowed-tools
Convert Webflow export to self-served page with dynamic CSV content loading	optional-directory-path	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:

   <!-- 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.