{"_id":"@agent-skills-dashboard/react","_rev":"3-fc29b0a31dc498c563492287acd4fa21","name":"@agent-skills-dashboard/react","dist-tags":{"latest":"0.1.9"},"versions":{"0.1.0":{"name":"@agent-skills-dashboard/react","version":"0.1.0","_id":"@agent-skills-dashboard/react@0.1.0","maintainers":[{"name":"wenson123","email":"luwenchun1@gmail.com"}],"dist":{"shasum":"f30c329de09d9d93fef5039f9b8fc7e6ad4b20b8","tarball":"https://registry.npmjs.org/@agent-skills-dashboard/react/-/react-0.1.0.tgz","fileCount":8,"integrity":"sha512-b93qULrw3c6pGrv/SOmTe3EczIVwwg6oHE7lnt8iJtEwMR+3v6TQ25SHWgqcdU0FXBVyBYzsran0D8xjgCQeng==","signatures":[{"sig":"MEUCIQCt2+ntH2fJR12dQwZgvc1hHAWIUE5WodG1632FOLbSjAIgdLYg9nOzLMGFY4lqvJKqsroTNuA7F3iRvRB9frAvURA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":48078},"main":"./dist/index.js","style":"./dist/styles.css","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./styles":"./dist/styles.css"},"gitHead":"4517cdbaad06485c66a9df325cd4847a407e6a19","private":false,"scripts":{"dev":"tsup --watch","test":"vitest run","build":"tsup"},"_npmUser":{"name":"wenson123","email":"luwenchun1@gmail.com"},"_npmVersion":"10.8.2","description":"React components for Agent Skills visualization","directories":{},"_nodeVersion":"20.20.2","dependencies":{"d3":"^7.9.0","@agent-skills-dashboard/core":"workspace:*"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","vitest":"^1.0.0","@types/d3":"^7.4.3","typescript":"^5.4.0","@types/react":"^18.2.0","@agent-skills-dashboard/core":"workspace:*"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react_0.1.0_1776845831379_0.8322559547593742","host":"s3://npm-registry-packages-npm-production"}},"0.1.8":{"name":"@agent-skills-dashboard/react","version":"0.1.8","keywords":["agent-skills","ai-coding","react","dashboard","visualization"],"_id":"@agent-skills-dashboard/react@0.1.8","maintainers":[{"name":"wenson123","email":"luwenchun1@gmail.com"}],"homepage":"https://github.com/wensonlu/agent-skills-dashboard#readme","bugs":{"url":"https://github.com/wensonlu/agent-skills-dashboard/issues"},"dist":{"shasum":"0e2d153d22d9ff481df456a5a26e9d63926cb9e3","tarball":"https://registry.npmjs.org/@agent-skills-dashboard/react/-/react-0.1.8.tgz","fileCount":9,"integrity":"sha512-qE3wOmFisU7+x9C5NYvioJRja+vMiseSqMZTGbTz2XgXHwLjqUgIex8EElIi5SvnHgWF1/TAII7SXKYEFmNxNQ==","signatures":[{"sig":"MEUCIH/iZcv59Ci7HWExstVoGozMWZA1d+T4VeI3J5ieBtDuAiEA65AffMzCeLbFPnMXTuScBkUNMQKE8ahz2iHmS0lC2H4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":49991},"main":"./dist/index.js","style":"./dist/styles.css","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./styles":"./dist/styles.css"},"gitHead":"d0c6781b4607c849e037dfb74bcff86b14c74ad3","private":false,"scripts":{"dev":"tsup --watch","test":"vitest run","build":"tsup"},"_npmUser":{"name":"wenson123","email":"luwenchun1@gmail.com"},"repository":{"url":"git+https://github.com/wensonlu/agent-skills-dashboard.git","type":"git","directory":"packages/react"},"_npmVersion":"10.8.2","description":"React components for visualizing Agent Skills graphs, project phases, and skill detail cards.","directories":{},"_nodeVersion":"20.20.2","dependencies":{"d3":"^7.9.0","@agent-skills-dashboard/core":"workspace:*"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","vitest":"^1.0.0","@types/d3":"^7.4.3","typescript":"^5.4.0","@types/react":"^18.2.0","@agent-skills-dashboard/core":"workspace:*"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react_0.1.8_1776846373737_0.1394847194602722","host":"s3://npm-registry-packages-npm-production"}},"0.1.9":{"name":"@agent-skills-dashboard/react","version":"0.1.9","private":false,"description":"React components for visualizing SKILL.md skill graphs, project phases, and next-step recommendations.","keywords":["agent-skills","ai-coding","react","dashboard","visualization"],"homepage":"https://github.com/wensonlu/agent-skills-dashboard#readme","bugs":{"url":"https://github.com/wensonlu/agent-skills-dashboard/issues"},"repository":{"type":"git","url":"git+https://github.com/wensonlu/agent-skills-dashboard.git","directory":"packages/react"},"publishConfig":{"access":"public"},"main":"./dist/index.js","module":"./dist/index.mjs","types":"./dist/index.d.ts","style":"./dist/styles.css","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./styles":"./dist/styles.css"},"scripts":{"build":"tsup","dev":"tsup --watch","test":"vitest run"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"dependencies":{"@agent-skills-dashboard/core":"workspace:*","d3":"^7.9.0"},"devDependencies":{"@types/react":"^18.2.0","@types/d3":"^7.4.3","@agent-skills-dashboard/core":"workspace:*","tsup":"^8.0.0","typescript":"^5.4.0","vitest":"^1.0.0"},"_id":"@agent-skills-dashboard/react@0.1.9","gitHead":"55ee738460d9f04f5b5e9fb005d040ff7e9f5ce8","_nodeVersion":"20.20.2","_npmVersion":"10.8.2","dist":{"integrity":"sha512-TAqs3LoBuYfL8TtiuEfZnHin19V0i40JqDJsU2Mgy8DKHCItIArJbHVZhAUqT+GmWe/TLP2qMiUSEQDSovUKMQ==","shasum":"da371aa80075bdef7013744e29ee07d7d8bc34a6","tarball":"https://registry.npmjs.org/@agent-skills-dashboard/react/-/react-0.1.9.tgz","fileCount":9,"unpackedSize":50538,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIFKkWMMi7XCQlK/+2k/SVxVyhOHXOA5m5pobggv7ldLiAiA4WhH2rcH5lWmU3qesRVrCuGy8AdSePeoWsuQeknmdTg=="}]},"_npmUser":{"name":"wenson123","email":"luwenchun1@gmail.com"},"directories":{},"maintainers":[{"name":"wenson123","email":"luwenchun1@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react_0.1.9_1776848257082_0.15398876795285266"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-22T08:17:11.311Z","modified":"2026-04-22T08:57:37.339Z","0.1.0":"2026-04-22T08:17:11.514Z","0.1.8":"2026-04-22T08:26:13.871Z","0.1.9":"2026-04-22T08:57:37.213Z"},"bugs":{"url":"https://github.com/wensonlu/agent-skills-dashboard/issues"},"homepage":"https://github.com/wensonlu/agent-skills-dashboard#readme","keywords":["agent-skills","ai-coding","react","dashboard","visualization"],"repository":{"type":"git","url":"git+https://github.com/wensonlu/agent-skills-dashboard.git","directory":"packages/react"},"description":"React components for visualizing SKILL.md skill graphs, project phases, and next-step recommendations.","maintainers":[{"name":"wenson123","email":"luwenchun1@gmail.com"}],"readme":"# @agent-skills-dashboard/react\n\nReact components for visualizing Agent Skills graphs and project progress. Use it with `@agent-skills-dashboard/core` to render skill maps, stage trackers, and skill detail cards.\n\n这个组件包把 `SKILL.md` 这类 Agent 技能文件背后的“阶段 + 依赖 + 推荐”关系可视化出来。对人来说，它可以展示技能关系、当前项目阶段、任务匹配和下一步推荐；对 AI Agent 来说，它是技能导航结果的可读界面。\n\n## Install\n\n```bash\npnpm add @agent-skills-dashboard/core @agent-skills-dashboard/react\n\n# or\nnpm install @agent-skills-dashboard/core @agent-skills-dashboard/react\n```\n\nThis package expects `react` and `react-dom` to be installed in your app.\n\n### AI Install\n\n给 AI Agent 或自动化脚本使用时，可以临时指定淘宝 npm 镜像源，不修改全局 registry：\n\n```bash\nnpm install @agent-skills-dashboard/core @agent-skills-dashboard/react --registry=https://registry.npmmirror.com\n```\n\n## Quick Start\n\n```tsx\nimport { createProject, type SkillGraph } from '@agent-skills-dashboard/core';\nimport { SkillMap, ProjectTracker, SkillCard } from '@agent-skills-dashboard/react';\nimport '@agent-skills-dashboard/react/styles';\n\nexport function SkillsDashboard({ graph }: { graph: SkillGraph }) {\n  const project = createProject('My AI Project');\n\n  return (\n    <>\n      <SkillMap graph={graph} currentPhase=\"plan\" width={900} height={600} />\n      <ProjectTracker project={project} graph={graph} />\n      <SkillCard skill={graph.nodes[0]} />\n    </>\n  );\n}\n```\n\n## Components\n\n- `SkillMap` renders a D3-based skill relationship graph.\n- `ProjectTracker` renders project progress across `define`, `plan`, `build`, `verify`, `review`, and `ship`.\n- `SkillCard` renders details for a single skill.\n\n## Styles\n\nImport the bundled stylesheet once in your app:\n\n```tsx\nimport '@agent-skills-dashboard/react/styles';\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md"}