A powerful full-stack code generation and synchronization skill that mirrors APIs, data schemas, validation rules, and client logic between frontend and backend stacks.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install code-mirror
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install code-mirror using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Code Mirror?
Code Mirror is an essential capability within the Openclaw Skills ecosystem designed to eliminate the manual overhead of writing boilerplate code across the application stack. By deep-analyzing the structural semantics of your source code—including API contracts, validation schemas, and database models—it generates idiomatic, production-ready code that matches perfectly on both sides. Whether you are scaffolding a brand-new feature or syncing a database update to your frontend client, Code Mirror keeps your codebase clean and structurally consistent.
This skill automates the translation of technical concepts between diverse ecosystems such as React/Vue and Express, FastAPI, Go, or Spring Boot. Using robust type mappings and validation rule mirroring, Code Mirror ensures developers do not have to manually port changes, mitigating the risk of drift between the client interfaces and API layers.
Code Mirror Use Cases
- Generate complete backend schemas, routes, and controllers from a provided frontend UI component or form validation schema.
- Automatically generate TypeScript types, API client functions, and React Query or Vue composable hooks from a backend route definition.
- Sync data model changes across the stack using precise diff-mode code outputs when a field is added, modified, or removed.
- Scaffold cohesive full-stack features from a single natural language description, producing both the frontend components and backend services simultaneously.
- Ensure precise type alignment and error handling compatibility between separate client and server repositories.
How Code Mirror Works
- Identify Source and Target Stack: The skill detects whether the input code is frontend or backend by analyzing code tokens (such as
useStatevs@app.route). It then inspects workspace configuration files (e.g.,package.json,pyproject.toml,go.mod) to automatically determine the target stack frameworks. - Analyze Source Semantics: It extracts key architectural primitives from the source code. For frontend files, it records API calls, request/response models, and validation rules. For backend files, it processes routes, ORM schemas, validation DTOs, and auth protocols.
- Generate Target Architecture: Utilizing optimal stack templates, the skill generates code in a logical dependency order. For backend targets, it writes database models, then validators, and finally routes/controllers. For frontend targets, it writes TypeScript types, then API clients, state hooks, and UI views.
- Apply Validation and Consistency Rules: Prior to rendering, the code is evaluated against a strict quality checklist to ensure endpoint coverage, strict type mapping alignment (e.g., matching Pydantic fields to TypeScript interfaces), matching validation regexes, and functional error handling.
- Deliver Actionable Code: Code Mirror outputs complete, copy-pasteable files featuring designated file path headings, or clear git-style diffs specifically targeting sync operations to facilitate seamless workspace integration.
Code Mirror Setup
To use the Code Mirror skill in your AI agent workspace, register it under your active Openclaw Skills directory.
Create or edit your skill configuration:
mkdir -p .claw/skills
cp code-mirror.md .claw/skills/
No external database dependencies are required. Simply reference Code Mirror in your workspace prompts to activate full-stack mirroring when working on codebases containing TypeScript, Python, Go, Java, or C#.
Code Mirror Data Schema & Taxonomy
Code Mirror utilizes strict structural schemas to guarantee consistency. It processes and organizes files across the stack using language-specific type conversion and metadata mapping:
Core Structural Metadata Mapped
| Metadata Entity | Source (Frontend) | Target (Backend) |
|---|---|---|
| Endpoints & Router | HTTP client calls (e.g., Axios/Fetch paths) | Route controllers, HTTP verbs, paths, & status codes |
| Data Models | TypeScript interfaces, PropTypes, Zod schemas | Database models (SQLAlchemy, Prisma, Mongoose, ORM) |
| Input Validation | Client form validations (Yup, Zod) | DTO schemas (Pydantic, Class-Validator, Joi) |
| Type Conversion | JSON types, primitives, null | Language-specific types (e.g., Python, Go, Java, C#) |
Generated File Output Layout
- Backend Stack Generator: Outputs
models/,validators/,routes/, andcontrollers/directories. - Frontend Stack Generator: Outputs
types/,api/,hooks/(or composables), andcomponents/structures.
Code Mirror Advanced Features
- Diff-Mode Synchronization: Isolates code updates and produces Git-style
+/-diff blocks for quick partial file merges. - Workspace Tech Stack Auto-Detection: Automatically parses workspace root files (
Cargo.toml,requirements.txt, etc.) to align target language generation without prompt manual overrides. - Cross-Language Type Translation: Comprehensive conversion algorithms covering TypeScript, Python, Go, Java, and C# types, including optional fields, lists, and strict dictionaries.
- Form-to-Database Validation Mirroring: Automatically aligns front-end Zod regex constraints and form structures with corresponding back-end DB model constraints and security guidelines.
- Secure Routing & Auth Injection: Maintains consistency across token storage, header passing, and route auth middleware (e.g., JWT, session cookies) between the client and server codebases.
SKILL.md
Loading
Related Openclaw Skills
Douyin Scraper
A versatile automation capability for Openclaw Skills that extracts trending Douyin videos, hot list metrics, and creative copy using browser replication or scripting.
Art Critique
An AI-powered creative companion that provides profound, non-corrective aesthetic critique for visual, textual, audio, and performance art, backed by art theory and structured dialogue tracking.
Exam Practice Site Generator
A data-driven, single-page exam practice site generator that decouples interactive frontends from JSON question banks, enabling effortless adaptation to any standardized test.
Property Graph Schema Designer
An AI agent utility that translates domain models, requirements, and entity descriptions into structured Neo4j-style property graph schemas.
Huo15 Odoo Integration
A zero-dependency Python toolset facilitating task tracking, timesheet aggregation, CRM administration, and calendar reminders on Odoo through XML-RPC.
Discount Hunter
An automated browser-based coupon hunter that finds and tests promo codes directly on checkout pages with complete financial safety.
Featured*
