What Shall We Build Next?

Describe

Describe your task

Refine

Refine the plan

SubAgents

Review all agents

Deploy

Deploy your agent

A) SUBAGENT SUMMARY  
"FrontEndBuilder" is responsible for generating the initial React folder structure (including pages, components, routing, and minimal CSS) for the TemuPro Article Generator web application.

B) FINAL TASK OUTPUT  
A complete set of React files (e.g. index.js, App.js, InputPage and ResultsPage, plus the small components like CategorySelector, TimeframeSelector, etc.) and minimal CSS files, all in text form, ready to be placed in a /src folder that can be built and deployed.

C) SUBAGENT INPUT  
1. High-level UI/UX requirements describing:  
   • Input Page Components: CategorySelector, TimeframeSelector, AdvancedFilters, StartButton  
   • Results Page Components: ProductList, ResearchResults, ArticlePreview, ExportControls  
   • Minimal CSS styling  
   • Basic routing requirements (React Router setup)  
2. Supplemental instructions regarding code style, inline documentation level, and any global layout preferences.

E) SUBAGENT TASK SUMMARY  
Below is the step-by-step flow showing exactly how this subagent would generate each file using Skill #223 (Powerful LLM Prompt-to-Text Response). The subagent’s final output is the complete frontend structure as text/code.

1) Generate index.js  
   • INPUT: Prompt specifying a minimal index.js file that renders <App /> and uses ReactDOM.  
   • ACTION: Use Skill #223 to produce the index.js code (text).  
   • OUTPUT: index.js code with root DOM render.

2) Generate App.js with Router Configuration  
   • INPUT: Prompt describing a basic React Router setup that navigates between “/” (Input Page) and “/results” (Results Page).  
   • ACTION: Use Skill #223 to produce App.js code (text).  
   • OUTPUT: App.js code including <BrowserRouter>, <Routes>, and <Route> definitions.

3) Generate InputPage.js  
   • INPUT: Prompt detailing structure of InputPage, containing CategorySelector, TimeframeSelector, AdvancedFilters, StartButton, and minimal layout.  
   • ACTION: Use Skill #223 to produce InputPage.js code (text).  
   • OUTPUT: InputPage.js code implementing these child components.

4) Generate ResultsPage.js  
   • INPUT: Prompt describing the ResultsPage layout with ProductList, ResearchResults, ArticlePreview, ExportControls, etc.  
   • ACTION: Use Skill #223 to produce ResultsPage.js code (text).  
   • OUTPUT: ResultsPage.js code to display and manage the data from the InputPage.

5) Generate Child Components (in /components folder)  
   a) CategorySelector.js  
   b) TimeframeSelector.js  
   c) AdvancedFilters.js  
   d) StartButton.js  
   e) ProductList.js  
   f) ResearchResults.js  
   g) ArticlePreview.js  
   h) ExportControls.js

• INPUT: Prompt describing each component’s fields, inline documentation, and minimal styling approach.  
   • ACTION: Use Skill #223 repeatedly—once per component—to create the JS/JSX code (text).  
   • OUTPUT: Separate JS files for each component with default exports.

6) Generate Minimal CSS File(s)  
   • INPUT: Prompt specifying any global or component-level styling guidelines.  
   • ACTION: Use Skill #223 to produce either App.css or separate .css modules.  
   • OUTPUT: CSS file(s) with basic styling.

7) Compile Output  
   • The subagent compiles all generated text-based outputs (index.js, App.js, InputPage.js, ResultsPage.js, component JS files, CSS files) into a single code bundle.  
   • SUBAGENT FINAL OUTPUT: [react-frontend-structure] (a zip or Git repo folder structure with the generated code).

F) SILOS  
• Silo 1: Core Setup & Router (Steps 1-2)  
• Silo 2: Page Creation (Steps 3-4)  
• Silo 3: Component Files (Step 5)  
• Silo 4: Minimal Styling (Step 6)  
• Silo 5: Final Packaging (Step 7)

SubAgent #1 - Diagram

Expand Diagram

