# 前端开发技能 **描述**: 使用HTML5、CSS3、JavaScript进行前端页面开发，含响应式布局、交互逻辑和浏览器兼容性处理 **依赖工具**: read_text, write_text, edit_file, make_dir, search_file, ls, exec_code, run_script, call_agent ## 步骤 ### 步骤1：读取相关常识知识使用 `read_knowledge` 读取以下常识知识，了解领域规范和标准： - 使用 `read_knowledge knowledge_name='naming_conventions'` - 使用 `read_knowledge knowledge_name='project_structure'` - 使用 `read_knowledge knowledge_name='logging_standards'` - 使用 `read_knowledge knowledge_name='color_system'` - 使用 `read_knowledge knowledge_name='typography'` - 使用 `read_knowledge knowledge_name='responsive_breakpoints'` ### 步骤2：读取工作提示词使用 `read_work` 读取以下工作提示词，按规范流程执行： - 使用 `read_work work_name='html_css'` - 使用 `read_work work_name='vue_development'` - 使用 `read_work work_name='js_development'` - 使用 `read_work work_name='api_integration'` - 使用 `read_work work_name='responsive_testing'` ### 步骤3：分析需求与准备环境 > 明确页面数量、功能模块和设计风格，创建前端目录结构 1. 用 `read_text` 读取项目需求文档或UI设计规范 2. 用 `read_knowledge('project_structure')` 了解标准项目目录结构 3. 用 `make_dir` 创建目录：`./project/{项目名}/static/`、`css/`、`js/`、`img/`、`font/` ### 编写HTML结构 > 构建语义化的HTML5页面骨架 1. 用 `write_text` 写入 `./project/{项目名}/static/{页面名}.html`，使用语义化标签（header/nav/main/section/article/footer） 2. DOCTYPE 设为 ``，lang 设为 `zh-CN`，meta viewport 设为 `width=device-width, initial-scale=1.0` 3. 用 `read_knowledge('responsive_breakpoints')` 了解响应式断点规范 4. CSS 通过 `` 引入，JS 通过 `