chore(workflow): add AI-assisted workflow commands and configurations

Add comprehensive workflow commands for AI-assisted development:
- Claude commands: analyze, clarify, plan
- Kilocode workflows: full feature development lifecycle
- Opencode commands: specification and implementation workflows
- Roo MCP configuration for tool integration

Update .gitignore to exclude .astro build cache directories.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

apps/frontend/src/pages/website-portfolio.astro

@@ -0,0 +1,57 @@
+---
+import Layout from '../layouts/Layout.astro';
+
+// Placeholder portfolios
+const portfolios = [
+  { slug: 'web-design-project-2', title: 'Project 2', description: 'Description...' },
+  // Add more
+];
+---
+
+<Layout>
+  <section class="portfolio-section">
+    <div class="container">
+      <h1>網站設計作品</h1>
+      <div class="portfolio-grid">
+        {portfolios.map(item => (
+          <div class="portfolio-item">
+            <h2><a href={`/webdesign-profolio/${item.slug}`}>{item.title}</a></h2>
+            <p>{item.description}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  </section>
+</Layout>
+
+<style>
+  .portfolio-section {
+    padding: 40px 0;
+  }
+  .container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+  }
+  h1 {
+    text-align: center;
+    margin-bottom: 30px;
+  }
+  .portfolio-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 20px;
+  }
+  .portfolio-item {
+    border: 1px solid #ddd;
+    padding: 20px;
+    border-radius: 8px;
+  }
+  .portfolio-item a {
+    text-decoration: none;
+    color: #333;
+  }
+  .portfolio-item a:hover {
+    color: #007bff;
+  }
+</style>