Houtini-lm

Instructions

Implementation Reference

• src/prompts/generate/wordpress-theme-from-static.ts:29-33 (registration)

  Plugin class definition and registration with tool name 'wordpress_theme_from_static' and description.
  export class WordPressThemeFromStaticGenerator extends BasePlugin implements IPromptPlugin { name = 'wordpress_theme_from_static'; category = 'generate' as const; description = 'Convert static HTML/CSS/JS sites into fully functional WordPress themes with smart template detection';
• src/prompts/generate/wordpress-theme-from-static.ts:35-157 (schema)

  Input parameter schema defining all options for static site to WordPress theme conversion, including URLs, files, theme settings, and features.
  parameters = { // Static site source parameters urls: { type: 'array' as const, description: 'Array of URLs to analyze for theme conversion (e.g., home, blog, about pages)', required: false, items: { type: 'string' as const } }, url: { type: 'string' as const, description: 'Single URL to analyze for theme conversion', required: false }, // WordPress theme parameters themeName: { type: 'string' as const, description: 'WordPress theme name', required: false, default: 'Custom Static Theme' }, themeDescription: { type: 'string' as const, description: 'Theme description', required: false, default: 'WordPress theme generated from static site' }, themeAuthor: { type: 'string' as const, description: 'Theme author name', required: false, default: 'Theme Generator' }, themeVersion: { type: 'string' as const, description: 'Theme version', required: false, default: '1.0.0' }, // Template compatibility parameters code: { type: 'string' as const, description: 'HTML content to convert (for single-file analysis)', required: false }, filePath: { type: 'string' as const, description: 'Path to HTML file to convert', required: false }, projectPath: { type: 'string' as const, description: 'Path to static site directory (for multi-file analysis)', required: false }, files: { type: 'array' as const, description: 'Array of specific static site files to analyze', required: false, items: { type: 'string' as const } }, maxDepth: { type: 'number' as const, description: 'Maximum directory depth for static site discovery (1-5)', required: false, default: 3 }, // Theme generation options includeGutenberg: { type: 'boolean' as const, description: 'Include Gutenberg block support', required: false, default: true }, includeWooCommerce: { type: 'boolean' as const, description: 'Include WooCommerce template support', required: false, default: false }, includeCustomizer: { type: 'boolean' as const, description: 'Include WordPress Customizer options', required: false, default: true }, includeMenus: { type: 'boolean' as const, description: 'Include dynamic WordPress menus', required: false, default: true }, includeSidebars: { type: 'boolean' as const, description: 'Include WordPress sidebar/widget areas', required: false, default: true }, // Universal parameters language: { type: 'string' as const, description: 'Primary language (HTML/PHP for WordPress themes)', required: false, default: 'html' }, analysisDepth: { type: 'string' as const, description: 'Level of analysis detail for theme conversion', enum: ['basic', 'detailed', 'comprehensive'], default: 'comprehensive', required: false }, analysisType: { type: 'string' as const, description: 'Type of theme conversion to perform', enum: ['simple', 'responsive', 'comprehensive'], default: 'comprehensive', required: false } };
• src/prompts/generate/wordpress-theme-from-static.ts:167-190 (handler)

  Main execute handler: detects single/multi-file mode, validates params, sets up LLM model, routes to appropriate analysis, handles errors.
  async execute(params: any, llmClient: any) { return await withSecurity(this, params, llmClient, async (secureParams) => { try { // 1. Auto-detect analysis mode based on parameters const analysisMode = this.detectAnalysisMode(secureParams); // 2. Validate parameters based on detected mode this.validateParameters(secureParams, analysisMode); // 3. Setup model const { model, contextLength } = await ModelSetup.getReadyModel(llmClient); // 4. Route to appropriate analysis method if (analysisMode === 'single-file') { return await this.executeSingleFileAnalysis(secureParams, model, contextLength); } else { return await this.executeMultiFileAnalysis(secureParams, model, contextLength); } } catch (error: any) { return ErrorHandler.createExecutionError('wordpress_theme_from_static', error); } }); }
• src/prompts/generate/wordpress-theme-from-static.ts:349-502 (helper)

  Helper generating comprehensive prompt stages for converting single static file/URL to full WordPress theme structure.
  private getSingleFilePromptStages(params: any): PromptStages { const { content, sourceUrl, analysisDepth, analysisType, themeName, themeDescription } = params; const systemAndContext = `You are an expert WordPress theme developer specializing in converting static sites to ${analysisDepth} ${analysisType} WordPress themes. WordPress Theme Development Expertise: - Static to Dynamic Conversion: Transform HTML/CSS/JS into PHP template hierarchy - WordPress Standards: Follow WordPress Theme Review Guidelines and coding standards - Template Hierarchy: Master WordPress template hierarchy (index, home, single, page, archive, etc.) - Dynamic Content Integration: Replace static content with WordPress functions and loops - Responsive Design: Maintain original responsiveness while adding WordPress functionality - Performance Optimization: Enqueue scripts/styles properly, optimize images, minimize HTTP requests - Accessibility: Maintain WCAG compliance throughout conversion process - Cross-browser Compatibility: Ensure theme works across all major browsers - SEO Best Practices: Implement proper meta tags, structured data, and SEO-friendly markup Conversion Context: - Analysis Depth: ${analysisDepth} - Theme Complexity: ${analysisType} - Source Type: ${sourceUrl ? 'URL-based conversion' : 'File-based conversion'} - WordPress Features: Gutenberg ${params.includeGutenberg ? 'enabled' : 'disabled'}, WooCommerce ${params.includeWooCommerce ? 'enabled' : 'disabled'} Your task is to create a complete, professional WordPress theme that preserves the original design while adding full WordPress functionality.`; const dataPayload = `Static Site Conversion Requirements: **Theme Details:** - Theme Name: ${themeName || 'Custom Static Theme'} - Description: ${themeDescription || 'WordPress theme generated from static site'} - Author: ${params.themeAuthor || 'Theme Generator'} - Version: ${params.themeVersion || '1.0.0'} ${sourceUrl ? `- Source URL: ${sourceUrl}` : ''} **WordPress Features to Include:** - Gutenberg Block Editor Support: ${params.includeGutenberg !== false} - WooCommerce Template Support: ${params.includeWooCommerce || false} - WordPress Customizer Integration: ${params.includeCustomizer !== false} - Dynamic Navigation Menus: ${params.includeMenus !== false} - Sidebar/Widget Areas: ${params.includeSidebars !== false} **Static Site Content to Convert:** ${content ? ` HTML Content: \`\`\`html ${content} \`\`\` ` : ` Source URL: ${sourceUrl} Note: Analyze the provided URL to understand the site structure, design patterns, and styling approach. `} **Conversion Requirements:** - Preserve exact visual design and layout - Maintain responsive behavior and animations - Convert static navigation to WordPress menus - Transform static content areas into dynamic WordPress content - Implement proper WordPress template hierarchy - Add WordPress admin customization options`; const outputInstructions = `Generate a complete WordPress theme structure that perfectly replicates the static site design: ## Required WordPress Theme Structure: ### 1. Theme Root Files - **style.css**: Main stylesheet with proper WordPress theme header - **index.php**: Default template with WordPress loop - **functions.php**: Theme functions, enqueues, and WordPress feature support - **screenshot.png**: Theme screenshot (1200x900px description) ### 2. Template Hierarchy Files Based on detected page types, include relevant templates: - **home.php** / **front-page.php**: Homepage template - **single.php**: Single post template - **page.php**: Static page template - **archive.php**: Archive pages template - **search.php**: Search results template - **404.php**: Error page template - **header.php**: Header template with WordPress head functions - **footer.php**: Footer template with WordPress footer functions - **sidebar.php**: Sidebar with widget areas (if applicable) ### 3. Asset Management - **js/**: JavaScript files with proper WordPress enqueuing - **css/**: Additional stylesheets organized by purpose - **images/**: Theme images and assets - **fonts/**: Custom fonts (if used) ### 4. WordPress Integration Features - **Template Parts**: Modular template components - **Custom Post Types**: If needed for content structure - **Customizer Options**: Theme customization panel - **Widget Areas**: Dynamic sidebar/footer widget areas - **Navigation Menus**: Dynamic menu locations ${params.includeGutenberg ? ` ### 5. Gutenberg Block Support - **blocks/**: Custom block styles and templates - **theme.json**: Global theme settings for block editor - **Block patterns**: Custom block patterns matching original design ` : ''} ${params.includeWooCommerce ? ` ### 6. WooCommerce Integration - **woocommerce/**: WooCommerce template overrides - **WooCommerce styling**: Product page styling matching theme design - **Cart/checkout**: Styled cart and checkout pages ` : ''} ## WordPress Standards Implementation: ### Theme Header Requirements (style.css): \`\`\`css /* Theme Name: ${themeName || 'Custom Static Theme'} Description: ${themeDescription || 'WordPress theme generated from static site'} Author: ${params.themeAuthor || 'Theme Generator'} Version: ${params.themeVersion || '1.0.0'} Requires at least: 6.0 Tested up to: 6.4 Requires PHP: 7.4 License: GPL v2 or later Text Domain: [theme-slug] Tags: responsive, custom-design, static-conversion */ \`\`\` ### Functions.php Requirements: - Proper theme setup with add_theme_support() - Script/style enqueuing with wp_enqueue_script/style() - Navigation menu registration - Widget area registration - Custom post type registration (if needed) - Theme customizer options - Gutenberg block support (if enabled) ### Template Requirements: - WordPress head/footer functions: wp_head(), wp_footer() - Proper WordPress loops with get_template_part() - Conditional template loading - Escape all output: esc_html(), esc_url(), esc_attr() - Internationalization: __(), _e(), _x() functions - WordPress body classes: body_class() ### Performance & SEO: - Optimized CSS/JS loading - Proper image handling with wp_get_attachment_image() - Meta tags and structured data - Page speed optimization - Mobile-first responsive design Provide complete, production-ready WordPress theme files that exactly replicate the original static site design while adding full WordPress functionality. Include detailed setup instructions and customization documentation.`; return { systemAndContext, dataPayload, outputInstructions }; }
• src/prompts/generate/wordpress-theme-from-static.ts:507-599 (helper)

  Helper generating prompt stages for multi-file/URL static site analysis and comprehensive WordPress theme creation.
  private getMultiFilePromptStages(params: any): PromptStages { const { analysisResult, analysisType, analysisDepth, sourceCount } = params; const systemAndContext = `You are an expert WordPress theme architect specializing in ${analysisDepth} ${analysisType} static site to WordPress conversions. Multi-Source WordPress Theme Conversion Context: - Analysis Type: ${analysisType} - Analysis Depth: ${analysisDepth} - Sources Analyzed: ${sourceCount} - Mode: Multi-Page/Multi-File WordPress Theme Generation Your task is to create a comprehensive WordPress theme that unifies multiple pages/sections while maintaining design consistency and adding full WordPress functionality.`; const dataPayload = `Multi-source static site analysis results: ${JSON.stringify(analysisResult, null, 2)}`; const outputInstructions = `Generate a comprehensive WordPress theme from multiple static sources: ## Multi-Source Theme Architecture: ### 1. Unified Design System Analysis - **Design Patterns**: Common elements across all analyzed sources - **Color Schemes**: Consistent color palette extraction - **Typography**: Font families and sizing scales used - **Layout Grids**: Responsive grid systems identified - **Component Library**: Reusable UI components found ### 2. Template Hierarchy Strategy Based on analyzed sources, create appropriate templates: - **Page Templates**: Custom templates for different page types found - **Content Variations**: Handle different content structures - **Layout Variations**: Multiple layout options for different sections - **Component Templates**: Reusable template parts ### 3. WordPress Theme Structure Generate complete theme with: - **Unified style.css**: Combining all CSS while maintaining organization - **Template files**: Appropriate templates for all page types discovered - **functions.php**: Comprehensive theme setup with all required features - **Asset organization**: Properly structured JS/CSS/image assets ### 4. Multi-Source Integration Features - **Content Type Detection**: Identify different content structures across sources - **Navigation Synthesis**: Combine navigation patterns into cohesive menu system - **Widget Area Strategy**: Determine optimal sidebar/widget placements - **Customizer Options**: Theme options covering variations found in sources ### 5. Cross-Page Consistency - **Design System**: Unified component system across all templates - **Performance**: Optimized asset loading for multi-template theme - **Accessibility**: Consistent accessibility implementation across all templates - **Responsive Behavior**: Unified responsive design strategy ## Multi-Source Conversion Output: { "themeOverview": { "detectedPageTypes": ["list of page types found"], "commonDesignElements": ["shared design patterns"], "uniqueFeatures": ["special features requiring custom implementation"], "recommendedTemplates": ["WordPress templates to create"] }, "unifiedDesignSystem": { "colorPalette": ["primary colors extracted"], "typography": ["font systems identified"], "componentLibrary": ["reusable components found"], "layoutSystems": ["grid and layout patterns"] }, "themeFiles": [ { "filename": "style.css", "purpose": "Main stylesheet with unified design system", "content": "Complete CSS code" }, { "filename": "index.php", "purpose": "Default template with WordPress loop", "content": "Complete PHP template code" } // ... additional theme files ], "implementationGuide": { "setupInstructions": ["step-by-step theme setup"], "customizationOptions": ["available theme customizer options"], "maintenanceNotes": ["ongoing maintenance considerations"] } } Provide a complete, unified WordPress theme that successfully combines all analyzed sources into a cohesive, professional theme with full WordPress functionality.`; return { systemAndContext, dataPayload, outputInstructions }; }