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/badge-variants.tsx

@@ -0,0 +1,57 @@
+/**
+ * Badge Variants Demo
+ * Shows all available badge variants
+ */
+import React from 'react'
+
+export default function BadgeVariantsDemo() {
+  const variants = [
+    { name: 'default', class: 'bg-primary text-primary-foreground' },
+    { name: 'secondary', class: 'bg-secondary text-secondary-foreground' },
+    { name: 'destructive', class: 'bg-destructive text-destructive-foreground' },
+    { name: 'outline', class: 'border text-foreground' },
+    { name: 'success', class: 'bg-success text-white' },
+    { name: 'warning', class: 'bg-warning text-white' },
+    { name: 'info', class: 'bg-info text-white' },
+    { name: 'review', class: 'bg-purple-500 text-white' },
+    { name: 'gradient', class: 'bg-gradient-to-r from-blue-500 to-purple-500 text-white' },
+  ]
+
+  return (
+    <div className="p-6 bg-background space-y-6">
+      <h3 className="text-sm font-semibold">Badge Variants</h3>
+      
+      <div className="space-y-4">
+        <div className="flex flex-wrap gap-3">
+          {variants.map((v) => (
+            <span
+              key={v.name}
+              className={`inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold ${v.class}`}
+            >
+              {v.name}
+            </span>
+          ))}
+        </div>
+      </div>
+
+      {/* Usage Examples */}
+      <div className="space-y-3">
+        <h4 className="text-sm font-medium">Usage Examples</h4>
+        <div className="space-y-2">
+          <div className="flex items-center gap-2 p-2 border rounded">
+            <span className="font-medium">Status:</span>
+            <span className="inline-flex items-center rounded-full bg-success px-2 py-0.5 text-xs text-white">Active</span>
+          </div>
+          <div className="flex items-center gap-2 p-2 border rounded">
+            <span className="font-medium">Priority:</span>
+            <span className="inline-flex items-center rounded-full bg-destructive px-2 py-0.5 text-xs text-white">High</span>
+          </div>
+          <div className="flex items-center gap-2 p-2 border rounded">
+            <span className="font-medium">Type:</span>
+            <span className="inline-flex items-center rounded-full bg-info px-2 py-0.5 text-xs text-white">Feature</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}