Coding Web

coding-web

Purpose

This skill enables OpenClaw to assist with full-stack web development using JavaScript, TypeScript, and Node.js, focusing on generating, debugging, and optimizing code for web applications.

When to Use

Use this skill when building or maintaining web projects involving frontend (e.g., React, Vue) and backend (e.g., Node.js servers), especially for tasks like scaffolding apps, fixing bugs in JS/TS code, or integrating APIs. Apply it in iterative development cycles, such as rapid prototyping or migrating legacy code to modern standards.

Key Capabilities

• Generate boilerplate for Node.js servers: Use to create Express apps with routes, e.g., output a server.js file.
• Handle TypeScript conversions: Convert JS to TS, ensuring type safety; for example, add interfaces to existing functions.
• Optimize frontend code: Minify and bundle JS/TS assets; invoke with parameters to target specific frameworks like React.
• Debug common web errors: Identify and suggest fixes for issues like CORS in Node.js or state management in React components.
• Integrate with databases: Generate code for MongoDB or SQL connections in Node.js, using async/await patterns.
• Code snippets: For a simple React component, OpenClaw might output: import React from 'react'; const MyComponent = () => <div>Hello</div>; export default MyComponent;

Usage Patterns

To invoke this skill, prefix commands with openclaw coding-web in your terminal or integrate via OpenClaw's API. Always specify the subcommand first (e.g., generate, debug), followed by options like --language ts or --framework react. For API calls, use POST requests to /api/coding-web/execute with a JSON payload containing { "action": "generate", "params": { "type": "component", "name": "UserForm" } }. Set environment variables for authentication, e.g., export $OPENCLAW_API_KEY before running commands. Chain skills by piping outputs, like using output from a database skill as input here.

Common Commands/API

• CLI Command: openclaw coding-web generate --type server --framework express --port 3000 – Creates a basic Express server; add --language ts for TypeScript.
• CLI Command: openclaw coding-web debug --file app.js --issue "undefined variable" – Analyzes and patches errors in the specified file.
• API Endpoint: POST to /api/coding-web/generate with body { "codeType": "component", "language": "ts", "details": { "name": "Login", "props": ["username"] } } – Returns generated code as JSON.
• Config Format: Use a JSON config file, e.g., { "defaultLanguage": "ts", "framework": "react", "apiKey": "$OPENCLAW_API_KEY" }, placed in .openclaw/config.json.
• Code Snippet: For API response handling: const response = await fetch('/api/coding-web/generate', { method: 'POST', body: JSON.stringify({ action: 'generate' }) }); const code = await response.json();
• Authentication: Always include $OPENCLAW_API_KEY in headers for API calls, e.g., headers: { 'Authorization': Bearer ${process.env.OPENCLAW_API_KEY} }.

Integration Notes

Integrate this skill with IDEs like VS Code by adding it to your extensions or using OpenClaw's plugin system; install via npm install openclaw-vscode. For CI/CD, embed in scripts like GitHub Actions: run: openclaw coding-web generate --type test --file src/app.js. Handle dependencies by specifying Node.js versions in package.json, e.g., "engines": { "node": ">=14" }. If using with other tools, export generated code as modules: module.exports = generatedCode;. Ensure your environment has Node.js installed; check with node -v before invoking.

Error Handling

When errors occur, check the exit code from CLI commands (e.g., code 1 for failures) and parse JSON error responses from APIs, which include fields like { "error": "Invalid params", "details": "Missing --type flag" }. For common issues, retry with corrected inputs, e.g., if a generation fails due to missing dependencies, run npm install express first. Use try-catch in code snippets: try { await openclawAPI.call('coding-web', { action: 'generate' }); } catch (e) { console.error(e.message); // e.g., "API key required" }. If authentication fails (e.g., 401 status), verify $OPENCLAW_API_KEY is set and not expired.

Concrete Usage Examples

1. Example 1: Generate a Node.js Express Server
   Use: openclaw coding-web generate --type server --framework express --language js
   This creates a basic server file: const express = require('express'); const app = express(); app.listen(3000, () => console.log('Server running'));
   Then, run it with node server.js to start the server on port 3000.

2. Example 2: Debug and Fix a TypeScript React Component
   Use: openclaw coding-web debug --file MyComponent.tsx --issue "Type error in props"
   It might output a fixed snippet: interface Props { name: string; } const MyComponent: React.FC<Props> = ({ name }) => <div>{name}</div>;
   Integrate by copying the output into your project and rebuilding with tsc.

Graph Relationships

• Related to: "coding-backend" (shares Node.js capabilities)
• Depends on: "tools-node" (for Node.js runtime access)
• Connected to: "web-frontend" (for frontend-specific tasks like React/Vue)
• Overlaps with: "fullstack-dev" (in cluster "coding" for broader development)