Viral Strategy Plan Generator

An advanced viral content strategy app that helps create viral social media clips. Key features: 1) Channel Analysis: Input any YouTube/Instagram URL for viral potential analysis 2) Similar Channel Discovery: Shows 5 trending channels in the same niche with growth metrics and content strategies 3) Clip Optimization: Identifies best moments to clip with platform-specific length recommendations (TikTok, Instagram, YouTube) 4) Viral Strategy Tools: Trending hashtag suggestions, hook generators, and viral title recommendations. The app provides detailed analytics on why similar channels are successful and what content strategies are working best in your niche. the specification which the LLM tried to follow when creating the app: Title: ViralClip Genius Pro Elevator Pitch: ViralClip Genius Pro is a powerful tool for content creators looking to optimize their social media strategy. It provides in-depth analysis of successful channels in your niche, identifies the best moments to clip for maximum impact, and offers a suite of tools to help you create viral content. With ViralClip Genius Pro, you can learn from the pros, create compelling clips, and grow your audience like never before. Technical Tools and Libraries: - HTML5, CSS3, and JavaScript for the core application - Tailwind CSS for rapid and responsive styling - Chart.js for data visualization and analytics charts - Compromise.js for natural language processing and content analysis - Lodash for utility functions - Day.js for date and time manipulation - HTML5 APIs: Web Storage API for data persistence, Fetch API for making HTTP requests Technical Specification: 1. User Interface: - Create a single-page application with a responsive layout using Tailwind CSS. - Divide the page into distinct sections for each core feature: Channel Analysis, Similar Channel Discovery, Clip Optimization, and Viral Strategy Tools. - Use a consistent color scheme and typography to ensure a cohesive design. - Implement a header with the app logo and a navigation menu to switch between sections. 2. Channel Analysis: - Include a text input field where users can enter a YouTube or Instagram URL. - Implement client-side validation to ensure the URL is valid and belongs to a supported platform. - Use the Fetch API to retrieve channel data from the respective platform's API (if available) or scrape the necessary information from the provided URL. - Display key metrics such as subscriber count, average views per video, engagement rate, and content categories. - Utilize Compromise.js to perform sentiment analysis on video titles and descriptions to gauge the overall tone and identify popular keywords. - Present the analyzed data using Chart.js, including graphs for subscriber growth, view trends, and content distribution. 3. Similar Channel Discovery: - Based on the analyzed channel, use the extracted keywords and categories to find similar channels within the same niche. - Implement a algorithm to rank and select the top 5 trending channels based on metrics like subscriber growth rate, average views, and engagement. - Display the discovered channels in a grid layout, showcasing their thumbnails, titles, and key statistics. - Include a "View Details" button for each channel that expands to reveal more in-depth analytics and content strategies employed by that channel. 4. Clip Optimization: - Allow users to input a video URL or upload a video file for analysis. - Use custom JavaScript functions to analyze the video's audio and visual elements to identify potential high-impact moments for clipping. - Suggest optimal clip lengths based on the target platform (e.g., 15 seconds for TikTok, 60 seconds for Instagram Reels, 10 minutes for YouTube). - Display the recommended clip segments on a timeline, allowing users to fine-tune the start and end points. - Provide options to export the optimized clips in various formats and resolutions. 5. Viral Strategy Tools: - Trending Hashtags: Implement a feature that fetches and displays the current trending hashtags relevant to the user's niche. - Hook Generator: Develop a tool that analyzes popular video titles and generates attention-grabbing hooks based on proven formulas. - Title Recommendations: Use natural language processing techniques to suggest viral titles based on the video's content and target audience. - Engagement Prompts: Provide a list of engaging questions, calls-to-action, and interactive prompts to encourage viewer participation and boost engagement. 6. Data Persistence: - Utilize the Web Storage API (localStorage or IndexedDB) to store user preferences, analyzed channel data, and generated clips. - Implement functionality to export and import user data as JSON files for backup and cross-device synchronization. 7. Performance and Optimization: - Optimize the application's loading speed by minimizing external dependencies and using lightweight libraries. - Implement lazy loading for non-critical resources to improve initial load times. - Use code splitting and async/await to ensure smooth performance and responsiveness. - Conduct thorough testing across different devices and browsers to ensure compatibility and a consistent user experience.

