Webpage Builder
Skill by autogame-17
Why use this skill?
Build, test, and deploy lightweight single-page applications with the OpenClaw Webpage Builder skill. Perfect for AI agents needing robust, spec-first development workflows.
Install via CLI (Recommended)
clawhub install openclaw/skills/skills/autogame-17/webpage-builderWhat This Skill Does
The Webpage Builder skill by autogame-17 provides a structured, disciplined environment for OpenClaw agents to develop, test, and deploy single-page applications (SPAs). It emphasizes a 'Spec-First' architecture, utilizing vanilla JavaScript, HTML, and CSS to ensure that applications remain lightweight, maintainable, and free from the complexities of heavy modern build tools or frameworks. By enforcing a separation of concerns through a Vanilla MVC pattern, this skill allows the agent to create robust tools where business logic is isolated in a testable Store, while UI rendering is handled by a simple router and DOM manipulation logic.
Installation
To integrate this skill into your OpenClaw environment, execute the following command in your terminal:
clawhub install openclaw/skills/skills/autogame-17/webpage-builder
Ensure that your environment has Node.js installed to support the headless testing capabilities required by the framework.
Use Cases
This skill is ideal for rapid prototyping of internal business tools, task managers, dashboard widgets, or informational portals. Because it relies on localStorage for data persistence and native browser APIs, it is perfect for offline-first applications or utility tools that do not require a backend database. It is particularly effective when you need an application to be auditable, high-performance, and easily debuggable by an AI agent.
Example Prompts
- "Build a task tracking dashboard using the Webpage Builder skill. Define the requirements in a spec file first, then write tests for the store, and finally implement the UI."
- "Create a simple expenses calculator SPA. Ensure the business logic is in store.js and fully covered by node tests before building the HTML interface."
- "Refactor my existing simple counter app to follow the Webpage Builder architecture, including an EVAL.md file for final verification."
Tips & Limitations
- Tip: Always prioritize the
EVAL.mdfile; it is the final line of defense for UI regressions. - Tip: Keep your Store logic entirely decoupled from the DOM to maximize the efficiency of your
node --testsuite. - Limitation: This skill is intended for single-page applications. It is not suitable for complex web apps requiring server-side rendering, real-time database syncing, or external API-heavy authentication flows.
Metadata
Not sure this is the right skill?
Describe what you want to build — we'll match you to the best skill from 16,000+ options.
Find the right skillPaste this into your clawhub.json to enable this plugin.
{
"plugins": {
"official-autogame-17-webpage-builder": {
"enabled": true,
"auto_update": true
}
}
}Tags(AI)
Flags: file-write, file-read, code-execution
Related Skills
capability-evolver
A self-evolution engine for AI agents. Analyzes runtime history to identify improvements and applies protocol-constrained evolution.
feishu-voice-assistant
Sends voice messages (audio) to Feishu chats using Duby TTS.
security-sentinel
Scan the workspace for security vulnerabilities, exposed secrets, and misconfigurations.
prompt-optimizer
Evaluate, optimize, and enhance prompts using 58 proven prompting techniques. Use when user asks to improve, optimize, or analyze a prompt; when a prompt needs better clarity, specificity, or structure; or when generating prompt variations for different use cases. Covers quality assessment, targeted improvements, and automatic optimization across techniques like CoT, few-shot learning, role-play, and 50+ more.
Feishu Broadcast
Skill by autogame-17