創建高品質的互動式網頁應用程式，並自動佈署到 GitHub Pages。包含現代化前端技術、響應式設計、互動功能，以及完整的 CI/CD 流程。
此 skill 用於創建專業級的互動式網頁應用程式，並自動化部署到 GitHub Pages。適用於資料視覺化、互動工具、文檔網站、專案展示等場景。
優先使用 CDN 載入的方式，避免需要 npm install 或複雜的建置流程：
✅ 推薦技術棧：
❌ 避免：
詢問或分析以下問題：
根據需求選擇合適的技術：
| 需求類型 | 推薦技術 | 理由 |
|---|---|---|
| 資料視覺化 | React + D3.js/Chart.js | 強大的圖表能力 |
| 簡單展示頁 | Vanilla JS + Tailwind | 輕量快速 |
| 複雜互動 | React + Hooks | 狀態管理方便 |
| 表單處理 | Vue + Tailwind | 雙向綁定便利 |
| 3D 視覺化 | Three.js | 專業 3D 渲染 |
規劃檔案結構：
project/
├── index.html # 主頁面
├── assets/
│ ├── css/ # 自訂樣式
│ ├── js/ # JavaScript 模組
│ └── images/ # 圖片資源
├── data/ # 資料檔案（JSON/CSV）
├── README.md # 說明文件
└── .github/
└── workflows/
└── deploy.yml # GitHub Actions 部署設定
使用語義化 HTML5 標籤：
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="專案描述">
<meta name="keywords" content="關鍵字">
<meta property="og:title" content="網頁標題">
<meta property="og:description" content="分享描述">
<meta property="og:image" content="預覽圖片">
<title>網頁標題</title>
<!-- Favicon -->
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🚀</text></svg>">
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- React & ReactDOM (如需要) -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<!-- Babel (用於 JSX) -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel" src="app.js"></script>
</body>
</html>
狀態管理：
const { useState, useEffect, useMemo } = React;
function App() {
const [data, setData] = useState([]);
const [loading, setLoading] = useState(true);
const [activeTab, setActiveTab] = useState('overview');
useEffect(() => {
// 載入資料
fetch('data/dataset.json')
.then(res => res.json())
.then(data => {
setData(data);
setLoading(false);
});
}, []);
// ... 其他邏輯
}
互動元素：
// 可拖曳元素
const handleDrag = (e) => {
// 實作拖曳邏輯
};
// 響應式圖表
const ResponsiveChart = ({ data }) => {
const containerRef = useRef(null);
const [width, setWidth] = useState(0);
useEffect(() => {
const handleResize = () => {
if (containerRef.current) {
setWidth(containerRef.current.offsetWidth);
}
};
handleResize();
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
return <svg width={width} height={400}>...</svg>;
};
色彩系統：
// Tailwind 自訂配置
tailwind.config = {
theme: {
extend: {
colors: {
primary: {
50: '#f0f9ff',
500: '#3b82f6',
900: '#1e3a8a'
}
}
}
}
};
佈局模式：
<!-- 卡片式佈局 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white rounded-xl shadow-lg p-6">
<!-- 卡片內容 -->
</div>
</div>
<!-- 側邊欄佈局 -->
<div class="flex min-h-screen">
<aside class="w-64 bg-slate-800 text-white p-6">
<!-- 側邊欄 -->
</aside>
<main class="flex-1 p-8">
<!-- 主內容 -->
</main>
</div>
圖片優化：
<!-- 響應式圖片 -->
<img
srcset="image-small.jpg 480w, image-large.jpg 1200w"
sizes="(max-width: 600px) 480px, 1200px"
src="image-large.jpg"
alt="描述"
loading="lazy"
>
程式碼優化：
// 使用 useMemo 避免重複計算
const expensiveCalculation = useMemo(() => {
return data.reduce((acc, item) => acc + item.value, 0);
}, [data]);
// 防抖處理
const debouncedSearch = useMemo(
() => debounce((value) => performSearch(value), 300),
[]
);
/* CSS 過渡 */
.card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}
/* 載入動畫 */
@keyframes spin {
to { transform: rotate(360deg); }
}
.loading {
animation: spin 1s linear infinite;
}
# 使用 Python 啟動本地伺服器
python3 -m http.server 8000
# 或使用 Node.js
npx http-server -p 8000
測試清單：
使用 Chrome DevTools Lighthouse：
// 錯誤處理
async function fetchData() {
try {
const response = await fetch('data.json');
if (!response.ok) throw new Error('Failed to fetch');
return await response.json();
} catch (error) {
console.error('Error:', error);
// 顯示錯誤訊息給使用者
}
}
// 載入狀態
if (loading) {
return <div className="flex items-center justify-center h-screen">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
</div>;
}
創建 .github/workflows/deploy.yml：