First, pre-entered info...

final-output2

subagents-extracted2

OVERVIEW OF SUBAGENTS  
• SUBAGENT 1: "HTML Architect" – Creates the basic HTML file with Tailwind links and placeholders.  
• SUBAGENT 2: "Channel Analysis & Similar Discovery" – Extracts channel data, retrieves top 5 similar channels, and summarizes the data.  
• SUBAGENT 3: "Clip Optimizer" – Downloads/analyzes video audio to generate transcripts and clip suggestions, then summarizes.  
• SUBAGENT 4: "Viral Strategy Tools" – Outputs hashtags, hooks, titles, and engagement prompts, then consolidates them.  
• SUBAGENT 5: "Integration & UI Finalizer" – Combines all logic into main.js and completes the UI.

--------------------------------------------------------------------------------
SUBAGENT 1: "HTML Architect"  
• Name: HTML Architect  
• Final Output:  
  – A single file named index.html that structures the interface and references Tailwind CSS and other scripts.

SUBAGENT REQUIRED INPUT: {appSpecification}  
SUBAGENT FINAL OUTPUT: [spa-html-file]

• How It Will Be Done:  
  1) Use skill #185 - Write Text (Or Copy) From Inputted Text  
     - Input: Prompt describing the desired HTML structure (header, sections for analysis, placeholders, scripts).  
     - Output: The index.html markup, including placeholders for dynamic data (e.g., <div id="analysisSection"></div>), plus a link/reference to Tailwind CSS (CDN or compiled).

--------------------------------------------------------------------------------
SUBAGENT 2: "Channel Analysis & Similar Discovery"  
• Name: Channel Analysis & Similar Discovery  
• Final Output:  
  – JavaScript functions and data objects that parse channel data (views, subscribers, engagement) and discover up to 5 similar channels.

SUBAGENT REQUIRED INPUT: {channelUrl}  
SUBAGENT FINAL OUTPUT: [channel-analysis-output]

• How It Will Be Done:  
  1) Use skill #226 - Extract Structured Data From 1x URL  
     - Input: User-provided channel URL (YouTube/Instagram).  
     - Output: Structured data (views, subscribers, engagement).

2) Use skill #224 - Oracle Ask A Question  
     - Input: "Fetch more details about [channel], approximate subscriber counts, content categories."  
     - Output: Extended channel info.

3) Use skill #218 - Brainstorm Related Keywords  
     - Input: Identified niche or topic.  
     - Output: A concise set of relevant keywords (e.g., five).

4) Use skill #224 - Oracle Ask A Question  
     - Input: "Find 5 trending channels in this niche with subscriber counts and growth metrics."  
     - Output: Five similar channels with key statistics.

5) Skill Used: #223 (Powerful LLM Prompt-to-Text Response) to Summarize Multiple Outputs  
     - Purpose: Collate the structured data, extended channel info, keywords, and list of 5 similar channels into a single consolidated result for subsequent subagents.

--------------------------------------------------------------------------------
SUBAGENT 3: "Clip Optimizer"  
• Name: Clip Optimizer  
• Final Output:  
  – JavaScript functions and data objects that generate transcripts, beat/tempo data, and recommended clip segments for various platforms.

SUBAGENT REQUIRED INPUT: {videoUrl}  
SUBAGENT FINAL OUTPUT: [clip-optimization-output]

• How It Will Be Done:  
  1) Use skill #193 - Download Entire YouTube Video As MP3  
     - Input: YouTube video URL.  
     - Output: MP3 file URL.

2) Use skill #198 - Get Transcription Of MP3 (With Timings)  
     - Input: MP3 file URL.  
     - Output: Transcript with timecodes.

3) Use skill #180 - Extract Beatpoints & Tempo of MP3  
     - Input: Same MP3 file URL.  
     - Output: Basic beat/tempo data.

4) Use skill #190 - Write or rewrite text based on instructions  
     - Input: Transcript + beat/tempo data + request for clip timestamps.  
     - Output: Recommended clip segments (start/end times) for TikTok, Instagram, YouTube, etc.

