-
-
Notifications
You must be signed in to change notification settings - Fork 332
🛣️ The Skeleton Roadmap
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
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.
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 - Tailwind Config - review options to reduce onboarding steps (issue)
- Accessibility (a11y) for visual disabilities and color contrast - via 151
- Support for Tailwind alternatives (windi | unocss) - via 152
- Design a new and unique brand logo for the Skeleton project
- README - add banner graphic, improve and extend info
- Improved state management (reference)
- I18n/RTL Support - far reaching and best aimed for post-v1.0
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 - Detail Hero - name, import snippet, Github links for comp/docs (see page top)
- Table of Contents - easier to navigate individual doc pages (see page right)
- Site Search - via Angolia or any free/cheap alternative
-
- 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)
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 Previews - allow users to preview themes immediately (example)
- More Curated Presets - add more presets; generated with theme generator
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 tovia 121/lib/icons.ts
-
Alerts - a minor design update to match Skeleton homepage alert- via 141 -
Vitest Config - review options to improve the Vitest config- via 144 | 146 - Improved automated test coverage and testing "depth" - via 150
- Conic Gradient - nearly complete, just needs to support color prop values - via 203
- Dialogs - visually display queue dialogs - via 197
- Toasts - visually display queued toasts - via 198
- Code Block - implement the “copy button” component - via 204
- Animations - improve animations and transitions for all relevant components - via 194
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
- Swapper (example) - toggles between two
<slot>
contents - via 202 - Skeleton/Placeholder (example) - text load state placeholders - via 205
- Timer (example) - visualize amount/time remaining - via 206
- Chips (Example - have various configurations for selection and toggle
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
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.
- Color Picker (example) - color mixer; import/export hex, rgba, hsl, etc.
- Autocomplete (example) - provide typeahead suggestions for inputs, etc.
- Transitions (css, js) - canned library of Svelte transitions
- Date/Time Picker (example) - capture date/times or ranges
- Video Player - wrap HTML5 player, extends features, themed UI
NOTE: likely Post-v1.0
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.
- Syntax Highlighting - Highlight.js (used for CodeBlocks!)
- Date/Time - Date-Fns, Day.js
- Forms - Felte + Yup
- Data Viz - Chart.js, D3, Pixi.js
- Icons - FontAwesome
- WYSIWYG - Quill.js