Web Dev Toolkit Free

为个人开发者提供HTML/CSS诊断、JavaScript模式指导、框架选择决策及基础部署的Web开发辅助工具免费版。

Install

openclaw skills install @thcjp/web-dev-toolkit-free

Web 开发工具集(免费版)

概述

web-dev-toolkit-free 为个人开发者提供 Web 开发全流程辅助。它覆盖 HTML/CSS 问题诊断、JavaScript 模式指导、框架选择决策、性能与 SEO 基础与部署基础,帮助你快速完成个人 Web 项目的开发、调试与上线。

本工具通过自然语言指令驱动 Agent 输出建议与代码片段,无需安装额外脚本。

核心能力

能力	说明
HTML/CSS 诊断	DOCTYPE、CSS 优先级、盒模型、布局问题
JavaScript 模式	`===` vs `==`、异步循环、CORS、表单处理
框架决策树	静态/SSR/SPA 框架选择建议
响应式基础	viewport meta、移动优先、媒体查询
可访问性基础	语义化 HTML、对比度、键盘导航
部署基础	Vercel/Netlify/VPS 部署流程
技术实现要点：核心能力基于`input_params`参数与`output_format`配置实现,支持创建/查询/修改/删除等操作模式,通过`config_options`进行运行时配置。

核心功能执行

用input_params参数进行配置。

输入: 用户提供核心功能执行所需的指令和必要参数。处理: 解析核心功能执行的输入参数,完成核心逻辑,返回结构化响应。输出: 返回核心功能执行的响应数据,包含状态码、结果和日志。

执行此能力时使用input_params参数,支持创建/查询/导出操作

参数配置与调用

用config_options参数进行配置。

输入: 用户提供参数配置与调用所需的指令和必要参数。处理: 解析参数配置与调用的输入参数,完成核心逻辑,返回结构化响应。输出: 返回参数配置与调用的响应数据,包含状态码、结果和日志。

执行此能力时使用config_options参数,支持修改/重置/导入操作

结果处理与输出

用output_format参数进行配置。

输入: 用户提供结果处理与输出所需的指令和必要参数。处理: 解析结果处理与输出的输入参数,完成核心逻辑,返回结构化响应。输出: 返回结果处理与输出的响应数据,包含状态码、结果和日志。

执行此能力时使用output_format参数,支持导出/保存/转换操作 能力覆盖范围：本skill的核心能力覆盖以下场景关键词：面向个人开发者的、Web、开发辅助工具、框架选择与部署基、开发工具集免费版、为个人开发者提供、开发全流程辅助、性能与、SEO、基础与部署基础、问题诊断与修复、常见模式指导、框架选择决策树、响应式与可访问性、部署到、的基础流程等。这些关键词对应description中声明的使用场景,均已在上述能力点中提供对应的操作支持。

使用场景

场景 1:响应式布局修复

text

我的页面在手机上显示不全,怎么改?

