# Understanding the 150-Line Spec Complexity Budget in AI Website Cloning

> Master the 150-line spec complexity budget in AI website cloning. Learn when to split components to prevent agent overload and ensure quality generation. Optimize your AI cloner.

- Repository: [JCodesMore/ai-website-cloner-template](https://github.com/JCodesMore/ai-website-cloner-template)
- Tags: deep-dive
- Published: 2026-06-23

---

**The 150-line spec complexity budget is a hard limit that mandates splitting any builder specification exceeding approximately 150 lines into smaller sub-components to prevent agent overload and maintain generation quality.**

The **ai-website-cloner-template** repository enforces this mechanical guard to keep prompt sizes manageable for language models. According to the cloning workflow documentation in [`.windsurf/workflows/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.windsurf/workflows/clone-website.md), this budget ensures single agent requests don't become bloated with excessive detail that degrades performance.

## What Is the 150-Line Spec Complexity Budget?

The **spec complexity budget** acts as a concrete threshold for specification files that drive builder agents. When a builder prompt—the spec inlined into the agent's request—exceeds **approximately 150 lines of specification content**, the system flags that section as too complex for a single agent to process effectively.

This limit exists because language models perform optimally with focused, bounded contexts. The repository explicitly documents this rule at lines 46-48 of [`.windsurf/workflows/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.windsurf/workflows/clone-website.md), establishing it as a non-negotiable constraint rather than a soft guideline. The 150-line figure represents a mechanical sweet spot that balances comprehensive instruction against cognitive load.

## When to Split Components

Breaking down specifications requires strategic decision-making beyond simple line counting. The repository outlines four specific scenarios that trigger component division.

### Spec Length Exceeds the Budget

When your specification approaches 150 lines, immediate decomposition is required. This isn't merely a suggestion—the workflow documentation treats this as a mandatory split point. Create separate specification files for distinct logical units and dispatch individual builder agents for each segment.

### Distinct Sub-Components Exist

Any element possessing unique styling, structure, or behavior warrants isolation. Examples include card variants, navigation items, or modal dialogs. Rather than describing three card types with different hover states in a single 160-line spec, generate three separate 50-line specifications plus a thin 20-line wrapper specification, then dispatch four agents total.

### Mixed Interaction Models

Components combining multiple interaction paradigms require separation even if under the line limit. If a single element implements click-driven tabs, scroll-driven animations, and hover effects simultaneously, divide these behaviors into distinct specs. Each agent should focus on exactly one interaction model to ensure precise implementation.

### The Default Strategy

When uncertainty exists regarding component boundaries, the documentation provides explicit guidance at lines 44-47 of [`.windsurf/workflows/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.windsurf/workflows/clone-website.md): **make it smaller**. This conservative approach prevents the technical debt of monolithic components that become unmaintainable during the cloning process.

## Practical Implementation Examples

The following pattern demonstrates enforcing the budget when a Header component grows beyond limits:

```tsx
// docs/research/components/Header.spec.tsx (exceeds 150 lines - DON'T DO THIS)
export const HeaderSpec = `...` // 160+ lines of combined layout and behavior

```

Instead, split into compliant sub-specifications:

```tsx
// docs/research/components/HeaderCore.spec.tsx (≈ 80 lines)
export const HeaderCoreSpec = `...` // Core layout, typography, and basic styling

// docs/research/components/HeaderScrollBehavior.spec.tsx (≈ 60 lines)
export const HeaderScrollBehaviorSpec = `...` // Scroll-triggered transformations only

```

Dispatch separate builder agents for each specification:

```bash

# Dispatch separate builder agents for each spec file

npx openai gpt-4 --prompt @docs/research/components/HeaderCore.spec.tsx
npx openai gpt-4 --prompt @docs/research/components/HeaderScrollBehavior.spec.tsx

```

This separation keeps the core visual implementation under the **150-line spec complexity budget** while isolating complex behavioral logic into its own constrained context.

## Key Files Defining the Budget

Several files across the repository codify this complexity constraint:

- **[`.windsurf/workflows/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.windsurf/workflows/clone-website.md)** — Contains the primary complexity budget rule and splitting guidance (lines 44-48).
- **[`.opencode/commands/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.opencode/commands/clone-website.md)** — Mirrors the budget constraint for the OpenCode command interface.
- **[`.github/skills/clone-website/SKILL.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.github/skills/clone-website/SKILL.md)** — Replicates the rule for GitHub-based skill definitions.
- **[`src/lib/utils.ts`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/lib/utils.ts)** — Houses the `cn()` utility function used by generated components; essential for maintaining styling consistency when splitting components.
- **[`src/components/ui/button.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/components/ui/button.tsx)** — Exemplifies a small, reusable component target that demonstrates ideal spec sizing when larger components require decomposition.

## Summary

- The **150-line spec complexity budget** is a hard limit defined in [`.windsurf/workflows/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.windsurf/workflows/clone-website.md) to prevent agent overload.
- Exceeding this limit requires immediate component decomposition into smaller specification files.
- Split components based on distinct behaviors, unique styling, or mixed interaction models, not just line counts.
- The default strategy when uncertain is always to make specifications smaller and more focused.
- Use separate builder agent dispatches for each split specification to maintain generation quality.

## Frequently Asked Questions

### What happens if I exceed the 150-line limit in a spec?

The builder agent may produce lower quality output, ignore specific requirements, or fail to implement complex interactions correctly. The repository treats this as a mechanical failure point where the context window becomes too cluttered for reliable generation, necessitating immediate splitting of the specification into smaller files.

### How do I count lines for the complexity budget?

Count only the specification content lines—the actual prompt text inlined into the agent request. Exclude boilerplate comments, import statements, or file headers when assessing whether you've hit the **150-line spec complexity budget**. Focus on the descriptive content that explains what the agent should build.

### Can I combine small components to reach 150 lines?

No. The budget represents a maximum ceiling, not a target. The documentation advises "make it smaller" as the default strategy. Combining distinct components into a single spec reduces agent focus and increases the likelihood of implementation errors, even if the combined total remains under 150 lines.

### Where is the complexity budget documented?

The primary documentation resides in [`.windsurf/workflows/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.windsurf/workflows/clone-website.md) at lines 46-48. The same rule appears in [`.opencode/commands/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.opencode/commands/clone-website.md) and [`.github/skills/clone-website/SKILL.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.github/skills/clone-website/SKILL.md), ensuring consistent application across different agent interfaces in the **ai-website-cloner-template** repository.