Add Chinese documentation for custom skills development and reference guide

- Created a new document for custom skills development (`custom.md`) detailing the structure, creation, implementation, and best practices for developing custom CCW skills.
- Added an index document (`index.md`) summarizing all built-in skills, their categories, and usage examples.
- Introduced a reference guide (`reference.md`) providing a quick reference for all 33 built-in CCW skills, including triggers and purposes.

docs/.vitepress/demos/QueueItemStatusDemo.tsx

@@ -0,0 +1,60 @@
+/**
+ * Queue Item Status Demo
+ * Shows all possible queue item states
+ */
+import React from 'react'
+
+export default function QueueItemStatusDemo() {
+  const itemStates = [
+    { status: 'pending', issueId: 'ISSUE-101', sessionKey: null },
+    { status: 'executing', issueId: 'ISSUE-102', sessionKey: 'cli-session-abc' },
+    { status: 'completed', issueId: 'ISSUE-103', sessionKey: 'cli-session-def' },
+    { status: 'blocked', issueId: 'ISSUE-104', sessionKey: null },
+    { status: 'failed', issueId: 'ISSUE-105', sessionKey: 'cli-session-ghi' },
+  ]
+
+  const statusConfig = {
+    pending: { icon: '○', color: 'text-gray-400', bg: 'bg-gray-500/10', label: 'Pending' },
+    executing: { icon: '▶', color: 'text-blue-500', bg: 'bg-blue-500/10', label: 'Executing' },
+    completed: { icon: '✓', color: 'text-green-500', bg: 'bg-green-500/10', label: 'Completed' },
+    blocked: { icon: '✕', color: 'text-red-500', bg: 'bg-red-500/10', label: 'Blocked' },
+    failed: { icon: '!', color: 'text-red-500', bg: 'bg-red-500/10', label: 'Failed' },
+  }
+
+  return (
+    <div className="p-6 bg-background space-y-4">
+      <h3 className="text-sm font-semibold">Queue Item Status States</h3>
+      <div className="space-y-2">
+        {itemStates.map((item) => {
+          const config = statusConfig[item.status as keyof typeof statusConfig]
+          return (
+            <div key={item.status} className="border rounded-lg p-4 flex items-center gap-4">
+              <span className={`text-2xl ${config.color}`}>{config.icon}</span>
+              <div className="flex-1">
+                <div className="flex items-center gap-2">
+                  <span className="font-medium">{item.issueId}</span>
+                  <span className={`text-xs px-2 py-0.5 rounded-full ${config.bg} ${config.color}`}>
+                    {config.label}
+                  </span>
+                </div>
+                {item.sessionKey && (
+                  <div className="text-sm text-muted-foreground mt-1">
+                    Bound session: <code className="text-xs bg-muted px-1 rounded">{item.sessionKey}</code>
+                  </div>
+                )}
+              </div>
+              {item.status === 'executing' && (
+                <div className="flex items-center gap-2">
+                  <div className="w-24 h-2 bg-muted rounded-full overflow-hidden">
+                    <div className="h-full bg-blue-500 animate-pulse" style={{ width: '60%' }}/>
+                  </div>
+                  <span className="text-xs text-muted-foreground">60%</span>
+                </div>
+              )}
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}