Requirements

If you wish to contribute to Skeleton, please ensure you've read and understand our requirements below.

Contribution Workflow

  1. Select an issue or roadmap task you wish to contribute to.
  2. Leave a comment, join the roadmap discussion, or give us a heads up on Discord.
  3. Review with core contributors to define the requirements before you write your first line of code.
  4. Follow our branch naming conventions described below.
  5. Don't be afraid to submit a draft pull request early on to ensure your meeting our guidelines.
  6. Make sure you run our automated tests to confirm no regressions were introduced from your changes.
  7. When ready, submit or set your pull request to the ready state. This will begin the code review process.
  8. If your PR meets all requirements it will be merged, otherwise feedback will be provided.

Branches

Branch Description PRs Allowed
masterRepresents the production branch. Pull requests sent to this branch will be rejected.No
devThe active development branch containing bleeding edge changes. Target this branch for PRsYes

Feature Branch Conventions

Prefix Description
docs/*Updates to the documentation pages or text copy.
feat/*New features, components, or far-reaching updates.
chore/*Simple and localized updates.
bugfix/*Commits that address or fix issues.

The wildcards (*) should be replaced with short and semantic descriptions that are lowercase and seperated by dashes.

feat/my-new-component-name

File Name Conventions

  • Feature directories should be singular and title case: ../LightSwitch/..
  • Components should be singular and title case: LightSwitch.svelte
  • Svelte Actions should singular, lowercase, and use Typescript: clipboard.ts
  • Tailwind Element stylesheets are plural and lowercase: buttons.css
  • Documentation should be lowercase and use dashes: /routes/components/radio-groups/+page.svelte
  • Tests should be suffixed with *.test.ts and match the feature naming convention: LightSwitch.test.ts

Third Party Dependencies

Adding additional project depedencies is not allowed without prior discussion. Please contact a core contributor before adding or modifying depedencies.

Code Linting & Formatting

This is is handled via Prettier. To check for linting issues, run:

console 
npm run lint

To automatically apply formatting, run:

console 
npm run format

Automated Tests

Tests are handled via Vitest, which uses similar conventions and syntax to Jest. Please ensure you write or update tests before submitting a pull request.

console 
npm run test

Project Structure

Path Description
/src/docsHouses Skeleton-specific documentation site components, such as the theme generator.
/src/libHouses only features and assets distributed with the NPM package.
/src/routesHouse documentation pages for the public-facing documentation website, such as this page.

A boilerplate template for new documentation pages can be found in /src/routes/(inner)/template/+page.svelte.

Path Description
/src/docs/DocsAppBarThe AppBar found at the top of the page.
/src/docs/DocFooterThe footer found at the bottom of each page.
/src/docs/DocsNavigation/DocsDrawer.svelteThe left navigation drawer visible on small screens.
/src/docs/DocsNavigation/DocsSidebar.svelteThe left sidebar component for large screens.
/src/docs/DocsNavigation/links.tsUsed to configure all sidebar navigation links.
/src/docs/DocsThemerThe theme generator found on the Getting Starts > Themes section.