A) SUBAGENT SUMMARY  
This subagent (“ServicesIntegrator”) generates five JavaScript service files, each containing placeholder or minimal implementation code for Apify, YouTube, Google Custom Search, OpenAI GPT-4, and Firebase configuration.

B) FINAL TASK OUTPUT  
A “/services” folder containing the following files:  
• apify-service.js  
• youtube-service.js  
• google-search-service.js  
• openai-service.js  
• firebase-config.js

C) SUBAGENT INPUT  
The subagent requires:  
• High-level API requirements and instructions for each service (e.g., rate limiting, proxy rotation, usage patterns).  
• Credentials or placeholders for each service (like API keys).  
• Basic usage notes (what each service is supposed to do in the application).

E) SUBAGENT TASK SUMMARY  
1) Receive the subagent’s initial input (service requirements, placeholders, instructions).  
2) Use the powerful LLM (#223) five separate times to generate code for each service file:

a) Generate “apify-service.js” with placeholders for:  
      – ApifyClient usage.  
      – Rate limiting, proxy rotation stubs.  
      – Basic error handling approach.

b) Generate “youtube-service.js” with placeholders for:  
      – YouTube Data API calls (search by keyword, get video details, etc.).  
      – Error handling.

c) Generate “google-search-service.js” with placeholders for:  
      – Google Custom Search API calls (search by topic, advanced queries).  
      – Error handling.

d) Generate “openai-service.js” with placeholders for:  
      – GPT-4 calls (article generation, text completion).  
      – Error handling and rate limiting.

e) Generate “firebase-config.js” with placeholders for:  
      – Basic initialization of Firebase (API key, project ID).  
      – Comments for potential authentication setup.

3) Output the final “services-folder,” containing these five files.

F) SILOS  
Since each file is generated individually, the subagent breaks down into the following skill calls (all using skill #223 with different prompts):

• Silo 1: apify-service.js  
   – Prompt skill #223 with instructions to generate placeholder Apify code.

• Silo 2: youtube-service.js  
   – Prompt skill #223 with instructions to generate code for YouTube Data API.

• Silo 3: google-search-service.js  
   – Prompt skill #223 with instructions to generate code for Google Custom Search API.

• Silo 4: openai-service.js  
   – Prompt skill #223 with instructions to integrate GPT-4 calls.

• Silo 5: firebase-config.js  
   – Prompt skill #223 with instructions to create a simple Firebase config file.

Each of the five outputs is collected into the “services” folder. The final subagent output is a folder containing all five service files.

SubAgent #2 - Diagram

Expand Diagram

A) SUBAGENT SUMMARY:  
"CacheHandler" is responsible for generating and returning a “cache-service.js” file that provides setCache(key, data) and getCache(key) functionality using either local storage in the browser or a Redis-based approach on the server.

B) FINAL TASK OUTPUT:  
A single JavaScript file named "cache-service.js" containing:  
• Functions setCache(key, data) and getCache(key).  
• Comments and stubs for potentially extending to Redis/local storage.  
• Example usage demonstrating setting and retrieving cached data.

C) SUBAGENT INPUT:  
• Caching requirements (local storage, Redis, or both).  
• Optional instructions on how caching should be handled (e.g., TTL, advanced error handling).

E) SUBAGENT TASK SUMMARY:  
Below is the detailed sequence of steps for the CacheHandler subagent. The agent has access to the “Powerful LLM Prompt-to-Text Response” skill (#223) for generating any text-based or code-based material:

1) Receive Subagent Inputs  
   – Accept the caching requirements and usage details (e.g., local storage vs. Redis, desired function names, usage examples).

2) Generate cache-service.js Code (Skill #223)  
   – Invoke skill #223: “Powerful LLM Prompt-to-Text Response” with a custom prompt stating:  
       · Summary of requirements (local storage or Redis).  
       · Desired function signatures (setCache, getCache).  
       · Embedded usage examples and optional stubs.  
       · Proper documentation comments.  
   – The skill returns the complete text of the “cache-service.js” file.

3) Return Final Output  
   – Output the generated “cache-service.js” code text as the subagent’s final artifact.

