diff --git a/packages/devui-vue/devui/skeleton/__tests__/skeleton.spec.ts b/packages/devui-vue/devui/skeleton/__tests__/skeleton.spec.ts
index a5f905040d816a9c77a294a3908affc2d64accbe..2e1ce571d91331c06744a78337d91f274e82c082 100644
--- a/packages/devui-vue/devui/skeleton/__tests__/skeleton.spec.ts
+++ b/packages/devui-vue/devui/skeleton/__tests__/skeleton.spec.ts
@@ -2,7 +2,7 @@ import { mount } from '@vue/test-utils';
 import { ref } from 'vue';
 import DSkeleton from '../src/skeleton';
 
-describe('skeleton 组件', () => {
+describe('skeleton module', () => {
   it('render basic skeleton', () => {
     const row = ref(4)
     const wrapper = mount({
@@ -14,9 +14,7 @@ describe('skeleton 组件', () => {
         }
       },
     })
-
-    expect(wrapper.classes()).toContain('devui-skeleton')
-    expect(wrapper.classes()).toContain('devui-skeleton-animated')
+    expect(wrapper.classes()).toEqual(['devui-skeleton', 'devui-skeleton__animated'])
     expect(wrapper.element.childElementCount).toBe(2)
     expect(wrapper.element.children[1].children[1].childElementCount).toBe(4)
   })
@@ -49,33 +47,8 @@ describe('skeleton 组件', () => {
         }
       },
     })
-    
+
     expect(wrapper.element.children[1].childElementCount).toBe(2)
   })
 
-  it('hide skeleton and show real content', () => {
-    const row = ref(4)
-    const loading = ref(false)
-    const wrapper = mount({
-      components: { DSkeleton },
-      template: `
-      <d-skeleton :row="4" :loading="loading">
-        <div>
-          <div>content1</div>
-          <div>content2</div>
-          <div>content3</div>
-          <div>content4</div>
-        </div>
-      </d-skeleton>`,
-      setup() {
-        return {
-          row,
-          loading
-        }
-      },
-    })
-
-    expect(wrapper.classes()).toContain('devui-skeleton')
-    expect(wrapper.element.children[0].innerHTML).toBe('<div>content1</div><div>content2</div><div>content3</div><div>content4</div>')
-  })
 })
