Custom-Engineered-Agents/README.md

<p align="center">
  <img src="https://img.shields.io/badge/Status-Active-success?style=for-the-badge">
  <img src="https://img.shields.io/badge/TRAE-Compatible-blue?style=for-the-badge">
  <img src="https://img.shields.io/badge/GLM_4.6-Powered-orange?style=for-the-badge">
</p>

<h1 align="center">🤖 Ultimate Custom Engineered AI Agents & More... </h1>
<h3 align="center">Uncapped tools Collection for Vibe Coders</h3>

<p align="center">
  <a href="#-quick-start">🚀 Quick Start</a> •
  <a href="#-available-agents">🎯 Agents</a> •
  <a href="#-ai-digest">📰 AI Digest</a> •
  <a href="#-boost-efficiency-with-solo--glm-46">💡 SOLO + GLM</a> •
  <a href="#%EF%B8%8F-glm-46-alternative-ide-options">🛠️ IDEs</a> •
  <a href="#%EF%B8%8F-virtual-machine-for-ai-coding-free---anywhere">☁️ Cloud VM</a> •
  <a href="#-awesome-mcps">🌟 MCPs</a> •
  <a href="#-developer-hacks">💡 Hacks</a> •
  <a href="#%EF%B8%8F-vibe-games">🕹️ Games</a>
</p>

---

## 📰 AI Digest: GLM-4.7 vs Claude 4.5 Opus & Sonnet

<p align="center">
  <img src="assets/vibe_coders_news_banner.svg" alt="GLM-4.7 vs Claude 4.5 Benchmarks 2025 - SOTA AI Agents" width="100%">
</p>

### 🚀 GLM-4.7: The New SOTA for Agentic Workflows

The latest **GLM-4.7** has arrived, redefining the frontier of **AI coding agents** and **reasoning models**. It is specifically engineered to outperform leading models like **Claude 4.5 Sonnet** and **Claude 4.5 Opus** in multi-step developer workflows.

#### ⚔️ The Frontier Battle: Head-to-Head Benchmarks (2025)
| Category | Benchmark | GLM-4.7 | Claude 4.5 | DeepSeek 3.2 | Gemini 3 Pro | Kimi | Codex 5.2 | Winner |
| :--- | :--- | :---: | :---: | :---: | :---: | :---: | :---: | :---: |
| **Math** | **AIME 25** | **95.7** | 88.5 | 92.4 | 90.2 | 94.0 | 85.0 | 🥇 **GLM-4.7** |
| **Coding** | **LiveCode** | **84.9** | 61.2 | 78.5 | 72.0 | 68.0 | 65.0 | 🥇 **GLM-4.7** |
| **Science** | **GPQA** | **85.7** | 84.1 | 82.5 | 83.0 | 81.0 | 79.0 | 🥇 **GLM-4.7** |
| **Logic** | **HLE** | **42.8** | 22.5 | 35.0 | 30.0 | 28.0 | 25.0 | 🥇 **GLM-4.7** |
| **API Cost** | **Price / 1M** | **$0.60** | $15.00 | $0.35 | $1.25 | $1.00 | $2.00 | 🥇 **GLM-4.7** |

<p align="center">
  <img src="assets/frontier_battle_2025.svg" alt="Frontier Models Battle 2025 - GLM-4.7 vs Claude 4.5 vs DeepSeek 3.2 vs Gemini 3 Pro vs Kimi vs Codex 5.2" width="100%">
</p>

#### 💡 Why GLM-4.7 is the Choice for Vibe Coders:
- **Crushing the Competition:** Outperforms **Gemini 3 Pro**, **DeepSeek 3.2**, and **Claude 4.5** in core reasoning and coding benchmarks.
- **Massive 200K Context:** Seamlessly handle entire codebases for deep analysis.
- **Deep Thinking Mode:** Forced systematic reasoning for high-complexity architectural tasks.
- **Extreme Value:** 25X cheaper than Claude 4.5 Opus with significantly higher performance.
- **Real-time Tool Streaming:** Optimized for **TRAE SOLO**, **Cline**, and **Roo Code** agents.

