HTFlow CLI

A specialized CLI tool that adds Cursor AI rules for generating Webflow-compatible HTML/CSS/JavaScript code. Designed specifically for the HTFlow HTML to Webflow conversion app, this tool ensures your AI-generated code follows Webflow's strict requirements and best practices.

🎯 Purpose

This CLI tool is designed to help developers create code that can be seamlessly converted to Webflow using the HTFlow conversion app. It enforces coding standards that ensure:

• Webflow Compatibility: Code that works perfectly in Webflow's environment
• Clean Conversion: HTML/CSS/JS that converts without errors
• Best Practices: Following Webflow's recommended coding patterns
• Consistent Output: Standardized code structure across projects
• Development Workflow: Smart JavaScript control and live server functionality

🚀 Quick Install

# Install globally
npm install -g htflow-cli

# Add Webflow-compatible rules to current project
htflow init

# Restart Cursor

✨ What It Does

• Creates .cursor/rules/htflow-rules.mdc in your project
• Adds comprehensive Webflow-compatible HTML/CSS/JS development rules
• Rules are automatically applied to every AI prompt in this project
• Project-specific - rules only apply to this project
• Ensures generated code works perfectly with HTFlow conversion app
• Provides JavaScript control commands for development workflow
• Includes live development server with smart features

📁 What Gets Created

your-project/
├── .cursor/
│   └── rules/
│       └── htflow-rules.mdc  ← Webflow-compatible development rules
├── index.html
├── css/
├── js/
└── ... (your project files)

🎯 Usage

Basic Commands

# Add Webflow-compatible rules to current project
htflow init

# Force overwrite existing rules
htflow init --force

# Check version
htflow --version

# Show help
htflow --help

JavaScript Control Commands

# Disable JavaScript in all HTML files
htflow js-off

# Enable JavaScript in all HTML files
htflow js-on

Live Development Server

# Start development server with JavaScript enabled
htflow serve dev

# Start production-like server with JavaScript disabled
htflow serve start

# Custom port and host
htflow serve dev --port 8080 --host 0.0.0.0

# Don't open browser automatically
htflow serve dev --no-open

# Don't watch for file changes
htflow serve dev --no-watch

🔧 How It Works

1. Install: npm install -g htflow-cli
2. Run: htflow init (in your project directory)
3. Restart: Restart Cursor
4. Code: Every prompt now generates Webflow-compatible code!
5. Develop: Use htflow serve dev for development
6. Test: Use htflow serve start for production-like testing

🚀 Live Development Server

HTFlow CLI includes a powerful live development server with smart features:

Development Mode (htflow serve dev)

• ✅ JavaScript ENABLED for development
• ✅ Perfect for JavaScript development and debugging
• ✅ All interactive features work
• ✅ File watching with JavaScript awareness
• ✅ Auto browser opening
• ✅ Hot reload on file changes

Production-like Mode (htflow serve start)

• ✅ JavaScript DISABLED (commented out)
• ✅ Image URLs automatically converted to absolute paths
• ✅ Perfect for testing HTML/CSS only
• ✅ Production-like experience
• ✅ Accessibility testing
• ✅ Performance testing without JS

Server Features

• Smart File Serving: Serves HTML, CSS, JS, images, fonts
• Directory Index: Automatically serves index.html for directories
• Cross-Platform: Works on Windows, macOS, and Linux
• Graceful Shutdown: Handles Ctrl+C properly
• File Watching: Watches for changes and reloads automatically

Image URL Conversion

When using htflow serve start, the server automatically converts relative image paths to absolute URLs:

Before:

<img src="/image.jpg" alt="Hero Image" />
<img src="/images/logo.png" alt="Logo" />
<img src="https://example.com/external.jpg" alt="External Image" />

After:

<img src="http://localhost:3000/image.jpg" alt="Hero Image" />
<img src="http://localhost:3000/images/logo.png" alt="Logo" />
<img src="https://example.com/external.jpg" alt="External Image" />

Smart Conversion:

• ✅ Converts relative paths (/image.jpg, image.jpg)
• ✅ Preserves absolute URLs (http://, https://)
• ✅ Preserves data URLs (data:image/png;base64,...)
• ✅ Processes all HTML files in the project

🔇 JavaScript Control

HTFlow CLI provides powerful JavaScript control commands that work across your entire project:

htflow js-off - Disable JavaScript

• Comments out all <script> tags in all HTML files
• Recursively processes all HTML files in the project
• Skips already commented script tags
• Perfect for testing HTML/CSS only functionality

htflow js-on - Enable JavaScript

• Uncomments all previously commented <script> tags
• Restores JavaScript functionality
• Processes all HTML files in the project
• Perfect for development and debugging

Smart Processing

• Recursive Search: Finds all HTML files in project and subdirectories
• Safe Directories: Skips node_modules, dist, build, hidden directories
• Smart Commenting: Only comments uncommented scripts, preserves already commented ones
• Detailed Feedback: Shows exactly what was processed

Example Output

🔇 Disabling JavaScript in HTML files...

✅ index.html: 2 script(s) commented
✅ about.html: 1 script(s) commented
✅ pages/contact.html: 3 script(s) commented

✅ Successfully commented 6 script tag(s) in 3 file(s).
📁 Files processed: 3
🔇 Scripts commented: 6

📋 Webflow-Compatible Rules Added

HTML Standards:

• Wrap content in <div class="htflow-wrapper"> for proper Webflow structure
• Every element has its own unique class name (no generic classes)
• No IDs for styling/JavaScript (Webflow prefers classes)
• Use semantic HTML elements for better accessibility
• Clean, minimal HTML structure for easy Webflow conversion

CSS Standards:

• No Tailwind or CSS frameworks (Webflow has its own system)
• No CSS variables (Webflow handles variables differently)
• Use longhand properties only (better Webflow compatibility)
• Specific breakpoints: 991px, 767px, 479px (Webflow standard)
• No pseudo-elements (::before, ::after) - Webflow limitations
• Clean, readable CSS for easy conversion

JavaScript Standards:

• Use data-* attributes for DOM selection (Webflow-friendly)
• Implement hover animations in JavaScript (not CSS)
• No class/ID selectors for JavaScript (prevents conflicts)
• Webflow-compatible event handling patterns

🎉 Development Workflow

Typical Development Process:

1. Initialize Project:

   htflow init

2. Development with JavaScript:

   htflow serve dev

   • JavaScript enabled
   • Perfect for interactive development
   • All features work

3. Test Without JavaScript:

   htflow serve start

   • JavaScript disabled
   • Image URLs converted
   • Production-like testing

4. Manual JavaScript Control:

   htflow js-off  # Disable JS manually
   htflow js-on   # Enable JS manually

Perfect Use Cases:

• htflow serve dev: JavaScript development, debugging, interactive features
• htflow serve start: CSS/HTML development, accessibility testing, performance testing
• htflow js-off: Manual JavaScript disabling for specific testing
• htflow js-on: Manual JavaScript enabling for development

🌐 HTFlow Integration

This CLI is specifically designed to work with the HTFlow HTML to Webflow conversion app. The rules ensure that:

• Generated code converts cleanly to Webflow
• No compatibility issues during conversion
• Maintains design integrity in Webflow
• Follows Webflow's coding best practices
• Provides development tools for testing and debugging

🛠️ Development

# Install dependencies
npm install

# Build
npm run build

# Install locally
npm run install-cli

# Test
htflow init

📄 License

MIT License - see LICENSE file for details.

Made with ❤️ for the HTFlow Webflow conversion community