\ No newline at end of file
diff --git a/packages/devui-vue/docs/components/skeleton/index.md b/packages/devui-vue/docs/components/skeleton/index.md
index 2328d551f04d375d2f4b29c401079e08cd75a57f..58bf457c1bb71334364f9689def6881381731845 100644
--- a/packages/devui-vue/docs/components/skeleton/index.md
+++ b/packages/devui-vue/docs/components/skeleton/index.md
@@ -106,7 +106,7 @@ export default defineComponent({
 
 :::
 
-### 拼接模式
+### 细粒度模式
 
 提供细粒度的骨架屏元素，给予开发者更灵活的定制能力。
 :::demo
@@ -155,13 +155,13 @@ export default defineComponent({
 | row-width | `number \| string \| (number \| string)[]` | `["100%"]` | 段落占位图宽度，可传数组来设置每一行的宽度 |
 
 ### d-skeleton-item Props
-拼接模式
+细粒度模式
 |  参数   |   类型    |  默认  | 说明                                                    |
 | :-----: | :-------: | :----: | :------------------------------------------------------ |
 |  shape  | `string`  |   -    | 可选值为`avatar`,`image`,`title`,`paragraph`,`button`。 |
 | animate | `boolean` | `true` | 是否开启动画                                            |
 
-> paragraph 的 API 与默认模式相同；
+> paragraph 的 API 与默认模式相同。
 ### d-skeleton-item__avatar Props
 
 |     参数     |        类型        |  默认   | 说明                             |
diff --git a/packages/devui-vue/docs/en-US/components/skeleton/index.md b/packages/devui-vue/docs/en-US/components/skeleton/index.md
new file mode 100644
index 0000000000000000000000000000000000000000..3329fd4afe2c87503d9fc4c59c166bde53bc9358
--- /dev/null
+++ b/packages/devui-vue/docs/en-US/components/skeleton/index.md
@@ -0,0 +1,169 @@
+# Skeleton
+
+It is used to display a set of placeholder graphics during content loading.
+
+### When to Use
+
+Set a skeleton in the position where content needs to be loaded, which has better visual effect than Loading in some scenarios.
+
+### Basic Usage
+
+Basic placeholder effect.
+
+:::demo
+
+```vue
+<template>
+  <d-skeleton :row="3" />
+</template>
+```
+
+:::
+
+
+### Complex Combination
+
+:::demo
+
+```vue
+<template>
+  <div class="skeleton-btn-groups">
+      <div class="skeleton-btn">
+          Skeleton：
+         <d-switch v-model:checked="loading" />
+      </div>
+      <div class="skeleton-btn">
+          Animation：
+         <d-switch v-model:checked="animate" />
+      </div>
+      <div class="skeleton-btn">
+          Avatar：
+         <d-switch v-model:checked="avatar" />
+      </div>
+      <div class="skeleton-btn">
+          Title：
+         <d-switch v-model:checked="title" />
+      </div>
+      <div class="skeleton-btn">
+          Paragraph：
+         <d-switch v-model:checked="paragraph" />
+      </div>
+      <div class="skeleton-btn">
+          Round Avatar：
+         <d-switch v-model:checked="roundAvatar" />
+      </div>
+      <div class="skeleton-btn">
+          Round Corners：
+         <d-switch v-model:checked="round" />
+      </div>
+  </div>
+  <d-skeleton :row="3" :animate="animate" :avatar="avatar" :avatar-shape="roundAvatar?'':'square'" :title="title" :paragraph="paragraph" :loading="loading" :round="round">
+      <div>
+        <div>row one</div>
+        <div>row two</div>
+        <div>row three</div>
+        <div>row four</div>
+      </div>
+  </d-skeleton>
+</template>
+<script>
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
+    const loading = ref(true)
+    const animate = ref(true)
+    const avatar = ref(true)
+    const title = ref(true)
+    const paragraph = ref(true)
+    const roundAvatar = ref(true)
+    const round = ref(false)
+
+    return {
+      loading,
+	    animate,
+      avatar,
+      title,
+      paragraph,
+      roundAvatar,
+      round
+    }
+  }
+})
+</script>
+<style>
+.skeleton-btn-groups{
+  display: flex;
+  margin-bottom: 1rem;
+}
+.skeleton-btn{
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+</style>
+```
+
+:::
+
+### Fine-grit Mode
+
+Provide fine-grained skeleton elements to give developers more flexibility for customization.
+:::demo
+
+```vue
+<template>
+  <d-skeleton-item :shape="'avatar'" style="margin-left:55px;width:80px;height:80px;" />
+  <d-skeleton-item :shape="'image'" />
+  <d-skeleton-item :shape="'title'" />
+  <d-skeleton-item :shape="'paragraph'" :row="3" :row-width="['75%','50%']" />
+  <d-skeleton-item :shape="'button'" />
+</template>
+```
+
+:::
+
+### d-skeleton Props
+
+|   Parameter    |   Type    |  Default   | Description                                          |
+| :-------: | :-------: | :-----: | :-------------------------------------------- |
+|  loading  | `boolean` | `true`  | Choose whether to display skeleton.Subcomponent content will be shown when Loading is `false` . |
+|  animate  | `boolean` | `true`  | Choose whether to enable animation.                                  |
+|  avatar   | `boolean` | `false` | Choose whether to display the avatar placeholder picture.                            |
+|   title   | `boolean` | `true`  | Choose whether to display a title placeholder picture.                            |
+| paragraph | `boolean` | `true`  | Choose whether to display a paragraph placeholder picture.                             |
+|   round   | `boolean` | `false` | Choose whether to display headings and paragraphs in round corners.                |
+
+### d-skeleton__avatar Props
+
+|     Parameter     |        Type        |  Default   | Description                             |
+| :----------: | :----------------: | :-----: | :------------------------------- |
+| avatar-size  | `number \| string` | `40px`  | Size of avatar placeholder picture.                   |
+| avatar-shape |      `string`      | `round` | The shape of head placeholder picture with the optional value `square`. |
+
+### d-skeleton__title Props
+
+|    Parameter     |        Type        | Default  | Description                 |
+| :---------: | :----------------: | :---: | :------------------- |
+| title-width | `number \| string` | `40%` | Width of the title placeholder picture. |
+
+### d-skeleton__paragraph Props
+
+|   Parameter    |                    Type                    |    Default    | Description                                       |
+| :-------: | :----------------------------------------: | :--------: | :----------------------------------------- |
+|    row    |                  `number`                  |    `0`     | The number of paragraph placeholder picture lines.                             |
+| row-width | `number \| string \| (number \| string)[]` | `["100%"]` | Paragraph placeholder picture widths that can be passed to arrays to set the width of each line. |
+
+### d-skeleton-item Props
+Fine-grit Mode
+|  Parameter   |   Type    |  Default  | Description                                                    |
+| :-----: | :-------: | :----: | :------------------------------------------------------ |
+|  shape  | `string`  |   -    | The optional values are `avatar`,`image`,`title`,`paragraph`,`button`. |
+| animate | `boolean` | `true` | Choose whether to enable animation.                                            |
+
+> The Paragraph API is the same as the default mode.
+### d-skeleton-item__avatar Props
+
+|     Parameter     |        Type        |  Default   | Description                             |
+| :----------: | :----------------: | :-----: | :------------------------------- |
+| avatar-shape |      `string`      | `round` | The shape of placeholder picture with the optional value `square`. |
\ No newline at end of file