工具会检查:1) 是否有 <meta name="viewport">;2) 是否使用相对单位;3) 媒体查询断点设置。

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <!-- 关键:viewport meta -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>响应式页面</title>
  <style>
    /* 移动端优先 */
    .container {
      width: 100%;
      padding: 0 1rem;
    }
    @media (min-width: 768px) {
      .container { max-width: 720px; margin: 0 auto; }
    }
    @media (min-width: 1024px) {
      .container { max-width: 960px; }
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>响应式页面</h1>
  </div>
</body>
</html>

错误处理

text

我的前端调用后端API报CORS错误,怎么办?

工具会解释:CORS 是服务端配置,客户端无法绕过。需要在后端设置 Access-Control-Allow-Origin 头。

javascript

// Node.js Express 后端配置 CORS
const express = require('express');
const cors = require('cors');
// ...
const app = express();
app.use(cors({
  origin: ['https://your-frontend.com'],
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  credentials: true
}));
// ...
app.listen(3000, () => console.log('Server running on :3000'));

场景 3:框架选择决策

text

我要做一个博客,用 Next.js 还是 Astro?

工具会根据决策树给出建议:

错误场景(需求)	推荐框架	理由	处理方式
静态内容,构建快	Astro 或纯 HTML	零 JS 默认,性能最佳	对照依赖说明章节逐项验证配置项,确认环境变量已正确设置后执行ping命令测试网络连通性,检查防火墙和代理设置连接后重新执行命令
博客/文档(MDX)	Astro 或 Next.js App Router	MDX 支持好,SSG/ISR 灵活	对照依赖说明章节逐项验证配置项,确认环境变量已正确设置后执行ping命令测试网络连通性,检查防火墙和代理设置连接后重新执行命令
交互应用(带认证)	Next.js 或 Remix	SSR + 认证支持完整	对照依赖说明章节逐项验证配置项,确认环境变量已正确设置后执行ping命令测试网络连通性,检查防火墙和代理设置连接后重新执行命令
完整 SSR/ISR 控制	Next.js	App Router 功能最全	对照依赖说明章节逐项验证配置项,确认环境变量已正确设置后执行ping命令测试网络连通性,检查防火墙和代理设置连接后重新执行命令
简单 SPA,无 SEO 需求	Vite + React/Vue	配置简单,启动快	对照依赖说明章节逐项验证配置项,确认环境变量已正确设置后执行ping命令测试网络连通性,检查防火墙和代理设置连接后重新执行命令

不适用场景

以下场景Web开发工具集(免费版)不适合处理：

无明确技术栈的模糊需求
纯架构设计决策
运维部署管理

触发条件

需要代码生成、编程辅助、调试测试、开发部署时使用。不适用于非本工具能力范围的需求。

快速开始

第一步:描述问题

直接在对话中描述你的 Web 开发问题,例如:

text

我的表单提交后页面刷新了,怎么阻止?

第二步:获取解决方案

工具会输出问题分析、修复代码与简要解释,并标注是否符合最佳实践。

第三步:本地验证

bash

# 启动本地开发服务器
npm run dev
# ...
# 或用 Python 临时服务器
python3 -m http.server 8000

示例

个人项目 HTML 基础模板

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="页面描述,用于SEO">
  <title>页面标题</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <nav><!-- 导航 --></nav>
  </header>
  <main>
    <article><!-- 主要内容 --></article>
  </main>
  <footer><!-- 页脚 --></footer>
  <script src="script.js" defer></script>
</body>
</html>

关键 Web 规则速查

规则	说明
DOCTYPE 必须有	缺失触发怪异模式,布局不可预测
`===` 而非 `==`	避免类型转换:`"0" == false` 为 true
异步循环用 `for...of`	`forEach` 不 await,会吞错误
CORS 是服务端配置	客户端无法绕过,需后端设置头
viewport meta 必须有	缺失则移动端按桌面宽度渲染
表单加 `preventDefault`	否则页面刷新
图片必须有尺寸	避免 CLS(累积布局偏移)
HTTPS 资源	混合内容(HTTP on HTTPS)会被阻止
环境变量前缀	`NEXT_PUBLIC_*` 会暴露到客户端,勿用于敏感值

最佳实践

DOCTYPE 必须有:缺失 <!DOCTYPE html> 会触发怪异模式,布局不可预测。
CSS 优先级胜过顺序:.class 选择器优先级高于元素选择器,与出现顺序无关。
始终用 === 而非 ==:避免类型转换导致的隐式 bug。
异步循环用 for...of:forEach 不 await,会吞掉错误。
CORS 在服务端配置:客户端无法绕过,需在后端设置 Access-Control-Allow-Origin。
viewport meta 必须有:否则移动端按桌面宽度渲染,出现横向滚动。
表单 preventDefault:在 submit 处理器中调用 e.preventDefault(),否则页面刷新。
图片必须有 width 与 height:避免 CLS(累积布局偏移)惩罚。

常见问题

Q1: 如何选择静态站点生成器(SSG)?

纯内容站选 Astro(默认零 JS,性能最佳);需要 React 组件的博客选 Next.js(App Router);文档站选 VitePress 或 Astro。

Q2: 性能优化从哪里入手?

用 Lighthouse 审计,聚焦三个核心指标:LCP(最大内容绘制)、CLS(累积布局偏移)、FID/INP(首次输入延迟/交互延迟)。先优化首屏图片与字体加载。

Q3: SEO 基础有哪些?

每页独立 title 与 description,使用语义化 HTML,添加 Open Graph 标签,提交 sitemap.xml,使用结构化数据(JSON-LD)。

Q4: 环境变量如何安全使用?

前端可访问的变量前缀为 NEXT_PUBLIC_*(Next.js)或 VITE_*(Vite),这些会暴露到客户端。敏感密钥(数据库密码、API Key)必须只在服务端使用,不加前端前缀。

Q5: 免费版与 Pro 版的区别?

免费版提供个人项目所需的 Web 开发基础;Pro 版扩展性能优化工程化、SEO 深度、可访问性 WCAG AA 审查、企业级部署与监控能力。

依赖说明

运行环境

Agent 平台:支持 SKILL.md 的任意 AI Agent(Claude Code / Cursor / Codex / Gemini CLI 等)
操作系统:Windows / macOS / Linux
浏览器:任意现代浏览器(Chrome / Firefox / Safari / Edge)
Node.js:建议 18+(用于本地开发服务器)

依赖详情

依赖项	类型	是否必需	获取方式
浏览器	系统工具	必需	系统预装
Node.js	运行时	推荐	官方安装包
文本编辑器	系统工具	必需	系统预装
LLM API	API	必需	由 Agent 内置 LLM 提供

API Key 配置

本 Skill 完全基于 Markdown 指令,无需额外 API Key
部署到 Vercel/Netlify 时,需配置对应平台的访问令牌

可用性分类

分类: MD+EXEC(纯 Markdown 指令,部分功能需要 exec 命令行执行能力)
说明: 基于自然语言指令驱动 Agent 输出 Web 开发建议与代码片段;用户通过本地浏览器与开发服务器验证

已知限制

需LLM支持,无LLM环境不可用
复杂业务场景建议结合人工经验判断
执行效率受模型能力与网络环境影响
当前为免费版本,如需完整功能请升级到付费版获取全部能力

输出格式

json

{
  "success": true,
  "data": {
    "result": "Web开发工具集(免费版)处理结果",
    "execution_time": "0.5s",
    "metadata": {
      "version": "1.0",
      "processor": "web devkit"
    }
  },
  "execution_log": ["解析输入参数", "执行核心处理", "格式化输出结果"],
  "error": null
}