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

Excuse	Reality
"I'll just fix this one file"	107 occurrences across 21 files. Systematic audit required.
"Visual inspection is enough"	Must test actual generation. Trailing spaces invisible.
"It's just spacing, not important"	Invalid JSON, broken scripts. Very important.
"I'll fix as I find them"	Reactive = missing 90%+ of issues. Proactive audit required.
"Too tedious to check all files"	grep does it in 2 seconds. No excuse.
"I know the pattern now"	Document it or you'll forget. Others won't know.

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