feat(Skeleton): Add Skeleton component

[MaxLee-dev]

Description of Changes

Add a new Skeleton component that provides visual placeholder feedback while content is loading.

Animation System

The Skeleton component supports three animation variants:

1. Shimmer (Default)

A light sweep effect that moves from left to right, creating a "shine" appearance:

• Uses linear-gradient with three color stops (gray-100 → gray-050 → gray-100)
• Fixed highlight width of 6.25rem that travels across the element
• background-position animates from left -6.25rem to right -6.25rem
• Duration: 1s with ease timing function
• Creates a subtle, professional loading indicator commonly seen in modern UIs

2. Pulse

A fading effect where the entire element blinks:

• Opacity transitions from 1 → 0.5 → 1
• Duration: 1.2s with ease-in-out timing function
• Simpler animation with lower rendering cost
• Suitable for simpler loading states

3. None

Disables all animations for static placeholder display.

Accessibility

• Respects prefers-reduced-motion: reduce media query by automatically disabling animations
• No role or aria-* attributes added (pure visual placeholder, avoids screen reader noise)

Variants

Variant	Options	Default
shape	rounded, square	rounded
size	sm, md, lg, xl	md
animation	shimmer, pulse, none	shimmer

Checklist

• The PR title follows the Conventional Commits convention.
• I have added tests for my changes.
• I have updated the Storybook or relevant documentation.
• I have added a changeset for this change.
• I have performed a self-code review.
• I have followed the project's coding conventions and component patterns.

[changeset-bot]

🦋 Changeset detected

Latest commit: 165926e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@vapor-ui/icons	Patch
@vapor-ui/core	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
vapor-ui	Ready	Preview, Comment	Feb 13, 2026 3:19am

[gemini-code-assist]

Summary of Changes

Hello @MaxLee-dev, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request introduces a new Skeleton component, designed to improve user experience by displaying visual placeholders during content loading. It offers flexible animation options and styling variants, ensuring a smooth and accessible loading indicator that adapts to user preferences and design requirements.

Highlights

• New Skeleton Component: A new Skeleton component has been added to provide visual placeholder feedback while content is loading.
• Animation System: The component supports three animation variants: shimmer (default, a light sweep effect), pulse (a fading effect), and none (disables animations for static display).
• Accessibility: Accessibility is handled by respecting prefers-reduced-motion: reduce to automatically disable animations and by not adding unnecessary role or aria-* attributes.
• Configurable Variants: The Skeleton component is highly configurable with shape (rounded, square), size (sm, md, lg, xl), and animation properties.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Changelog

• apps/website/content/docs/components/skeleton.mdx
  • Added comprehensive documentation for the new Skeleton component, including its properties and various usage examples.
• apps/website/public/components/generated/skeleton.json
  • Added generated JSON metadata for the Skeleton component, detailing its properties, types, descriptions, and default values.
• apps/website/src/components/demo/examples/skeleton/default-skeleton.tsx
  • Created a default usage example for the Skeleton component.
• apps/website/src/components/demo/examples/skeleton/skeleton-animation.tsx
  • Added an example demonstrating the different animation styles available for the Skeleton component.
• apps/website/src/components/demo/examples/skeleton/skeleton-composition.tsx
  • Implemented an example showcasing how to compose multiple Skeleton elements to create a profile card placeholder.
• apps/website/src/components/demo/examples/skeleton/skeleton-shape.tsx
  • Provided an example illustrating the various shape options for the Skeleton component.
• apps/website/src/components/demo/examples/skeleton/skeleton-size.tsx
  • Constructed an example displaying the different size configurations for the Skeleton component.
• packages/core/src/components/skeleton/index.ts
  • Exported the Skeleton component from its directory for easier module access.
• packages/core/src/components/skeleton/skeleton.css.ts
  • Defined the base styles, animation keyframes (shimmer, pulse), and recipe variants for the Skeleton component using Vanilla Extract.
• packages/core/src/components/skeleton/skeleton.stories.tsx
  • Added Storybook stories to demonstrate the Skeleton component's features, including shape, size, animation, and composition examples.
• packages/core/src/components/skeleton/skeleton.test.tsx
  • Implemented a basic accessibility test for the Skeleton component using vitest-axe to ensure no a11y violations.
• packages/core/src/components/skeleton/skeleton.tsx
  • Created the core React functional component for Skeleton, handling prop resolution, variant application, and rendering.
• packages/core/src/index.ts
  • Updated the main packages/core export file to include the new Skeleton component.

Activity

• No human activity has been recorded for this pull request yet.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

새로운 Skeleton 컴포넌트 추가에 대한 PR입니다. 전반적으로 잘 작성되었지만, 프로젝트 스타일 가이드와 관련하여 두 가지 개선점을 제안합니다. 첫째, 컴포넌트의 엔트리포인트(index.ts) 파일이 스타일 가이드의 네임스페이스 export 규칙을 따르도록 수정해야 합니다. 둘째, skeleton.tsx 파일에서 Props 타입을 namespace 대신 직접 interface로 export하여 가독성과 일관성을 높이는 것을 제안합니다.

[vapor-ui]

✅ All tests passed!

Tests	Passed	Failed	Duration	Report
148	148	0	2m 16s	Open report ↗︎

Click here if you need to update snapshots.