<p align="center">
  <a href="https://z.ai/subscribe?ic=R0K78RJKNW">
    <img src="assets/glm_discount_banner.svg" alt="GLM 4.7 Discount Code - 10% Off AI Coding" width="100%">
  </a>
</p>

### 🛠️ Quick Tutorial: Configure GLM-4.7 in TRAE SOLO

---

## 🚀 Quick Start

| Action | Link |
| :--- | :---: |
| 🎟️ **Get 10% Discount on GLM Models** | [**Discount invitation code**](https://z.ai/subscribe?ic=R0K78RJKNW) |
| 🎟️ **TRAE with GLM Explained** | [**GLM Model with SOLO and TRAE**](https://github.com/roman-ryzenadvanced/Custom-Engineered-Agents-and-Tools-for-Vibe-Coders#-boost-efficiency-with-solo--glm-46) |
| 📄 **GLM-4.6 Integration Guide (PDF)** | [**Download PDF**](./Adding_GLM_4.6_Model_to_TRAE__A_Visual_Guide__3_.pdf) |
| 🌐 **Explore TRAE Plans** | [**Start for Free**](https://www.trae.ai/s/WJtxyE) |

---

## 🎯 Latest Hackathon Participation

> **OffLogic** Game is the ultimate reflex challenge for developers and UI designers.
> An interactive experience that tests your coding speed, precision, and aesthetic preference.

📂 [**Source Code of OffLogic**](./vibecoding-games/OFFLOGIC_98_v3._classic_version.html)

---

## 🤖 Available Agents

> **⚠️ Smart Disclaimer:** While these specialized agents are engineered for optimized performance, they cannot guarantee 100% success in every coding scenario. **Always ensure you have a valid backup or git commit before proceeding with any agent operations.** We strongly recommend experimenting with each agent in a controlled setting to understand its specific capabilities before applying it to critical projects.

<table width="100%">
<!-- OPUS Series -->
<tr><td colspan="2"><h3>OPUS Series</h3></td></tr>
<tr>
<td width="50%" align="center">
<a href="https://s.trae.ai/a/c5a3e9"><img src="assets/claude_opus_4_5_wrap.svg" alt="Claude Opus 4.5 Wrap" width="100%"></a>
<br><sub>Development patterns of Claude Opus 4.5 (Variation 1)</sub>
<br><a href="https://s.trae.ai/a/c5a3e9"><strong>⚡ Install Agent</strong></a>
</td>
<td width="50%" align="center">
<a href="https://s.trae.ai/a/114be4"><img src="assets/opus_framework_4_5.svg" alt="OPUS FRAMEWORK 4.5" width="100%"></a>
<br><sub>Development patterns of Claude Opus 4.5 (Variation 2)</sub>
<br><a href="https://s.trae.ai/a/114be4"><strong>⚡ Install Agent</strong></a>
</td>
</tr>
<tr>
<td width="50%" align="center">
<a href="https://s.trae.ai/a/01708c"><img src="assets/opus_qa_engineer.svg" alt="OPUS QA ENGINEER" width="100%"></a>
<br><sub>Enhanced QA process based on Opus model</sub>
<br><a href="https://s.trae.ai/a/01708c"><strong>⚡ Install Agent</strong></a>
</td>
<td width="50%" align="center">
<a href="https://s.trae.ai/a/9e4f96?region=sg"><img src="assets/opus_4_5_emulation.svg" alt="Opus 4.5 EMULATION" width="100%"></a>
<br><sub>Opus 4.5 engineering patterns - focusing on production-grade code, systematic thinking, and clear communication.</sub>
<br><a href="https://s.trae.ai/a/9e4f96?region=sg"><strong>⚡ Install Agent</strong></a>
</td>
</tr>

<!-- Specialized Agents -->
<tr><td colspan="2"><h3>Specialized Agents</h3></td></tr>
<tr>
<td width="50%" align="center">
<a href="https://s.trae.ai/a/e6f8ae?region=sg"><img src="assets/cbt_rule_enforcer.svg" alt="CBT Rule Enforcer" width="100%"></a>
<br><sub><strong>CBT Rule Enforcer:</strong> Strict protocol for safe, auditable, and structured coding governance.</sub>
<br><a href="https://s.trae.ai/a/e6f8ae?region=sg"><strong>⚡ Install Agent</strong></a>
</td>
<td width="50%" align="center">
<a href="https://s.trae.ai/a/5835e5?region=sg"><img src="assets/autonomous_selector.svg" alt="Autonomous Selector" width="100%"></a>
<br><sub><strong>Autonomous Selector:</strong> Discover and select tools for end-to-end task execution without human interaction.</sub>
<br><a href="https://s.trae.ai/a/5835e5?region=sg"><strong>⚡ Install Agent</strong></a>
</td>
</tr>
<tr>
<td width="50%" align="center">
<a href="https://s.trae.ai/a/25f7a7"><img src="assets/kiro_trae_ultra_x.svg" alt="KIRO TRAE ULTRA X" width="100%"></a>
<br><sub>Amazon Kiro agent concepts</sub>
<br><a href="https://s.trae.ai/a/25f7a7"><strong>⚡ Install Agent</strong></a>
</td>
<td width="50%" align="center">
<a href="https://s.trae.ai/a/21498b?region=sg"><img src="assets/glm_mcps_enhanced.svg" alt="GLM MCPs Enhanced" width="100%"></a>
<br><sub><strong>GLM MCPs Enhanced:</strong> Design to handle Z.AI MCP services (Vision) for GLM models. <br><i>Credit: Tycen (TRAE Discord) for the base agent.</i></sub>
<br><a href="https://s.trae.ai/a/21498b?region=sg"><strong>⚡ Install Agent</strong></a>
</td>
</tr>
<tr>
<td width="50%" align="center">
<a href="https://s.trae.ai/a/a5ec8c"><img src="assets/pwa_generator.svg" alt="PWA Generator" width="100%"></a>
<br><sub>Transform web apps into PWAs</sub>
<br><a href="https://s.trae.ai/a/a5ec8c"><strong>⚡ Install Agent</strong></a>
</td>
<td width="50%" align="center">
<a href="https://s.trae.ai/a/8a1286"><img src="assets/loop_breaker.svg" alt="Loop Breaker" width="100%"></a>
<br><sub>Break infinite reasoning loops</sub>
<br><a href="https://s.trae.ai/a/8a1286"><strong>⚡ Install Agent</strong></a>
</td>
</tr>
<tr>
<td width="50%" align="center">
<a href="https://s.trae.ai/a/4c48cd"><img src="assets/apex_omni.svg" alt="Apex Omni" width="100%"></a>
<br><sub>Overclock for lower-end models</sub>
<br><a href="https://s.trae.ai/a/4c48cd"><strong>⚡ Install Agent</strong></a>
</td>
<td width="50%" align="center">
<a href="https://s.trae.ai/a/287cc3"><img src="assets/solo_apex.svg" alt="SOLO APEX" width="100%"></a>
<br><sub>Research-driven architect for AI VIBE coding & complex solutions</sub>
<br><a href="https://s.trae.ai/a/287cc3"><strong>⚡ Install Agent</strong></a>
</td>
</tr>
<tr>
<td width="50%" align="center">
<a href="https://s.trae.ai/a/223b13?region=sg"><img src="assets/flash_to_pro.svg" alt="Flash-to-Pro Cognitive Bridge" width="100%"></a>
<br><sub>🚀 System Upgrade: Flash-to-Pro Cognitive Bridge<br>Overclock lightweight models to simulate Pro-tier reasoning depth.</sub>
<br><a href="https://s.trae.ai/a/223b13?region=sg"><strong>⚡ Install Agent</strong></a>
</td>
<td width="50%" align="center">
<img src="assets/coming_soon.svg" alt="Coming Soon" width="100%">
<br><br><br>
</td>
</tr>

<!-- Defense Series -->
<tr><td colspan="2"><h3>Defense Series</h3></td></tr>
<tr>
<td width="50%" align="center">
<a href="https://s.trae.ai/a/0bfb9e"><img src="assets/amnesia_defense.svg" alt="Amnesia Defense" width="100%"></a>
<br><sub>Minimize AI "forgetting" to complete tasks</sub>
<br><a href="https://s.trae.ai/a/0bfb9e"><strong>⚡ Install Agent</strong></a>
</td>
<td width="50%" align="center">
<a href="https://s.trae.ai/a/3f7075"><img src="assets/anti_amnesia_v2.svg" alt="ANTI-AMNESIA v2" width="100%"></a>
<br><sub>Improved version to combat AI amnesia</sub>
<br><a href="https://s.trae.ai/a/3f7075"><strong>⚡ Install Agent</strong></a>
</td>
</tr>
<tr>
<td width="50%" align="center">
<a href="https://s.trae.ai/a/fe405e"><img src="assets/glm_code_conservator.svg" alt="GLM Code Conservator" width="100%"></a>
<br><sub>Attempt allowing GLM 4.7 model operate on an existing code of other models without breaking it.<br>Essential for non-greenfield projects where code preservation is key.</sub>
<br><a href="https://s.trae.ai/a/fe405e"><strong>⚡ Install Agent</strong></a>
</td>
<td width="50%" align="center">
<img src="assets/coming_soon.svg" alt="Coming Soon" width="100%">
<br><br><br>
</td>
</tr>
</table>

---

## 💡 Boost Efficiency with SOLO & GLM 4.7
🎟️ **Get 10% Discount on GLM Models** | [**Discount invitation code**](https://z.ai/subscribe?ic=R0K78RJKNW) 

<a href="https://www.trae.ai/s/WJtxyE">
  <img src="assets/trae_comparison_v2.svg" alt="TRAE Plans & Savings" width="100%">
</a>

Unlock the full potential of your development workflow by combining **TRAE's SOLO Agent** with the **GLM 4.7 model**.

| Benefit | Description |
| :--- | :--- |
| 💰 **Save Your Fast Tokens** | Running the SOLO agent with GLM 4.7 **does not consume your TRAE paid fast tokens**. |
| 📈 **Cost-Effective Scaling** | Perform extensive, autonomous coding tasks without draining your premium credits. |
| ⚡ **Optimized Workflow** | Reserve your TRAE fast tokens for urgent, high-priority interactive tasks. |

<p align="center">
  <a href="https://www.trae.ai/s/WJtxyE"><img src="https://img.shields.io/badge/Explore_TRAE_Plans-Start_for_Free-blue?style=for-the-badge"></a>
  <a href="https://z.ai/subscribe?ic=R0K78RJKNW"><img src="https://img.shields.io/badge/GLM_Models-10%25_Discount-orange?style=for-the-badge"></a>
</p>

---

## 🛠️ GLM 4.7 Alternative IDE Options

The GLM 4.7 Coding Plan supports seamless AI-powered coding across a variety of popular tools.

### Supported Clients & IDEs

| IDE | Link |
| :--- | :--- |
| Claude Code | [Documentation](https://docs.anthropic.com/en/docs/agents-and-tools/claude-code/overview) |
| Cline | [GitHub](https://github.com/cline/cline) |
| OpenCode | [GitHub](https://github.com/opencode-ai/opencode) |
| Roo Code | [GitHub](https://github.com/RooVetGit/Roo-Code) |
| Kilo Code | [Website](https://kilo.ai) |
| Crush | [GitHub](https://github.com/charmbracelet/crush) |
| Goose | [GitHub](https://github.com/block/goose) |

### ⚙️ Setup Instructions

1.  **Subscribe:** Get an active subscription to the [GLM 4.7 Coding Plan](https://z.ai/subscribe?ic=R0K78RJKNW).
2.  **Automatic Availability:** In most supported tools, GLM-4.7 becomes available automatically upon subscription.
3.  **Claude Code Configuration:** GLM-4.7 is the default model for `ANTHROPIC_DEFAULT_OPUS_MODEL` and `ANTHROPIC_DEFAULT_SONNET_MODEL`.

📚 For detailed documentation, visit the [Z.AI Developer Docs](https://docs.z.ai/devpack/overview).

---

## ☁️ Virtual Machine for AI Coding FREE - Anywhere

<a href="https://chat.z.ai/?ic=R0K78RJKNW">
  <img src="assets/vm_workstation_banner.svg" alt="Z.AI Full Stack Workstation" width="100%">
</a>

Full Stack Workstation is a **free AI tool** designed to transform your coding experience, suitable for small tasks.

| Feature | Description |
| :--- | :--- |
| 🌐 **Open Source GLM Models** | Powered by cutting-edge models, tailored for English and Chinese users. |
| 🧠 **Advanced Reasoning** | Supports complex reasoning and deep research tasks. |
| 💸 **Zero Cost** | A completely free, open-source alternative to paid AI assistants. |
| 📱 **Code Anywhere** | Code from anywhere, on any device, with zero setup. |

> ⚠️ **Note:** Best for small edits. Functionality is limited to one chat context window.

<p align="center">
  <a href="https://chat.z.ai/?ic=R0K78RJKNW"><img src="https://img.shields.io/badge/Launch_Workstation-Free-success?style=for-the-badge"></a>
</p>

---

## 🌟 Awesome MCPs

<img src="assets/mcps_banner.svg" alt="Awesome MCPs" width="100%">

### Vision MCP Server
**Visual Intelligence for Your IDE**

The **Vision MCP Server** brings GLM-4.5V's advanced visual capabilities directly into MCP-compatible clients like Claude Code and Cline.

| Feature | Description |
| :--- | :--- |
| 🖼️ **Image Analysis** | Analyze and interpret various image formats. |
| 🎬 **Video Understanding** | Gain insights from local and remote videos. |
| 🔌 **Seamless Integration** | Easy setup with MCP-compatible tools. |

[**Learn more & Install**](https://docs.z.ai/devpack/mcp/vision-mcp-server)

---

## 💡 Developer Hacks

<img src="assets/hacks_banner.svg" alt="Developer Hacks" width="100%">

### Quick Links

| Hack | Description |
| :--- | :--- |
| [📱 PWA Recipe](#-pwa-recipe) | Make your app installable on Android |
| [🤖 AI Push Prompt](#-ai-push-prompt) | Automate PWA integration with AI |
| [🚀 Deploy to Vercel](#-deploy-to-vercel--go-live-instantly) | Get a live URL in seconds |
| [🧠 Claude Code + GLM](#-claude-code-with-glm-46-power) | Use Claude Code with affordable GLM models |

---

> 📱 **Make your web app installable on Android devices.** This step-by-step guide shows you how to configure Vite for PWA, create an install button component, and handle iOS fallback instructions.

<details>
<summary><h3><3E>️ CBT Rule Enforcer: Premium Protocol Explained</h3></summary>

The **CBT Rule Enforcer** transforms your AI from an assistant into a **Disciplined Steward**. It enforces a non-negotiable governance framework for mission-critical production environments.

#### **⚡ Core Behavioral Shifts**
- **React (Halt & Discover):** Forces immediate pause. No guessing. Initiates discovery, intent extraction, and explicit paraphrasing before a single line of code is written.
- **Enhance (Evidence-First):** Mandates `snippets_before` and `snippets_after` with proof. Generates `rollback_plan.json` and enforces `least_privilege` safety.
- **Operate (Orchestration):** Strict state machine workflow (Discovery -> Plan -> UserConfirm -> Implement). Every decision is logged with rationale and risk IDs.
- **Respond (Audit Trail):** Communication shifts to structured artifacts. Requires specific user consent tokens for execution. Maintains an immutable `audit_and_change_log`.
- **Change (Stewardship):** Prioritizes governance over speed. Transparent reasoning via `context_map.json` and `risk_list.json`. Rigidly prevents silent breaking changes.

</details>

<details>
<summary><h3><3E>📱 PWA Recipe</h3></summary>

#### Make your app installable on Android (Complete PWA Recipe)

To enable the "Install App" feature, you need to configure Vite for PWA and create a custom install button component.

**0. Install Dependencies**
```bash
npm install -D vite-plugin-pwa
```

**1. Configure `vite.config.ts`**
```typescript
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { VitePWA } from 'vite-plugin-pwa'

export default defineConfig({
  plugins: [
    react(),
    VitePWA({
      registerType: 'autoUpdate',
      includeAssets: ['favicon.ico', 'apple-touch-icon.png', 'masked-icon.svg'],
      manifest: {
        name: 'My Awesome App',
        short_name: 'App',
        description: 'My Awesome App Description',
        theme_color: '#ffffff',
        icons: [
          { src: 'pwa-192x192.png', sizes: '192x192', type: 'image/png' },
          { src: 'pwa-512x512.png', sizes: '512x512', type: 'image/png' }
        ]
      }
    })
  ]
})
```

**2. Create `src/components/InstallPWA.tsx`**
```typescript
import { useEffect, useState } from 'react';

interface BeforeInstallPromptEvent extends Event {
  prompt: () => Promise<void>;
  userChoice: Promise<{ outcome: 'accepted' | 'dismissed' }>;
}

export const InstallPWA = () => {
  const [deferredPrompt, setDeferredPrompt] = useState<BeforeInstallPromptEvent | null>(null);
  const [isIOS, setIsIOS] = useState(false);
  const [isStandalone, setIsStandalone] = useState(false);

  useEffect(() => {
    if (window.matchMedia('(display-mode: standalone)').matches) {
      setIsStandalone(true);
    }
    const userAgent = window.navigator.userAgent.toLowerCase();
    setIsIOS(/iphone|ipad|ipod/.test(userAgent));
    const handler = (e: Event) => {
      e.preventDefault();
      setDeferredPrompt(e as BeforeInstallPromptEvent);
    };
    window.addEventListener('beforeinstallprompt', handler);
    return () => window.removeEventListener('beforeinstallprompt', handler);
  }, []);

  const handleInstallClick = async () => {
    if (!deferredPrompt) return;
    await deferredPrompt.prompt();
    const { outcome } = await deferredPrompt.userChoice;
    if (outcome === 'accepted') {
      setDeferredPrompt(null);
    }
  };

  if (isStandalone) return null;

  return (
    <div className="fixed bottom-4 right-4 z-50">
      {deferredPrompt && (
        <button onClick={handleInstallClick} className="bg-blue-600 text-white px-4 py-2 rounded-lg shadow-lg font-semibold hover:bg-blue-700 transition">
          📲 Install App
        </button>
      )}
      {isIOS && (
        <div className="bg-gray-800 text-white p-4 rounded-lg shadow-lg text-sm max-w-xs">
          <p>To install: Tap <span className="font-bold">Share</span> then <span className="font-bold">Add to Home Screen</span> ➕</p>
        </div>
      )}
    </div>
  );
};
```

**3. Mount the Component**
Add `<InstallPWA />` to your main layout or `App.tsx`.

**4. Test & Verify**
Open Chrome DevTools -> Application tab -> Manifest to verify your manifest is loaded.

</details>

---

> 🤖 **Automate PWA integration with AI.** Copy-paste this specialized prompt into your AI coding agent (TRAE, Claude Code, Gemini) for a hands-free PWA setup experience.

<details>
<summary><h3>🤖 AI Push Prompt</h3></summary>

*Copy and paste this entire block into your AI Agent (TRAE, Claude Code, etc.) to automate PWA integration:*

```text
# Role: PWA Transformation Architect
You are an expert software engineer specializing in transforming standard React/Vite web applications into high-quality Progressive Web Apps (PWAs). 

Your goal is to help "no-code/low-code" oriented users turn their websites into installable mobile apps with offline capabilities. You prioritize **safety**, **simplicity**, and **seamless UI integration**.

# Operational Protocol

## Phase 1: Context & Safety (MANDATORY START)
Before writing any PWA code, you must perform the following checks:

1.  **Project Analysis**: Scan `package.json` to confirm it is a Vite/React project. Scan the file structure to identify the main entry point (usually `App.tsx` or a Layout component).
2.  **Asset Verification**: Check `public/` folder. Do they have a favicon or logo? If the user has no logo/icon, propose generate one for the user.
    * *Critical Note:* If PWA specific icons (192x192, 512x512) are missing, warn the user that they will need these for the app to be installable, but you can set up the code first.
3.  **The Safety Gate**: You must execute the following sequence EXACTLY:
    * **Action**: Create a local backup. `git add . && git commit -m "Pre-PWA Backup"`
    * **Question**: Ask the user: "I've created a local backup. Do you want to push this to your remote repository (GitHub/GitLab) before we start? This ensures you can't lose your work."
    * **STOP**: Do not output the PWA implementation code until the user answers this question.

## Phase 2: Strategic Placement
Do not blindly tell the user to put the button in `App.tsx`.
1.  **Analyze**: Look at the user's existing UI. Do they have a Navbar? A Sidebar? A Settings page? A Footer?
2.  **Propose**: Suggest the most logical place for the "Install App" button. 
    * *Guideline*: It should be obtrusive enough to be found, but not cover important content. 
    * *Example*: "I see you have a Sidebar menu. I suggest adding the 'Install App' button at the bottom of that menu rather than floating it over the screen. Shall we do that?"

## Phase 3: Implementation (The "Vibe Code" approach)
Once the user confirms the backup and the placement, provide the code. 
* **Show, Don't Just Tell**: Provide the full code blocks.
* **Explain**: Briefly explain what each block does in simple terms (e.g., "This file tells mobile phones that your website is actually an app").

### Code Standards & Templates

**1. Configuration (`vite.config.ts`)**
* Use `vite-plugin-pwa`.
* Ensure `registerType: 'autoUpdate'` is set so the app updates automatically for users.

**2. The Logic (`InstallPWA.tsx`)**
* Use the standard `beforeinstallprompt` logic for Android/Desktop.
* **Crucial**: Include iOS detection. iOS does not support the install prompt button. You must show a tailored message for iOS users (e.g., "Tap Share -> Add to Home Screen").
* **Logic**: The component must hide itself if the app is already installed (`display-mode: standalone`).

**3. Integration**
* Provide the specific import and component placement based on the location agreed upon in Phase 2.

## Phase 4: Verification & Education
After providing the code:
1.  Instruct the user to run `npm install`, if agent capable, offer the user run it for him, and if agent cannot, then user will run himself.
2.  Tell them how to test it: "Open Chrome DevTools -> Application -> Manifest to see if it's working." If the IDE capable of auto testing, propose also automated test before the user manually testing it.
3.  Remind them about the icons: "Remember to replace the placeholder icon filenames in `vite.config.ts` with your actual logo files later! in case they have their own logo/icon they are willing to use, rather a generated one."

# Tone Guidelines
* **Empowering**: "Let's turn this into a mobile app."
* **Cautious**: "Let's save your work first."
* **Clear**: Avoid deep jargon. Use "Offline capabilities" instead of "Service Worker Caching Strategies" unless asked.

# Interaction Trigger
Wait for the user to provide their codebase or ask to start the PWA conversion. Your first response should always be an analysis of their current project followed by the **Phase 1 Safety Gate**.
```

</details>

---

### 🚀 Deploy to Vercel & Go Live Instantly

<img src="assets/vercel_deploy_banner.svg" alt="Vercel Deployment" width="100%">

Deploy your web application from TRAE IDE directly to Vercel and get a live URL in seconds.

**Step 1: Click "Deploy"**

Find the deploy button in the **AI Chat panel** or the **Browser tool**. You can also just ask the AI to "Deploy this".

<details>
<summary>📸 See screenshot</summary>
<br>
<img src="https://p16-arcosite-va.ibyteimg.com/tos-maliva-i-10qhjjqwgv-us/22c63555ed3544c6bf850582df2801c4~tplv-10qhjjqwgv-quality:q75.awebp" width="100%" alt="Deploy Button">
</details>

**Step 2: Authorize Vercel**

- Click **"Start Authorization"** in the popup.
- In Vercel, select **"All Projects"** scope.
- Click **"Install"**.

<details>
<summary>📸 See screenshot</summary>
<br>
<img src="https://p16-arcosite-va.ibyteimg.com/tos-maliva-i-10qhjjqwgv-us/633dbaeb590640a69210ed043f403eee~tplv-10qhjjqwgv-quality:q75.awebp" width="100%" alt="Vercel Authorization">
</details>

**Step 3: Go Live**

Back in TRAE, click **"Redeploy"**. You'll get a live, shareable link instantly!

---

### 🧠 Claude Code with GLM 4.7 Power

<img src="assets/claude_glm_hack_banner.svg" alt="Claude Code + GLM 4.7" width="100%">

> *"For those who are used to Claude Code, you can enjoy the same interface while using a much lower cost model."*

**Step 1: Install Claude Code**
```bash
npm install -g @anthropic-ai/claude-code
```

**Step 2: Configure GLM Coding Plan**
```bash
curl -O "https://cdn.bigmodel.cn/install/claude_code_zai_env.sh" && bash ./claude_code_zai_env.sh
```

<details>
<summary><strong>Manual Configuration (Optional)</strong></summary>

Update `~/.claude/settings.json`:
```json
{
  "env": {
    "ANTHROPIC_AUTH_TOKEN": "your_zai_api_key",
    "ANTHROPIC_BASE_URL": "https://api.z.ai/api/anthropic",
    "API_TIMEOUT_MS": "3000000"
  }
}
```
</details>

**Step 3: Run**
```bash
cd your-project
claude
```

---

### 🛡️ Security & Privacy

| Rule | Description |
| :--- | :--- |
| 🚫 **Never Commit Secrets** | Do not commit `.env` files or API keys to public repositories. |
| 🔐 **Use Environment Variables** | Store sensitive keys in `.env` files and add them to `.gitignore`. |
| 👁️ **Review AI Code** | Always review AI-generated code before deploying to production. |

---

## 🕹️ Vibe Games

<a href="https://github.com/roman-ryzenadvanced/Custom-Engineered-Agents-and-Tools-for-Vibe-Coders/tree/main/vibecoding-games">
  <img src="assets/vibe_games_banner.svg" alt="Vibe Games" width="100%">
</a>

---

<p align="center">
  <sub><strong>Keywords:</strong> GLM-4.7, Claude 4.5 Opus, Claude 4.5 Sonnet, AI Agents, Vibe Coding, TRAE IDE, Benchmarks 2025, Coding LLM, Reasoning Models, Agentic Workflows, Deep Thinking AI.</sub>
</p>

Explore a collection of HTML5 mini-games developed using **Vibe Coding** techniques.

[**Browse Games Collection**](https://github.com/roman-ryzenadvanced/Custom-Engineered-Agents-and-Tools-for-Vibe-Coders/tree/main/vibecoding-games)

---

---

## 🛠️ Awesome Tools

<img src="assets/awesome_tools_banner.svg" alt="Awesome Tools" width="100%">

### Recommended Utils

| Tool | Author | Description | Link | Tested |
| :--- | :--- | :--- | :---: | :---: |
| **Universal Context Engine** | **Eskapeum** | An indexing context-engine that's baked into your project and works with **ANY** AI/LLM tool to provide superior context. | <a href="https://github.com/Eskapeum/Context-Engine" target="_blank">**View on GitHub**</a> | ❌ No |

---

## 📚 Quick Links

| Resource | Link |
| :--- | :---: |
| 🎟️ 10% Discount for Z.AI GLM Models | [Subscribe](https://z.ai/subscribe?ic=R0K78RJKNW) |
| 📄 TRAE.AI Integration Guide | [Download PDF](https://github.com/roman-ryzenadvanced/Custom-Engineered-Agents-and-Tools-for-Vibe-Coders/blob/main/Adding_GLM_4.6_Model_to_TRAE__A_Visual_Guide__3_.pdf) |
| 🌐 TRAE.AI and SOLO Agent | [Official Page](https://www.trae.ai/s/WJtxyE) |

---

<p align="center">
  <sub>Made with ❤️ by <a href="https://t.me/VibeCodePrompterSystem">RyzenAdvanced</a></sub>
</p>