Deploy Frontend
butterbase-ai/butterbase-skills
A skill your agent uses when deploying a frontend (React, Next.js, or static HTML) to a live URL on Butterbase, or when troubleshooting deployment issues like MIME type errors or blank pages
Web frontend project development rules. An agent skill from LeoYeAI/openclaw-master-skills.
Install Web Development
$ npx skills add LeoYeAI/openclaw-master-skills --skill web-development -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install LeoYeAI/openclaw-master-skills web-development --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/LeoYeAI/openclaw-master-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/cloudbase/references/web-development .claude/skills/web-development && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "web-development" agent skill from https://github.com/LeoYeAI/openclaw-master-skills/tree/main/skills/cloudbase/references/web-development into .claude/skills/web-development/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "web-development", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/LeoYeAI/openclaw-master-skills/tree/main/skills/cloudbase/references/web-developmentType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add LeoYeAI/openclaw-master-skills --skill web-development -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install LeoYeAI/openclaw-master-skills web-development --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/LeoYeAI/openclaw-master-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/cloudbase/references/web-development .agents/skills/web-development && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "web-development" agent skill from https://github.com/LeoYeAI/openclaw-master-skills/tree/main/skills/cloudbase/references/web-development into .agents/skills/web-development/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "web-development", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add LeoYeAI/openclaw-master-skills --skill web-development -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install LeoYeAI/openclaw-master-skills web-development --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/LeoYeAI/openclaw-master-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/cloudbase/references/web-development .cursor/skills/web-development && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "web-development" agent skill from https://github.com/LeoYeAI/openclaw-master-skills/tree/main/skills/cloudbase/references/web-development into .cursor/skills/web-development/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "web-development", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/LeoYeAI/openclaw-master-skills.git --path skills/cloudbase/references/web-development--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add LeoYeAI/openclaw-master-skills --skill web-development -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install LeoYeAI/openclaw-master-skills web-development --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/LeoYeAI/openclaw-master-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/cloudbase/references/web-development .gemini/skills/web-development && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "web-development" agent skill from https://github.com/LeoYeAI/openclaw-master-skills/tree/main/skills/cloudbase/references/web-development into .gemini/skills/web-development/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "web-development", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install LeoYeAI/openclaw-master-skills web-developmentInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add LeoYeAI/openclaw-master-skills --skill web-development -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/LeoYeAI/openclaw-master-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/cloudbase/references/web-development .github/skills/web-development && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "web-development" agent skill from https://github.com/LeoYeAI/openclaw-master-skills/tree/main/skills/cloudbase/references/web-development into .github/skills/web-development/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "web-development", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add LeoYeAI/openclaw-master-skills --skill web-development -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install LeoYeAI/openclaw-master-skills web-development --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/LeoYeAI/openclaw-master-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/cloudbase/references/web-development .opencode/skills/web-development && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "web-development" agent skill from https://github.com/LeoYeAI/openclaw-master-skills/tree/main/skills/cloudbase/references/web-development into .opencode/skills/web-development/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "web-development", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
web-development- GitHub stars
- 2.2k
- Used in
- 1 other repo
- Token cost
- ~1.4k tokens
- SKILL.md length
- 622 words
- Files
- 1
- Skills in repo
- 1,215
- Repo updated
- First seen
- Licence
- MIT
At a glance
Web frontend project development rules. An agent skill from LeoYeAI/openclaw-master-skills.
- Works in 3 steps: Follow project structure conventions → Use CloudBase Web SDK correctly → Deploy and preview properly
- Developing web frontend pages
- SKILL.md covers When to use this skill, How to use this skill (for a…, Project Structure and Deployment and Preview, plus 3 more sections
- Calls npm and npx
What it does
Web Development is an agent skill from LeoYeAI/openclaw-master-skills. Web frontend project development rules. Use this skill when developing web frontend pages, deploying static hosting, and integrating CloudBase Web SDK.
Its SKILL.md is about 1.4k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Frontend & Design, covering Deployment. It works with Vite. The repository describes itself as: 🧠 Curated collection of 1209+ best OpenClaw skills — weekly updated by MyClaw.ai. The licence is MIT.
When your agent uses it
- Developing web frontend pages
- Deploying static hosting
- Integrating CloudBase Web SDK
Example prompts
- “/web-development”
Requirements
- Node.js
Workflow steps
3 steps, taken from the first numbered list in SKILL.md.
- Follow project structure conventions
- Use CloudBase Web SDK correctly
- Deploy and preview properly
What it can do on your machine
Read from SKILL.md and the folder at commit e5199b5. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
npmnpx
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use npm and npx, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Web Development loads about 1.4k tokens when it runs. Until then it costs about 42 tokens; SKILL.md has 622 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from LeoYeAI/openclaw-master-skills at commit e5199b5, republished under its MIT licence (© LeoYeAI). 622 words, ~1,425 tokens.
Download SKILL.mdSave it as
.claude/skills/web-development/SKILL.md (or your agent's skills folder).- name
- web-development
- description
- Web frontend project development rules. Use this skill when developing web frontend pages, deploying static hosting, and integrating CloudBase Web SDK.
- alwaysApply
- false
When to use this skill
Use this skill for Web frontend project development when you need to:
- Develop web frontend pages and interfaces
- Deploy static websites to CloudBase static hosting
- Integrate CloudBase Web SDK for database, cloud functions, and authentication
- Set up modern frontend build systems (Vite, Webpack, etc.)
- Handle routing and build configurations for static hosting
Do NOT use for:
- Mini-program development (use miniprogram-development skill)
- Backend service development (use cloudrun-development skill)
- UI design only (use ui-design skill, but may combine with this skill)
How to use this skill (for a coding agent)
Follow project structure conventions
- Frontend source code in
srcdirectory - Build output in
distdirectory - Cloud functions in
cloudfunctionsdirectory - Use modern frontend build systems (Vite, etc.)
- Frontend source code in
Use CloudBase Web SDK correctly
- Always use SDK built-in authentication features
- Never implement login logic in cloud functions
- Use
envQuerytool to get environment ID
Deploy and preview properly
- Build project first (ensure
npm installis executed) - Use relative paths for
publicPathconfiguration - Use hash routing for better static hosting compatibility
- Deploy to subdirectory if user doesn't specify root directory
- Build project first (ensure
Web Frontend Development Rules
Project Structure
Directory Organization:
- Frontend source code should be stored in
srcdirectory - Build output should be placed in
distdirectory - Cloud functions should be in
cloudfunctionsdirectory
- Frontend source code should be stored in
Build System:
- Projects should use modern frontend build systems like Vite
- Install dependencies via npm
Routing:
- If the frontend project involves routing, use hash routing by default
- Hash routing solves the 404 refresh issue and is more suitable for static website hosting deployment
Deployment and Preview
Static Hosting Deployment:
- For frontend projects, after building, you can use CloudBase static hosting
- First start local preview, then confirm with user if deployment to CloudBase static hosting is needed
- When deploying, if user has no special requirements, generally do not deploy directly to root directory
- Return deployed address in markdown link format
Local Preview:
- To preview static web pages locally, navigate to the specified output directory and use
npx live-server
- To preview static web pages locally, navigate to the specified output directory and use
Public Path Configuration:
- When web projects are deployed to static hosting CDN, since paths cannot be known in advance,
publicPathand similar configurations should use relative paths instead of absolute paths - This solves resource loading issues
- When web projects are deployed to static hosting CDN, since paths cannot be known in advance,
Show full SKILL.md (248 more words)Show less
CloudBase Web SDK Usage
- SDK Integration:
- If user's project needs database, cloud functions, and other features, need to introduce
@cloudbase/js-sdk@latestin the web application
- If user's project needs database, cloud functions, and other features, need to introduce
Important: Authentication must use SDK built-in features. It is strictly forbidden to implement login authentication logic using cloud functions!
import cloudbase from "@cloudbase/js-sdk";
const app = cloudbase.init({
env: "xxxx-yyy", // Can query environment ID via envQuery tool
});
const auth = app.auth();
// Check current login state
let loginState = await auth.getLoginState();
if (loginState && loginState.user) {
// Logged in
const user = await auth.getCurrentUser();
console.log("Current user:", user);
} else {
// Not logged in - use SDK built-in authentication features
// Collect user's phone number into variable `phoneNum` by providing a input UI
// Send SMS code
const verificationInfo = await auth.getVerification({
phone_number: `+86 ${phoneNum}`,
});
// Collect user's phone number into variable `verificationCode` by providing a input UI
// Sign in
await auth.signInWithSms({
verificationInfo,
verificationCode,
phoneNum,
});
}Initialization rules (Web, @cloudbase/js-sdk):
- Always use synchronous initialization with the pattern above
- Do not lazy-load the SDK with
import("@cloudbase/js-sdk") - Do not wrap SDK initialization in async helpers such as
initCloudBase()with internalinitPromisecaches - Keep a single shared
app/authinstance in your frontend app; reuse it instead of re-initializing
Web SDK API usage rules
- Only use documented CloudBase Web SDK methods
- Before calling any method on
app,auth,db, or other SDK objects, confirm it exists in the official CloudBase Web SDK documentation - If a method or option is not mentioned in the official docs (for example some guessed method name), do NOT invent or use it
Authentication Best Practices
Must use SDK built-in authentication: CloudBase Web SDK provides complete authentication features, including login by SMS, anonymous login, custom login, etc.
Forbidden to implement login using cloud functions: Do not create cloud functions to handle login logic, this is the wrong approach
User data management: After login, user information can be obtained via
auth.getCurrentUser(), then stored to databaseError handling: All authentication operations should include complete error handling logic
Build Process
Web project build process: Ensure npm install command has been executed first, then refer to project documentation for building
© LeoYeAI, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in skills/cloudbase/references/web-development of LeoYeAI/openclaw-master-skills.
Open the folder on GitHubat commit e5199b5
Used in 1 other repository
We found 2 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in LeoYeAI/openclaw-master-skills, which our catalogue first saw on October 7, 2026.
Compare with similar skills
Web Development next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Web Development this skillLeoYeAI/openclaw-master-skills | 2.2k | 1 repos | ~1.4k | Automated safety check: Pass | MIT | |
| Deploy Frontendbutterbase-ai/butterbase-skills | 534 | — | ~2.8k | Automated safety check: Pass | MIT | |
| Pinmeglitternetwork/pinme | 3.7k | — | ~3.8k | Automated safety check: Notes | MIT | |
| Convex Self Hostingwaynesutton/markdown-site | 628 | — | ~1.4k | Automated safety check: Pass | MIT | |
| Nextjs On Cloudflarecloudflare/skills | 3k | 2 repos | ~678 | Automated safety check: Pass | Apache-2.0 | |
| Frontend Build Timing Auditopenops-cloud/openops | 1.1k | — | ~2.3k | Automated safety check: Pass | Custom licence |
Similar skills
Pinme
glitternetwork/pinme
A skill your agent uses when the user mentions "pinme", or needs to upload files, store to IPFS, create/publish/deploy websites or full-stack services (including frontend pages, backend APIs…
Convex Self Hosting
waynesutton/markdown-site
Integrate Convex static self hosting into existing apps using the latest upstream instructions from get-convex/self-hosting every time.
- Official
Nextjs On Cloudflare
cloudflare/skills
Build, migrate, and deploy Next.js apps on Cloudflare Workers with vinext.
Frontend Build Timing Audit
openops-cloud/openops
Detects and diagnoses chunk-evaluation timing bugs in the Vite/rolldown production build of react-ui (works-in-dev / broken-in-build i18n regressions, missing UI labels, module-scope t()…
Trip Map Builder
hiyeshu/trip-map-builder
End-to-end trip planning: gather user constraints, build a reference itinerary, research locations and dining signals via 大众点评 + 小红书, then generate an interactive mobile-first map page (Leaflet +…
More from LeoYeAI/openclaw-master-skills
All 1,215 skills in this repoDevOps Pipeline Management
LeoYeAI/openclaw-master-skills
Manages pipelines on a DevOps quality and efficiency platform through its OpenAPI: list workspaces and templates, create, update, run and cancel pipelines, and read run records.
Feishu Document Collaboration
LeoYeAI/openclaw-master-skills
Patches OpenClaw's Feishu extension so an edited document triggers an isolated agent session that reads the doc and replies inline, turning it into a live chat space.
Files Memory System
LeoYeAI/openclaw-master-skills
Multi-context memory management system for OpenClaw agents with group-isolated storage, global shared memory, workspace organization, and group-specific skills isolation.
GEO-Claw AI Visibility Agent
LeoYeAI/openclaw-master-skills
Runs a brand's AI-search visibility work end to end: diagnosing how AI platforms represent it, repositioning it, producing AI-optimized content and monitoring ongoing mentions.
Google Workspace CLI
LeoYeAI/openclaw-master-skills
Installs and authenticates the gws CLI, then automates Gmail, Drive, Sheets, Calendar, Docs, Chat and Tasks with ready-made recipes, persona bundles and security audits.
HealthFit Health Advisors
LeoYeAI/openclaw-master-skills
Runs four advisor roles, a fitness coach, nutritionist, data analyst and TCM practitioner, to build a health profile and track workouts, diet and wellness over time.
Related
Works with
Categories
Questions about Web Development
What does Web Development do?
Web frontend project development rules. An agent skill from LeoYeAI/openclaw-master-skills. Web Development is an agent skill from LeoYeAI/openclaw-master-skills. Web frontend project development rules.
When should I use Web Development?
Web Development fits situations like: developing web frontend pages; deploying static hosting; integrating CloudBase Web SDK.
How do I install Web Development in Claude Code?
Run `npx skills add LeoYeAI/openclaw-master-skills --skill web-development -a claude-code`. Or copy the skill folder (skills/cloudbase/references/web-development in LeoYeAI/openclaw-master-skills) into .claude/skills/web-development in your project. Claude Code loads it when a task matches its description.
How do I install Web Development in Codex?
Run `npx skills add LeoYeAI/openclaw-master-skills --skill web-development -a codex`. Or copy the skill folder (skills/cloudbase/references/web-development in LeoYeAI/openclaw-master-skills) into .agents/skills/web-development in your project. Codex loads it when a task matches its description.
Can I use Web Development in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add LeoYeAI/openclaw-master-skills --skill web-development -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/web-development, .gemini/skills/web-development, .github/skills/web-development and .opencode/skills/web-development in your project.
What does Web Development need to run?
Going by SKILL.md and its folder, Web Development needs the command-line tools its instructions call (npm and npx). Our summary lists: Node.js.
Does Web Development access the network?
SKILL.md contains no URLs. Its commands use npm and npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.
Is Web Development safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Web Development use?
Web Development is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Web Development use?
About 1.4k tokens (SKILL.md is roughly 5.7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Web Development?
Skills that share tags, products or a category with Web Development: Deploy Frontend (butterbase-ai/butterbase-skills, 534 stars), Pinme (glitternetwork/pinme, 3.7k stars), Convex Self Hosting (waynesutton/markdown-site, 628 stars) and Nextjs On Cloudflare (cloudflare/skills, 3k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Web Development?
LeoYeAI (a GitHub user) maintains it in LeoYeAI/openclaw-master-skills, which has 2,158 GitHub stars. The repository holds 1,215 skills in this directory. The repository was last updated on July 20, 2026.
Source: LeoYeAI/openclaw-master-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.