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

@@ -0,0 +1,95 @@
+/**
+ * Input Variants Demo
+ * Shows all input states
+ */
+import React, { useState } from 'react'
+
+export default function InputVariantsDemo() {
+  const [value, setValue] = useState('')
+
+  return (
+    <div className="p-6 bg-background space-y-6">
+      <h3 className="text-sm font-semibold">Input States</h3>
+      
+      <div className="grid md:grid-cols-2 gap-6">
+        {/* Default */}
+        <div className="space-y-2">
+          <label className="text-sm font-medium">Default</label>
+          <input
+            type="text"
+            placeholder="Enter text..."
+            className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+          />
+        </div>
+
+        {/* With Value */}
+        <div className="space-y-2">
+          <label className="text-sm font-medium">With Value</label>
+          <input
+            type="text"
+            value="John Doe"
+            readOnly
+            className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
+          />
+        </div>
+
+        {/* Error State */}
+        <div className="space-y-2">
+          <label className="text-sm font-medium">Error State</label>
+          <input
+            type="text"
+            placeholder="Invalid input"
+            className="flex h-10 w-full rounded-md border border-destructive bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-destructive"
+          />
+          <p className="text-xs text-destructive">This field is required</p>
+        </div>
+
+        {/* Disabled */}
+        <div className="space-y-2">
+          <label className="text-sm font-medium">Disabled</label>
+          <input
+            type="text"
+            disabled
+            placeholder="Disabled input"
+            className="flex h-10 w-full rounded-md border border-input bg-muted px-3 py-2 text-sm opacity-50 cursor-not-allowed"
+          />
+        </div>
+
+        {/* With Icon */}
+        <div className="space-y-2">
+          <label className="text-sm font-medium">Search Input</label>
+          <div className="relative">
+            <span className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground">🔍</span>
+            <input
+              type="text"
+              placeholder="Search..."
+              className="flex h-10 w-full rounded-md border border-input bg-background pl-10 pr-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+            />
+          </div>
+        </div>
+
+        {/* Controlled */}
+        <div className="space-y-2">
+          <label className="text-sm font-medium">Controlled Input</label>
+          <input
+            type="text"
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            placeholder="Type something..."
+            className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+          />
+          <p className="text-xs text-muted-foreground">Value: {value || '(empty)'}</p>
+        </div>
+      </div>
+
+      {/* Textarea */}
+      <div className="space-y-2">
+        <label className="text-sm font-medium">Textarea</label>
+        <textarea
+          placeholder="Enter multi-line text..."
+          className="flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+        />
+      </div>
+    </div>
+  )
+}