القائمة
复杂前端 Artifacts 构建工具
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
研究一个**已知的** GitHub 项目/repo，判断它对 LiYe Systems 的进化有没有可借鉴之处，产出定型的 evolution-recon 报告并归档到 recon-log。Use whenever the user gives a specific GitHub repo URL and asks to 研究/研读/消化/digest/study it, wants to know whether a project 对 LiYe / AGE / loamwise 有没有帮助/可借鉴/值得参考, asks "这个项目对我们有没有用", floats "看看 <repo> 有没有能学的", or types /github-digest — even if they never name the report format. This is the KNOWN-repo research step that sits UPSTREAM of github-scout (which DISCOVERS unknown repos) and source-intake (which INGESTS a chosen repo). Reach for it when the repo is already chosen and the real question is "is it worth our attention / what can LiYe learn". Do NOT use it to search/discover repos (that is github-scout) or to actually vendor/ingest a repo (that is source-intake).
Use when testing SFC v0.2 frontmatter compatibility.
Claude Skills 创建指南与最佳实践
SFC patched skill. Use when "ui-ux" is relevant.
内容研究与写作助手
视觉设计与艺术创作工具
| name | artifacts-builder |
| description | 复杂前端 Artifacts 构建工具 |
| domain | 00_Core_Utilities |
| category | development-tools |
| version | 1.0.0 |
| status | active |
| source | awesome-claude-skills |
| source_url | https://github.com/ComposioHQ/awesome-claude-skills |
| license | Apache-2.0 |
| skeleton | workflow |
| triggers | {"commands":["/artifacts-builder"],"patterns":["artifacts-builder"]} |
| inputs | {"required":[],"optional":[]} |
| outputs | {"artifacts":["SKILL.md"]} |
| failure_modes | [{"symptom":"Missing required inputs or context","recovery":"Provide the missing info and retry"},{"symptom":"Unexpected tool/runtime failure","recovery":"Rerun with minimal steps; escalate after 3 failures"}] |
| verification | {"evidence_required":true,"how_to_verify":["node .claude/scripts/sfc_lint.mjs <skill_dir>"]} |
| governance | {"constitution":"_meta/governance/SKILL_CONSTITUTION_v0.1.md","policy":"_meta/policies/DEFAULT_SKILL_POLICY.md"} |
来源: ComposioHQ/awesome-claude-skills 适配: LiYe OS 三层架构
创建复杂多组件 HTML artifacts，使用现代前端技术栈 (React, Tailwind CSS, shadcn/ui)。
当需要构建复杂前端界面时：
// 组件结构
const Dashboard = () => {
const [data, setData] = useState([]);
return (
<div className="grid grid-cols-3 gap-4">
<Card>
<CardHeader>
<CardTitle>销售概览</CardTitle>
</CardHeader>
<CardContent>
<Chart data={data} />
</CardContent>
</Card>
</div>
);
};
常用组件：
Button, Card, DialogTable, Tabs, FormSelect, Input, CheckboxChart, Progress, Badge用户: 帮我创建一个 Amazon 销售数据仪表盘
Claude: [使用 artifacts-builder 构建包含图表、表格、筛选器的仪表盘]
用户: 创建一个关键词研究的数据录入界面
Claude: [使用 artifacts-builder 构建表单，包含验证和提交逻辑]
用户: 把这份报告做成一个可交互的网页
Claude: [使用 artifacts-builder 创建带导航、筛选、图表的交互报告]
此技能被以下业务域引用：
Created: 2025-12-28 | Adapted for LiYe OS