From example-skills
Initializes Vite React/TypeScript projects with Tailwind CSS and shadcn/ui, bundles to single HTML for complex Claude artifacts needing state, routing, or components.
npx claudepluginhub joshuarweaver/cascade-code-general-misc-3 --plugin marcelleon-skills-zhThis skill uses the workspace's default tool permissions.
要构建强大的前端 claude.ai artifacts，请遵循以下步骤：
Applies Acme Corporation brand guidelines including colors, fonts, layouts, and messaging to generated PowerPoint, Excel, and PDF documents.
Builds DCF models with sensitivity analysis, Monte Carlo simulations, and scenario planning for investment valuation and risk assessment.
Calculates profitability (ROE, margins), liquidity (current ratio), leverage, efficiency, and valuation (P/E, EV/EBITDA) ratios from financial statements in CSV, JSON, text, or Excel for investment analysis.
要构建强大的前端 claude.ai artifacts，请遵循以下步骤：
scripts/init-artifact.sh 初始化前端仓库scripts/bundle-artifact.sh 将所有代码打包到单个 HTML 文件中技术栈：React 18 + TypeScript + Vite + Parcel (打包) + Tailwind CSS + shadcn/ui
非常重要：为了避免通常被称为"AI 废料"的内容，避免使用过多的居中布局、紫色渐变、统一的圆角和 Inter 字体。
运行初始化脚本以创建新的 React 项目：
bash scripts/init-artifact.sh <project-name>
cd <project-name>
这将创建一个完全配置的项目，包括：
@/）要构建 artifact，请编辑生成的文件。有关指导，请参见下面的常见开发任务。
要将 React 应用程序打包到单个 HTML artifact：
bash scripts/bundle-artifact.sh
这将创建 bundle.html - 一个自包含的 artifact，所有 JavaScript、CSS 和依赖项都内联。此文件可以直接在 Claude 对话中作为 artifact 共享。
要求：您的项目必须在根目录中有一个 index.html。
脚本的作用：
.parcelrc 配置最后，在与用户的对话中共享打包的 HTML 文件，以便他们可以将其作为 artifact 查看。
注意：这是完全可选的步骤。仅在必要或被请求时执行。
要测试/可视化 artifact，请使用可用工具（包括其他 Skills 或内置工具，如 Playwright 或 Puppeteer）。一般来说，避免预先测试 artifact，因为它会增加请求和完成的 artifact 可以被看到之间的延迟。如果被请求或出现问题，稍后在呈现 artifact 后再进行测试。