diff --git a/docs/.vitepress/components/HomeButton.vue b/docs/.vitepress/components/HomeButton.vue
index e32e27e84..64c5b337b 100644
--- a/docs/.vitepress/components/HomeButton.vue
+++ b/docs/.vitepress/components/HomeButton.vue
@@ -12,9 +12,10 @@ defineProps<{
     :class="[
       'rounded-xl px-3 py-2 lg:px-5 lg:py-3 font-extrabold outline-none backdrop-blur-md active:scale-95 focus:outline-none text-nowrap text-sm md:text-base',
       'text-slate-700 dark:text-slate-100',
+      'transition-colors,transform',
+      'duration-200 ease-in-out',
+      item.primary ? 'bg-primary/20 dark:bg-primary/30 dark:hover:bg-primary/40' : 'bg-black/4 dark:bg-white/20 dark:hover:bg-white/30',
     ]"
-    :bg="item.primary ? 'primary/20 dark:primary/30 dark:hover:primary/40' : 'black/4 dark:white/20 dark:hover:white/30'"
-    transition="colors,transform duration-200 ease-in-out"
     cursor-pointer
   >
     {{ item.text }}
diff --git a/docs/.vitepress/components/Navbar.vue b/docs/.vitepress/components/Navbar.vue
index 25a8449a6..49973944e 100644
--- a/docs/.vitepress/components/Navbar.vue
+++ b/docs/.vitepress/components/Navbar.vue
@@ -41,9 +41,11 @@ function isNavLinkActive(link: string, path: string) {
       <a
         v-if="nav.link"
         :href="nav.link"
-        class="mx-3 h-full inline-flex items-center py-2 text-nowrap text-sm text-muted-foreground font-semibold hover:text-foreground"
-        transition-colors duration-200 ease-in-out
-        :class="{ '!text-primary': isNavLinkActive(nav.link, path) }"
+        :class="[
+          'mx-3 h-full inline-flex items-center py-2 text-nowrap text-sm text-muted-foreground font-semibold hover:text-foreground',
+          'transition-colors duration-200 ease-in-out',
+          isNavLinkActive(nav.link, path) ? '!text-primary' : '',
+        ]"
       >
         {{ nav.text }}
       </a>
@@ -79,8 +81,12 @@ function isNavLinkActive(link: string, path: string) {
       :href="link.link"
       :aria-label="link.icon"
       target="_blank"
-      class="h-9 w-9 flex flex-shrink-0 items-center justify-center rounded-lg bg-transparent text-xl text-muted-foreground hover:bg-muted hover:text-foreground"
-      transition="colors duration-200 ease-in-out"
+      :class="[
+        'h-9 w-9',
+        'flex flex-shrink-0 items-center justify-center rounded-lg',
+        'bg-transparent text-xl text-muted-foreground hover:bg-muted hover:text-foreground',
+        'transition-colors duration-200 ease-in-out',
+      ]"
     >
       <Icon :icon="`simple-icons:${link.icon}`" />
     </a>
@@ -100,8 +106,8 @@ function isNavLinkActive(link: string, path: string) {
           class="will-change-[transform,opacity] z-10 w-[180px] border rounded-xl p-2 shadow-md backdrop-blur-md data-[state=open]:data-[side=bottom]:animate-slideUpAndFade"
           :class="[
             'bg-white/70 dark:border-white/5 dark:bg-black/70',
+            'transition-colors duration-200 ease-in-out',
           ]"
-          transition="colors duration-200 ease-in-out"
         >
           <nav class="flex flex-col">
             <template
@@ -112,8 +118,10 @@ function isNavLinkActive(link: string, path: string) {
                 v-if="nav.link"
                 as="a"
                 :href="nav.link"
-                class="h-full inline-flex items-center rounded-lg p-2 text-sm text-muted-foreground font-semibold hover:bg-primary/10 hover:text-primary"
-                transition="colors duration-200 ease-in-out"
+                :class="[
+                  'h-full inline-flex items-center rounded-lg p-2 text-sm text-muted-foreground font-semibold hover:bg-primary/10 hover:text-primary',
+                  'transition-colors duration-200 ease-in-out',
+                ]"
               >
                 {{ nav.text }}
               </DropdownMenuItem>
@@ -206,8 +214,10 @@ function isNavLinkActive(link: string, path: string) {
                 :href="link.link"
                 :aria-label="link.icon"
                 target="_blank"
-                class="h-9 w-9 flex items-center justify-center rounded-lg bg-transparent text-xl text-muted-foreground hover:bg-muted hover:text-foreground"
-                transition="colors duration-200 ease-in-out"
+                :class="[
+                  'h-9 w-9 flex items-center justify-center rounded-lg bg-transparent text-xl text-muted-foreground hover:bg-muted hover:text-foreground',
+                  'transition-colors duration-200 ease-in-out',
+                ]"
               >
                 <Icon :icon="`simple-icons:${link.icon}`" />
               </DropdownMenuItem>
