frontend-craft

Language / 语言

English | 简体中文

An OpenClaw native plugin build for frontend-craft.

frontend-craft ships the OpenClaw-native package for frontend-craft: workflow skills, markdown commands, OpenClaw workspace templates, typed hooks, a design MCP reference, and the optional frontend_craft_init_workspace tool.

Requirements: Node.js >= 22, OpenClaw plugin API >= 2026.4.20.

Quick Start

1. Install

From ClawHub (recommended when published there):

openclaw plugins install clawhub:frontend-craft

From npm:

openclaw plugins install frontend-craft

From a local tarball built from the main repository:

npm install
npm run pack:openclaw
openclaw plugins install ./frontend-craft-<version>.tgz

For local development, link the package directory:

openclaw plugins install -l /path/to/frontend-craft/npm-packages/openclaw

2. Enable The Plugin

The npm package name and plugin id are both frontend-craft.

{
  plugins: {
    allow: ["frontend-craft"],
    entries: {
      "frontend-craft": {
        enabled: true,
        config: {
          // Optional, see openclaw.plugin.json:
          // formatAfterWrite: true,
          // notifyOnAgentEnd: true,
        },
      },
    },
  },
}

Restart the gateway after changing plugin configuration:

openclaw gateway restart
openclaw plugins inspect frontend-craft

3. Initialize An OpenClaw Workspace

OpenClaw loads agent context from the agent workspace, often ~/.openclaw/workspace. Use the optional frontend_craft_init_workspace tool with:

• workspaceDir: absolute path to the workspace root
• overwriteAgents: true only when replacing an existing AGENTS.md

The tool copies:

• templates/openclaw/AGENTS.md -> workspace AGENTS.md
• templates/shared/rules/*.md -> workspace skills/frontend-craft-rules/

You can also copy those files manually. See templates/openclaw/OPENCLAW-CONFIG.md for OpenClaw configuration notes.

4. Configure Design MCP Servers

The bundled .mcp.json is a reference for Figma, Sketch, MasterGo, Pixso, and Modao. Native OpenClaw plugins do not automatically merge MCP config, so copy the mcpServers block into your embedded Pi / gateway MCP configuration.

Common environment variables:

Pixso uses the local MCP URL shown in .mcp.json. MockingBot has no MCP integration; use screenshots or exported specs.

Package Layout

frontend-craft/
|-- dist/                  # Bundled OpenClaw plugin entry
|-- skills/                # Workflow skills
|-- commands/              # Markdown command specs loaded as skills
|-- templates/openclaw/    # OpenClaw AGENTS.md and config notes
|-- templates/shared/      # Shared frontend rules
|-- .mcp.json              # Design MCP reference
|-- openclaw.plugin.json   # Plugin metadata and config schema
|-- package.json

Features

Skills

Using skills (scenarios & examples)

Skills live under skills/<id>/SKILL.md. OpenClaw exposes them as plugin skill roots (openclaw.plugin.json lists skills and commands). The harness typically auto-selects a workflow when your plain-language request matches a skill’s frontmatter description; exact behavior depends on your OpenClaw / agent setup. You do not need to know internal skill ids—describe the outcome you want. (Power users may still mention an id if they know it.)

This section is a quick OpenClaw-oriented sample, not the full prompt catalog. For complete scenario-based prompts across skills, agents, commands, design workflows, testing, maintenance, and runtime setup, see docs/example-prompts.md.

Tips

• Point to paths or components when asking for reviews or refactors.
• For design-to-code, attach a Figma link / node id, screenshot, or say which MCP you configured.
• When lint, typecheck, tests, or build fail, name the exact commands you run if they are non-standard.

OpenClaw quick scenarios and example prompts

Slash commands (markdown under commands/)

These are loaded as command specs; use them when you want a fixed checklist instead of free-form matching. In chat, describe what you want—the agent can follow the matching command doc without you naming it. The table below lists common OpenClaw examples; the complete command prompt set is in docs/example-prompts.md.

Hooks

Plugin Config

Build From Source

From the main frontend-craft repository:

npm install
npm run typecheck:openclaw
npm run pack:openclaw

npm run pack:openclaw builds and verifies the OpenClaw bundle, refreshes npm-packages/openclaw, and writes frontend-craft-<version>.tgz to the npm-packages/openclaw/ directory.

License

MIT