Skip to content

🛣️ The Skeleton Roadmap

Jump to bottom
Chris Simmons edited this page Nov 4, 2022 · 16 revisions

NOTE: since most tasks here are now complete, please check the updated roadmap provided in this discussion thread: https://github.com/Brain-Bones/skeleton/discussions/503

The following document provides a roadmap for improving and extending Skeleton going forward. Please be aware that nothing shown here is guaranteed. At any point items may be: added, edited, or even dropped entirely.

The goal is to foster discussion with the community, allow us to gather feedback, and help guide priority. We hope to use this to created milestones similar to SvelteKit:

  • v1.0
  • Post-v1.0
  • Future/Whenever

Let Your Voice Be Heard!

🔗 Join the Discussion!

Join the discussion linked above if any of the following apply to you:

  • If you are interested in seeing a proposed feature added.
  • If there is major feature or improvement absent from this document.
  • You would like to volunteer and contribute to any proposed task.

General

These are miscellaneous improvements to the Skeleton project as a whole.

  • Accessibility (a11y) - focus/keyboard/ARIA - via 41
  • Decouple From SvelteKit - via 68
  • Major SvelteKit Update - via 96
  • Investigate support for Skeleton + Daisy UI - See Docs > Comparison
  • Invesgitate support for Skeleton + Flowbite - See Docs > Comparison
  • README - add banner graphic, improve and extend info
  • Support for Tailwind alternatives (windi | unocss) - via 152
  • Design a new and unique brand logo for the Skeleton project
  • Accessibility (a11y) for visual disabilities and color contrast - via 151
  • I18n/RTL Support - far reaching and best aimed for post-v1.0

Documentation

Improvements targeting the documentation website:

  • SEO - improve natural search traffic (meta head elements, etc) - via #99
  • Compare to X - detail how Skeleton compares to other UI libraries (example) via #143
  • Improve component docs that support $$restProps
  • Docs site design refresh:
    • Improve navigation, layout, and UX - via 158
    • Doc improvements import snippet, Github links for comp/docs - via #302
    • Table of Contents - easier to navigate individual doc pages - via 357
    • Site Search - via Angolia
  • Tutorials / Videos - these age quickly so best when things are stable; post-v1.0
  • Blog - allows for long-form content (headless: Dev.to, Ghost, etc)

Themes

Improvements and extensions to themes.

  • Provide via Package - allow for direct import from NPM package (add to /lib) - via 136
  • Modular Stylesheets - separate/shareable Tailwind stylesheets for Typography, Forms, etc. - via 136
  • Theme Picker + Previews - allow users to preview preset themes immediately - via 282
  • Theme Generator Overhaul - overhaul and combine into a single component via 278
  • More Curated Presets - add more presets; generated with theme generator

Improvements

Improvements to existing components and utilities.

  • Hover Styles - default to hover brightness 110% (brighter) instead of 90% (darker) - via 124
  • SVG Icons - abstract all SVG icons to /lib/icons.ts via 121
  • Alerts - a minor design update to match Skeleton homepage alert - via 141
  • Vitest Config - review options to improve the Vitest config - via 144 | 146
  • Conic Gradient - nearly complete, just needs to support color prop values - via 203
  • Code Block - implement the “copy button” component - via 204
  • Dialogs - visually display queue dialogs - via 197
  • Toasts - visually display queued toasts - via 198
  • Animations - improve animations and transitions for all relevant components - via 374
  • Improved automated test coverage and testing "depth" - via 150

Components

Implement additional components to the library.

  • App Bar (example) - top bar for page header - via 168
  • App Shells (example) - supports multiple responsive layouts - via 158
  • Keys (example) - visual reference for keyboard shortcuts - via 200
  • Skeleton/Placeholder (example) - text load state placeholders - via 205
  • Swapper (example) - toggles between two <slot> contents - via 202
  • Timer (example) - visualize amount/time remaining - via 206
  • Chips (Example) - have various configurations for selection and toggle

Actions

Make use of Svelte Actions (aka directives) for these features.

  • Copy to Clipboard (example) - copies any provided data/text to clipboard - via 199
  • File Button + Dropzone (example) - open file picker button plus drag/drop area - via 201
  • Improve Tooltips - using actions with or in place of the component - via 195
  • Improve Menus - using actions with or in place of the component - via 196

Utilities

Implement additional utility features to the library. Utilities are features that may go beyond the scope of components.

NOTE: may separate each of these to dedicated NPM packages (ala Mantine).

Contributors: please review with core maintainers before proceeding.

  • Autocomplete (example) - provide typeahead suggestions for inputs, etc. - via 377
  • Color Picker (example) - color mixer; import/export hex, rgba, hsl, etc. - 376
  • Transitions (css, js) - canned library of Svelte transitions - via 374
  • Date/Time Picker (example) - capture date/times or ranges
  • Video Player - wrap HTML5 player, extends features, themed UI

Third-Party Tooling

DONE: see Docs > Recommended section in docs

Skeleton will never cover all requires for building a modern web app, however we can provide an opinionated list of tooling that pair well with the library. Perhaps with bonus features such as Tailwind styles, JS snippets, recommended configs, etc.

Clone this wiki locally