-
-#### đĄ 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.
-
-
-
-### đ ī¸ 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.
-
-
-
-
OPUS Series
-
-
-
- Development patterns of Claude Opus 4.5 (Variation 1)
- ⥠Install Agent
-
-
-
- Development patterns of Claude Opus 4.5 (Variation 2)
- ⥠Install Agent
-
-
- SUPERPOWERS-ENABLED: AI development assistant with professional methodologies and strict engineering workflows. Aims to mimic Claude Code.
- ⥠Install Agent
-
-
-
-
-
Defense Series
-
-
-
- Minimize AI "forgetting" to complete tasks
- ⥠Install Agent
-
-
- Attempt allowing GLM 4.7 model operate on an existing code of other models without breaking it. Essential for non-greenfield projects where code preservation is key.
- ⥠Install Agent
-
-
-
-
-
-
-
-
----
-
-## đĄ Boost Efficiency with SOLO & GLM 4.7
-đī¸ **Get 10% Discount on GLM Models** | [**Discount invitation code**](https://z.ai/subscribe?ic=R0K78RJKNW)
-
-
-
-
-
-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. |
-
-
-
-
-
-
----
-
-## đ ī¸ 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
-
-
-
-
-
-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.
-
-
-
-
-
----
-
-## đ Awesome MCPs
-
-
-
-### 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
-
-
-
-### 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.
-
-
-
-
-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.
-
-
-
-
-
- );
-};
-```
-
-**3. Mount the Component**
-Add `` to your main layout or `App.tsx`.
-
-**4. Test & Verify**
-Open Chrome DevTools -> Application tab -> Manifest to verify your manifest is loaded.
-
-
-
----
-
-> đ¤ **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.
-
-
-
đ¤ AI Push Prompt
-
-*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**.
-```
-
-
-
----
-
-### đ Deploy to Vercel & Go Live Instantly
-
-
-
-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".
-
-
-đ¸ See screenshot
-
-
-
-
-**Step 2: Authorize Vercel**
-
-- Click **"Start Authorization"** in the popup.
-- In Vercel, select **"All Projects"** scope.
-- Click **"Install"**.
-
-
-đ¸ See screenshot
-
-
-
-
-**Step 3: Go Live**
-
-Back in TRAE, click **"Redeploy"**. You'll get a live, shareable link instantly!
-
----
-
-### đ§ Claude Code with GLM 4.7 Power
-
-
-
-> *"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
-```
-
-
-Manual Configuration (Optional)
-
-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"
- }
-}
-```
-
-
-**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
-
-
-
-
-
----
-
-
- Keywords: 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.
-
-
-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
-
-
-
-### 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. | **View on GitHub** | â 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) |
-
----
-
-
+
+#### đĄ 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.
+
+
+
+### đ ī¸ 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.
+
+
+
+
OPUS Series
+
+
+
+ Development patterns of Claude Opus 4.5 (Variation 1)
+ ⥠Install Agent
+
+
+
+ Development patterns of Claude Opus 4.5 (Variation 2)
+ ⥠Install Agent
+
+
+ SUPERPOWERS-ENABLED: AI development assistant with professional methodologies and strict engineering workflows. Aims to mimic Claude Code.
+ ⥠Install Agent
+
+
+
+
+
Defense Series
+
+
+
+ Minimize AI "forgetting" to complete tasks
+ ⥠Install Agent
+
+
+ Attempt allowing GLM 4.7 model operate on an existing code of other models without breaking it. Essential for non-greenfield projects where code preservation is key.
+ ⥠Install Agent
+
+
+
+
+
+
+
+
+---
+
+## đĄ Boost Efficiency with SOLO & GLM 4.7
+đī¸ **Get 10% Discount on GLM Models** | [**Discount invitation code**](https://z.ai/subscribe?ic=R0K78RJKNW)
+
+
+
+
+
+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. |
+
+
+
+
+
+
+---
+
+## đ ī¸ 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
+
+
+
+
+
+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.
+
+
+
+
+
+---
+
+## đ Awesome MCPs
+
+
+
+### 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
+
+
+
+### 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.
+
+
+
+
+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.
+
+
+
+
+
+ );
+};
+```
+
+**3. Mount the Component**
+Add `` to your main layout or `App.tsx`.
+
+**4. Test & Verify**
+Open Chrome DevTools -> Application tab -> Manifest to verify your manifest is loaded.
+
+
+
+---
+
+> đ¤ **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.
+
+
+
đ¤ AI Push Prompt
+
+*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**.
+```
+
+
+
+---
+
+### đ Deploy to Vercel & Go Live Instantly
+
+
+
+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".
+
+
+đ¸ See screenshot
+
+
+
+
+**Step 2: Authorize Vercel**
+
+- Click **"Start Authorization"** in the popup.
+- In Vercel, select **"All Projects"** scope.
+- Click **"Install"**.
+
+
+đ¸ See screenshot
+
+
+
+
+**Step 3: Go Live**
+
+Back in TRAE, click **"Redeploy"**. You'll get a live, shareable link instantly!
+
+---
+
+### đ§ Claude Code with GLM 4.7 Power
+
+
+
+> *"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
+```
+
+
+Manual Configuration (Optional)
+
+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"
+ }
+}
+```
+
+
+**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
+
+
+
+
+
+---
+
+
+ Keywords: 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.
+
+
+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
+
+
+
+### 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. | **View on GitHub** | â 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) |
+
+---
+
+
- 
- 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-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. |
-
-
-
-
-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.
-
-
-
-### 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
-
-
-
-### 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.
-
-
-
-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".
-
-
-
-> *"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
-```
-
-
-
-
----
-
-
-
-### 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. | **View on GitHub** | â 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) |
-
----
-
-
+