Conditional File Generation Skill

Purpose

Determine which files, dependencies, and environment variables to include based on the application type (standalone vs micro-frontend).

When to Use

Execute this skill after configuration is loaded and before file generation (Step 6 in AGENT_INSTRUCTIONS.md).

Input Parameters

From configuration:

• application_type

  - Either

  "standalone"

  or

  "micro-frontend"

• is_standalone

  - Boolean derived from application_type

• is_microfrontend

  - Boolean derived from application_type

• enable_single_spa

  - Boolean flag for single-spa integration

Key Differences: Standalone vs Micro-Frontend

.env.standalone

single-spa-vue

serve

npm-run-all --parallel build:watch dev lint:init:watch

vite serve --port {port} --mode standalone

VITE_LAUNCHER_APP_URL

launcherAppUrl

#single-spa-application:...

#app

system

es

/scoped-path

/

Instructions

Step 1: Auto-Correct Inconsistent Configuration

// Validate and auto-correct enable_single_spa for standalone apps
if (userConfig.is_standalone && userConfig.enable_single_spa) {
  console.warn('⚠️  Warning: Standalone apps typically do not use single-spa.');
  console.warn('   Auto-correcting: enable_single_spa = false\n');
  userConfig.enable_single_spa = false;
}

// Validate and ensure enable_single_spa is true for micro-frontends
if (userConfig.is_microfrontend && !userConfig.enable_single_spa) {
  console.warn('⚠️  Warning: Micro-frontend apps require single-spa.');
  console.warn('   Auto-correcting: enable_single_spa = true\n');
  userConfig.enable_single_spa = true;
}

Step 2: Determine Files to Generate

// Files that should ONLY be created for micro-frontend applications
const conditionalFiles = {
  '.env.standalone': userConfig.is_microfrontend
};

// Create a helper function
function shouldGenerateFile(filename) {
  if (filename in conditionalFiles) {
    return conditionalFiles[filename];
  }
  return true;  // Generate by default
}

Step 3: Determine Dependencies to Include

// Dependencies that should ONLY be included for micro-frontend applications
const conditionalDependencies = {
  'single-spa-vue': userConfig.is_microfrontend
};

// Create a helper function
function shouldIncludeDependency(dependencyName) {
  if (dependencyName in conditionalDependencies) {
    return conditionalDependencies[dependencyName];
  }
  return true;  // Include by default
}

Step 4: Determine Environment Variables to Include

// Environment variables that should ONLY be included for micro-frontend applications
const conditionalEnvVars = {
  'VITE_LAUNCHER_APP_URL': userConfig.is_microfrontend,
  'launcherAppUrl': userConfig.is_microfrontend  // For EnvConsts.ts
};

// Create a helper function
function shouldIncludeEnvVar(varName) {
  if (varName in conditionalEnvVars) {
    return conditionalEnvVars[varName];
  }
  return true;  // Include by default
}

Step 5: Select Appropriate Templates

// Determine which template to use for each file
const templates = {
  'main.ts': userConfig.is_microfrontend 
    ? 'main-microfrontend.ts' 
    : 'main-standalone.ts',
    
  'EnvConsts.ts': userConfig.is_microfrontend
    ? 'EnvConsts-microfrontend.ts'
    : 'EnvConsts-standalone.ts',
    
  'index.html': userConfig.is_microfrontend
    ? 'index-microfrontend.html'
    : 'index-standalone.html'
};

// Helper function
function getTemplate(filename) {
  return templates[filename] || filename;
}

Step 6: Configure Build Settings

// Set vite build format based on application type
userConfig.vite_build_format = userConfig.is_microfrontend ? 'system' : 'es';

// Set default router base based on application type
if (!userConfig.router_base_path) {
  userConfig.router_base_path = userConfig.is_microfrontend 
    ? `/${userConfig.application_name.replace('-web', '')}`
    : '/';
}

Step 7: Display Conditional Generation Summary

console.log('\n' + '─'.repeat(60));
console.log('  CONDITIONAL FILE GENERATION');
console.log('─'.repeat(60));
console.log(`Application Type:  ${userConfig.application_type}`);
console.log(`Build Format:      ${userConfig.vite_build_format}`);
console.log(`Single-SPA:        ${userConfig.enable_single_spa ? 'Enabled' : 'Disabled'}`);

if (userConfig.is_microfrontend) {
  console.log('\nMicro-Frontend Files:');
  console.log('  ✓ .env.standalone');
  console.log('  ✓ main.ts (single-spa lifecycle)');
  console.log('  ✓ EnvConsts.ts (with launcherAppUrl)');
  console.log('  ✓ Dependencies: single-spa-vue');
} else {
  console.log('\nStandalone App Files:');
  console.log('  ✗ .env.standalone (skipped)');
  console.log('  ✓ main.ts (simple mount)');
  console.log('  ✓ EnvConsts.ts (without launcherAppUrl)');
  console.log('  ✗ single-spa-vue (skipped)');
}

console.log('─'.repeat(60) + '\n');

Output

For Micro-Frontend Applications

Files Created:

• .env.standalone

  ✅

• main.ts

  (with single-spa lifecycle) ✅

