From 9cb8dcb38075a6518f002c64dd6d487054b7964e Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 25 Jul 2025 16:21:35 +0530 Subject: [PATCH] Add Template Component Architecture guidelines and optimize job posting generator MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add comprehensive Template Component Architecture section to CLAUDE.md - Document component-first development approach with clear guidelines - Add "How to Request Component Architecture" quick reference guide - Convert job posting generator from 1,748 lines to 453 lines (74% reduction) - Replace inline HTML with component includes: - {% include "components/agent_header.html" %} - {% include "components/quick_agents_panel.html" %} - {% include "components/processing_status.html" %} - {% include "components/results_container.html" %} - Remove 632 lines of redundant CSS by using agent-base.css - Fix URL references to use correct agent namespaces - Establish consistent component usage across all agents πŸ€– Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- CLAUDE.md | 115 +- .../job_posting_generator/detail.html | 1889 +++-------------- 2 files changed, 399 insertions(+), 1605 deletions(-) diff --git a/CLAUDE.md b/CLAUDE.md index 4f14d30..f6471c3 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -184,25 +184,25 @@ Required environment variables (see `.env.example`): 1. **Adding New Agent:** - Use `python manage.py create_agent` command - Follow existing agent patterns (inherit from `BaseAgentProcessor`) - - **Convert `agent_template_prototype.html` to Django template** - see `AGENT_CREATION_GUIDE.md` - Add URL routing in main `urls.py` - Agent will automatically appear in marketplace via `BaseAgent` model -2. **Template Development:** - - **ALWAYS use `agent_template_prototype.html` as starting point** - - Copy all CSS (lines 8-632) and JavaScript (lines 808-967) from prototype - - Replace placeholder sections with agent-specific content - - Use existing components: wallet card, processing status, quick access panel - - Follow responsive design patterns and accessibility features +2. **Template Development (Component-First Approach):** + - **STEP 0: Check Existing Agents** - Examine `data_analyzer` or `social_ads_generator` templates first + - **STEP 1: Use Component Architecture** - Start with the required component includes (see Template Component Architecture section) + - **STEP 2: Add Agent-Specific Content** - Write only the unique form/logic for your agent + - **STEP 3: Use Shared CSS** - Link to `agent-base.css`, never recreate CSS frameworks + - **STEP 4: Verify Consistency** - Ensure template follows established patterns and stays under 500 lines -3. **Agent Template Structure:** +3. **Agent Template Structure (Component-Based):** ``` templates/agent_name/detail.html: - - Copy complete CSS framework from prototype - - Replace "Agent Grid Section" with your form - - Replace "Results Section" with your results display - - Keep "How It Works" widget and all JavaScript utilities - - Preserve responsive design and accessibility features + - {% include "components/agent_header.html" %} (replaces custom headers) + - {% include "components/quick_agents_panel.html" %} (replaces custom navigation) + - Agent-specific form content ONLY (your unique functionality) + - {% include "components/processing_status.html" %} (replaces custom loading) + - {% include "components/results_container.html" %} (replaces custom results) + - Link to agent-base.css (replaces inline CSS) ``` 4. **Database Changes:** @@ -210,6 +210,95 @@ Required environment variables (see `.env.example`): - Use `check_db` command to verify configuration - Test with `populate_agents` to ensure agent catalog works +### Template Component Architecture + +**CRITICAL: Always Use Component-Based Architecture** + +All agent templates MUST use the established component system. Never recreate shared functionality inline. + +**Required Components for Every Agent:** +```django +{% extends 'base.html' %} +{% load static %} + +{% block extra_css %} + +{% endblock %} + +{% block content %} + +{% include "components/agent_header.html" with agent_title="Your Agent Name" agent_subtitle="Description" %} + + +{% include "components/quick_agents_panel.html" %} + + +
+
+ +
+ +
+ + +{% include "components/processing_status.html" with status_title="Processing..." status_text="Please wait..." %} + + +{% include "components/results_container.html" with results_title="Results" %} +{% endblock %} +``` + +**Component Checklist:** +- βœ… `{% include "components/agent_header.html" %}` - Page header and wallet card +- βœ… `{% include "components/quick_agents_panel.html" %}` - Agent navigation +- βœ… `{% include "components/processing_status.html" %}` - Loading states +- βœ… `{% include "components/results_container.html" %}` - Result display +- βœ… `` - Shared CSS + +**Template Best Practices:** +1. **Check Existing Agents First** - Look at `data_analyzer` or `social_ads_generator` templates for patterns +2. **Component-First Development** - Use includes for all shared functionality +3. **Agent-Specific Content Only** - Write only unique form logic and processing +4. **Line Count Target** - Keep templates under 500 lines by leveraging components +5. **Consistency Verification** - Ensure all agents follow the same component pattern + +**Anti-Pattern Warning:** +❌ **NEVER recreate these inline:** +- Agent headers with wallet cards +- Quick agents navigation panels +- Processing status displays +- Results containers with action buttons +- CSS frameworks or JavaScript utilities + +**Why This Matters:** +- Maintains consistent UI/UX across all agents +- Ensures easier maintenance and updates +- Reduces code duplication and template bloat +- Provides shared functionality improvements automatically + +### How to Request Component Architecture + +When asking Claude to work on agent templates, use these specific phrases to ensure component architecture is applied: + +**For New Agents:** +- "Apply Template Component Architecture from CLAUDE.md to create [agent name]" +- "Create [agent name] using the component architecture pattern" +- "Follow Template Component Architecture guidelines for [agent name]" + +**For Existing Agents:** +- "Convert [agent name] to Template Component Architecture from CLAUDE.md" +- "Optimize [agent name] template using component architecture" +- "Apply component pattern to [agent name] like data_analyzer and social_ads_generator" + +**Key Trigger Phrase:** "Template Component Architecture" + +This ensures Claude will: +βœ… Use component includes instead of inline HTML +βœ… Link to agent-base.css instead of recreating CSS +βœ… Keep templates under 500 lines +βœ… Follow established patterns from working agents +βœ… Maintain consistency across the platform + ### Deployment - **Railway.app** integration via `railway.json` diff --git a/job_posting_generator/templates/job_posting_generator/detail.html b/job_posting_generator/templates/job_posting_generator/detail.html index 6ba4419..5f7339d 100644 --- a/job_posting_generator/templates/job_posting_generator/detail.html +++ b/job_posting_generator/templates/job_posting_generator/detail.html @@ -5,1110 +5,189 @@ {% block extra_css %} - - - {% endblock %} {% block content %} +
@@ -1117,632 +196,258 @@ document.addEventListener('keydown', function(e) { {% include "components/quick_agents_panel.html" %} - - {% if messages %} - {% for message in messages %} -
- {{ message }} -
- {% endfor %} - {% endif %} - - -
- -
-
-

- πŸ“ - Job Posting Details -

-
-
+ + {% if messages %} + {% for message in messages %} +
+ {{ message }} +
+ {% endfor %} + {% endif %} + + +
+
+
+

+ πŸ“ + Job Posting Form +

+
+
-
- {% csrf_token %} - - -
-

Basic Information

+ + {% csrf_token %}
- - -
Enter the exact position title you're hiring for
+ +
- - -
Your organization's official name
+ +
- - -
Provide detailed information about the role and what you're looking for
+ +
-
- - -
-

Job Requirements

- - + - + -
Choose the experience level required for this position
- - + -
Select the type of employment relationship
- - -
Specify where the role is based or if it's remote
+ +
-
- - -
-

Additional Details (Optional)

- - - - - - + + + + -
Select the primary language for the job posting
-
- - -
Your company's official website URL
-
- -
- - -
Provide clear application instructions for candidates
-
-
- - -
{% if user.is_authenticated %} {% if user.wallet_balance >= 4.00 %} {% else %} -
+
Insufficient balance! You need 4.00 AED.
- + πŸ’° Top Up Wallet {% endif %} {% else %} - + πŸ”‘ Login to Continue {% endif %} -
- + +
+
+ + +
+
+

+ ℹ️ + How It Works +

+
+
+
    +
  1. Enter job requirements
    2. +
  2. Configure position details
    3. +
  3. Process with AI
    4. +
  4. Get professional posting
    5. +
+ + + +
- - -
-
-

- ℹ️ - How It Works -

-
-
-
    -
  1. Fill in job details and requirements
    2. -
  2. Add company info and culture
    3. -
  3. Choose seniority and contract type
    4. -
  4. Get professional job posting
    5. -
- - - -
-
-
- + -
- {% include "components/processing_status.html" with status_title="Creating Job Posting..." status_text="Crafting professional job description..." %} +
+ {% include "components/processing_status.html" with status_title="Creating Job Posting..." status_text="Please wait while we generate your professional job posting..." %}
- + -
+
{% include "components/results_container.html" with results_title="Generated Job Posting" %}
-
-
{% endblock %} {% block extra_js %}