Agent Skills › liyecom/liye-ai › artifacts-builder

artifacts-builder

GitHub

用于构建复杂前端界面，支持React、Tailwind CSS和shadcn/ui，适用于仪表盘、数据展示及多组件交互应用。

Skills/00_Core_Utilities/development-tools/artifacts-builder/SKILL.md liyecom/liye-ai

Trigger Scenarios

创建交互式仪表盘构建数据展示界面开发多组件React应用

Install

npx skills add liyecom/liye-ai --skill artifacts-builder -g -y

More Options

Non-standard path

npx skills add https://github.com/liyecom/liye-ai/tree/main/Skills/00_Core_Utilities/development-tools/artifacts-builder -g -y

Use without installing

npx skills use liyecom/liye-ai@artifacts-builder

指定 Agent (Claude Code)

npx skills add liyecom/liye-ai --skill artifacts-builder -a claude-code -g -y

安装 repo 全部 skill

npx skills add liyecom/liye-ai --all -g -y

预览 repo 内 skill

npx skills add liyecom/liye-ai --list

SKILL.md

Frontmatter

{
    "name": "artifacts-builder",
    "domain": "00_Core_Utilities",
    "inputs": {
        "optional": [],
        "required": []
    },
    "source": "awesome-claude-skills",
    "status": "active",
    "license": "Apache-2.0",
    "outputs": {
        "artifacts": [
            "SKILL.md"
        ]
    },
    "version": "1.0.0",
    "category": "development-tools",
    "skeleton": "workflow",
    "triggers": {
        "commands": [
            "\/artifacts-builder"
        ],
        "patterns": [
            "artifacts-builder"
        ]
    },
    "governance": {
        "policy": "_meta\/policies\/DEFAULT_SKILL_POLICY.md",
        "constitution": "_meta\/governance\/SKILL_CONSTITUTION_v0.1.md"
    },
    "source_url": "https:\/\/github.com\/ComposioHQ\/awesome-claude-skills",
    "description": "复杂前端 Artifacts 构建工具",
    "verification": {
        "how_to_verify": [
            "node .claude\/scripts\/sfc_lint.mjs <skill_dir>"
        ],
        "evidence_required": true
    },
    "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"
        }
    ]
}

Artifacts Builder

来源: ComposioHQ/awesome-claude-skills 适配: LiYe OS 三层架构

创建复杂多组件 HTML artifacts，使用现代前端技术栈 (React, Tailwind CSS, shadcn/ui)。

When to Use This Skill

当需要构建复杂前端界面时：

创建交互式仪表盘
构建数据展示界面
开发多组件 React 应用
实现复杂的 UI 布局
使用 shadcn/ui 组件库

Core Capabilities

1. React 组件开发

// 组件结构
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>
  );
};

2. Tailwind CSS 样式

原子化 CSS 类
响应式设计 (sm, md, lg, xl)
暗色模式支持
自定义主题

3. shadcn/ui 组件库

常用组件：

Button, Card, Dialog
Table, Tabs, Form
Select, Input, Checkbox
Chart, Progress, Badge

4. 多组件协调

状态管理
组件通信
数据流设计
性能优化

5. 响应式设计

移动优先
断点设计
弹性布局
自适应组件

Usage Examples

示例 1: 销售仪表盘

用户: 帮我创建一个 Amazon 销售数据仪表盘
Claude: [使用 artifacts-builder 构建包含图表、表格、筛选器的仪表盘]

示例 2: 数据输入表单

用户: 创建一个关键词研究的数据录入界面
Claude: [使用 artifacts-builder 构建表单，包含验证和提交逻辑]

示例 3: 交互式报告

用户: 把这份报告做成一个可交互的网页
Claude: [使用 artifacts-builder 创建带导航、筛选、图表的交互报告]

Dependencies

React 18+
Tailwind CSS 3+
shadcn/ui 组件库
Lucide React (图标)

LiYe OS Integration

业务域引用

此技能被以下业务域引用：

06_Technical_Development: 前端开发（主域）
02_Operation_Intelligence: 运营仪表盘
07_Data_Science: 数据可视化界面

三层架构位置

物理层 (本文件): Skills/00_Core_Utilities/development-tools/artifacts-builder/
逻辑层索引: Skills/{domain}/index.yaml
L3 指令层: .claude/skills/{domain}/artifacts-builder/

Created: 2025-12-28 | Adapted for LiYe OS

Version History

0a7839d Current 2026-08-20 12:53

Same Skill Collection

ui-ux-pro-max

Skills/00_Core_Utilities/creative/ui-ux-pro-max/SKILL.md

content-writer

Skills/00_Core_Utilities/communication/content-writer/SKILL.md

canvas-design

Skills/00_Core_Utilities/creative/canvas-design/SKILL.md

theme-factory

Skills/00_Core_Utilities/creative/theme-factory/SKILL.md

csv-summarizer

Skills/00_Core_Utilities/data-analysis/csv-summarizer/SKILL.md

mcp-builder

Skills/00_Core_Utilities/development-tools/mcp-builder/SKILL.md

playwright

Skills/00_Core_Utilities/development-tools/playwright/SKILL.md

ui-ux

Skills/00_Core_Utilities/development-tools/ui-ux/SKILL.md

docx

Skills/00_Core_Utilities/document-processing/docx/SKILL.md

pdf

Skills/00_Core_Utilities/document-processing/pdf/SKILL.md

pptx

Skills/00_Core_Utilities/document-processing/pptx/SKILL.md

xlsx

Skills/00_Core_Utilities/document-processing/xlsx/SKILL.md

prompt-engineering

Skills/00_Core_Utilities/meta/prompt-engineering/SKILL.md

skill-creator

Skills/00_Core_Utilities/meta/skill-creator/SKILL.md

software-architecture

Skills/00_Core_Utilities/meta/software-architecture/SKILL.md

kaizen

Skills/00_Core_Utilities/productivity/kaizen/SKILL.md

github-digest

Skills/01_Research_Intelligence/prior-art/github-digest/SKILL.md

v0-2-sfc-fixture

tests/fixtures/sfc/v0_2_sample/SKILL.md

View Skill Collection ›

Metadata

Files: 0
Version: 0a7839d
Hash: e673790d
Indexed: 2026-08-20 12:53

artifacts-builder