Fixing Templates

Fixing Templates in create-faster

Overview

Fix formatting, spacing, and syntax issues in Handlebars templates systematically.

Core principle: Audit comprehensively, fix consistently, verify output.

When to Use

Use this skill when:

• Fixing indentation issues in templates
• Removing trailing/extra spaces
• Fixing typos in template files
• Cleaning up conditional formatting
• Standardizing template patterns

Do NOT use for:

• Adding new stacks (use adding-stacks skill)
• Updating dependency versions (use updating-dependencies skill)
• Changing template logic/functionality

Common Template Issues

Issue 1: Trailing Spaces in Conditionals

Problem:

"start": "next start {{#if (eq repo "turborepo")}}--port {{appPort appName}}{{/if}}",

When condition is false, renders:

"start": "next start ",  // ← trailing space!

Fix:

"start": "next start{{#if (eq repo "turborepo")}} --port {{appPort appName}}{{/if}}",

Space moved INSIDE conditional.

Issue 2: Double Spaces in Conditions

Problem:

{{#if  (hasModule "shadcn")}}  // ← extra space after #if

Fix:

{{#if (hasModule "shadcn")}}

Issue 3: Inconsistent Indentation

Problem:

  {{#if condition}}
    content
{{/if}}  // ← wrong indent level

Fix: Match surrounding code indentation.

Systematic Fixing Process

digraph fixing_templates {
    "Start" [shape=doublecircle];
    "Audit ALL templates" [shape=box];
    "Identify patterns" [shape=box];
    "Group by issue type" [shape=box];
    "Fix systematically" [shape=box];
    "Verify generation" [shape=box];
    "Test renders correctly?" [shape=diamond];
    "Fix issues" [shape=box];
    "Document patterns" [shape=box];
    "Done" [shape=doublecircle];

    "Start" -> "Audit ALL templates";
    "Audit ALL templates" -> "Identify patterns";
    "Identify patterns" -> "Group by issue type";
    "Group by issue type" -> "Fix systematically";
    "Fix systematically" -> "Verify generation";
    "Verify generation" -> "Test renders correctly?";
    "Test renders correctly?" -> "Document patterns" [label="yes"];
    "Test renders correctly?" -> "Fix issues" [label="no"];
    "Fix issues" -> "Verify generation";
    "Document patterns" -> "Done";
}

Step 1: Comprehensive Audit

DO NOT fix one issue and stop. Audit ALL templates first.

Search for common patterns:

# Trailing spaces before conditionals
grep -r ' {{#if' templates/

# Double spaces in conditionals
grep -r '{{#if  ' templates/

# Trailing spaces in general
grep -r ' $' templates/

# Mixed indentation (tabs vs spaces)
grep -rP '\t' templates/

# Inconsistent blank lines
grep -rP '\n\n\n+' templates/

Count occurrences:

grep -r ' {{#if' templates/ | wc -l

This tells you scope of the problem BEFORE starting fixes.

Step 2: Identify Patterns

Group similar issues:

Pattern A: Conditional trailing spaces

• Location: package.json scripts
• Count: ~20 instances
• Fix: Move space into conditional

Pattern B: Double spaces in conditions

• Location: Various files
• Count: ~5 instances
• Fix: Remove extra space

Pattern C: Wrong indentation

• Location: Component files
• Count: ~15 instances
• Fix: Match surrounding indent

Step 3: Fix Systematically

DO ONE pattern type at a time across ALL files.

Don't fix:

• ❌ All issues in file A
• ❌ Then all issues in file B

DO fix:

• ✅ All Pattern A issues across all files
• ✅ Then all Pattern B issues across all files

Why: Consistency. Same fix applied everywhere.

Example - Fix all trailing space conditionals:

# Find all instances
grep -rn ' {{#if (eq repo "turborepo")}}' templates/

# Fix each one:
# Before: "start": "next start {{#if...}}
# After:  "start": "next start{{#if...}} --port

Step 4: Verify Generated Output

CRITICAL: Don't assume visual inspection is enough.

Test generation:

# Single repo mode (conditionals = false)
bunx create-faster test-single --stack nextjs

# Turborepo mode (conditionals = true)
bunx create-faster test-turbo --app web:nextjs --app api:hono

# Check generated files
cat test-single/package.json
cat test-turbo/apps/web/package.json

Verify:

• ✅ No trailing spaces in generated JSON
• ✅ Valid JSON syntax
• ✅ Proper indentation
• ✅ Conditionals work correctly

Tools:

# Check JSON validity
cat package.json | jq .

# Check for trailing spaces
grep ' $' package.json

# Visual diff
diff expected.json actual.json

Step 5: Document Patterns

After fixing, document the pattern for future:

Create/update template guidelines:

## Template Spacing Rules

1. **Conditional spacing:** Space goes INSIDE conditional
   - ✅ `"cmd": "tool{{#if condition}} --flag{{/if}}"`
   - ❌ `"cmd": "tool {{#if condition}}--flag{{/if}}"`

2. **No double spaces in conditions**
   - ✅ `{{#if (condition)}}`
   - ❌ `{{#if  (condition)}}`

3. **Indentation:** 2 spaces, match surrounding code

Common Fix Patterns

Pattern: Script Commands with Ports

Before:

"dev": "vite dev {{#if (eq repo "turborepo")}}--port {{appPort appName}}{{/if}}",

After:

"dev": "vite dev{{#if (eq repo "turborepo")}} --port {{appPort appName}}{{/if}}",

Applied to: All package.json templates with port conditionals.

Pattern: Module Conditionals

Before:

{{#if  (hasModule "shadcn")}}

After:

{{#if (hasModule "shadcn")}}

Applied to: All module conditionals.

Pattern: JSX Inline Conditionals

Problem:

<View {{#if (hasModule "nativewind")}}className='...'{{/if}}>

When condition is false, renders:

<View >  // ← trailing space!

Fix:

<View{{#if (hasModule "nativewind")}} className='...'{{/if}}>

Space moved INSIDE conditional before className.

Applied to: All Expo/React Native templates with conditional className props.

Pattern: Tabs vs Spaces

Problem:

{
	"extends": "@repo/config/ts/base.json",  // ← tab instead of spaces
}

Fix:

{
  "extends": "@repo/config/ts/base.json",  // ← 2 spaces
}

Standard: Always use 2 spaces for indentation in all files (JSON, TypeScript, JSX, etc.).

Grep command: grep -rPn '\t' . --include="*.hbs"

Applied to: All template files.

Pattern: Nested Conditionals

Before:

{{#if outer}}
{{#if inner}}
  content
{{/if}}
  {{/if}}

After:

{{#if outer}}
  {{#if inner}}
    content
  {{/if}}
{{/if}}

Consistent 2-space indentation.

Checklist - Complete Audit Required

• Searched for trailing space patterns across ALL templates
• Counted total occurrences (know the scope)
• Grouped issues by pattern type
• Fixed one pattern type across all files
• Repeated for each pattern type
• Generated test projects (single + turborepo modes)
• Verified NO trailing spaces in generated files
• Checked JSON validity with jq
• Documented patterns for future reference
• No visual-only inspection (must test generation)

Common Rationalizations - STOP

Red Flags - You're About to Fail

STOP immediately if you think:

• "Just this one fix is enough"
• "I can see it's fine in the template"
• "grep is overkill for this"
• "I'll check other files later"
• "Testing generation takes too long"

These thoughts = baseline failure pattern (fixed 1, missed 104).

Quick Reference - Common Greps

# Trailing spaces before conditionals (most common)
grep -rn ' {{#if' templates/

# Double spaces in conditions
grep -rn '{{#if  ' templates/

# JSX elements with inline conditionals (potential trailing spaces)
grep -rn '<[A-Z][a-zA-Z]* {{#if' templates/

# All trailing spaces
grep -rn ' $' templates/

# Tabs (should be spaces)
grep -rPn '\t' templates/

# Multiple blank lines
grep -rPn '\n\n\n+' templates/

Real-World Impact

Without this skill (baseline):

• 2 minutes → fixed 1 instance
• Missed 104 similar issues
• No verification
• No pattern documentation

With this skill:

• 15-20 minutes → fixed all 107 instances
• Verified with generation
• Patterns documented
• Future issues prevented

10x more issues fixed, permanently solved.

Example: The Original Problem

Pelavo reported: "espace après 'start' si on a pas de turborepo"

Without skill: Fix line 29, miss lines 26, 30, and 104 others With skill: Grep finds 107, fix all systematically, verify generation

This is why systematic audits matter.

Session: 2025-12-30 Template Cleanup

Systematic fix of all template formatting issues following this skill:

Issues Found & Fixed:

1. Pattern A: Trailing spaces in commands & JSX (18 instances)

   • Next.js package.json: 3 script commands (dev, start, start:inspect)
   • Next.js package.json: 1 double space in condition
   • Next.js next.config.ts: 1 trailing space after {{/if}}
   • Expo tsconfig.json: 1 trailing space in array
   • Expo app.config.ts: 2 trailing spaces (blank line, comment)
   • Expo JSX files: 7 inline conditionals (app-footer.tsx, _layout.tsx, index.tsx)

2. Pattern B: Double spaces in conditions (0 instances)

   • All clean after initial audit

3. Pattern C: Mixed tabs and spaces (18 instances)

   • turborepo package.json: 8 tabs in conditionals
   • shadcn components.json: 6 tabs in conditionals
   • Next.js not-found.tsx: 1 tab in JSX
   • turborepo tsconfig.json: 1 tab in JSON property
   • Next.js use-mobile.ts: 11 tabs in TypeScript code

Total Fixed: 36 formatting issues across 12 template files

Verification:

• ✅ grep -rn ' $' . --include="*.hbs" → 0 results
• ✅ grep -rPn '\t' . --include="*.hbs" → 0 results
• ✅ grep -rn '{{#if ' . --include="*.hbs" → 0 results

New Patterns Documented:

• JSX inline conditionals causing trailing spaces in React Native components
• Tabs in code content (not just template structure)
• Importance of checking actual code indentation, not just Handlebars syntax