1. Contributions
  2. ›
  3. Requirements

Requirements

If you wish to contribute to Skeleton, please ensure you have 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. Everything needs a docs page to explain how it works to end users. See our docs section for more info.
  8. When ready, submit or set your pull request to the ready state. This will begin the code review process.
  9. If your PR meets all requirements it will be merged, otherwise feedback will be provided.

Branches

BranchDescriptionPRs Allowed
master Represents the production branch. Pull requests sent to this branch will be rejected. No
dev The active development branch containing bleeding edge changes. Target this branch for PRs Yes

Feature Branch Conventions

PrefixDescription
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

PathDescription
/src/docs Houses Skeleton-specific documentation site components, such as the theme generator.
/src/lib Houses only features and assets distributed with the NPM package.
/src/routes House documentation pages for the public-facing documentation website, such as this page.
PathDescription
/src/docs/DocsAppBar The AppBar found at the top of the page.
/src/docs/DocFooter The footer found at the bottom of each page.
/src/docs/DocsNavigation/DocsDrawer.svelte The left navigation drawer visible on small screens.
/src/docs/DocsNavigation/DocsSidebar.svelte The left sidebar component for large screens.
/src/docs/DocsNavigation/links.ts Used to configure all sidebar navigation links.
/src/docs/DocsThemer The theme generator found on the Getting Starts > Themes section.