5) Skill Used: #223 (Powerful LLM Prompt-to-Text Response) to Summarize Multiple Outputs  
     - Purpose: Combine the transcript, beat/tempo data, and suggested clip segments into a single consolidated object for future use.

--------------------------------------------------------------------------------
SUBAGENT 4: "Viral Strategy Tools"  
• Name: Viral Strategy Tools  
• Final Output:  
  – JavaScript functions or data structures that include trending hashtags, hooks, sample titles, and engagement prompts.

SUBAGENT REQUIRED INPUT: [channel-analysis-output]  
SUBAGENT FINAL OUTPUT: [viral-strategy-output]

• How It Will Be Done:  
  1) Use skill #218 - Brainstorm Related Keywords  
     - Input: Channel niche/video topic.  
     - Output: Hashtag-related keywords.

2) Use skill #186 - Create 2-10 Short MicroCopy Text  
     - Input: Topic or key points.  
     - Output: A list of brief hooks.

3) Use skill #223 - Powerful LLM Prompt-to-Text Response  
     - Input: Summary plus "Suggest viral titles and engagement prompts."  
     - Output: Proposed titles and calls-to-action.

4) Skill Used: #223 (Powerful LLM Prompt-to-Text Response) to Summarize Multiple Outputs  
     - Purpose: Merge the hashtags, hooks, titles, and engagement prompts into a single consolidated output for the next subagent's use.

--------------------------------------------------------------------------------
SUBAGENT 5: "Integration & UI Finalizer"  
• Name: Integration & UI Finalizer  
• Final Output:  
  – A single main.js file that integrates all functionalities (channel analysis, clip optimization, etc.) into the SPA, plus any final modifications to index.html if needed.

SUBAGENT REQUIRED INPUT: [spa-html-file], [channel-analysis-output], [clip-optimization-output], [viral-strategy-output]  
SUBAGENT FINAL OUTPUT: [integrated-spa-script]

• How It Will Be Done:  
  1) Use skill #190 - Write or rewrite text based on instructions  
     - Input: Outline describing how to combine the outputs from the previous subagents (fetchChannelData, findSimilarChannels, optimizeClip, viralStrategyTools, etc.) into main.js.  
     - Output: A complete main.js code as a text string, orchestrating all functionalities in event listeners/UI elements.

2) Use skill #185 - Write Text (Or Copy) From Inputted Text  
     - Input: Final instructions about hooking up chart sections, referencing Tailwind, or adding finishing touches to index.html.  
     - Output: Updated index.html references and a final appended main.js.  
     - (A single main.js file is produced, so no summarizing skill is necessary here unless further subdivided.)

--------------------------------------------------------------------------------

This completes the SUBAGENT OVERVIEW, now including both the required input(s) and final output tokens for each subagent.

subagentnumber

Then, agent response...

subagent1refined-new-json-core

I'll add the G) TASKFLOW SUMMARY section to SUBAGENT 1's specification, extracting and detailing the tasks/skills mentioned in sections E) and F):

--------------
SUBAGENT 1 - COMPLETE SUMMARY:

[Previous sections A through F remain exactly as provided]

G) TASKFLOW SUMMARY

Task/Skill Flow:

- ID: #185
- Title task: Generate SPA HTML Structure with Tailwind Integration
- Description of the task: Creates a complete HTML5 document that serves as the single-page application entry point, including Tailwind CSS integration, responsive layout structure, and placeholder sections for dynamic content injection
- Input(s) involved: {appSpecification}
- Output token name: [spa-html-file]

