"Teal Comic" style guide and component system based on the Mandy's Website theme. Includes detailed component categorization, color specifications, and implementation principles.
本技能定義了本網站獨特的 Teal Comic (Mandy's Website) 設計語言與組件系統。
融合了 Teal (藍綠色) 主色調與 Comic Book (美式漫畫) 結構的獨特風格。
#00aaaa)所有顏色與樣式皆已在 src/styles/tailwind.css (CSS 變數) 與 src/styles/global.css (Utility Classes) 中定義。
#00aaaa (由 --color-primary-500 定義)#22c55e (Green) - 視覺化圖表#eab308 (Yellow) - 開發工具 (Git, npm)#ef4444 (Red) - 前端框架 (Angular, React)#3b82f6 (Blue) - 樣式工具 (SCSS)#f97316 (Orange) - 建置工具 (Astro, Vite)#ffffff#111827 (Gray 900).comic-border: 2px solid black (Dark mode: gray-200)。.comic-border-thick: 3px solid black。rounded-md: 預設圓角 (8px)。.comic-shadow: 4px 4px 0 (無模糊)。.comic-shadow-sm: 2px 2px 0。.comic-shadow-lg: 6px 6px 0。本專案採用 類 DaisyUI 的組件分類架構：
ButtonDropdown, ModalButton: 使用 .btn class，支援 variant (primary, accent, ghost, outline)。Card, Badge, TagsTimelineCard: 使用 .comic-card，支援 variant="project" (帶圖釘效果) 或 variant="post"。Badge: 用於技術標籤，必須遵循上方「Semantic Colors」的配色定義。Header, Pagination, CategoriesBreadcrumbsAlertTooltip, LoadingAlert 需使用粗邊框與對應的語意化顏色 icon。Input, SearchWidgetring-2 ring-primary-500)。Hero, Footer, MainLayout, ContentLayout, AsideLayoutDividermax-w-screen-xl，保持良好的閱讀體驗。var(--color-primary-500)。aria-label，圖片需有 alt。<button class="btn bg-primary-500 text-white hover:translate-y-1">
Click Me
</button>
<Badge color="error">React</Badge>
<Badge color="accent">Astro</Badge>
參考文件: COMPONENT_SYSTEM_PLAN.md (已整合)
npx skills add mtwmt/Bookshelf Theme & Design System下载完整 Skill 目录，包含 SKILL.md 及所有相关文件
Search for places (restaurants, cafes, etc.) via Google Places API proxy on localhost.
Interact with GitHub using the `gh` CLI. Use `gh issue`, `gh pr`, `gh run`, and `gh api` for issues, PRs, CI runs, and advanced queries.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Start voice calls via the OpenClaw voice-call plugin.
Notion API for creating and managing pages, databases, and blocks.
Gemini CLI for one-shot Q&A, summaries, and generation.
Category:developer