diff --git a/docs/content/en/blog/DevLog-2025.08.01/CharacterMatcher.vue b/docs/content/en/blog/DevLog-2025.08.01/CharacterMatcher.vue
index 77f329fa3..231c5b1e8 100644
--- a/docs/content/en/blog/DevLog-2025.08.01/CharacterMatcher.vue
+++ b/docs/content/en/blog/DevLog-2025.08.01/CharacterMatcher.vue
@@ -84,49 +84,83 @@ function stepBack() {
 </script>
 
 <template>
-  <div flex="~ col items-center justify-start gap-1" bg="primary/5" min-h-80 w-full rounded-lg p-2>
-    <div flex="~ row items-stretch gap-2 grow" bg="primary/5" w-full rounded-lg p-2>
-      <div flex="~ col items-center justify-start gap-1" py-2>
+  <div
+    :class="[
+      'flex flex-col items-center justify-start gap-1',
+      'min-h-80 w-full rounded-lg bg-primary/5 p-2',
+    ]"
+  >
+    <div
+      :class="[
+        'flex grow flex-row items-stretch gap-2',
+        'w-full rounded-lg bg-primary/5 p-2',
+      ]"
+    >
+      <div
+        :class="[
+          'flex flex-col items-center justify-start gap-1',
+          'py-2',
+        ]"
+      >
         <div
-          flex="~ row items-center"
-          rounded-lg p="2"
-          bg="hover:primary/10"
-          transition="~ all duration-150 ease-out"
-          cursor="pointer"
+          :class="[
+            'transition-all duration-150 ease-out',
+            'flex flex-row items-center',
+            'cursor-pointer rounded-lg p-2 hover:bg-primary/10',
+          ]"
           @click="isPlaying = !isPlaying"
         >
-          <div v-if="!isPlaying" i-lucide:play cursor="pointer" />
-          <div v-else i-lucide:pause cursor="pointer" />
+          <div
+            v-if="!isPlaying"
+            :class="[
+              'i-lucide:play cursor-pointer',
+            ]"
+          />
+          <div
+            v-else
+            :class="[
+              'i-lucide:pause cursor-pointer',
+            ]"
+          />
         </div>
 
         <div
-          flex="~ row items-center"
-          rounded-lg p="2"
-          bg="hover:primary/10"
-          transition="~ all duration-150 ease-out"
-          cursor="pointer"
+          :class="[
+            'flex flex-row items-center',
+            'cursor-pointer rounded-lg p-2 hover:bg-primary/10',
+            'transition-all duration-150 ease-out',
+          ]"
           @click="stepForward"
         >
-          <div i-lucide:step-forward />
+          <div
+            :class="[
+              'i-lucide:step-forward',
+            ]"
+          />
         </div>
 
         <div
-          flex="~ row items-center"
-          rounded-lg p="2"
-          bg="hover:primary/10"
-          transition="~ all duration-150 ease-out"
-          cursor="pointer"
+          :class="[
+            'flex flex-row items-center',
+            'cursor-pointer rounded-lg p-2 hover:bg-primary/10',
+            'transition-all duration-150 ease-out',
+          ]"
           @click="stepBack"
         >
-          <div i-lucide:step-back />
+          <div
+            :class="[
+              'i-lucide:step-back',
+            ]"
+          />
         </div>
       </div>
 
       <div
-        flex="~ row items-start gap-1 grow"
-        transition="~ all duration-150 ease-out"
-        overflow="x-scroll"
-        bg="primary/5" w-full rounded-lg p-2
+        :class="[
+          'flex grow flex-row items-start gap-1',
+          'w-full overflow-x-scroll rounded-lg bg-primary/5 p-2',
+          'transition-all duration-150 ease-out',
+        ]"
       >
         <TransitionGroup
           :css="false"
@@ -144,32 +178,43 @@ function stepBack() {
       </div>
     </div>
 
-    <div flex="~ row items-center justify-center gap-1 wrap" py-2 text-xs>
-      <div font-semibold w="full md:auto" text="center md:unset">
+    <div
+      :class="[
+        'flex flex-row flex-wrap items-center justify-center gap-1',
+        'py-2 text-xs',
+      ]"
+    >
+      <div
+        :class="[
+          'w-full text-center font-semibold md:w-auto md:text-unset',
+        ]"
+      >
         {{ lang === 'zh-Hans' ? '图例' : 'Legend' }}
       </div>
       <div
-        b="~ 2 dotted primary/20"
-        rounded-lg px-2
-        flex="~ items-center justify-center shrink-0"
-        transition="~ all duration-150 ease-out"
+        :class="[
+          'flex shrink-0 items-center justify-center',
+          'rounded-lg border-2 border-dotted border-primary/20 px-2',
+          'transition-all duration-150 ease-out',
+        ]"
       >
         {{ lang === 'zh-Hans' ? '字符' : 'Character' }}
       </div>
       <div
-        b="~ 2 dashed primary/20"
-        rounded-lg px-2
-        flex="~ items-center justify-center shrink-0"
-        transition="~ all duration-150 ease-out"
+        :class="[
+          'flex shrink-0 items-center justify-center',
+          'rounded-lg border-2 border-dashed border-primary/20 px-2',
+          'transition-all duration-150 ease-out',
+        ]"
       >
         {{ lang === 'zh-Hans' ? '不完整字素簇' : 'Incomplete cluster' }}
       </div>
       <div
-        b="~ 2 solid primary/50"
-        bg="primary/10"
-        rounded-lg px-2
-        flex="~ items-center justify-center shrink-0"
-        transition="~ all duration-150 ease-out"
+        :class="[
+          'flex shrink-0 items-center justify-center',
+          'rounded-lg border-2 border-solid border-primary/50 bg-primary/10 px-2',
+          'transition-all duration-150 ease-out',
+        ]"
       >
         {{ lang === 'zh-Hans' ? '完整字素簇' : 'Complete cluster' }}
       </div>