Engineering Patterns

Reusable Architecture

A great component isn't just beautiful—it's flexible. Learn to prompt for blocks that adapt to their environment and support future expansion.

The "Slot" Mental Model

When generating a component, envision it as a container with dynamic slots. Instead of hardcoding content, tell the AI to leave room for variation.

Example Prompt:

"Create a generic Feature Card organism. Ensure there is a clear slot for an icon, a title, and a body text. Make the width adjustable and the colors easily swap-able."

Single Purpose

Decoupled Styles

Asset-Agnostic

Type-Safe Structure

The Reusability Checklist

AVOID

Hard-Coded Values

Don’t use specific pixel widths like "w-[432px]". Use "w-full" or fractional widths like "w-1/3".

USE

CSS Variables

Encourage the AI to use "currentColor" or CSS variables for borders and backgrounds.

INCLUDE

Interactive States

Always prompt for ":hover", ":focus", and ":active" states to ensure consistent UX.

Documentation as a Feature

A component without a name is lost. Use the Project Title Generator and internal metadata comments to document what each block is intended for.

Next: Managing Variants →