diff --git a/src/config.json b/src/config.json
index 84a46e709e..ba172f8419 100644
--- a/src/config.json
+++ b/src/config.json
@@ -1013,7 +1013,7 @@
           "sort": 15,
           "show": true,
           "taro": true,
-          "v15": 2,
+          "v15": 1,
           "author": "swag~jun",
           "dd": true
         },
diff --git a/src/packages/skeleton/__test__/skeleton.spec.tsx b/src/packages/skeleton/__test__/skeleton.spec.tsx
index 78e4a23f6a..6118e3d2e7 100644
--- a/src/packages/skeleton/__test__/skeleton.spec.tsx
+++ b/src/packages/skeleton/__test__/skeleton.spec.tsx
@@ -6,19 +6,13 @@ import { Skeleton } from '../skeleton'
 
 test('should allow to disable animation', () => {
   const { container } = render(<Skeleton rows={1} animated={false} />)
-  expect(container.querySelector('.skeleton-animation')).toBeFalsy()
+  expect(container.querySelector('.nut-skeleton-animation')).toBeFalsy()
 })
 
-test('should change avatar size when using avatarSize prop', () => {
-  const { container } = render(<Skeleton avatar avatarSize="20px" />)
-  expect(container.querySelector('.nut-avatar')).toHaveStyle({
-    width: '20px',
-    height: '20px',
+test('should set duration', () => {
+  const { container } = render(<Skeleton rows={1} duration={2} />)
+  const animation = container.querySelector('.nut-skeleton-animated')
+  expect(animation).toHaveStyle({
+    animationDuration: '2s',
   })
-  expect(container).toMatchSnapshot()
-})
-
-test('should change avatar shape when using avatarShape prop', () => {
-  const { container } = render(<Skeleton avatar avatarShape="square" />)
-  expect(container.querySelector('.nut-avatar')).toMatchSnapshot()
 })
diff --git a/src/packages/skeleton/demo.scss b/src/packages/skeleton/demo.scss
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/src/packages/skeleton/demo.taro.tsx b/src/packages/skeleton/demo.taro.tsx
index 9f33d74b64..bbf12ce136 100644
--- a/src/packages/skeleton/demo.taro.tsx
+++ b/src/packages/skeleton/demo.taro.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
 import Taro from '@tarojs/taro'
 import { ScrollView, View } from '@tarojs/components'
-import './demo.scss'
 import { useTranslate } from '@/sites/assets/locale/taro'
 import Header from '@/sites/components/header'
 import Demo1 from './demos/taro/demo1'
@@ -13,25 +12,25 @@ import Demo5 from './demos/taro/demo5'
 const SkeletonDemo = () => {
   const [translated] = useTranslate({
     'zh-CN': {
-      '84aa6bce': '基础用法',
-      ea3bc18a: '传入多行',
-      '02a53df5': '显示头像',
-      '0a001122': '标题段落圆角风格',
+      '84aa6bce': '标题',
+      ea3bc18a: '正文',
+      '02a53df5': '模拟头像',
+      '0a001122': '标题段落',
       '07d62d5c': '显示子组件',
     },
     'zh-TW': {
-      '84aa6bce': '基礎用法',
-      ea3bc18a: '傳入多行',
-      '02a53df5': '顯示頭像',
-      '0a001122': '標題段落圓角風格',
-      '07d62d5c': '圖片組合',
+      '84aa6bce': '标题',
+      ea3bc18a: '正文',
+      '02a53df5': '模拟头像',
+      '0a001122': '標題段落',
+      '07d62d5c': '显示子组件',
     },
     'en-US': {
-      '84aa6bce': 'Basic usage',
-      ea3bc18a: 'Pass in multiple lines',
-      '02a53df5': 'show avatar',
-      '0a001122': 'Heading Paragraph Rounded Corner Style',
-      '07d62d5c': 'show subcomponents',
+      '84aa6bce': 'Title',
+      ea3bc18a: 'Paragraph',
+      '02a53df5': 'Mock Avatar',
+      '0a001122': 'Heading Paragraph',
+      '07d62d5c': 'Show Subcomponents',
     },
   })
 
diff --git a/src/packages/skeleton/demo.tsx b/src/packages/skeleton/demo.tsx
index 5e2cc79e2f..7c5f8402bd 100644
--- a/src/packages/skeleton/demo.tsx
+++ b/src/packages/skeleton/demo.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import { useTranslate } from '@/sites/assets/locale'
-import './demo.scss'
 import Demo1 from './demos/h5/demo1'
 import Demo2 from './demos/h5/demo2'
 import Demo3 from './demos/h5/demo3'
@@ -10,25 +9,25 @@ import Demo5 from './demos/h5/demo5'
 const SkeletonDemo = () => {
   const [translated] = useTranslate({
     'zh-CN': {
-      '84aa6bce': '基础用法',
-      ea3bc18a: '传入多行',
-      '02a53df5': '显示头像',
-      '0a001122': '标题段落圆角风格',
+      '84aa6bce': '标题',
+      ea3bc18a: '正文',
+      '02a53df5': '模拟头像',
+      '0a001122': '标题段落',
       '07d62d5c': '显示子组件',
     },
     'zh-TW': {
-      '84aa6bce': '基礎用法',
-      ea3bc18a: '傳入多行',
-      '02a53df5': '顯示頭像',
-      '0a001122': '標題段落圓角風格',
-      '07d62d5c': '圖片組合',
+      '84aa6bce': '标题',
+      ea3bc18a: '正文',
+      '02a53df5': '模拟头像',
+      '0a001122': '標題段落',
+      '07d62d5c': '显示子组件',
     },
     'en-US': {
-      '84aa6bce': 'Basic usage',
-      ea3bc18a: 'Pass in multiple lines',
-      '02a53df5': 'show avatar',
-      '0a001122': 'Heading Paragraph Rounded Corner Style',
-      '07d62d5c': 'show subcomponents',
+      '84aa6bce': 'Title',
+      ea3bc18a: 'Paragraph',
+      '02a53df5': 'Mock Avatar',
+      '0a001122': 'Heading Paragraph',
+      '07d62d5c': 'Show Subcomponents',
     },
   })
 
diff --git a/src/packages/skeleton/demos/h5/demo1.tsx b/src/packages/skeleton/demos/h5/demo1.tsx
index 568f0cb55b..eea0438cb8 100644
--- a/src/packages/skeleton/demos/h5/demo1.tsx
+++ b/src/packages/skeleton/demos/h5/demo1.tsx
@@ -3,8 +3,8 @@ import { Cell, Skeleton } from '@nutui/nutui-react'
 
 const Demo1 = () => {
   return (
-    <Cell style={{ display: 'block' }}>
-      <Skeleton animated />
+    <Cell>
+      <Skeleton animated size="large" style={{ width: '100%' }} />
     </Cell>
   )
 }
diff --git a/src/packages/skeleton/demos/h5/demo2.tsx b/src/packages/skeleton/demos/h5/demo2.tsx
index ba33053f22..d2cb89c358 100644
--- a/src/packages/skeleton/demos/h5/demo2.tsx
+++ b/src/packages/skeleton/demos/h5/demo2.tsx
@@ -3,8 +3,8 @@ import { Cell, Skeleton } from '@nutui/nutui-react'
 
 const Demo2 = () => {
   return (
-    <Cell style={{ display: 'block', paddingTop: '3px' }}>
-      <Skeleton rows={3} title animated />
+    <Cell>
+      <Skeleton rows={3} animated size="small" style={{ width: '100%' }} />
     </Cell>
   )
 }
diff --git a/src/packages/skeleton/demos/h5/demo3.tsx b/src/packages/skeleton/demos/h5/demo3.tsx
index 33ac5a533b..0a9b8da310 100644
--- a/src/packages/skeleton/demos/h5/demo3.tsx
+++ b/src/packages/skeleton/demos/h5/demo3.tsx
@@ -1,10 +1,13 @@
 import React from 'react'
-import { Cell, Skeleton } from '@nutui/nutui-react'
+import { Cell, Skeleton, Space } from '@nutui/nutui-react'
 
 const Demo3 = () => {
   return (
     <Cell>
-      <Skeleton rows={3} title animated avatar avatarSize="100px" />
+      <Space>
+        <Skeleton width={60} height={60} />
+        <Skeleton width={60} height={60} shape="circle" />
+      </Space>
     </Cell>
   )
 }
diff --git a/src/packages/skeleton/demos/h5/demo4.tsx b/src/packages/skeleton/demos/h5/demo4.tsx
index 48671847d9..01ebd9f3ce 100644
--- a/src/packages/skeleton/demos/h5/demo4.tsx
+++ b/src/packages/skeleton/demos/h5/demo4.tsx
@@ -1,16 +1,22 @@
 import React from 'react'
-import { Cell, Skeleton, ConfigProvider } from '@nutui/nutui-react'
+import { Cell, Skeleton } from '@nutui/nutui-react'
 
 const Demo4 = () => {
   return (
-    <Cell style={{ display: 'block' }}>
-      <ConfigProvider
-        theme={{
-          nutuiSkeletonLineBorderRadius: '10px',
+    <Cell>
+      <Skeleton width={132} height={132} />
+      <div
+        style={{
+          display: 'flex',
+          flexGrow: 1,
+          flexDirection: 'column',
+          marginLeft: 10,
         }}
       >
-        <Skeleton rows={3} animated />
-      </ConfigProvider>
+        <Skeleton size="large" style={{ marginBottom: 5 }} />
+        <Skeleton width="30%" style={{ marginBottom: 5 }} />
+        <Skeleton width="80%" size="small" rows={3} />
+      </div>
     </Cell>
   )
 }
diff --git a/src/packages/skeleton/demos/h5/demo5.tsx b/src/packages/skeleton/demos/h5/demo5.tsx
index 68de14ddd5..9f5728ea33 100644
--- a/src/packages/skeleton/demos/h5/demo5.tsx
+++ b/src/packages/skeleton/demos/h5/demo5.tsx
@@ -1,4 +1,4 @@
-import { Cell, Avatar, Image, Skeleton, Switch } from '@nutui/nutui-react'
+import { Avatar, Cell, Image, Skeleton, Switch } from '@nutui/nutui-react'
 import React, { useState } from 'react'
 
 const Demo5 = () => {
@@ -17,8 +17,9 @@ const Demo5 = () => {
           onChange={(value, event) => changeStatus(value, event)}
           style={{ marginBottom: '8px' }}
         />
-        <Skeleton title animated avatar rows={3} visible={checked}>
-          <div className="nut-skeleton-content">
+
+        <div style={{ display: 'flex' }}>
+          <Skeleton visible={checked} width={50} height={50} shape="circle">
             <Avatar
               className="nut-skeleton-content-avatar"
               size="50"
@@ -29,14 +30,23 @@ const Demo5 = () => {
                 />
               }
             />
-            <div>
+          </Skeleton>
+          <div style={{ flexGrow: 1, marginLeft: 8 }}>
+            <Skeleton
+              visible={checked}
+              size="large"
+              width="30%"
+              style={{ marginBottom: 8 }}
+            >
               <span>NutUI-React</span>
+            </Skeleton>
+            <Skeleton visible={checked} size="small" rows={2}>
               <div>
                 一套京东风格的轻量级移动端React组件库，提供丰富的基础组件和业务组件，帮助开发者快速搭建移动应用。
               </div>
-            </div>
+            </Skeleton>
           </div>
-        </Skeleton>
+        </div>
       </div>
     </Cell>
   )
diff --git a/src/packages/skeleton/demos/taro/demo1.tsx b/src/packages/skeleton/demos/taro/demo1.tsx
index 072b8236ee..58987f567c 100644
--- a/src/packages/skeleton/demos/taro/demo1.tsx
+++ b/src/packages/skeleton/demos/taro/demo1.tsx
@@ -3,8 +3,8 @@ import { Cell, Skeleton } from '@nutui/nutui-react-taro'
 
 const Demo1 = () => {
   return (
-    <Cell style={{ display: 'block', paddingTop: '3px' }}>
-      <Skeleton animated />
+    <Cell>
+      <Skeleton animated size="large" style={{ width: '100%' }} />
     </Cell>
   )
 }
diff --git a/src/packages/skeleton/demos/taro/demo2.tsx b/src/packages/skeleton/demos/taro/demo2.tsx
index b0b5cac29e..9e951412c2 100644
--- a/src/packages/skeleton/demos/taro/demo2.tsx
+++ b/src/packages/skeleton/demos/taro/demo2.tsx
@@ -3,8 +3,8 @@ import { Cell, Skeleton } from '@nutui/nutui-react-taro'
 
 const Demo2 = () => {
   return (
-    <Cell style={{ display: 'block' }}>
-      <Skeleton rows={3} title animated />
+    <Cell>
+      <Skeleton rows={3} animated size="small" style={{ width: '100%' }} />
     </Cell>
   )
 }
diff --git a/src/packages/skeleton/demos/taro/demo3.tsx b/src/packages/skeleton/demos/taro/demo3.tsx
index 204137ad8f..614986a3b9 100644
--- a/src/packages/skeleton/demos/taro/demo3.tsx
+++ b/src/packages/skeleton/demos/taro/demo3.tsx
@@ -1,10 +1,18 @@
 import React from 'react'
-import { Cell, Skeleton } from '@nutui/nutui-react-taro'
+import { Cell, Skeleton, Space } from '@nutui/nutui-react-taro'
+import pxTransform from '@/utils/px-transform'
 
 const Demo3 = () => {
   return (
     <Cell>
-      <Skeleton rows={3} title animated avatar avatarSize="100px" />
+      <Space>
+        <Skeleton width={pxTransform(60)} height={pxTransform(60)} />
+        <Skeleton
+          width={pxTransform(60)}
+          height={pxTransform(60)}
+          shape="circle"
+        />
+      </Space>
     </Cell>
   )
 }
diff --git a/src/packages/skeleton/demos/taro/demo4.tsx b/src/packages/skeleton/demos/taro/demo4.tsx
index 8bf0c9c6e0..edcc4797be 100644
--- a/src/packages/skeleton/demos/taro/demo4.tsx
+++ b/src/packages/skeleton/demos/taro/demo4.tsx
@@ -1,17 +1,23 @@
 import React from 'react'
-import { Cell, Skeleton, ConfigProvider } from '@nutui/nutui-react-taro'
+import { Cell, Skeleton } from '@nutui/nutui-react-taro'
 import pxTransform from '@/utils/px-transform'
 
 const Demo4 = () => {
   return (
-    <Cell style={{ display: 'block' }}>
-      <ConfigProvider
-        theme={{
-          nutuiSkeletonLineBorderRadius: pxTransform(10),
+    <Cell>
+      <Skeleton width={pxTransform(132)} height={pxTransform(132)} />
+      <div
+        style={{
+          display: 'flex',
+          flexGrow: 1,
+          flexDirection: 'column',
+          marginLeft: pxTransform(10),
         }}
       >
-        <Skeleton rows={3} animated />
-      </ConfigProvider>
+        <Skeleton size="large" style={{ marginBottom: pxTransform(5) }} />
+        <Skeleton width="30%" style={{ marginBottom: pxTransform(5) }} />
+        <Skeleton width="80%" size="small" rows={3} />
+      </div>
     </Cell>
   )
 }
diff --git a/src/packages/skeleton/demos/taro/demo5.tsx b/src/packages/skeleton/demos/taro/demo5.tsx
index 87d7a25b0f..ab3be75351 100644
--- a/src/packages/skeleton/demos/taro/demo5.tsx
+++ b/src/packages/skeleton/demos/taro/demo5.tsx
@@ -1,54 +1,58 @@
 import { Avatar, Cell, Skeleton, Switch } from '@nutui/nutui-react-taro'
 import React, { useState } from 'react'
 import { View, Text } from '@tarojs/components'
-import { harmony } from '@/utils/platform-taro'
+import pxTransform from '@/utils/px-transform'
 
 const Demo5 = () => {
   const [checked, setChecked] = useState(false)
-  const changeStatus = (
-    value: boolean,
-    event: React.MouseEvent<Element, MouseEvent>
-  ) => {
+  const changeStatus = (value: boolean) => {
     console.log(`触发了change事件，开关状态：${value}`)
     setChecked(value)
   }
   return (
-    <Cell>
-      <View style={{ width: '100%' }}>
-        <View
-          style={{
-            display: 'flex',
-            justifyContent: 'flex-start',
-          }}
-        >
-          <Switch
-            onChange={(value, event: any) => changeStatus(value, event)}
-            style={{ marginBottom: 8 }}
-          />
-        </View>
-        <Skeleton title animated avatar rows={3} visible={checked}>
-          <View
-            className="nut-skeleton-content"
-            style={{ display: 'flex', flexDirection: 'row' }}
-          >
-            <Avatar
-              className="nut-skeleton-content-avatar"
-              style={{ marginRight: 20 }}
-              size="50"
-              src="https://img14.360buyimg.com/imagetools/jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png"
-            />
-            <View className="nut-skeleton-content-line">
-              <Text>NutUI-React</Text>
-              <View
-                style={{ marginTop: 10, width: harmony() ? '80%' : '100%' }}
+    <>
+      <Cell>
+        <Switch
+          onChange={(value, event) => changeStatus(value)}
+          style={{ marginBottom: pxTransform(8) }}
+        />
+      </Cell>
+      <Cell>
+        <View style={{ width: '100%' }}>
+          <View style={{ display: 'flex' }}>
+            <Skeleton
+              visible={checked}
+              width={pxTransform(50)}
+              height={pxTransform(50)}
+              shape="circle"
+            >
+              <Avatar
+                className="nut-skeleton-content-avatar"
+                size="50"
+                src="https://img14.360buyimg.com/imagetools/jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png"
+              />
+            </Skeleton>
+            <View style={{ flex: 1, marginLeft: pxTransform(8) }}>
+              <Skeleton
+                visible={checked}
+                size="large"
+                width="30%"
+                style={{ marginBottom: pxTransform(8) }}
               >
-                一套京东风格的轻量级移动端React组件库，提供丰富的基础组件和业务组件，帮助开发者快速搭建移动应用。
-              </View>
+                <View style={{ lineHeight: 1, height: pxTransform(16) }}>
+                  NutUI-React
+                </View>
+              </Skeleton>
+              <Skeleton visible={checked} size="small" rows={2}>
+                <Text style={{ wordBreak: 'break-all' }}>
+                  一套京东风格的轻量级移动端React组件库，提供丰富的基础组件和业务组件，帮助开发者快速搭建移动应用。
+                </Text>
+              </Skeleton>
             </View>
           </View>
-        </Skeleton>
-      </View>
-    </Cell>
+        </View>
+      </Cell>
+    </>
   )
 }
 export default Demo5
diff --git a/src/packages/skeleton/doc.en-US.md b/src/packages/skeleton/doc.en-US.md
index 9db2a753ba..ca44a019bc 100644
--- a/src/packages/skeleton/doc.en-US.md
+++ b/src/packages/skeleton/doc.en-US.md
@@ -10,7 +10,7 @@ import { Skeleton } from '@nutui/nutui-react'
 
 ## Code demonstration
 
-### Basic usage
+### Title
 
 :::demo
 
@@ -18,7 +18,7 @@ import { Skeleton } from '@nutui/nutui-react'
 
 :::
 
-### Incoming multiline
+### Paragraph
 
 :::demo
 
@@ -26,7 +26,7 @@ import { Skeleton } from '@nutui/nutui-react'
 
 :::
 
-### Show Faces
+### Mock Avatar
 
 :::demo
 
@@ -34,7 +34,7 @@ import { Skeleton } from '@nutui/nutui-react'
 
 :::
 
-### Title paragraph fillet style
+### Heading Paragraph
 
 :::demo
 
@@ -42,7 +42,7 @@ import { Skeleton } from '@nutui/nutui-react'
 
 :::
 
-### Display subcomponents
+### Show subcomponents
 
 :::demo
 
@@ -56,13 +56,14 @@ import { Skeleton } from '@nutui/nutui-react'
 
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
-| visible | Whether to display skeleton screen | `boolean` | `false` |
-| animated | Whether to turn on skeleton screen animation | `boolean` | `false` |
-| avatar | Show avatar | `boolean` | `false` |
-| avatarShape | Avatar shape: square / round | `string` | `round` |
-| avatarSize | Avatar size | `string` | `50px` |
-| rows | Set the number of paragraph lines | `number` | `1` |
-| title | Show paragraph titles | `boolean` | `false` |
+| visible | Whether to show skeleton screen (true: hide skeleton, false: show skeleton) | `boolean` | `true` |
+| animated | Whether to enable skeleton animation | `boolean` | `false` |
+| size | Specify the built-in height | `'small' \| 'normal' \| 'large'` | `normal` |
+| shape | Set shape | `'square' \| 'round' \| 'circle'` | `round` |
+| duration | Animation duration | `number` | `0.6` |
+| rows | Set number of rows | `number` | `1` |
+| width | Set width, higher priority than `size` property | `string\|number` | `-` |
+| height | Set height, higher priority than `size` property | `string\|number` | `-` |
 
 ## Theming
 
@@ -72,9 +73,11 @@ The component provides the following CSS variables, which can be used to customi
 
 | Name | Description | Default |
 | --- | --- | --- |
-| \--nutui-skeleton-background | background | `rgb(239, 239, 239)` |
-| \--nutui-skeleton-line-width | line width | `100%` |
-| \--nutui-skeleton-line-height | line height | `15px` |
-| \--nutui-skeleton-line-border-radius | line borderRadius | `0` |
+| \--nutui-skeleton-background | Background | `rgb(239, 239, 239)` |
+| \--nutui-skeleton-line-width | Line width | `100%` |
+| \--nutui-skeleton-line-small-height | Line height | `16px` |
+| \--nutui-skeleton-line-normal-height | Line height | `24px` |
+| \--nutui-skeleton-line-large-height | Line height | `32px` |
+| \--nutui-skeleton-line-border-radius | Line border radius | `4px` |
 
 <Contribution name="Skeleton" />
diff --git a/src/packages/skeleton/doc.md b/src/packages/skeleton/doc.md
index f5cec48596..b8dd5588fa 100644
--- a/src/packages/skeleton/doc.md
+++ b/src/packages/skeleton/doc.md
@@ -10,7 +10,7 @@ import { Skeleton } from '@nutui/nutui-react'
 
 ## 示例代码
 
-### 基础用法
+### 标题
 
 :::demo
 
@@ -18,7 +18,7 @@ import { Skeleton } from '@nutui/nutui-react'
 
 :::
 
-### 传入多行
+### 正文
 
 :::demo
 
@@ -26,7 +26,7 @@ import { Skeleton } from '@nutui/nutui-react'
 
 :::
 
-### 显示头像
+### 模拟头像
 
 :::demo
 
@@ -34,7 +34,7 @@ import { Skeleton } from '@nutui/nutui-react'
 
 :::
 
-### 标题段落圆角风格
+### 标题段落
 
 :::demo
 
@@ -58,11 +58,12 @@ import { Skeleton } from '@nutui/nutui-react'
 | --- | --- | --- | --- |
 | visible | 是否显示骨架屏(true不显示骨架屏，false显示骨架屏) | `boolean` | `true` |
 | animated | 是否开启骨架屏动画 | `boolean` | `false` |
-| avatar | 是否显示头像 | `boolean` | `false` |
-| avatarShape | 头像形状：正方形/圆形 | `string` | `round` |
-| avatarSize | 头像大小 | `string` | `50px` |
-| rows | 设置段落行数 | `number` | `1` |
-| title | 是否显示段落标题 | `boolean` | `true` |
+| size | 指定使用的内置高度 | `'small' \| 'normal' \| 'large'` | `normal` |
+| shape | 设置形状 | `'square' \| 'round' \| 'circle'` | `round` |
+| duration | 动画时长 | `number` | `0.6` |
+| rows | 设置行数 | `number` | `1` |
+| width | 设置宽度，优先级高于 `size` 属性 | `string\|number` | `-` |
+| height | 设置高度，优先级高于 `size` 属性 | `string\|number` | `-` |
 
 ## 主题定制
 
@@ -74,7 +75,9 @@ import { Skeleton } from '@nutui/nutui-react'
 | --- | --- | --- |
 | \--nutui-skeleton-background | 背景 | `rgb(239, 239, 239)` |
 | \--nutui-skeleton-line-width | 线条宽度 | `100%` |
-| \--nutui-skeleton-line-height | 线条高度 | `15px` |
-| \--nutui-skeleton-line-border-radius | 线条边框圆角 | `0` |
+| \--nutui-skeleton-line-small-height | 线条高度 | `16px` |
+| \--nutui-skeleton-line-normal-height | 线条高度 | `24px` |
+| \--nutui-skeleton-line-large-height | 线条高度 | `32px` |
+| \--nutui-skeleton-line-border-radius | 线条边框圆角 | `4px` |
 
 <Contribution name="Skeleton" />
diff --git a/src/packages/skeleton/doc.taro.md b/src/packages/skeleton/doc.taro.md
index f8d50aa3e1..a7a25b8491 100644
--- a/src/packages/skeleton/doc.taro.md
+++ b/src/packages/skeleton/doc.taro.md
@@ -10,7 +10,7 @@ import { Skeleton } from '@nutui/nutui-react-taro'
 
 ## 示例代码
 
-### 基础用法
+### 标题
 
 :::demo
 
@@ -18,7 +18,7 @@ import { Skeleton } from '@nutui/nutui-react-taro'
 
 :::
 
-### 传入多行
+### 正文
 
 :::demo
 
@@ -26,7 +26,7 @@ import { Skeleton } from '@nutui/nutui-react-taro'
 
 :::
 
-### 显示头像
+### 模拟头像
 
 :::demo
 
@@ -34,7 +34,7 @@ import { Skeleton } from '@nutui/nutui-react-taro'
 
 :::
 
-### 标题段落圆角风格
+### 标题段落
 
 :::demo
 
@@ -58,11 +58,12 @@ import { Skeleton } from '@nutui/nutui-react-taro'
 | --- | --- | --- | --- |
 | visible | 是否显示骨架屏(true不显示骨架屏，false显示骨架屏) | `boolean` | `true` |
 | animated | 是否开启骨架屏动画 | `boolean` | `false` |
-| avatar | 是否显示头像 | `boolean` | `false` |
-| avatarShape | 头像形状：正方形/圆形 | `string` | `round` |
-| avatarSize | 头像大小 | `string` | `50px` |
-| rows | 设置段落行数 | `number` | `1` |
-| title | 是否显示段落标题 | `boolean` | `true` |
+| size | 指定使用的内置高度 | `'small' \| 'normal' \| 'large'` | `normal` |
+| shape | 设置形状 | `'square' \| 'round' \| 'circle'` | `round` |
+| duration | 动画时长 | `number` | `0.6` |
+| rows | 设置行数 | `number` | `1` |
+| width | 设置宽度，优先级高于 `size` 属性 | `string\|number` | `-` |
+| height | 设置高度，优先级高于 `size` 属性 | `string\|number` | `-` |
 
 ## 主题定制
 
@@ -74,7 +75,9 @@ import { Skeleton } from '@nutui/nutui-react-taro'
 | --- | --- | --- |
 | \--nutui-skeleton-background | 背景 | `rgb(239, 239, 239)` |
 | \--nutui-skeleton-line-width | 线条宽度 | `100%` |
-| \--nutui-skeleton-line-height | 线条高度 | `15px` |
-| \--nutui-skeleton-line-border-radius | 线条边框圆角 | `0` |
+| \--nutui-skeleton-line-small-height | 线条高度 | `16px` |
+| \--nutui-skeleton-line-normal-height | 线条高度 | `24px` |
+| \--nutui-skeleton-line-large-height | 线条高度 | `32px` |
+| \--nutui-skeleton-line-border-radius | 线条边框圆角 | `4px` |
 
 <Contribution name="Skeleton" />
diff --git a/src/packages/skeleton/doc.zh-TW.md b/src/packages/skeleton/doc.zh-TW.md
index 4aeeb342ef..8c1b49755b 100644
--- a/src/packages/skeleton/doc.zh-TW.md
+++ b/src/packages/skeleton/doc.zh-TW.md
@@ -10,7 +10,7 @@ import { Skeleton } from '@nutui/nutui-react'
 
 ## 示例代碼
 
-### 基礎用法
+### 标题
 
 :::demo
 
@@ -18,7 +18,7 @@ import { Skeleton } from '@nutui/nutui-react'
 
 :::
 
-### 傳入多行
+### 正文
 
 :::demo
 
@@ -26,7 +26,7 @@ import { Skeleton } from '@nutui/nutui-react'
 
 :::
 
-### 顯示頭像
+### 模擬頭像
 
 :::demo
 
@@ -34,7 +34,7 @@ import { Skeleton } from '@nutui/nutui-react'
 
 :::
 
-### 標題段落圓角風格
+### 標題段落
 
 :::demo
 
@@ -54,15 +54,16 @@ import { Skeleton } from '@nutui/nutui-react'
 
 ### Props
 
-| 屬性 | 說明 | 類型 | 默認值 |
+| 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | visible | 是否顯示骨架屏(true不顯示骨架屏，false顯示骨架屏) | `boolean` | `true` |
 | animated | 是否開啟骨架屏動畫 | `boolean` | `false` |
-| avatar | 是否顯示頭像 | `boolean` | `false` |
-| avatarShape | 頭像形狀：正方形/圓形 | `string` | `round` |
-| avatarSize | 頭像大小 | `string` | `50px` |
-| rows | 設置段落行數 | `number` | `1` |
-| title | 是否顯示段落標題 | `boolean` | `true` |
+| size | 指定使用的內置高度 | `'small' \| 'normal' \| 'large'` | `normal` |
+| shape | 設置形狀 | `'square' \| 'round' \| 'circle'` | `round` |
+| duration | 動畫時長 | `number` | `0.6` |
+| rows | 設置行數 | `number` | `1` |
+| width | 設置寬度，優先級高於 `size` 屬性 | `string\|number` | `-` |
+| height | 設置高度，優先級高於 `size` 屬性 | `string\|number` | `-` |
 
 ## 主題定制
 
@@ -74,7 +75,9 @@ import { Skeleton } from '@nutui/nutui-react'
 | --- | --- | --- |
 | \--nutui-skeleton-background | 背景 | `rgb(239, 239, 239)` |
 | \--nutui-skeleton-line-width | 線條寬度 | `100%` |
-| \--nutui-skeleton-line-height | 線條高度 | `15px` |
-| \--nutui-skeleton-line-border-radius | 線條邊框圓角 | `0` |
+| \--nutui-skeleton-line-small-height | 線條高度 | `16px` |
+| \--nutui-skeleton-line-normal-height | 線條高度 | `24px` |
+| \--nutui-skeleton-line-large-height | 線條高度 | `32px` |
+| \--nutui-skeleton-line-border-radius | 線條邊框圓角 | `4px` |
 
 <Contribution name="Skeleton" />
diff --git a/src/packages/skeleton/skeleton.scss b/src/packages/skeleton/skeleton.scss
index d4afb9b775..a7b0064fd9 100644
--- a/src/packages/skeleton/skeleton.scss
+++ b/src/packages/skeleton/skeleton.scss
@@ -1,46 +1,29 @@
-@import '../avatar/avatar.scss';
-
 .nut-skeleton {
-  display: inline-block;
-  position: relative;
-  overflow: hidden;
-  vertical-align: middle;
-  width: 100%;
+  line-height: 0px;
+  font-size: 0px;
 
   &-content {
-    display: flex;
-    flex-direction: row;
-
-    &-avatar {
-      margin-right: 20px;
-      background: $skeleton-background !important;
-    }
+    position: relative;
+    display: inline-flex;
+    width: $skeleton-line-width;
+    background: $skeleton-background;
+    border-radius: $skeleton-line-border-radius;
+    overflow: hidden;
 
-    &-block {
-      width: $skeleton-line-width;
-      height: $skeleton-line-height;
-      background: $skeleton-background;
-      margin-top: 10px;
-      border-radius: $skeleton-line-border-radius;
+    &-normal {
+      height: $skeleton-line-normal-height;
     }
 
-    &-line {
-      width: 100%;
-      display: flex;
-      flex-direction: column;
-      .nut-skeleton-content-block:last-child {
-        width: 70%;
-      }
+    &-large {
+      height: $skeleton-line-large-height;
     }
 
-    &-title {
-      width: 30%;
-      height: $skeleton-line-height;
-      background: $skeleton-background;
+    &-small {
+      height: $skeleton-line-small-height;
+      margin-top: 8px;
     }
-
-    &-block-last-child {
-      width: 55%;
+    &-small-0 {
+      margin-top: 0;
     }
   }
 
@@ -51,41 +34,50 @@
     width: 100%;
     height: 100%;
     z-index: 1;
-    animation: nut-skeleton 2s ease-in-out 0s infinite;
+    background: linear-gradient(
+      90deg,
+      rgba(0, 0, 0, 0) 0%,
+      rgba(0, 0, 0, 0.02) 50%,
+      rgba(0, 0, 0, 0) 100%
+    );
+    animation-name: nut-skeleton;
+    animation-delay: 0s;
+    animation-duration: 0.6s;
+    animation-direction: normal;
+    animation-fill-mode: both;
+    animation-play-state: running;
+    animation-iteration-count: 1;
+    animation-timing-function: linear;
   }
 
   @keyframes nut-skeleton {
-    0% {
-      background-position-x: -500px;
+    from {
+      transform: translateX(-100%);
     }
 
     to {
-      background-position-x: calc(500px + 100%);
+      transform: translateX(100%);
     }
   }
 }
 
 [dir='rtl'] .nut-skeleton,
 .nut-rtl .nut-skeleton {
-  &-content {
-    .nut-avatar {
-      margin-right: 0;
-      margin-left: 20px;
-    }
-  }
   &-animation {
     left: auto;
     right: 0;
-    animation: nut-skeleton-rtl 2s ease-in-out 0s infinite;
+    animation: nut-skeleton-rtl 2s linear 0s infinite;
   }
 
   @keyframes nut-skeleton-rtl {
-    0% {
-      background-position-x: calc(500px + 100%);
+    from {
+      //background-position: -200% 0;
+      transform: translateX(100%);
     }
 
     to {
-      background-position-x: -500px;
+      //background-position: 200% 0;
+      transform: translateX(-100%);
     }
   }
 }
diff --git a/src/packages/skeleton/skeleton.taro.tsx b/src/packages/skeleton/skeleton.taro.tsx
index 13a290e437..924a3d47cc 100644
--- a/src/packages/skeleton/skeleton.taro.tsx
+++ b/src/packages/skeleton/skeleton.taro.tsx
@@ -1,34 +1,38 @@
-import React, { FunctionComponent } from 'react'
-import { View } from '@tarojs/components'
+import React, {
+  CSSProperties,
+  FunctionComponent,
+  useEffect,
+  useState,
+} from 'react'
 import classNames from 'classnames'
-import Avatar from '@/packages/avatar/index.taro'
+import { View } from '@tarojs/components'
 import { ComponentDefaults } from '@/utils/typings'
-import pxTransform from '@/utils/px-transform'
 import { TaroSkeletonProps } from '@/types'
 
 const defaultProps = {
   ...ComponentDefaults,
   rows: 1,
-  animated: false,
-  title: false,
-  avatar: false,
-  avatarSize: '50px',
+  animated: true,
   visible: false,
-  avatarShape: 'round',
+  size: 'normal',
+  shape: 'round',
+  duration: 0.6,
+  inline: false,
 } as TaroSkeletonProps
 export const Skeleton: FunctionComponent<Partial<TaroSkeletonProps>> = (
   props
 ) => {
   const {
     className,
+    width,
+    height,
+    shape,
     animated,
     rows,
-    title,
-    avatar,
-    avatarSize,
     visible,
+    size,
+    duration,
     children,
-    avatarShape,
     ...rest
   } = {
     ...defaultProps,
@@ -37,62 +41,67 @@ export const Skeleton: FunctionComponent<Partial<TaroSkeletonProps>> = (
 
   const classPrefix = 'nut-skeleton'
   const classes = classNames(classPrefix, className)
-  const avatarClass = classNames({
-    [`nut-avatar`]: true,
-    [`nut-skeleton-content-avatar`]: true,
-    [`avatar-${avatarShape}`]: avatarShape,
-  })
 
-  const repeatLines = (num: number) => {
+  const repeatCount = (num: number) => {
     return Array.from({ length: num }, (v, i) => i)
   }
 
-  const getStyle = () => {
-    if (avatarSize) {
+  function shapeStyle(): CSSProperties {
+    if (shape === 'circle') return { borderRadius: '50%' }
+    if (shape === 'square') return { borderRadius: '0' }
+    return {}
+  }
+
+  function durationStyle() {
+    if (typeof duration !== 'undefined')
       return {
-        width: pxTransform(parseInt(avatarSize)),
-        height: pxTransform(parseInt(avatarSize)),
+        animationDuration: `${duration}s`,
       }
-    }
-    return {
-      width: pxTransform(50),
-      height: pxTransform(50),
-    }
+    return {}
   }
 
+  const [animate, setAnimate] = useState(false)
+
+  const playAnimation = () => {
+    setAnimate(false)
+    setTimeout(() => {
+      setAnimate(true)
+    }, 10)
+  }
+
+  useEffect(() => {
+    if (!animated) return
+    playAnimation()
+    // 每隔 3 秒播放一次动画
+    const intervalId = setInterval(playAnimation, 1000 + duration * 1000) // xs 动画 + 1s 间隔
+
+    // 清理定时器
+    return () => clearInterval(intervalId)
+  }, [])
+
   return (
     <>
       {visible ? (
-        <>{children}</>
+        children
       ) : (
         <View className={classes} {...rest}>
-          {animated && <View className={`${classPrefix}-animation`} />}
-          <View className={`${classPrefix}-content`}>
-            {avatar && (
-              <Avatar
-                className={avatarClass}
-                background="rgb(239, 239, 239)"
-                shape={avatarShape}
-                style={getStyle()}
-                icon="null"
-              />
-            )}
-            {rows === 1 ? (
-              <View className={`${classPrefix}-content-block`} />
-            ) : (
-              <View className={`${classPrefix}-content-line`}>
-                {title && <View className={`${classPrefix}-content-title`} />}
-                {repeatLines(rows).map((item, index) => {
-                  return (
-                    <View
-                      className={`${classPrefix}-content-block ${index === repeatLines(rows).length - 1 ? `${classPrefix}-content-block-last-child` : ''}`}
-                      key={index}
-                    />
-                  )
-                })}
+          {repeatCount(rows).map((item, index) => {
+            const contentClass = `${classPrefix}-content ${classPrefix}-content-${size} ${classPrefix}-content-${size}-${index}`
+            return (
+              <View
+                className={`${contentClass}`}
+                key={index}
+                style={{ width, height, ...shapeStyle() }}
+              >
+                {animated && (
+                  <View
+                    className={`${classPrefix}-animated ${animate ? `${classPrefix}-animation` : ''}`}
+                    style={durationStyle()}
+                  />
+                )}
               </View>
-            )}
-          </View>
+            )
+          })}
         </View>
       )}
     </>
diff --git a/src/packages/skeleton/skeleton.tsx b/src/packages/skeleton/skeleton.tsx
index f239ebca2a..7e600a99bc 100644
--- a/src/packages/skeleton/skeleton.tsx
+++ b/src/packages/skeleton/skeleton.tsx
@@ -1,32 +1,37 @@
-import React, { FunctionComponent } from 'react'
+import React, {
+  CSSProperties,
+  FunctionComponent,
+  useEffect,
+  useState,
+} from 'react'
 import classNames from 'classnames'
-import Avatar from '@/packages/avatar'
 import { ComponentDefaults } from '@/utils/typings'
 import { WebSkeletonProps } from '@/types'
 
 const defaultProps = {
   ...ComponentDefaults,
   rows: 1,
-  animated: false,
-  title: false,
-  avatar: false,
-  avatarSize: '50px',
+  animated: true,
   visible: false,
-  avatarShape: 'round',
+  size: 'normal',
+  shape: 'round',
+  duration: 0.6,
+  inline: false,
 } as WebSkeletonProps
 export const Skeleton: FunctionComponent<Partial<WebSkeletonProps>> = (
   props
 ) => {
   const {
     className,
+    width,
+    height,
+    shape,
     animated,
     rows,
-    title,
-    avatar,
-    avatarSize,
     visible,
+    size,
+    duration,
     children,
-    avatarShape,
     ...rest
   } = {
     ...defaultProps,
@@ -35,61 +40,67 @@ export const Skeleton: FunctionComponent<Partial<WebSkeletonProps>> = (
 
   const classPrefix = 'nut-skeleton'
   const classes = classNames(classPrefix, className)
-  const avatarClass = classNames({
-    [`nut-avatar`]: true,
-    [`nut-skeleton-content-avatar`]: true,
-    [`avatar-${avatarShape}`]: avatarShape,
-  })
 
-  const repeatLines = (num: number) => {
+  const repeatCount = (num: number) => {
     return Array.from({ length: num }, (v, i) => i)
   }
 
-  const getStyle = () => {
-    if (avatarSize) {
+  function shapeStyle(): CSSProperties {
+    if (shape === 'circle') return { borderRadius: '50%' }
+    if (shape === 'square') return { borderRadius: '0' }
+    return {}
+  }
+
+  function durationStyle() {
+    if (typeof duration !== 'undefined')
       return {
-        width: avatarSize,
-        height: avatarSize,
+        animationDuration: `${duration}s`,
       }
-    }
-    return {
-      width: '50px',
-      height: '50px',
-    }
+    return {}
   }
 
+  const [animate, setAnimate] = useState(false)
+
+  const playAnimation = () => {
+    setAnimate(false) // 首先将 animate 设置为 false
+    setTimeout(() => {
+      setAnimate(true) // 1 毫秒后再设置为 true，触发动画
+    }, 10)
+  }
+
+  useEffect(() => {
+    if (!animated) return
+    playAnimation()
+    // 每隔 3 秒播放一次动画
+    const intervalId = setInterval(playAnimation, 1000 + duration * 1000) // xs 动画 + 1s 间隔
+
+    // 清理定时器
+    return () => clearInterval(intervalId)
+  }, [])
+
   return (
     <>
       {visible ? (
-        <>{children}</>
+        children
       ) : (
         <div className={classes} {...rest}>
-          {animated && <div className={`${classPrefix}-animation`} />}
-          <div className={`${classPrefix}-content`}>
-            {avatar && (
-              <Avatar
-                className={avatarClass}
-                shape={avatarShape}
-                style={getStyle()}
-                icon="null"
-              />
-            )}
-            {rows === 1 ? (
-              <div className={`${classPrefix}-content-block`} />
-            ) : (
-              <div className={`${classPrefix}-content-line`}>
-                {title && <div className={`${classPrefix}-content-title`} />}
-                {repeatLines(rows).map((item, index) => {
-                  return (
-                    <div
-                      className={`${classPrefix}-content-block`}
-                      key={index}
-                    />
-                  )
-                })}
+          {repeatCount(rows).map((item, index) => {
+            const contentClass = `${classPrefix}-content ${classPrefix}-content-${size} ${classPrefix}-content-${size}-${index}`
+            return (
+              <div
+                className={`${contentClass}`}
+                key={index}
+                style={{ width, height, ...shapeStyle() }}
+              >
+                {animated && (
+                  <div
+                    className={`${classPrefix}-animated ${animate ? `${classPrefix}-animation` : ''}`}
+                    style={durationStyle()}
+                  />
+                )}
               </div>
-            )}
-          </div>
+            )
+          })}
         </div>
       )}
     </>
diff --git a/src/sites/sites-react/doc/docs/react/migrate-from-v2.en-US.md b/src/sites/sites-react/doc/docs/react/migrate-from-v2.en-US.md
index 570aa4230b..5b524d3cb6 100644
--- a/src/sites/sites-react/doc/docs/react/migrate-from-v2.en-US.md
+++ b/src/sites/sites-react/doc/docs/react/migrate-from-v2.en-US.md
@@ -268,19 +268,28 @@ If your project uses these components, please read the documentation carefully a
 - Added a new color attribute for price types.
 
 [//]: # '#### Progress'
-[//]: # '#### Skeleton'
-[//]: # '#### Steps'
-[//]: # '#### Step'
-[//]: # '#### Swiper'
-[//]: # '#### Table'
-[//]: # '#### Tag'
-[//]: # '#### TrendArrow'
-[//]: # '#### Video'
-[//]: # '#### VirtualList'
-[//]: # '#### WaterMark'
-[//]: # '### 特色组件'
-[//]: # '#### Address'
-[//]: # '#### Barrage'
-[//]: # '#### Card'
-[//]: # '#### Signature'
-[//]: # '#### TimeSelect'
+
+#### Skeleton
+
+- Removed `avatar` attribute, can be simulated using `width` and `height` attributes
+- Removed `avatarShape` attribute, can be set using the `shape` attribute
+- Removed `avatarSize` attribute
+- Added `width` attribute to control width
+- Added `height` attribute to control height
+- Added `duration` attribute to control animation duration
+- Added `size` attribute to select from built-in component heights
+  [//]: # '#### Steps'
+  [//]: # '#### Step'
+  [//]: # '#### Swiper'
+  [//]: # '#### Table'
+  [//]: # '#### Tag'
+  [//]: # '#### TrendArrow'
+  [//]: # '#### Video'
+  [//]: # '#### VirtualList'
+  [//]: # '#### WaterMark'
+  [//]: # '### 特色组件'
+  [//]: # '#### Address'
+  [//]: # '#### Barrage'
+  [//]: # '#### Card'
+  [//]: # '#### Signature'
+  [//]: # '#### TimeSelect'
diff --git a/src/sites/sites-react/doc/docs/react/migrate-from-v2.md b/src/sites/sites-react/doc/docs/react/migrate-from-v2.md
index a9cdf02f2f..49db0e6bef 100644
--- a/src/sites/sites-react/doc/docs/react/migrate-from-v2.md
+++ b/src/sites/sites-react/doc/docs/react/migrate-from-v2.md
@@ -270,19 +270,28 @@ plugins: [
 - 新增 `color`, 价格类型
 
 [//]: # '#### Progress'
-[//]: # '#### Skeleton'
-[//]: # '#### Steps'
-[//]: # '#### Step'
-[//]: # '#### Swiper'
-[//]: # '#### Table'
-[//]: # '#### Tag'
-[//]: # '#### TrendArrow'
-[//]: # '#### Video'
-[//]: # '#### VirtualList'
-[//]: # '#### WaterMark'
-[//]: # '### 特色组件'
-[//]: # '#### Address'
-[//]: # '#### Barrage'
-[//]: # '#### Card'
-[//]: # '#### Signature'
-[//]: # '#### TimeSelect'
+
+#### Skeleton
+
+- 移除 `avatar` 属性，可通过 `width` 和 `height` 属性模拟
+- 移除 `avatarShape` 属性，可通过 `shape` 属性设置
+- 移除 `avatarSize` 属性
+- 新增 `width` 属性，控制宽度
+- 新增 `height` 属性，控制高度
+- 新增 `duration` 属性，控制动画时长
+- 新增 `size` 属性，通过 `size` 属性可选择使用组件内置的高度
+  [//]: # '#### Steps'
+  [//]: # '#### Step'
+  [//]: # '#### Swiper'
+  [//]: # '#### Table'
+  [//]: # '#### Tag'
+  [//]: # '#### TrendArrow'
+  [//]: # '#### Video'
+  [//]: # '#### VirtualList'
+  [//]: # '#### WaterMark'
+  [//]: # '### 特色组件'
+  [//]: # '#### Address'
+  [//]: # '#### Barrage'
+  [//]: # '#### Card'
+  [//]: # '#### Signature'
+  [//]: # '#### TimeSelect'
diff --git a/src/sites/sites-react/doc/docs/taro/migrate-from-v2.en-US.md b/src/sites/sites-react/doc/docs/taro/migrate-from-v2.en-US.md
index 570aa4230b..5b524d3cb6 100644
--- a/src/sites/sites-react/doc/docs/taro/migrate-from-v2.en-US.md
+++ b/src/sites/sites-react/doc/docs/taro/migrate-from-v2.en-US.md
@@ -268,19 +268,28 @@ If your project uses these components, please read the documentation carefully a
 - Added a new color attribute for price types.
 
 [//]: # '#### Progress'
-[//]: # '#### Skeleton'
-[//]: # '#### Steps'
-[//]: # '#### Step'
-[//]: # '#### Swiper'
-[//]: # '#### Table'
-[//]: # '#### Tag'
-[//]: # '#### TrendArrow'
-[//]: # '#### Video'
-[//]: # '#### VirtualList'
-[//]: # '#### WaterMark'
-[//]: # '### 特色组件'
-[//]: # '#### Address'
-[//]: # '#### Barrage'
-[//]: # '#### Card'
-[//]: # '#### Signature'
-[//]: # '#### TimeSelect'
+
+#### Skeleton
+
+- Removed `avatar` attribute, can be simulated using `width` and `height` attributes
+- Removed `avatarShape` attribute, can be set using the `shape` attribute
+- Removed `avatarSize` attribute
+- Added `width` attribute to control width
+- Added `height` attribute to control height
+- Added `duration` attribute to control animation duration
+- Added `size` attribute to select from built-in component heights
+  [//]: # '#### Steps'
+  [//]: # '#### Step'
+  [//]: # '#### Swiper'
+  [//]: # '#### Table'
+  [//]: # '#### Tag'
+  [//]: # '#### TrendArrow'
+  [//]: # '#### Video'
+  [//]: # '#### VirtualList'
+  [//]: # '#### WaterMark'
+  [//]: # '### 特色组件'
+  [//]: # '#### Address'
+  [//]: # '#### Barrage'
+  [//]: # '#### Card'
+  [//]: # '#### Signature'
+  [//]: # '#### TimeSelect'
diff --git a/src/sites/sites-react/doc/docs/taro/migrate-from-v2.md b/src/sites/sites-react/doc/docs/taro/migrate-from-v2.md
index 4d673d5814..22d0fed005 100644
--- a/src/sites/sites-react/doc/docs/taro/migrate-from-v2.md
+++ b/src/sites/sites-react/doc/docs/taro/migrate-from-v2.md
@@ -273,19 +273,28 @@ plugins: [
 - 新增 `color`, 价格类型
 
 [//]: # '#### Progress'
-[//]: # '#### Skeleton'
-[//]: # '#### Steps'
-[//]: # '#### Step'
-[//]: # '#### Swiper'
-[//]: # '#### Table'
-[//]: # '#### Tag'
-[//]: # '#### TrendArrow'
-[//]: # '#### Video'
-[//]: # '#### VirtualList'
-[//]: # '#### WaterMark'
-[//]: # '### 特色组件'
-[//]: # '#### Address'
-[//]: # '#### Barrage'
-[//]: # '#### Card'
-[//]: # '#### Signature'
-[//]: # '#### TimeSelect'
+
+# '#### Skeleton'
+
+- 移除 `avatar` 属性，可通过 `width` 和 `height` 属性模拟
+- 移除 `avatarShape` 属性，可通过 `shape` 属性设置
+- 移除 `avatarSize` 属性
+- 新增 `width` 属性，控制宽度
+- 新增 `height` 属性，控制高度
+- 新增 `duration` 属性，控制动画时长
+- 新增 `size` 属性，通过 `size` 属性可选择使用组件内置的高度
+  [//]: # '#### Steps'
+  [//]: # '#### Step'
+  [//]: # '#### Swiper'
+  [//]: # '#### Table'
+  [//]: # '#### Tag'
+  [//]: # '#### TrendArrow'
+  [//]: # '#### Video'
+  [//]: # '#### VirtualList'
+  [//]: # '#### WaterMark'
+  [//]: # '### 特色组件'
+  [//]: # '#### Address'
+  [//]: # '#### Barrage'
+  [//]: # '#### Card'
+  [//]: # '#### Signature'
+  [//]: # '#### TimeSelect'
diff --git a/src/styles/variables-jmapp.scss b/src/styles/variables-jmapp.scss
index 1a2c5ac9fb..12b4a8dfc0 100644
--- a/src/styles/variables-jmapp.scss
+++ b/src/styles/variables-jmapp.scss
@@ -2086,7 +2086,18 @@ $skeleton-background: var(
   $color-background
 ) !default;
 $skeleton-line-width: var(--nutui-skeleton-line-width, 100%) !default;
-$skeleton-line-height: var(--nutui-skeleton-line-height, 15px) !default;
+$skeleton-line-small-height: var(
+  --nutui-skeleton-line-small-height,
+  16px
+) !default;
+$skeleton-line-normal-height: var(
+  --nutui-skeleton-line-normal-height,
+  24px
+) !default;
+$skeleton-line-large-height: var(
+  --nutui-skeleton-line-large-height,
+  32px
+) !default;
 $skeleton-line-border-radius: var(
   --nutui-skeleton-line-border-radius,
   0
diff --git a/src/styles/variables-jrkf.scss b/src/styles/variables-jrkf.scss
index 41eb24a9b1..14be5ee0ef 100644
--- a/src/styles/variables-jrkf.scss
+++ b/src/styles/variables-jrkf.scss
@@ -2116,7 +2116,18 @@ $skeleton-background: var(
   $color-background
 ) !default;
 $skeleton-line-width: var(--nutui-skeleton-line-width, 100%) !default;
-$skeleton-line-height: var(--nutui-skeleton-line-height, 15px) !default;
+$skeleton-line-small-height: var(
+  --nutui-skeleton-line-small-height,
+  16px
+) !default;
+$skeleton-line-normal-height: var(
+  --nutui-skeleton-line-normal-height,
+  24px
+) !default;
+$skeleton-line-large-height: var(
+  --nutui-skeleton-line-large-height,
+  32px
+) !default;
 $skeleton-line-border-radius: var(
   --nutui-skeleton-line-border-radius,
   0
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 5f3b964fca..fdd13d5e1b 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -2132,13 +2132,24 @@ $form-item-tip-text-align: var(--nutui-form-item-tip-text-align, left) !default;
 // skeleton（✅）
 $skeleton-background: var(
   --nutui-skeleton-background,
-  $color-background
+  $color-background-sunken
 ) !default;
 $skeleton-line-width: var(--nutui-skeleton-line-width, 100%) !default;
-$skeleton-line-height: var(--nutui-skeleton-line-height, 15px) !default;
+$skeleton-line-small-height: var(
+  --nutui-skeleton-line-small-height,
+  16px
+) !default;
+$skeleton-line-normal-height: var(
+  --nutui-skeleton-line-normal-height,
+  24px
+) !default;
+$skeleton-line-large-height: var(
+  --nutui-skeleton-line-large-height,
+  32px
+) !default;
 $skeleton-line-border-radius: var(
   --nutui-skeleton-line-border-radius,
-  0
+  $radius-xs
 ) !default;
 
 // card（✅）
diff --git a/src/types/spec/skeleton/base.ts b/src/types/spec/skeleton/base.ts
index e18df472f7..5df3db68fe 100644
--- a/src/types/spec/skeleton/base.ts
+++ b/src/types/spec/skeleton/base.ts
@@ -1,12 +1,14 @@
 import { BaseProps } from '../../base/props'
+import { SimpleValue, UIRound, UISize } from '../../base/atoms'
 
 export type avatarShape = 'round' | 'square'
 export interface BaseSkeleton extends BaseProps {
-  animated: boolean
   rows: number
-  title: boolean
-  avatar: boolean
-  avatarSize: string
+  size: Extract<UISize, 'small' | 'normal' | 'large'>
+  width?: SimpleValue
+  height?: SimpleValue
+  shape: UIRound | 'circle'
+  animated: boolean
+  duration: number
   visible: boolean
-  avatarShape: avatarShape
 }