[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6KHF0G3Q1P65PVB7W8490TR":3,"skill-same:01M6KHF0G3Q1P65PVB7W8490TR":56},{"skillNo":4,"name":5,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":6,"repositoryNo":11,"starsCount":12,"licenseSpdxId":13,"licenseFileUrl":6,"sourceHtmlUrl":14,"categories":15,"keywords":21,"publishedAt":29,"linkOnly":30,"markdownContent":31,"markdownBody":32,"frontMatter":33,"refName":34,"commitSha":35,"skillDirectory":36,"forksCount":37,"repositoryHtmlUrl":38,"repositoryHomepageUrl":39,"ownerHtmlUrl":40,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":41,"install":42,"resources":55},"01M6KHF0G3Q1P65PVB7W8490TR","run3_write-single-page-web-app-files",null,"cxcscmu\u002FSkillLearnBench","cxcscmu","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F142838272?v=4","01M6KCQDFQWPDSN0MKZY96MSQP","01M6KCQDM7G70TKJ28NTSQC0RZ",93,"MIT","https:\u002F\u002Fgithub.com\u002Fcxcscmu\u002FSkillLearnBench\u002Fblob\u002Fmain\u002Fskills\u002Fb3-teacher-feedback-claude-sonnet-4-6\u002Fstock-data-visualization\u002Frun3_write-single-page-web-app-files\u002FSKILL.md",[16],{"categoryNo":17,"categoryName":18,"taxonomyType":19,"taxonomyTypeDesc":20},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",[22,23,24,25,26,27,28],"web","page","write","files","app","web app","run3 write single page web app files","2026-11-10 10:12:30",false,"---\nname: write-single-page-web-app-files\ndescription: Use when generating all files for a single-page web app: index.html, CSS, and JS. Ensures correct relative paths, proper script loading order, and valid HTML structure.\n---\n\n# Writing Single-Page Web App Files\n\n## File Writing Pattern\n```python\ndef write_file(path, content):\n    os.makedirs(os.path.dirname(path), exist_ok=True)\n    with open(path, 'w', encoding='utf-8') as f:\n        f.write(content)\n    print(f\"Written: {path} ({len(content)} bytes)\")\n```\n\n## index.html Structure\n```html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n  \u003Cmeta charset=\"UTF-8\">\n  \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  \u003Ctitle>Stock Visualization\u003C\u002Ftitle>\n  \u003Clink rel=\"stylesheet\" href=\"css\u002Fstyle.css\">\n\u003C\u002Fhead>\n\u003Cbody>\n  \u003Cdiv id=\"app\">\n    \u003Cdiv id=\"bubble-chart\">\u003C\u002Fdiv>\n    \u003Cdiv id=\"stock-table\">\n      \u003Ctable>\n        \u003Cthead>\n          \u003Ctr>\n            \u003Cth>Ticker Symbol\u003C\u002Fth>\n            \u003Cth>Full Company Name\u003C\u002Fth>\n            \u003Cth>Sector\u003C\u002Fth>\n            \u003Cth>Market Cap\u003C\u002Fth>\n          \u003C\u002Ftr>\n        \u003C\u002Fthead>\n        \u003Ctbody id=\"table-body\">\u003C\u002Ftbody>\n      \u003C\u002Ftable>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003C!-- Tooltip div at body level for correct absolute positioning -->\n  \u003Cdiv class=\"tooltip\" id=\"tooltip\">\u003C\u002Fdiv>\n  \u003C!-- Scripts at end of body -->\n  \u003Cscript src=\"js\u002Fd3.v6.min.js\">\u003C\u002Fscript>\n  \u003Cscript src=\"js\u002Fvisualization.js\">\u003C\u002Fscript>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n## CSS Layout for Side-by-Side\n```css\n* { box-sizing: border-box; margin: 0; padding: 0; }\nbody { font-family: sans-serif; background: #f9f9f9; }\n\n#app {\n  display: flex;\n  flex-direction: row;\n  align-items: flex-start;\n  gap: 16px;\n  padding: 16px;\n  min-height: 100vh;\n}\n\n#bubble-chart {\n  flex: 0 0 auto;\n  width: 700px;\n}\n\n#stock-table {\n  flex: 1 1 auto;\n  max-height: 90vh;\n  overflow-y: auto;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n  background: #fff;\n}\n\n#stock-table table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 13px;\n}\n\n#stock-table th, #stock-table td {\n  padding: 6px 10px;\n  text-align: left;\n  border-bottom: 1px solid #eee;\n}\n\n#stock-table th {\n  background: #37474f;\n  color: #fff;\n  position: sticky;\n  top: 0;\n}\n\n#table-body tr:hover { background: #f0f0f0; cursor: pointer; }\n#table-body tr.highlighted { background-color: #ffe082; font-weight: bold; }\n```\n\n## Relative Paths Rule\n- From `index.html` at `\u002Froot\u002Foutput\u002Findex.html`, use `js\u002F`, `css\u002F`, `data\u002F` (no leading slash)\n- From `visualization.js` at `\u002Froot\u002Foutput\u002Fjs\u002Fvisualization.js`, data paths must be `..\u002Fdata\u002F...`","# Writing Single-Page Web App Files\n\n## File Writing Pattern\n```python\ndef write_file(path, content):\n    os.makedirs(os.path.dirname(path), exist_ok=True)\n    with open(path, 'w', encoding='utf-8') as f:\n        f.write(content)\n    print(f\"Written: {path} ({len(content)} bytes)\")\n```\n\n## index.html Structure\n```html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n  \u003Cmeta charset=\"UTF-8\">\n  \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  \u003Ctitle>Stock Visualization\u003C\u002Ftitle>\n  \u003Clink rel=\"stylesheet\" href=\"css\u002Fstyle.css\">\n\u003C\u002Fhead>\n\u003Cbody>\n  \u003Cdiv id=\"app\">\n    \u003Cdiv id=\"bubble-chart\">\u003C\u002Fdiv>\n    \u003Cdiv id=\"stock-table\">\n      \u003Ctable>\n        \u003Cthead>\n          \u003Ctr>\n            \u003Cth>Ticker Symbol\u003C\u002Fth>\n            \u003Cth>Full Company Name\u003C\u002Fth>\n            \u003Cth>Sector\u003C\u002Fth>\n            \u003Cth>Market Cap\u003C\u002Fth>\n          \u003C\u002Ftr>\n        \u003C\u002Fthead>\n        \u003Ctbody id=\"table-body\">\u003C\u002Ftbody>\n      \u003C\u002Ftable>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003C!-- Tooltip div at body level for correct absolute positioning -->\n  \u003Cdiv class=\"tooltip\" id=\"tooltip\">\u003C\u002Fdiv>\n  \u003C!-- Scripts at end of body -->\n  \u003Cscript src=\"js\u002Fd3.v6.min.js\">\u003C\u002Fscript>\n  \u003Cscript src=\"js\u002Fvisualization.js\">\u003C\u002Fscript>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n## CSS Layout for Side-by-Side\n```css\n* { box-sizing: border-box; margin: 0; padding: 0; }\nbody { font-family: sans-serif; background: #f9f9f9; }\n\n#app {\n  display: flex;\n  flex-direction: row;\n  align-items: flex-start;\n  gap: 16px;\n  padding: 16px;\n  min-height: 100vh;\n}\n\n#bubble-chart {\n  flex: 0 0 auto;\n  width: 700px;\n}\n\n#stock-table {\n  flex: 1 1 auto;\n  max-height: 90vh;\n  overflow-y: auto;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n  background: #fff;\n}\n\n#stock-table table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 13px;\n}\n\n#stock-table th, #stock-table td {\n  padding: 6px 10px;\n  text-align: left;\n  border-bottom: 1px solid #eee;\n}\n\n#stock-table th {\n  background: #37474f;\n  color: #fff;\n  position: sticky;\n  top: 0;\n}\n\n#table-body tr:hover { background: #f0f0f0; cursor: pointer; }\n#table-body tr.highlighted { background-color: #ffe082; font-weight: bold; }\n```\n\n## Relative Paths Rule\n- From `index.html` at `\u002Froot\u002Foutput\u002Findex.html`, use `js\u002F`, `css\u002F`, `data\u002F` (no leading slash)\n- From `visualization.js` at `\u002Froot\u002Foutput\u002Fjs\u002Fvisualization.js`, data paths must be `..\u002Fdata\u002F...`",{},"main","726e1f79b96b0cb3d729d0e55a1c847e0b5353ae","skills\u002Fb3-teacher-feedback-claude-sonnet-4-6\u002Fstock-data-visualization\u002Frun3_write-single-page-web-app-files",8,"https:\u002F\u002Fgithub.com\u002Fcxcscmu\u002FSkillLearnBench","https:\u002F\u002Fcxcscmu.github.io\u002FSkillLearnBench","https:\u002F\u002Fgithub.com\u002Fcxcscmu","2026-10-02 22:55:36",{"source":7,"skillName":5,"commands":43,"prompt":53,"zipAvailable":54},[44,47,50],{"tool":45,"command":46},"npx","npx skills add cxcscmu\u002FSkillLearnBench --skill run3_write-single-page-web-app-files",{"tool":48,"command":49},"bunx","bunx skills add cxcscmu\u002FSkillLearnBench --skill run3_write-single-page-web-app-files",{"tool":51,"command":52},"pnpm","pnpm dlx skills add cxcscmu\u002FSkillLearnBench --skill run3_write-single-page-web-app-files","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fcxcscmu\u002FSkillLearnBench\u002Fblob\u002Fmain\u002Fskills\u002Fb3-teacher-feedback-claude-sonnet-4-6\u002Fstock-data-visualization\u002Frun3_write-single-page-web-app-files\u002FSKILL.md",true,[],[57,73,98,116,136,148],{"skillNo":58,"name":59,"nameZh":6,"description":60,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":6,"repositoryNo":11,"starsCount":12,"licenseSpdxId":13,"licenseFileUrl":6,"sourceHtmlUrl":61,"categories":62,"keywords":66,"publishedAt":29},"01M6KM5KH175P5ABP5JMX2SBDQ","object_counter","Count occurrences of an object in the image using computer vision algorithm.","https:\u002F\u002Fgithub.com\u002Fcxcscmu\u002FSkillLearnBench\u002Fblob\u002Fmain\u002Fskills\u002Fhuman_authored\u002Fvideo-object-counting\u002Fobject_counter\u002FSKILL.md",[63],{"categoryNo":64,"categoryName":65,"taxonomyType":19,"taxonomyTypeDesc":20},"01JBSEEDCAT000000000000016","图像与多媒体",[67,68,69,70,71,72],"object counter","object","vision","computer","Computer Vision","image",{"skillNo":74,"name":75,"nameZh":6,"description":76,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":6,"repositoryNo":11,"starsCount":12,"licenseSpdxId":13,"licenseFileUrl":6,"sourceHtmlUrl":77,"categories":78,"keywords":82,"publishedAt":29},"01M6KM51TMVXG79MMPCS6Y8G86","travel-planning-workflow","Invoke this skill when performing travel planning. It defines a structured workflow for generating itineraries. Following this workflow is essential to ensure the final plan satisfies user requirements.","https:\u002F\u002Fgithub.com\u002Fcxcscmu\u002FSkillLearnBench\u002Fblob\u002Fmain\u002Fskills\u002Fhuman_authored\u002Ftravel-planning\u002Ftravel-planning-workflow\u002FSKILL.md",[79],{"categoryNo":80,"categoryName":81,"taxonomyType":19,"taxonomyTypeDesc":20},"01JBSEEDCAT000000000000023","Skill与智能体开发",[83,84,85,86,87,88,89,90,91,92,93,94,95,96,97],"workflow","planning","planning workflow","travel","travel planning","travel planning workflow","structured","performing","plan","for","user","it","requirements","essential","itineraries",{"skillNo":99,"name":100,"nameZh":6,"description":101,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":6,"repositoryNo":11,"starsCount":12,"licenseSpdxId":13,"licenseFileUrl":6,"sourceHtmlUrl":102,"categories":103,"keywords":104,"publishedAt":29},"01M6KM4DY820XHS9YTSK5QP5HD","bundled-dataset-search-tool","invoke this skill when you need to perform database search for travel planning. This skill provides some useful pre-packaged tools to look up accommodations, attractions, cities, driving distance, flights, and restaurants from the bundled dataset.","https:\u002F\u002Fgithub.com\u002Fcxcscmu\u002FSkillLearnBench\u002Fblob\u002Fmain\u002Fskills\u002Fhuman_authored\u002Ftravel-planning\u002Fbundled-dataset-search-tool\u002FSKILL.md",[],[105,106,107,108,109,110,111,86,112,113,87,114,92,115,84],"search","tool","dataset","bundled dataset search tool","restaurants","Tools","up","look","flights","you","database",{"skillNo":117,"name":118,"nameZh":6,"description":119,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":6,"repositoryNo":11,"starsCount":12,"licenseSpdxId":13,"licenseFileUrl":6,"sourceHtmlUrl":120,"categories":121,"keywords":122,"publishedAt":29},"01M6KM465BB9PQ0B548HQSVAWZ","glm-output","Output-processing guidance for GLM tasks. Especially useful after glm-basics and glm-calibration when you need verifier-matching metrics from output.nc and a final \u002Froot\u002Fmetrics.json.","https:\u002F\u002Fgithub.com\u002Fcxcscmu\u002FSkillLearnBench\u002Fblob\u002Fmain\u002Fskills\u002Fhuman_authored\u002Ftemperature-simulation\u002Fglm-output\u002FSKILL.md",[],[123,124,125,92,126,127,128,129,130,131,132,133,114,134,135],"glm output","output","glm","tasks","metrics","json","basics","guidance","matching","verifier","processing","root","calibration",{"skillNo":137,"name":138,"nameZh":6,"description":139,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":6,"repositoryNo":11,"starsCount":12,"licenseSpdxId":13,"licenseFileUrl":6,"sourceHtmlUrl":140,"categories":141,"keywords":143,"publishedAt":29},"01M6KM40KY3QWDW5W97S39R2BC","glm-calibration","Calibration guidance for GLM tasks. Often most effective after glm-basics has clarified the setup; glm-output is the companion skill for exact final metric computation.","https:\u002F\u002Fgithub.com\u002Fcxcscmu\u002FSkillLearnBench\u002Fblob\u002Fmain\u002Fskills\u002Fhuman_authored\u002Ftemperature-simulation\u002Fglm-calibration\u002FSKILL.md",[142],{"categoryNo":80,"categoryName":81,"taxonomyType":19,"taxonomyTypeDesc":20},[144,135,125,124,130,129,126,145,146,92,147],"glm calibration","setup","companion","metric",{"skillNo":149,"name":150,"nameZh":6,"description":151,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":6,"repositoryNo":11,"starsCount":12,"licenseSpdxId":13,"licenseFileUrl":6,"sourceHtmlUrl":152,"categories":153,"keywords":154,"publishedAt":29},"01M6KM3VHHVSGMGHJQB3PPT6YG","glm-basics","A good starting point for GLM calibration tasks. Use to inspect glm3.nml, confirm how GLM runs, and identify the relevant files before moving on to calibration and output evaluation.","https:\u002F\u002Fgithub.com\u002Fcxcscmu\u002FSkillLearnBench\u002Fblob\u002Fmain\u002Fskills\u002Fhuman_authored\u002Ftemperature-simulation\u002Fglm-basics\u002FSKILL.md",[],[155,125,129,156,144,135,92,124,157,25,158,159,160,161,126],"glm basics","inspect","relevant","good","use","how","Evaluation"]