F) SILOS:

• Silo 1: Input & Requirements Gathering  
   – Confirm which caching approach is needed (local storage, Redis, or both).  
   – Collect any optional constraints, such as TTL, fallback logic, or error-handling details.

• Silo 2: Code Generation & Documentation  
   – Call skill #223 with needed prompts to produce JavaScript code for “cache-service.js” (including comments/examples).  
   – Example prompt snippet to skill:  
      “Please generate a cache-service.js with setCache(key, data) and getCache(key). Include compatibility for both local storage (for front-end) and Redis (for Node.js). Provide inline documentation and stubs for expansion.”

• Silo 3: Final Output  
   – Assemble the response from skill #223 into a final piece of text code for “cache-service.js.”  
   – Return or save it to the repository so it can be integrated within the larger React application.

This completes the CacheHandler subagent, resulting in a fully generated “cache-service.js” file.

SubAgent #3 - Diagram

Expand Flow

A) SUBAGENT SUMMARY  
The “DeploymentPreparer” subagent will generate all configuration and documentation files needed to build and deploy the React project to Netlify, including a package.json, README.md, and optionally netlify.toml.

B) FINAL TASK OUTPUT  
The final output is a set of deployment configuration documents, typically returned as a [deployment-config] bundle containing:  
• package.json (with all project dependencies and scripts)  
• README.md (detailing setup, usage, and deployment steps)  
• Optional netlify.toml (for any custom Netlify config)

C) SUBAGENT INPUT  
• A list of the project dependencies and version requirements (e.g., React, Firebase, other libraries).  
• Build commands (e.g., “npm run build” or “yarn build”).  
• Instructions on how to deploy to Netlify (optional advanced config).

E) SUBAGENT TASK SUMMARY  
Below is a linear breakdown of how the “DeploymentPreparer” subagent completes its work using the available skills. The subagent’s purpose is to produce and return all deployment-related files.

1) Receive Input  
   – Input includes: dependencies (React, Firebase, @apollo/client, etc.), build commands (npm or yarn), Netlify deployment instructions, required Node version, and any environment variables references.

2) Generate package.json  
   SKILL USED: #223 (Powerful LLM Prompt-to-Text Response)  
   – Prompt: “Generate a valid JSON for package.json including these dependencies, version requirements, scripts (dev, build), and any additional config.”  
   – Output: A complete package.json (as text) that includes the correct dependencies, scripts, and any optional fields (e.g., engines).

3) Generate README.md  
   SKILL USED: #223 (Powerful LLM Prompt-to-Text Response)  
   – Prompt: “Create a detailed README.md describing project setup, usage instructions, build and deployment steps (especially Netlify), referencing the included scripts.”  
   – Output: README.md text.

4) (Conditional) Generate netlify.toml  
   SKILL USED: #223 (Powerful LLM Prompt-to-Text Response)  
   – Prompt: “Create a netlify.toml with [build] context, environment config, build command, publish directory, etc. if needed.”  
   – Output: netlify.toml text.

5) Subagent Final Output  
   – Collate package.json, README.md, and optional netlify.toml into a single deliverable (labeled as [deployment-config]), ready for consumption by the parent workflow.

F) SILOS  
Depending on the complexity of your deployment needs, you may treat each file generation (package.json, README.md, netlify.toml) as its own silo. For a simple project, you might combine them into a single skill call, but typically a separate skill call per file is clearer for maintenance and versioning.

• Silo 1: Generate package.json  
• Silo 2: Generate README.md  
• Silo 3: Generate netlify.toml (only if needed)

This completes the “DeploymentPreparer” subagent’s workflow.

4 Template & Links

Expand Flow

A) SUBAGENT SUMMARY  
This subagent (“Testing & Quality Assurance”) is responsible for generating and organizing the test suite (unit tests, integration tests, and basic end-to-end test stubs) to ensure the React application (and its associated services) function correctly prior to deployment.

B) FINAL TASK OUTPUT  
• A folder (e.g., “/tests”) containing Jest (or preferred framework) test files for React components/services, plus any necessary configuration.  
• A brief README.md (or similar doc) describing how to run the tests (e.g., “npm run test”).