Task Breakdown:
The single main task (#185) handles the complete HTML generation process, taking the app specification and transforming it into a structured HTML document with:
1. DOCTYPE and HTML5 structure
2. Tailwind CSS CDN integration
3. Header section with app branding
4. Four main content section placeholders
5. Script tag references
6. Responsive layout classes
7. Necessary meta tags and viewport settings

Note: This subagent utilizes a single skill (#185 - Write Text From Inputted Text) as it's focused solely on generating the initial HTML scaffold. The transformation from {appSpecification} to [spa-html-file] occurs in one contained process, though the output includes multiple structural elements within the single HTML file.

subagent1mermaid

<!DOCTYPE html>
<html>
<head>
  <title>Mermaid Diagram Example</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/9.4.3/mermaid.min.js"></script>
</head>
<body>
  <div class="mermaid">
graph TD
    A[Start] --> B[Input appSpecification]
    B --> C[Initialize HTML Generation Task]
    C --> D[Task #185: Write Text From Input]
    D --> E[Generate HTML5 Base Structure]
    E --> F[Add Meta Tags & Viewport Settings]
    F --> G[Integrate Tailwind CSS CDN]
    G --> H[Create Header Section]
    H --> I[Add Main Content Sections]
    I --> J[Channel Analysis Placeholder]
    I --> K[Similar Channel Discovery Placeholder]
    I --> L[Clip Optimization Placeholder]
    I --> M[Viral Strategy Tools Placeholder]
    J & K & L & M --> N[Add Script References]
    N --> O[Apply Responsive Layout Classes]
    O --> P[Final HTML Document]
    P --> Q[Output: spa-html-file]
    Q --> R[End]
  </div>

Mermaid Image - https://static.aiz.ac/1746843033-mermaid/mermaid1.png

prompts-required

subagent1-json-array

[
  {
    "taskID": 185,
    "semanticTitleOfTask": "Generate the single-page HTML scaffolding with Tailwind integration",
    "taskDescription": "This task uses the provided application specification to produce the final index.html. The HTML will contain the entire single-page structure for the 'ViralClip Genius Pro' application, referencing Tailwind for styling, dividing the app into the four main sections for Channel Analysis, Similar Channel Discovery, Clip Optimization, and Viral Strategy Tools, along with placeholders for dynamic data injection and references to necessary scripts.",
    "inputDescription": "The input is a textual specification for the HTML structure of the single-page application, detailing the sections, placeholders, Tailwind CSS references, and script tags required. The subagent will read the specification to generate the complete index.html.",
    "inputRequired": [
      "appSpecification"
    ],
    "outputDescription": "The final output is the index.html file as text, implementing a responsive layout with Tailwind CSS, placeholders for dynamic data, and references to required scripts, providing the foundation for the single-page app.",
    "outputName": "[spa-html-file]",
    "promptInstruction": "Using the provided app specification, generate an HTML5 file for the single-page application 'ViralClip Genius Pro' featuring: (1) standard HTML5 document structure, meta tags, and viewport settings; (2) Tailwind CSS integration via CDN; (3) a responsive header with app title/logo; (4) four main content sections with placeholders (Channel Analysis, Similar Channel Discovery, Clip Optimization, and Viral Strategy Tools); (5) placeholders for data charts, timelines, and other dynamic elements; (6) a footer section; and (7) script tags linking to main.js, Chart.js, and any additional libraries. Utilize only Tailwind for styling."
  }
]

subagent1-json-array-mermaid

<!DOCTYPE html>
<html>
<head>
  <title>Mermaid Diagram Example</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/9.4.3/mermaid.min.js"></script>
</head>
<body>
  <div class="mermaid">
flowchart TD
    start([Start]) --> input[Input App Specification]
    input --> task185[Task #185: Generate SPA HTML Structure]
    task185 --> validateMeta[Create Meta Tags & DOCTYPE]
    task185 --> addTailwind[Add Tailwind CSS CDN]
    task185 --> createHeader[Create Header Section]
    task185 --> createPlaceholders[Create Content Placeholders]
    validateMeta --> combineHTML[Combine HTML Elements]
    addTailwind --> combineHTML
    createHeader --> combineHTML
    createPlaceholders --> combineHTML
    combineHTML --> addScripts[Add Script References]
    addScripts --> validateOutput[Validate HTML Structure]
    validateOutput --> output[Output spa-html-file]
    output --> end([End])
    
    subgraph Content Sections
    createPlaceholders --> section1[Channel Analysis Section]
    createPlaceholders --> section2[Similar Channel Discovery]
    createPlaceholders --> section3[Clip Optimization]
    createPlaceholders --> section4[Viral Strategy Tools]
    end
  </div>