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/theme/styles/variables.css

@@ -89,7 +89,7 @@
   --vp-font-size-lg: 18px;
   --vp-font-size-xl: 20px;
 
-  /* Spacing */
+  /* Spacing (Fixed) */
   --vp-spacing-xs: 0.25rem;   /* 4px */
   --vp-spacing-sm: 0.5rem;    /* 8px */
   --vp-spacing-md: 1rem;      /* 16px */
@@ -97,6 +97,25 @@
   --vp-spacing-xl: 2rem;      /* 32px */
   --vp-spacing-2xl: 3rem;     /* 48px */
 
+  /* Fluid Spacing (Responsive with clamp())
+   * Scales smoothly between viewport widths
+   * Usage: padding: var(--spacing-fluid-md);
+   */
+  --spacing-fluid-xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.375rem);    /* 4-6px */
+  --spacing-fluid-sm: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);       /* 8-12px */
+  --spacing-fluid-md: clamp(0.75rem, 0.6rem + 0.75vw, 1.25rem);     /* 12-20px */
+  --spacing-fluid-lg: clamp(1rem, 0.8rem + 1vw, 1.75rem);           /* 16-28px */
+  --spacing-fluid-xl: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);        /* 24-40px */
+  --spacing-fluid-2xl: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);         /* 32-56px */
+
+  /* Container Query Names
+   * Usage: container-name: var(--container-sidebar);
+   */
+  --container-sidebar: sidebar;
+  --container-content: content;
+  --container-outline: outline;
+  --container-nav: nav;
+
   /* Border Radius */
   --vp-radius-sm: 0.25rem;    /* 4px */
   --vp-radius-md: 0.375rem;   /* 6px */
@@ -122,6 +141,19 @@
   --vp-z-index-fixed: 50;
   --vp-z-index-modal: 100;
   --vp-z-index-toast: 200;
+
+  /* Responsive Breakpoints (VitePress standard) */
+  --bp-mobile: 768px;    /* Mobile: < 768px */
+  --bp-tablet: 1024px;   /* Tablet: 768px - 1024px */
+  --bp-desktop: 1440px;  /* Desktop: > 1024px, large: > 1440px */
+
+  /* Container Query Breakpoints
+   * Aligned with media query breakpoints for consistency
+   */
+  --container-bp-sm: 480px;   /* Small container */
+  --container-bp-md: 768px;   /* Medium container */
+  --container-bp-lg: 1024px;  /* Large container */
+  --container-bp-xl: 1280px;  /* Extra large container */
 }
 
 /* ============================================