C) SUBAGENT INPUT  
• The finished or in-progress application codebase (from subagents #1, #2, #3, and #4), including:  
  – React front-end structure (pages/components).  
  – Service files (/services folder).  
  – Cache service file.  
  – Deployment configs (package.json, etc.).  
• Optional reference: instructions/requirements for test coverage or frameworks (e.g., Jest, React Testing Library, Cypress).

E) SUBAGENT TASK SUMMARY

Below is the step-by-step flow illustrating how this subagent will use the available skill(s). The only skill we need here is #223 (Powerful LLM Prompt-to-Text Response), which can generate the necessary test code from a given prompt:

1) Receive Codebase & Testing Requirements  
   – Subagent #5 is triggered once the partial or full application code (React components, services) is available, along with any developer instructions on coverage or test frameworks.

2) Generate Unit Tests for React Components (via Skill #223)  
   – INPUT to Skill #223:  
     Prompt that describes each of the main components (e.g., Input Page, Results Page, plus relevant subcomponents) and the testing approach or coverage goals.  
     Example prompt (simplified):  
       “Write Jest/React Testing Library test files for each React component: InputPage.test.js, ResultsPage.test.js, etc. Each test should validate rendering, handle user interaction or prop changes, and ensure snapshot consistency.”  
   – OUTPUT from Skill #223:  
     A series of test files in text form (e.g., InputPage.test.js, ResultsPage.test.js, etc.)  
   – Subagent #5 stores them into “/tests” or next to each component in “__tests__” folders, depending on best practice or preference.

3) Generate Unit Tests for Service Files (via Skill #223)  
   – INPUT to Skill #223:  
     Prompt describing the services (apify-service, youtube-service, google-search-service, openai-service, firebase-config) and the type of tests to cover:  
       “Write Jest test files covering typical function calls, error handling, and mocked external API responses.”  
   – OUTPUT from Skill #223:  
     JavaScript test files (e.g., apify-service.test.js, youtube-service.test.js, etc.) that mock external APIs, test error handling, confirm correct return shapes, etc.

4) Generate Basic Integration/E2E Test Stubs (via Skill #223)  
   – INPUT to Skill #223:  
     Prompt describing an E2E approach or a basic integration flow (e.g., using a library like Cypress or Playwright).  
       “Generate Cypress test specs to ensure the user can select category/timeframe on Input Page, submit, then receive data on Results Page, verifying that certain product results and article previews are displayed.”  
   – OUTPUT from Skill #223:  
     Example E2E specs (cypress/integration folder or “/tests/e2e”) in text form. Subagent #5 saves the output to the codebase.

5) Create Testing Documentation (via Skill #223)  
   – INPUT to Skill #223:  
     “Write a README section explaining how to install dependencies, run the tests, handle coverage, and interpret test results.”  
   – OUTPUT from Skill #223:  
     A short Markdown file or snippet appended to a global README.md (or separate TESTING.md) describing how to run and interpret the tests.

6) Final Output  
   – A “tests” folder (or distributed “.test.js” files) containing unit/integration test files.  
   – A short instructions document for developers.

F) SILOS

• Silo 1: Setup & Preparation  
  – Receive final or near-final code.  
  – Confirm choice of testing frameworks (Jest, React Testing Library, etc.).  
  – Collect any instructions on coverage thresholds or advanced mocking.

• Silo 2: Generate Tests for UI Components (Unit/Integration)  
  – Use Skill #223 to generate test files for the React components, ensuring rendering and user interaction are thoroughly tested.

• Silo 3: Generate Tests for Service Files (Unit Tests)  
  – Use Skill #223 to mock external API calls and confirm correct behaviors under success/error conditions.

• Silo 4: Basic E2E or Integration Coverage  
  – Use Skill #223 to produce a minimal Cypress or Playwright test suite verifying major user flows.

• Silo 5: Documentation & Output  
  – Use Skill #223 to produce a README or TESTING.md with instructions on test commands, coverage reporting, and future expansions.  
  – Final deliverable includes “tests” folder (or “.test.js” files), with a readme describing usage.

