This is a submission for the OpenClaw Challenge.
Building OpenClaw skills is an incredibly powerful way to automate workflows across messaging platforms. But let's be honest: managing them locally, writing YAML/JSON boilerplate, ensuring they are safe to run, and debugging failures without a proper environment can require more context-switching than we'd like.
So, for this developer challenge, I set out to build ClawCraft, a comprehensive local development environment and companion skill specifically designed for OpenClaw.
ClawCraft isn't just a basic tool—it's a powerful Command Line Interface (CLI), a local web dashboard (Client UI) running a Fastify backend server, and an OpenClaw Skill. It allows you to build, scan, debug, and manage your skills without ever touching code—unless you want to.
⭐ Check out the GitHub Repository here! ⭐ (https://github.com/Aryakoste/ClawCraft)
🎨 The Client UI: A Beautiful Local Dashboard
First and foremost, ClawCraft launches a sleek, React-based web dashboard locally on your machine. This is your command center.
Instead of messing around with local folders, strict syntax, and terminal logs, the Client UI gives you a visual overview of every OpenClaw skill you have installed, the ability to trigger API commands instantly, and access to all the core developer tools right from your browser.
🔥 Headline Features
1. 🏗️ Visual Skill Builder
Why write boilerplate when you can just drag and drop? The intuitive Client UI uses @dnd-kit to let you string together the logic of your OpenClaw skills visually. For power users who still want granular control over their code, there's a fully integrated Monaco code editor providing a rich, IDE-like fallback experience.
2. 🤖 AI Skill Generation
Have an idea but don't want to drag blocks or write code? Tell ClawCraft what you want! Powered by Anthropic and OpenAI SDKs directly in the backend, you can just type a natural language prompt (e.g., "Make a skill to fetch top 3 hacker news articles"). The AI will scaffold the entire OpenClaw skill structure, parameters, and logic for you instantly.
3. 🚨 Built-in Security Scanner with Trust Scores
You shouldn't just run random skills you find online blindly on your system. ClawCraft includes an automatic security scanner that analyzes any external skill (via URL or name), scanning the implementation logic, and summarizing exactly what it is attempting to do.
The scanner returns a Trust Score directly in the UI:
- ✅ Safe
- ⚠️ Review Required
- 🚨 Dangerous (Do not install!)
4. 🪲 Live Debugger
Testing an OpenClaw skill but it's failing silently in Slack or Telegram? Launch the local debugger dashboard. ClawCraft lets you inspect variables, view the actual HTTP payloads, and trace exactly where the flow broke in real-time.
💻 The Command Line Interface (CLI)
Prefer living in the terminal? You can control your entire OpenClaw setup using the native CLI. Under the hood, this uses commander.js and provides beautifully formatted output.
Here are the commands you have at your disposal:
-
clawcraft start [--port] [--no-open]- Starts the local Fastify backend and launches the React dashboard. -
clawcraft list- Lists all currently installed skills along with their security trust score badges. -
clawcraft generate <description>- Uses LLM integrations to immediately scaffold and format an entire SKILL.md file from a single sentence request. -
clawcraft scan [target]- Scans all local skills, or a specific skill by URL or name, for malicious patterns and returns the Trust Score and findings list. -
clawcraft install <url> [--force]- Scans an external repository and installs it securely. Prompts if it's considered dangerous unless--forceis used! -
clawcraft fix <skillName>- Immediately opens the browser UI directly to the local debugger for the specified skill. -
clawcraft improve <skillName>- An automated AI flow that attempts to rewrite your skill with better guardrails, optimized permissions, and deterministic instructions, and prompts to save! -
clawcraft config [get/set]- Read and modify the configuration such as adding API keys safely.
🤯 The Meta Feature: The ClawCraft OpenClaw Skill
Yes, ClawCraft comes with its own native, companion OpenClaw skill (clawcraft tag) within the repo!
Once your local ClawCraft server is running, you can manage your entire OpenClaw development environment directly from Slack, Discord, Whatsapp, or Telegram using slash commands. It's wildly satisfying to build OpenClaw skills using an OpenClaw skill.
-
/clawcraft build "get current bitcoin price"- Automatically opens your UI and uses AI to generate the skill for you! -
/clawcraft scan {skill-url}- Scans the repository for the Trust Score and reads it back to you right in the chat. -
/clawcraft list- Returns a list of all your installed skills. -
/clawcraft search "find templates"- Searches available community templates and installed skills. -
/clawcraft status- See how many times your skills have fired and the estimated time they've saved you!
🛠️ Tech Stack & Architecture
ClawCraft is structured as a modern JavaScript monorepo using npm workspaces:
- Frontend (
packages/client): React 18, Vite, TailwindCSS for styling,@dnd-kitfor drag-and-drop visuals, and Monaco Editor. - Backend (
packages/server): A lightning-fast Fastify server providing the core OpenClaw system APIs. - CLI Toolkit: Powered by Commander.js and Chalk.
- AI integrations: Native SDK integrations for both Anthropic and OpenAI logic generation.
🚀 Quick Start (Running from Source)
ClawCraft is designed to be cloned and run directly from the source to give you absolute control over your local environment. Here is how you can spin everything up:
# 1. Clone the repository
git clone https://github.com/Aryakoste/ClawCraft.git
cd ClawCraft
# 2. Install dependencies (This securely installs both client and server via npm workspaces)
npm install
# 3. Start the application
npm run dev
(Running npm run dev kicks off a script that concurrently boot up both the Fastify server on port 4000 and the Vite Client UI dashboard simultaneously!)
Some Screenshots for UI
Skill Generator
Template Gallery
Skill Debugger
Skill Composer
Usage Tracker
🧠 Configuring the AI
ClawCraft's powerful generator (clawcraft generate and clawcraft improve) relies on an LLM to do the heavy lifting. You can configure it to use Anthropic, OpenAI, local Ollama endpoints, and more.
Use the built-in CLI to easily securely set your keys and providers (saved locally to ~/.clawcraft/config.json):
# Set your core provider (anthropic, openai, ollama, openai-compat, openclaw)
clawcraft config set llmProvider anthropic
# Provide your authentication key
clawcraft config set apiKey "sk-ant-xxxxxxxxxx"
# Set your preferred model version (Defaults to sonnet!)
clawcraft config set model "claude-3-5-sonnet-20241022"
Once configured, point your messaging app to the local dashboard (http://localhost:4000), load up the skill/ directory, and start giving it slash commands!
Final Thoughts 💭
I loved exploring how endlessly hackable OpenClaw is during this challenge. My primary goal with ClawCraft was to significantly lower the barrier to entry for creating, auditing, and installing those skills. I firmly believe that making OpenClaw visual, secure, and easily manageable will help onboard a lot more non-developers into the AI automation space.
Would love any thoughts, PRs, or feedback from the community!
Drop a ⭐ on the Repo or try it out! (https://github.com/Aryakoste/ClawCraft)
Top comments (0)