web-artifacts-builder

web-artifacts-builder 技能為在 Claude 介面中創建複雜的網頁實體提供了一個強大的開發環境。此技能專為需要超越簡單單一檔案 HTML 的開發者與進階用戶而設計，整合了包含 React 18、TypeScript 與 Vite 的全端前端工作流程。它特別適合需要處理進階狀態管理、複雜路由以及追求 shadcn/ui 組件庫一致性視覺風格的專案。

• 透過自訂指令碼簡化專案初始化流程，自動配置 React、TypeScript 與 Tailwind CSS。

• 預先安裝超過 40 種 shadcn/ui 組件，大幅加速使用者介面設計開發。

• 利用 Parcel 進行高效資源打包，將模組化的 React 應用程式轉換為單一、內含所有依賴的 HTML 檔案，方便分享。

• 內建路徑別名 (@/) 配置，確保程式碼導入結構清晰且易於維護。

• 強制執行設計指南，避免常見的 AI 產出介面樣式，確保交付內容具有專業品質。

• 本技能適用於複雜的多組件網頁介面；若僅需製作簡單的靜態內容，建議使用原生的實體建立功能會更有效率。

• 請確保開發環境滿足 Node 18+ 版本要求，以維持與打包指令碼的相容性。

• 工作流程遵循明確的生命週期：初始化專案、模組化開發、執行打包指令碼，最後呈現生成的 HTML 實體。

• 請始終將 bundle.html 作為最終交付物，以確保在對話視窗中的可移植性。

• 遵循設計指南，避免使用過度的置中排版或單一漸層，重點在於強調現代化且簡潔的 UI 設計模式，而非單純套用 AI 生成的視覺模板。