Skeleton Next - Update 1 - Design & Code

[endigo9740]

Hey everyone, Chris here from Skeleton. First off thanks to everyone that's submitted feedback as part of our recent Skeleton Next RFC. We've fielded a number of awesome questions both here and on Discord these past couple weeks.

As we continue forward, I would like to periodically offer updates towards Next (aka Skeleton v3). This may not come at a regular cadence, however, we aim to share new posts as we reach certain thresholds or just generally have more to cover. The goal will be to provide a written post, like this, alongside a short video where I provide a tour of the most recent updates.

Watch on Youtube

Design Aesthetics

Code Style Guidelines

Design Aesthetics

For Next, one of our primary goals is to establish a new look and feel for Skeleton. Keep in mind though, Skeleton has always aimed to be a "chameleon", which means it should blend into whatever visual aesthetic your project requires. As such, we expect to implement major updates to both Skeleton's Tailwind Plugin and Theme System. These updates will include background styles, full typographical settings, grid/margin/padding/spacing options, and more. We'll also see a shift to a more utility-based approach to layer, mix and match various configurations, while still providing a great experience out of the box and through our curated themes.

One of the primary goals is to raise the bar when it comes to visual fidelity. In v1 and v2 we kept things purposefully minimalistic. While this provided a "clean slate", in retrospect we've noticed most folks tend to remain close to the defaults. This can lead to a sub-par experience compared to some alternative UI libraries. We don't want this to be too opinionated, but we do want to add a bit more flavor. With that in mind, we've provided a few images that help introduce these concepts.

Warning

These concepts DO NOT represent our final design aesthetic or any particular theme. Rather, these serve as an initial taste for the direction we're heading. Expect more updates and revisions over the coming months.

Tip

Tap each image to view them in full screen mode.

In order to move quickly, we've borrowed the structure of several card layouts from the amazing Shadcn UI library. This serves as a neutral baseline and template to build off of. However, we provided some level of evolution and spin when it comes to colors and styles. This, in turn, provides a bit more character and life. You'll also note that many elements are intentionally smaller in scale than their v2 counterparts, which allows for a much more compact and expressive interface by default.

Going a bit further, we've shown off the concept of mixing different card background and outline styles, as well as a change in palette. Even with uniform layouts, fonts, and spacing, you can immediately start to see how the design provides a different feel.

Here we drop the card outlines altogether and opt for more rounded elements. Again, subtle changes can have a dramatic impact on the overall look and feel.

You may be wondering how far we intend to take these customizations though, and as such we wanted to share this wonderful tool called Shaper. While not exactly what we're building towards, it does a great job of what is possible. Imagine some of these features coming to the next version of the Skeleton Theme Generator.

https://hihayk.github.io/shaper/

This barely scratches the surface for the amount of customization planned for Skeleton v3. Even in these early drafts, our hope is that you start to see the potential. This is where we feel the new design systems for Skeleton will thrive. Allowing you to quickly iterate and make the design and branding your own.

Code Style Guidelines

• View the code style guidelines prposal
• View the updated Skeleton Next prototype

Alongside today's creative updates, we wanted to share the proposed changes coming to component APIs and structure. One of the most common questions regarding Skeleton Next is how we plan to keep parity between features shared between Svelte 5 and other UI frameworks such as React. The team and I have been working through many iterations of how this may work, and we wanted to share a few details about how this might operate.

• We continue to lean more and more into the power Tailwind provides. This will primarily focus around providing more of Skeleton's unique features like Design Tokens and Theme System into our updated Tailwind Plugin. This will make class syntax more familiar, provide more options, and more easily allow you to override and build on what Skeleton provides.
• We now expose the base Tailwind style classes via a unique prop per element within each template. This gives you the ability to completely adjust component style from the ground up, providing a near headless experience, while still enabling amazing defaults out of the box for folks that are perhaps a bit less design savvy.
• New standards and paradigms have been implemented to reduce the boilerplate needed when authoring components. This helps keep the code clean and simple to maintain, while also avoiding situations where we might run into conflicting prop names. To handle this, parent and child element props are differentiated via the use of semantic prefixes. This prefix describes the element the prop affects, such as "imgPadding" for image padding.
• Similar to the new base styles, we now include a standardized way to extend utility classes for each and every element within the component template, which is great for appending or overwriting any base classes. Much like the class attribute in Skeleton v2, but available to every child.
• By mixing the power of Svelte 5 Snippets and utilizing a composed component pattern in React, we enable you to import and scaffold components in a very quick and easy manner. Structurally most components should feel identical, even when jumping between frameworks.
• And best of all, all of these changes retain full parity between frameworks!

Contributing Feedback

As with our RFC post and proposal, we want to make it clear that everything shown here today is a sneak peek into our design and development process. Our aim is to build the next version of Skeleton in the open, allowing for your feedback along the way. If you have any questions or comments, please reach out and let us know!

A Call for Contributors

Additionally, while the Skeleton team is full of talented individuals, our knowledge does have limits. As such, we're looking for volunteers to help with our official Figma design assets as well as React experts to ensure we're following best practices. If you're interested in volunteering, please reach out in the comments below or contact me (@endigo9740) on Discord!

Thanks everyone!

[Greenheart]

This seems promising - keep it up! Thanks for all the work so far - I'm really enjoying Skeleton so far! 😄

[endigo9740]

Thank you for the kind words!

[lmanzanero]

Excited for it. Can't wait to the updates! Thank you!

[endigo9740]

Big same! :)

[taylorgibb]

Very cool. Loving Skeleton, cant wait for the updates.