Package Exports

htflow-cli
htflow-cli/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (htflow-cli) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

HTFlow CLI

A command-line tool for generating Webflow-compatible HTML, CSS, and JavaScript code with comprehensive validation rules.

Features

Webflow Compatibility: Ensures code converts seamlessly to Webflow
Comprehensive Validation: 20+ validation rules for HTML, CSS, and JavaScript
Live Development Server: Built-in server with hot reload
JavaScript Control: Enable/disable JavaScript for testing
Audit System: Detailed compliance reporting

Installation

npm install -g htflow-cli

Quick Start

# Initialize HTFlow rules for your project
htflow init

# Run comprehensive audit
htflow audit

# Start development server
htflow serve dev

# Build and validate project
htflow build

Commands

`htflow init`

Initialize HTFlow rules for the current project.

htflow init [-f, --force]

`htflow audit`

Comprehensive audit of HTML files against HTFlow rules.

htflow audit [-r, --report] [-o, --output <file>]

Options:

--report: Generate detailed compliance report
--output <file>: Save report to file

`htflow build`

Validate project against HTFlow rules.

htflow build

`htflow serve`

Start a live development server.

# Development mode (JavaScript enabled)
htflow serve dev [-p, --port <number>] [-h, --host <string>] [--no-open] [--no-watch]

# Production mode (JavaScript disabled)
htflow serve start [-p, --port <number>] [-h, --host <string>] [--no-open] [--no-watch]

`htflow js-on/js-off`

Control JavaScript in HTML files.

# Disable JavaScript (comment out script tags)
htflow js-off

# Enable JavaScript (uncomment script tags)
htflow js-on

HTFlow Validation Rules

HTML Validation Rules

✅ Required Structure

HTFlow Wrapper: All content must be wrapped in <div class="htflow-wrapper">
No Inline Styles: Never use inline styles - use external CSS or <style> tags
Form Attributes: All <form> elements must have data-ht-form attribute
Style Tags: All <style> tags must have data-ht-styles attribute
Script Tags: All <script> tags must have data-ht-main-script attribute

✅ Semantic HTML

Alt Attributes: All images must have alt attributes
Link Href: All links must have href attributes
Button Elements: Use <button> for clickable items, not <div>
No IDs: Avoid using IDs for styling or JavaScript targeting

CSS Validation Rules

✅ Property Restrictions

No Shorthand Properties: Use longhand only (margin-top, margin-bottom, etc.)
No Background Images: Use position absolute with <img> elements instead
No Pseudo-elements: No ::before or ::after - use actual HTML elements
No Keyframes: No @keyframes animations - use JavaScript for all animations
No CSS Variables: No custom properties (--var) - use direct values

✅ Grid Layout Rules

Grid Template Rows: Must always be 1fr - never auto or values > 1fr
Grid Template Columns: Use explicit values like 1fr 1fr 1fr

✅ Selector Rules

No Descendant Selectors: Each element needs its own class
BEM Naming: Follow BEM methodology for class names
Individual Classes: No .card h2 - use .card__title instead

✅ Responsive Design

Approved Breakpoints Only: 991px, 767px, 479px
Relative Units: Use rem/em for typography and spacing

JavaScript Validation Rules

✅ DOM Selection

No Class Selectors: Never use querySelector(".class")
Data Attributes: Use data-ht-* attributes for all selectors
Example: querySelector("[data-ht-card]") instead of querySelector(".card")

✅ Class Manipulation

No ClassList Methods: No classList.add/remove/toggle
Direct CSS Manipulation: Use element.style.property = value
Inline Styles: Generate CSS as inline styles for state changes

✅ Animation Rules

JavaScript Only: All animations must be handled by JavaScript
No CSS Animations: No @keyframes or CSS transitions for complex animations
Direct Manipulation: Use element.style.transform for animations

Form Validation Rules

✅ Form Requirements

Data-HT Attribute: All <form> elements must have data-ht-form
Semantic Elements: Use proper form elements and attributes
JavaScript Validation: Handle form validation with JavaScript

Examples

✅ Good HTML Structure

<body>
  <div class="htflow-wrapper">
    <header class="site-header">
      <nav class="main-navigation">
        <ul class="nav-list">
          <li class="nav-item">
            <a href="/" class="nav-link">Home</a>
          </li>
        </ul>
      </nav>
    </header>
    
    <main class="main-content">
      <form class="contact-form" data-ht-form>
        <input type="text" class="form-input" name="name" placeholder="Your Name" />
        <button type="submit" class="form-button">Submit</button>
      </form>
    </main>
  </div>
  
  <style data-ht-styles>
    .site-header {
      background-color: #f0f0f0;
      padding-top: 20px;
      padding-bottom: 20px;
    }
  </style>
  
  <script data-ht-main-script>
    // JavaScript code here
  </script>
</body>

✅ Good CSS (Longhand Properties)

.card {
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 10px;
  margin-right: 10px;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 10px;
  padding-right: 10px;
  border-width: 1px;
  border-style: solid;
  border-color: #ccc;
  background-color: #f0f0f0;
  font-size: 16px;
  font-family: Arial;
  font-weight: bold;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 20px;
}

✅ Good JavaScript (Data Attributes)

// ✅ Good: Using data-ht attributes
document.querySelectorAll("[data-ht-card]").forEach((card) => {
  const image = card.querySelector("[data-ht-image]");
  
  card.addEventListener("mouseenter", () => {
    image.style.transform = "scale(1.05)";
    image.style.transition = "transform 0.3s ease";
  });
  
  card.addEventListener("mouseleave", () => {
    image.style.transform = "scale(1)";
  });
});

// ✅ Good: Direct CSS manipulation
document.querySelectorAll("[data-ht-menu-toggle]").forEach((toggle) => {
  const menu = toggle.querySelector("[data-ht-menu]");
  
  toggle.addEventListener("click", () => {
    if (menu.style.display === "none" || !menu.style.display) {
      menu.style.display = "block";
      menu.style.opacity = "1";
    } else {
      menu.style.display = "none";
      menu.style.opacity = "0";
    }
  });
});

❌ Bad Examples

/* ❌ Bad: Shorthand properties */
.card {
  margin: 20px 10px;
  padding: 15px 10px;
  border: 1px solid #ccc;
  background: #f0f0f0 url('image.jpg') no-repeat center;
  font: 16px Arial bold;
}

/* ❌ Bad: Background image */
.hero-section {
  background-image: url('hero-bg.jpg');
  background-size: cover;
}

/* ❌ Bad: Pseudo-elements */
.button::before {
  content: "→";
  margin-right: 8px;
}

/* ❌ Bad: Keyframes */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ❌ Bad: Descendant selectors */
.card h2 {
  font-size: 1.2rem;
}

// ❌ Bad: Class selectors
document.querySelectorAll(".card").forEach((card) => {
  // ...
});

// ❌ Bad: ClassList methods
element.classList.add("active");
element.classList.remove("active");

Audit Report

The audit command provides comprehensive validation:

htflow audit --report

Sample output:

🔍 Running HTFlow audit...

📊 Audit Summary:
   Files analyzed: 3
   Total issues: 8
   Errors: 5
   Warnings: 3
   Info: 0

⚠️  5 critical issues found. Please fix them.

📄 index.html:
   ❌ ERROR: CSS Shorthand Properties: margin shorthand found: margin: 20px 10px
      💡 Use longhand properties (margin-top, margin-bottom, etc.)
   ❌ ERROR: JavaScript Class Selectors: Class selector in JavaScript: querySelector(".card")
      💡 Use data-ht-* attributes instead of class selectors

Development Workflow

Initialize: htflow init
Develop: Write code following HTFlow rules
Audit: htflow audit to check compliance
Test: htflow serve dev for development
Build: htflow build for final validation

Why HTFlow Rules?

HTFlow rules ensure your code converts seamlessly to Webflow:

No Shorthand Properties: Webflow doesn't support all shorthand CSS
No Pseudo-elements: Webflow has limited pseudo-element support
Data Attributes: Better for JavaScript targeting in Webflow
Strict Grid Rules: Ensures proper grid behavior in Webflow
No Background Images: Webflow handles images differently

Contributing

Fork the repository
Create a feature branch
Make your changes
Add tests for new validation rules
Submit a pull request

License

MIT License - see LICENSE file for details.