Typo Correction

IntentCSS automatically fixes common spelling mistakes so prompts remain usable even when input is imperfect.

Overview

Humans make typing mistakes.

IntentCSS includes a typo correction layer that runs before prompt parsing and intent matching.

This allows prompts like:

TEXT
purpl buton

to be understood as:

TEXT
purple button

without requiring the user to rewrite the command.

Why Typo Correction Exists

Without typo correction, a small spelling mistake could completely prevent IntentCSS from understanding a prompt.

For example:

BASH
intentcss generate --prompt "gren buton"

Without correction:

TEXT
Unknown prompt

With correction:

TEXT
green button

Generated output:

TEXT
rounded-lg bg-green-600 px-4 py-2 text-white hover:bg-green-700

Correction Flow

The typo correction stage runs before parsing.

TEXT
User Prompt
    ↓
Typo Correction
    ↓
Prompt Parsing
    ↓
Intent Matching
    ↓
Generation

Example:

TEXT
purpl buton

becomes:

TEXT
purple button

before the parser sees the prompt.

Supported Corrections

IntentCSS currently focuses on correcting words that directly affect generation.

Components

TEXT
buton    → button
btnn     → button
navbr    → navbar
sidbar   → sidebar
frm      → form

Colors

TEXT
blu      → blue
gren     → green
purpl    → purple
yelow    → yellow

Behaviors

TEXT
responive   → responsive
centeerd    → centered
adaptve     → adaptive

Example

Input:

BASH
intentcss generate --prompt "purpl buton"

Internal correction:

TEXT
purple button

Output:

TEXT
rounded-lg bg-purple-600 px-4 py-2 text-white hover:bg-purple-700

Visible Corrections

When a correction occurs, IntentCSS can display the corrected prompt.

Example:

TEXT
IntentCSS

Corrected: purple button
Prompt: purpl buton

rounded-lg bg-purple-600 px-4 py-2 text-white hover:bg-purple-700

This helps users understand what IntentCSS interpreted.

How Matching Works

IntentCSS compares words against known vocabulary.

When a word is similar enough to a known term, the correction system replaces it with the closest match.

Example:

TEXT
gren

matches:

TEXT
green

because it is the closest known color.

Likewise:

TEXT
buton

matches:

TEXT
button

because it is the closest supported component.

Benefits

Typo correction improves:

  • User experience
  • Prompt reliability
  • Confidence scoring
  • Intent detection

It allows users to type naturally without needing perfect spelling.

Limitations

IntentCSS does not attempt to understand completely unrelated words.

Example:

BASH
intentcss generate --prompt "glorp wazzoo"

Output:

TEXT
Could not confidently understand that prompt.
Try words like: button, card, navbar, blue, responsive.

The typo system is designed to correct likely mistakes, not invent meaning.

Next Steps

Continue with:

  • Confidence Scoring
  • Intent Engine
  • Supported Intents
  • Modifiers