diff --git a/docs/stories/tokens/colors/usage.m.scss b/docs/stories/tokens/colors/usage.m.scss
index 4c7a4fe7..7159a4a3 100644
--- a/docs/stories/tokens/colors/usage.m.scss
+++ b/docs/stories/tokens/colors/usage.m.scss
@@ -1,4 +1,4 @@
-@use '@sima-land/ui-nucleons/colors';
+@use 'pkg:@sima-land/ui-nucleons/colors';
 
 .section + .section {
   margin-top: 32px;
diff --git a/src/skeleton/__test__/index.test.tsx b/src/skeleton/__test__/index.test.tsx
new file mode 100644
index 00000000..8d7527ad
--- /dev/null
+++ b/src/skeleton/__test__/index.test.tsx
@@ -0,0 +1,63 @@
+import { fireEvent, render } from '@testing-library/react';
+import { Skeleton } from '../skeleton';
+import { createRef } from 'react';
+
+describe('Skeleton', () => {
+  it('should handle div props', () => {
+    const spy = jest.fn();
+
+    const { container } = render(
+      <Skeleton id='primary' className='styled' onClick={spy}>
+        Hello, world!
+      </Skeleton>,
+    );
+
+    expect(container.querySelectorAll('#primary.styled')).toHaveLength(1);
+    expect(container.querySelector('#primary.styled')?.textContent).toBe('Hello, world!');
+
+    expect(spy).toHaveBeenCalledTimes(0);
+    fireEvent.click(container.querySelector('#primary.styled')!);
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+
+  it('should handle "rootRef"', () => {
+    const ref = createRef<HTMLDivElement>();
+
+    render(<Skeleton rootRef={ref}>Hello, world!</Skeleton>);
+
+    expect(ref.current instanceof HTMLElement).toBe(true);
+  });
+
+  it('should handle "theme" prop', () => {
+    const { container, rerender } = render(<Skeleton theme={undefined} />);
+
+    expect(container.querySelectorAll('.theme-light')).toHaveLength(1);
+    expect(container.querySelectorAll('.theme-dark')).toHaveLength(0);
+
+    rerender(<Skeleton theme='light' />);
+
+    expect(container.querySelectorAll('.theme-light')).toHaveLength(1);
+    expect(container.querySelectorAll('.theme-dark')).toHaveLength(0);
+
+    rerender(<Skeleton theme='dark' />);
+
+    expect(container.querySelectorAll('.theme-light')).toHaveLength(0);
+    expect(container.querySelectorAll('.theme-dark')).toHaveLength(1);
+
+    rerender(<Skeleton theme='unset' />);
+
+    expect(container.querySelectorAll('.theme-light')).toHaveLength(0);
+    expect(container.querySelectorAll('.theme-dark')).toHaveLength(0);
+  });
+
+  it('should handle "shining" prop', () => {
+    const { container, rerender } = render(<Skeleton shining={undefined} />);
+    expect(container.querySelectorAll('.shining')).toHaveLength(1);
+
+    rerender(<Skeleton shining />);
+    expect(container.querySelectorAll('.shining')).toHaveLength(1);
+
+    rerender(<Skeleton shining={false} />);
+    expect(container.querySelectorAll('.shining')).toHaveLength(0);
+  });
+});
diff --git a/src/skeleton/index.ts b/src/skeleton/index.ts
index 9147f13a..4839717c 100644
--- a/src/skeleton/index.ts
+++ b/src/skeleton/index.ts
@@ -1 +1,2 @@
+export type { SkeletonStyle, SkeletonProps } from './types';
 export { Skeleton } from './skeleton';
diff --git a/src/skeleton/types.ts b/src/skeleton/types.ts
index ab45386a..482a45f9 100644
--- a/src/skeleton/types.ts
+++ b/src/skeleton/types.ts
@@ -1,4 +1,5 @@
 import type { CSSProperties, HTMLAttributes, Ref } from 'react';
+import type { WithTestId } from '../types';
 
 export interface SkeletonStyle extends CSSProperties {
   '--skeleton-width'?: string;
@@ -6,7 +7,7 @@ export interface SkeletonStyle extends CSSProperties {
   '--skeleton-shine-size'?: string;
 }
 
-export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+export interface SkeletonProps extends HTMLAttributes<HTMLDivElement>, WithTestId {
   /** Нужно ли включить анимацию блеска. */
   shining?: boolean;