Skip to content

feat: Add Skeleton recipe with pulse animation and supporting utilities#175

Merged
alexgrozav merged 4 commits intomainfrom
alexgrozav/add-skeleton-recipe
Apr 8, 2026
Merged

feat: Add Skeleton recipe with pulse animation and supporting utilities#175
alexgrozav merged 4 commits intomainfrom
alexgrozav/add-skeleton-recipe

Conversation

@alexgrozav
Copy link
Copy Markdown
Contributor

Summary

  • Adds a new useSkeletonRecipe with pulse animation, size variants (xs–xl), and rounded variant
  • Adds granular animation utilities: animationName, animationDuration, animationTimingFunction, animationIterationCount
  • Switches width/height utilities to createUseSpacingUtility for @N multiplier support
  • Adds compound keyframe selector support in the core engine (e.g. "0%, 100%")
  • Includes Storybook stories, Vue preview components, and full documentation

Test plan

  • Unit tests for skeleton recipe, animation utilities, width/height utilities, and compound keyframe selectors
  • Verify Storybook skeleton stories render correctly with pulse animation
  • Verify documentation page renders properly

Add a Skeleton loading placeholder recipe with size (xs-xl) and rounded
variants, plus a built-in skeleton-pulse keyframes animation. Includes
animation longhand utilities, spacing support for height/width utilities,
a fix for compound keyframe selectors, and documentation.
@vercel
Copy link
Copy Markdown

vercel bot commented Apr 8, 2026

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

Project Deployment Actions Updated (UTC)
app-styleframe-dev-production Ready Ready Preview, Comment Apr 8, 2026 10:04am
styleframe-dev-production Ready Ready Preview, Comment Apr 8, 2026 10:04am
styleframe-storybook Ready Ready Preview, Comment Apr 8, 2026 10:04am

Request Review

@changeset-bot
Copy link
Copy Markdown

changeset-bot bot commented Apr 8, 2026

🦋 Changeset detected

Latest commit: d713d42

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

This PR includes changesets to release 3 packages
Name Type
@styleframe/theme Minor
styleframe Minor
@styleframe/core Patch

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

@codecov
Copy link
Copy Markdown

codecov bot commented Apr 8, 2026

Codecov Report

❌ Patch coverage is 63.07692% with 48 lines in your changes missing coverage. Please review.

Files with missing lines Patch % Lines
theme/src/presets/useUtilitiesPreset.ts 0.00% 46 Missing ⚠️
theme/src/recipes/index.ts 0.00% 1 Missing ⚠️
theme/src/recipes/skeleton/index.ts 0.00% 0 Missing and 1 partial ⚠️

📢 Thoughts on this report? Let us know!

@alexgrozav alexgrozav merged commit b506ea5 into main Apr 8, 2026
12 checks passed
@alexgrozav alexgrozav deleted the alexgrozav/add-skeleton-recipe branch April 8, 2026 10:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant