frontend-craft

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.

The native package includes 56 workflow skills and 11 commands exposed through skills (same-name workflows reuse the full skill). The 14 specialized agents belong to other runtime adapters and are not native OpenClaw agents.

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/              # Source command specs; converted skills are under 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

The OpenClaw package includes all 56 public workflow skills from skills/, grouped here by use case.

Project standards

Implementation capabilities

Testing

Review and quality

Refactoring

Design UI

Technical diagram quality: fec-image-generation prefers local Mermaid for standard sequence/workflow diagrams and the draw.io workflow for editable architecture, with JSON/HTML fallback when tools are unavailable. Export a browser-measured manifest scaled to the PNG, run QA and inspect the final image. Preserve complete text, explicit layout and relationships; repair the source for at most two automatic rounds and report unresolved issues. Reproducible fixtures are in skills/fec-image-generation/assets/quality-examples/.

Review and technical diagram guide.

Legacy migration

Project evolution

Maintenance docs

Using skills (scenarios & examples)

Skills live under skills/<id>/SKILL.md. OpenClaw exposes them as plugin skill roots (openclaw.plugin.json lists skills; command workflows are converted during packaging). 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 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

Review scope

Code and security review skills use three modes. In OpenClaw, request them in natural language; the slash-command examples below apply to runtimes that expose /fec-review:

• Change review: explicitly request recent/current/staged changes, a PR or a commit, or use an established change context. With no changes, report that there is nothing to review; do not automatically review recent commits.
• Targeted review: specify a file or directory to review existing code, including unchanged code, without requiring a Git diff.
• Project review (default): with no scope or change context, or when the entire project is requested, inventory project-owned frontend code, related tests, configuration and dependency declarations, then review by module.

A file/directory request reviews its full contents; add "recent changes" to review only its diff. A natural-language request such as "Review the code" reviews the project even when changes exist. State mode and scope before review. Automatic review after edits must pass the current change scope explicitly.

Examples: /fec-review,/fec-review review recent changes, /fec-review review src/components/Button.tsx, /fec-review review src/features/, and /fec-review review the entire project. These are natural-language instructions, not CLI flags. Explicit scope takes precedence over the default.

Dependency directories, build outputs, caches, generated files and third-party code are excluded by default. Reports record the mode, target scope, reviewed and unreviewed files/modules, exclusions, completion status and verification results. Limited coverage is marked partial; reading callers or running project-wide lint/typecheck does not establish manual review coverage. Change reviews retain merge recommendations; targeted/project reviews assess risk within reviewed scope. The frontend review does not replace a backend audit, and reviewers do not edit business code unless repairs are requested.