Modifiers

Modifiers allow you to customize generated output by adding visual, layout, size, and behavior instructions to a prompt.

Overview

Modifiers enhance an intent.

For example:

BASH
intentcss generate --prompt "button"

generates a standard button.

Adding modifiers:

BASH
intentcss generate --prompt "large red shadow button"

changes the appearance of the generated output.

IntentCSS combines detected modifiers with the selected intent to build the final result.

How Modifiers Work

Prompt:

TEXT
large red button

Detected:

TEXT
Intent:
  button

Modifiers:
  large
  red

Generated:

TEXT
rounded-lg bg-red-600 px-6 py-3 text-lg text-white hover:bg-red-700

Color Modifiers

Colors alter component appearance.

Blue

BASH
intentcss generate --prompt "blue button"
TEXT
bg-blue-600 hover:bg-blue-700

Red

BASH
intentcss generate --prompt "red button"
TEXT
bg-red-600 hover:bg-red-700

Green

BASH
intentcss generate --prompt "green button"
TEXT
bg-green-600 hover:bg-green-700

Purple

BASH
intentcss generate --prompt "purple button"
TEXT
bg-purple-600 hover:bg-purple-700

Black

BASH
intentcss generate --prompt "black button"
TEXT
bg-black hover:bg-gray-800

Size Modifiers

Large

Adds additional padding and sizing.

BASH
intentcss generate --prompt "large button"
TEXT
px-6 py-3 text-lg

Compact

Reduces spacing.

BASH
intentcss generate --prompt "compact sidebar"
TEXT
w-48

Style Modifiers

Glass

Applies glassmorphism styling.

BASH
intentcss generate --prompt "glass modal"

Output:

TEXT
backdrop-blur-md bg-white/30 border border-white/20

Commonly used with:

  • Modal
  • Form
  • Card
  • Sidebar
  • Hero

Shadow

Adds stronger elevation.

BASH
intentcss generate --prompt "shadow card"

Output:

TEXT
shadow-lg

Rounded

Increases corner radius.

BASH
intentcss generate --prompt "rounded hero"

Output:

TEXT
rounded-3xl

Pill

Creates fully rounded buttons.

BASH
intentcss generate --prompt "pill button"

Output:

TEXT
rounded-full

Minimal

Creates cleaner layouts with fewer visual effects.

BASH
intentcss generate --prompt "minimal login form"

Output:

TEXT
border border-gray-200

Layout Modifiers

Centered

Centers components.

BASH
intentcss generate --prompt "centered login form"

Output:

TEXT
mx-auto

Responsive

Adds responsive sizing behavior.

BASH
intentcss generate --prompt "responsive form"

Output:

TEXT
w-full max-w-md

Fullscreen

Expands a component to fill the viewport.

BASH
intentcss generate --prompt "fullscreen modal"

Output:

TEXT
fixed inset-0

Theme Modifiers

Dark

Applies dark-mode styling.

BASH
intentcss generate --prompt "dark navbar"

Output:

TEXT
bg-gray-900 text-white

Context Modifiers

Some modifiers provide additional meaning rather than visual styling.

Login

BASH
intentcss generate --prompt "login form"

Used to generate login-specific layouts.

Signup

BASH
intentcss generate --prompt "signup form"

Used to generate registration layouts.

Register

BASH
intentcss generate --prompt "register form"

Treated similarly to signup forms.

Combining Modifiers

Multiple modifiers can be used together.

Example:

BASH
intentcss generate --prompt "glass shadow rounded sidebar"

Output:

TEXT
w-64 min-h-screen backdrop-blur-md bg-white/30 border border-white/20 rounded-2xl shadow-lg

Another example:

BASH
intentcss generate --prompt "large red shadow button"

Output:

TEXT
rounded-lg bg-red-600 px-6 py-3 text-lg text-white shadow-lg hover:bg-red-700

Modifier Support

Not every modifier applies to every intent.

For example:

ModifierButtonCardFormModalSidebar
Glass❌✅✅✅✅
Shadow✅✅✅✅✅
Large✅✅✅✅❌
Responsive❌❌✅❌❌
Fullscreen❌❌❌✅❌

IntentCSS automatically ignores unsupported modifier combinations.

Future Modifiers

Planned modifiers include:

  • outlined
  • gradient
  • animated
  • floating
  • sticky
  • fixed
  • bordered
  • blurred
  • transparent
  • elevated

These may be introduced in future releases.

Next Steps

Continue with:

  • CLI Reference
  • Generate Command
  • Explain Command
  • Architecture