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

@@ -1,52 +1,80 @@
-import React from 'react'
-import { Button } from '@/components/ui/Button'
-
 /**
  * Button Variants Demo
- * Shows all 8 visual variants and 4 sizes of the Button component
- *
- * Variants include:
- * - default: Primary brand color button
- * - destructive: Red danger button
- * - outline: Bordered light button
- * - secondary: Gray secondary button
- * - ghost: Transparent hover button
- * - link: Link-style button
- * - gradient: Brand gradient button
- * - gradientPrimary: Primary gradient button
- *
- * Sizes include:
- * - default: Standard size (h-10)
- * - sm: Small size (h-9)
- * - lg: Large size (h-11)
- * - icon: Square icon size (h-10 w-10)
+ * Shows all visual variants of the button component
  */
-export default function ButtonVariants() {
+import React, { useState } from 'react'
+
+export default function ButtonVariantsDemo() {
+  const [variant, setVariant] = useState('default')
+
+  const variants = ['default', 'destructive', 'outline', 'secondary', 'ghost', 'link', 'gradient']
+
+  const getButtonClass = (v: string) => {
+    const base = 'px-4 py-2 rounded-md text-sm transition-colors'
+    switch (v) {
+      case 'default': return `${base} bg-primary text-primary-foreground hover:opacity-90`
+      case 'destructive': return `${base} bg-destructive text-destructive-foreground hover:opacity-90`
+      case 'outline': return `${base} border bg-background hover:bg-accent`
+      case 'secondary': return `${base} bg-secondary text-secondary-foreground hover:opacity-80`
+      case 'ghost': return `${base} hover:bg-accent`
+      case 'link': return `${base} text-primary underline-offset-4 hover:underline`
+      case 'gradient': return `${base} bg-gradient-to-r from-blue-500 to-purple-500 text-white hover:opacity-90`
+      default: return base
+    }
+  }
+
   return (
-    <div className="flex flex-col gap-6 p-4">
-      {/* Variants Section */}
-      <div>
-        <h3 className="text-sm font-semibold mb-3 text-muted-foreground">Variants</h3>
-        <div className="flex flex-wrap gap-3">
-          <Button variant="default">Default</Button>
-          <Button variant="destructive">Destructive</Button>
-          <Button variant="outline">Outline</Button>
-          <Button variant="secondary">Secondary</Button>
-          <Button variant="ghost">Ghost</Button>
-          <Button variant="link">Link</Button>
-          <Button variant="gradient">Gradient</Button>
-          <Button variant="gradientPrimary">Gradient Primary</Button>
+    <div className="p-6 bg-background space-y-6">
+      <h3 className="text-sm font-semibold">Button Variants</h3>
+      
+      {/* Variant Selector */}
+      <div className="space-y-3">
+        <label className="text-sm font-medium">Select Variant</label>
+        <div className="flex flex-wrap gap-2">
+          {variants.map((v) => (
+            <button
+              key={v}
+              onClick={() => setVariant(v)}
+              className={`px-3 py-1.5 text-xs rounded capitalize transition-colors ${
+                variant === v ? 'bg-primary text-primary-foreground' : 'border hover:bg-accent'
+              }`}
+            >
+              {v}
+            </button>
+          ))}
         </div>
       </div>
 
-      {/* Sizes Section */}
-      <div>
-        <h3 className="text-sm font-semibold mb-3 text-muted-foreground">Sizes</h3>
-        <div className="flex flex-wrap items-center gap-3">
-          <Button size="sm">Small</Button>
-          <Button size="default">Default</Button>
-          <Button size="lg">Large</Button>
-          <Button size="icon">🔍</Button>
+      {/* Preview */}
+      <div className="space-y-3">
+        <label className="text-sm font-medium">Preview</label>
+        <div className="p-4 border rounded-lg bg-muted/20">
+          <button className={getButtonClass(variant)}>
+            Button
+          </button>
+        </div>
+      </div>
+
+      {/* All Variants */}
+      <div className="space-y-3">
+        <label className="text-sm font-medium">All Variants</label>
+        <div className="flex flex-wrap gap-3 p-4 border rounded-lg">
+          {variants.map((v) => (
+            <button key={v} className={getButtonClass(v)}>
+              {v.charAt(0).toUpperCase() + v.slice(1)}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Sizes */}
+      <div className="space-y-3">
+        <label className="text-sm font-medium">Sizes</label>
+        <div className="flex items-center gap-3 flex-wrap p-4 border rounded-lg">
+          <button className={`${getButtonClass(variant)} h-8 px-3 text-xs`}>Small</button>
+          <button className={`${getButtonClass(variant)} h-10 px-4`}>Default</button>
+          <button className={`${getButtonClass(variant)} h-11 px-8`}>Large</button>
+          <button className={`${getButtonClass(variant)} h-10 w-10`}>⚙</button>
         </div>
       </div>
     </div>