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

Feature	Micro-Frontend	Standalone
`.env.standalone`	✅ Create	❌ Skip
`single-spa-vue` dependency	✅ Include	❌ Skip
`serve` npm script	`npm-run-all --parallel build:watch dev lint:init:watch`	`vite serve --port {port} --mode standalone`
`VITE_LAUNCHER_APP_URL`	✅ Include	❌ Skip
`launcherAppUrl` in EnvConsts	✅ Export	❌ Skip
main.ts template	single-spa lifecycle	Simple mount
index.html mount	`#single-spa-application:...`	`#app`
Build format	`system` (SystemJS)	`es` (ES modules)
Router base	`/scoped-path`	`/` (typically)

Instructions

Step 1: Auto-Correct Inconsistent Configuration

javascript

// 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

javascript

// 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

javascript

// 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

javascript

// 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

javascript

// 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

javascript

// 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

javascript

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

code

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

•
Standalone + enable_single_spa = true
- •Auto-correct to enable_single_spa = false
- •Show warning to user
•
Micro-frontend + enable_single_spa = false
- •Auto-correct to enable_single_spa = true
- •Show warning to user

Consistency Checks

javascript

// 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

conditional-generation

Conditional File Generation Skill

Purpose

When to Use

Input Parameters

Key Differences: Standalone vs Micro-Frontend

Instructions

Step 1: Auto-Correct Inconsistent Configuration

Step 2: Determine Files to Generate

Step 3: Determine Dependencies to Include

Step 4: Determine Environment Variables to Include

Step 5: Select Appropriate Templates

Step 6: Configure Build Settings

Step 7: Display Conditional Generation Summary

Output

For Micro-Frontend Applications

For Standalone Applications

Decision Flow Diagram

Validation Rules

Auto-Correction Rules

Consistency Checks

Integration with Skills

Affects env-standalone Skill

Affects main-entry Skill

Affects env-constants Skill

Affects index-html Skill

Affects package-json Skill

Affects vite-config Skill

Related Skills

Testing Checklist