That completes the detailed flow for subagent #5 (Testing & Quality Assurance).

5 Template & Links

Expand Flow

A) SUBAGENT SUMMARY  
This subagent (we’ll call it “LegalComplianceManager”) is responsible for generating all legal and compliance texts required for the “TemuPro Article Generator” application, including Terms of Service, Disclaimers, and any other necessary policies to ensure user awareness and compliance with relevant regulations.

B) FINAL TASK OUTPUT  
A single Markdown file (for example, "LEGAL_COMPLIANCE.md") that contains:  
• Terms of Service (TOS)  
• Disclaimers for data usage, scraping policies, etc.  
• Copyright Notices  
• Data Usage & Privacy Policy  
• Brief instructions or snippet for robots.txt (if relevant)

This final file can then be included in the React project repo and surfaced as needed in a UI component (e.g., a modal or separate page).

C) SUBAGENT INPUT  
• A short description of the application’s legal/compliance needs (e.g., mention of needing TOS covering rate limiting, user data usage, disclaimers for scraping, disclaimers about content accuracy, etc.).  
• Any region-specific requirements (for example, GDPR references, or disclaimers about not storing personal data if relevant).  
• Any mention of third-party services that require disclaimers (YouTube Data API terms, Apify usage policy, GPT-4 usage disclaimers, etc.).

E) SUBAGENT TASK SUMMARY  
Below is the detailed flow of how “LegalComplianceManager” will produce the final Markdown file, step by step:

1) Receive subagent input (the legal/compliance requirements).  
2) Generate Terms of Service text  
   - Use skill #223 (Powerful LLM Prompt-to-Text Response) to create the TOS.  
   - Input: A prompt describing the required TOS coverage (e.g., usage of APIs, disclaimers for user responsibilities, usage restrictions, disclaimers on article accuracy, acceptance of rate limits, etc.).  
   - Output: TOS text.

3) Generate Disclaimers text  
   - Use skill #223 again to create disclaimers covering data usage, scraping compliance, disclaimers for content accuracy, and any other disclaimers needed for third-party API usage.  
   - Input: A prompt describing all disclaimers that must be included.  
   - Output: Disclaimers text.

4) Generate Copyright Notices & Data Usage Policy  
   - Still with skill #223, generate a section that covers any relevant copyright information (for articles generated by GPT-4, usage of YouTube content, or any external data).  
   - Include a data usage policy clarifying how user input or stored data is managed (especially if Firebase is used).  
   - Input: A prompt describing these requirements.  
   - Output: Copyright notice & data usage policy text.

5) (Optional) robots.txt snippet or explanation  
   - Use skill #223 to generate a short snippet or instructions that could be used to set up robots.txt compliance, if the site needs to restrict crawling for certain pages or disclaimers related to automated scraping.  
   - Input: Prompt describing the basic rules for robots.txt the user wants.  
   - Output: Example robots.txt snippet (or a short explanation of how to set it up).

6) Combine all text into one Markdown file  
   - Consolidate TOS, disclaimers, copyright policy, data usage policy, and optionally the robots.txt snippet into a single Markdown file named “LEGAL_COMPLIANCE.md”. This file can then be included in the code bundle or placed in a /legal folder.

7) Output the final “LEGAL_COMPLIANCE.md” text as the subagent’s final output.

F) SILOS  
Below is the siloed breakdown of each main step for clarity:

• SILO 1: Terms of Service  
   Subagent Input -> skill #223 -> TOS text

• SILO 2: Disclaimers  
   Subagent Input -> skill #223 -> Disclaimers text

• SILO 3: Copyright & Data Usage Policy  
   Subagent Input -> skill #223 -> Copyright & Data Usage text

• SILO 4: robots.txt Guidance  
   Subagent Input -> skill #223 -> Snippet / Explanation

• SILO 5: Consolidate All Legal Text  
   Combine results from the above silos into “LEGAL_COMPLIANCE.md” -> Final Output

This completes the subagent workflow for generating the legal and compliance documentation.