• EnvConsts.ts

  (with launcherAppUrl) ✅

• index.html

  (with #single-spa-application:...) ✅

Dependencies Added:

• single-spa-vue

  ✅

Environment Variables:

• VITE_LAUNCHER_APP_URL

  ✅

Build Configuration:

• vite_build_format

  :

  "system"

For Standalone Applications

Files Created:

• .env.standalone

  ❌ (skipped)

• main.ts

  (simple mount) ✅

• EnvConsts.ts

  (without launcherAppUrl) ✅

• index.html

  (with #app) ✅

Dependencies Added:

• single-spa-vue

  ❌ (skipped)

Environment Variables:

• VITE_LAUNCHER_APP_URL

  ❌ (skipped)

Build Configuration:

• vite_build_format

  :

  "es"

Decision Flow Diagram

User sets application_type
    │
    ├─── "micro-frontend" ────┐
    │                         │
    │                         ▼
    │                   Create .env.standalone
    │                   Include single-spa-vue
    │                   Add VITE_LAUNCHER_APP_URL
    │                   Use main-microfrontend.ts
    │                   Export launcherAppUrl
    │                   Set enable_single_spa = true
    │                   Use #single-spa-application:... mount
    │                   Build format = "system"
    │
    └─── "standalone" ────────┐
                              │
                              ▼
                        Skip .env.standalone
                        Skip single-spa-vue
                        Skip VITE_LAUNCHER_APP_URL
                        Use main-standalone.ts
                        Skip launcherAppUrl
                        Set enable_single_spa = false
                        Use #app mount
                        Build format = "es"

Validation Rules

Auto-Correction Rules

1. Standalone + enable_single_spa = true

   • Auto-correct to

     enable_single_spa = false

   • Show warning to user

2. Micro-frontend + enable_single_spa = false

   • Auto-correct to

     enable_single_spa = true

   • Show warning to user

Consistency Checks

// Validate configuration consistency
function validateConditionalGeneration(config) {
  const issues = [];
  
  // Check 1: Standalone should not have single-spa
  if (config.is_standalone && config.enable_single_spa) {
    issues.push('Standalone apps should not use single-spa');
    config.enable_single_spa = false;  // Auto-fix
  }
  
  // Check 2: Micro-frontend requires single-spa
  if (config.is_microfrontend && !config.enable_single_spa) {
    issues.push('Micro-frontend apps require single-spa');
    config.enable_single_spa = true;  // Auto-fix
  }
  
  // Check 3: Build format matches app type
  if (config.is_microfrontend && config.vite_build_format !== 'system') {
    issues.push('Micro-frontend should use "system" build format');
    config.vite_build_format = 'system';  // Auto-fix
  }
  
  if (config.is_standalone && config.vite_build_format !== 'es') {
    issues.push('Standalone should use "es" build format');
    config.vite_build_format = 'es';  // Auto-fix
  }
  
  // Display issues and fixes
  if (issues.length > 0) {
    console.warn('\n⚠️  Configuration Auto-Corrections:');
    issues.forEach(issue => console.warn(`   - ${issue}`));
    console.warn('');
  }
  
  return config;
}

Integration with Skills

Affects env-standalone Skill

• Micro-frontend: Generate file
• Standalone: Skip file

Affects main-entry Skill

• Micro-frontend: Use template with single-spa lifecycle
• Standalone: Use template with simple mount

Affects env-constants Skill

• Micro-frontend: Include launcherAppUrl export
• Standalone: Exclude launcherAppUrl export

Affects index-html Skill

• Micro-frontend: Use

  #single-spa-application:{app-name}

  mount point
• Standalone: Use

  #app

  mount point

Affects package-json Skill

• Micro-frontend: Include single-spa-vue dependency
• Standalone: Exclude single-spa-vue dependency
• Micro-frontend:

  serve

  script =

  "npm-run-all --parallel build:watch dev lint:init:watch"

• Standalone:

  serve

  script =

  "vite serve --port {{default_port}} --mode standalone"

Affects vite-config Skill

• Micro-frontend: Set build.lib.formats = ['system']
• Standalone: Set build.lib.formats = ['es']

Related Skills

• configuration: Provides application_type and derived flags
• env-standalone: Conditionally generated file
• main-entry: Uses different templates
• env-constants: Uses different templates
• index-html: Uses different mount points
• package-json: Includes different dependencies
• vite-config: Uses different build formats

Testing Checklist

• Generate micro-frontend → Verify .env.standalone exists
• Generate standalone → Verify .env.standalone does NOT exist
• Check micro-frontend main.ts → Has single-spa lifecycle
• Check standalone main.ts → Simple createApp and mount
• Check micro-frontend EnvConsts.ts → Has launcherAppUrl
• Check standalone EnvConsts.ts → NO launcherAppUrl
• Check micro-frontend package.json → Has single-spa-vue
• Check standalone package.json → NO single-spa-vue
• Verify auto-correction when enable_single_spa conflicts with standalone
• Verify auto-correction when enable_single_spa missing for micro-frontend
• Check micro-frontend vite.config.ts → format: 'system'
• Check standalone vite.config.ts → format: 'es'