diff --git a/.github/actions/get-node-version/src/main.ts b/.github/actions/get-node-version/src/main.ts
index 469d64c61..2bf96a08b 100644
--- a/.github/actions/get-node-version/src/main.ts
+++ b/.github/actions/get-node-version/src/main.ts
@@ -1,6 +1,6 @@
 import { setOutput, setFailed, getInput } from "@actions/core";
 import semver from "semver";
-import {readFileSync} from "fs";
+import { readFileSync } from "fs";
 
 (() => {
   const inputPath = getInput("package-json");
diff --git a/.github/actions/get-node-version/tsconfig.json b/.github/actions/get-node-version/tsconfig.json
index b6c380fab..0e68516d1 100644
--- a/.github/actions/get-node-version/tsconfig.json
+++ b/.github/actions/get-node-version/tsconfig.json
@@ -40,7 +40,7 @@
 
     "composite": true,
 
-    "skipLibCheck": false,
+    "skipLibCheck": false
   },
-  "include": ["./src/**/*.ts"],
+  "include": ["./src/**/*.ts"]
 }
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 46ebf66f4..f6071eee6 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -25,6 +25,19 @@ jobs:
         id: get-node-version
         uses: ./.github/actions/get-node-version
 
+  pre-commit:
+    name: Code style check
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-python@v2
+        with:
+          python-version: '3.8'
+      - name: Install pre-commit
+        run: curl https://pre-commit.com/install-local.py | python -
+      - name: Run pre-commit
+        run: ~/bin/pre-commit run --show-diff-on-failure --color=always --all-files
+
   test:
     name: Test
     runs-on: ubuntu-latest
diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 3dd57c27e..d943b725b 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -4,6 +4,7 @@ repos:
     hooks:
       - id: trailing-whitespace
       - id: end-of-file-fixer
+        exclude_types: [svg]
       - id: check-yaml
       - id: mixed-line-ending
         args: [--fix=lf]
@@ -11,3 +12,4 @@ repos:
     rev: "v2.3.1"
     hooks:
       - id: prettier
+        exclude_types: [markdown, yaml]
diff --git a/README.md b/README.md
index bc4c6e227..c595dfbd4 100644
--- a/README.md
+++ b/README.md
@@ -97,3 +97,16 @@ files.
 
 To upgrade Storybook when it informs you about new version being available, run
 the given `npx sb@latest upgrade` command in `apps/storybook` directory.
+
+## pre-commit
+
+[Pre-commit](https://pre-commit.com/) enforces code style practices in this
+project. Choose your preferred
+[installation method](https://pre-commit.com/#install) and then run `pre-commit
+install` to enable Git hook scripts. Pre-commit will now automatically cancel
+your commits if any problems are detected, and autofix them. Stage the changed
+files to your commit and re-run the commit command.
+
+Pre-commit can be disabled for a single commit with `--no-verify` option, but
+note that CI also runs pre-commit and will fail if any problems are encountered
+at this stage.
diff --git a/apps/storybook/.babelrc.json b/apps/storybook/.babelrc.json
index 1568807c2..4d4dd1af9 100644
--- a/apps/storybook/.babelrc.json
+++ b/apps/storybook/.babelrc.json
@@ -58,4 +58,4 @@
       }
     ]
   ]
-}
\ No newline at end of file
+}
diff --git a/apps/storybook/.storybook/main.js b/apps/storybook/.storybook/main.js
index 972a94726..9378eba0c 100644
--- a/apps/storybook/.storybook/main.js
+++ b/apps/storybook/.storybook/main.js
@@ -1,17 +1,17 @@
 module.exports = {
-  "stories": [
+  stories: [
     "../stories/**/*.stories.mdx",
     {
-      "directory": "../stories/components",
-      "files": "*.stories.*",
-      "titlePrefix": "@thunderstore/components"
+      directory: "../stories/components",
+      files: "*.stories.*",
+      titlePrefix: "@thunderstore/components",
     },
   ],
-  "addons": [
+  addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
-    "@snek-at/storybook-addon-chakra-ui",  // Must come after @storybook addons
+    "@snek-at/storybook-addon-chakra-ui", // Must come after @storybook addons
   ],
-  "framework": "@storybook/react",
+  framework: "@storybook/react",
 };
diff --git a/apps/storybook/.storybook/preview.js b/apps/storybook/.storybook/preview.js
index 8a8268cef..a5ff48751 100644
--- a/apps/storybook/.storybook/preview.js
+++ b/apps/storybook/.storybook/preview.js
@@ -14,4 +14,4 @@ export const parameters = {
       { name: "dark", value: "#333" },
     ],
   },
-}
+};
diff --git a/apps/storybook/stories/Introduction.stories.mdx b/apps/storybook/stories/Introduction.stories.mdx
index 3709cbeab..b31136bf9 100644
--- a/apps/storybook/stories/Introduction.stories.mdx
+++ b/apps/storybook/stories/Introduction.stories.mdx
@@ -1,12 +1,12 @@
-import { Meta } from '@storybook/addon-docs';
-import Code from './assets/code-brackets.svg';
-import Colors from './assets/colors.svg';
-import Comments from './assets/comments.svg';
-import Direction from './assets/direction.svg';
-import Flow from './assets/flow.svg';
-import Plugin from './assets/plugin.svg';
-import Repo from './assets/repo.svg';
-import StackAlt from './assets/stackalt.svg';
+import { Meta } from "@storybook/addon-docs";
+import Code from "./assets/code-brackets.svg";
+import Colors from "./assets/colors.svg";
+import Comments from "./assets/comments.svg";
+import Direction from "./assets/direction.svg";
+import Flow from "./assets/flow.svg";
+import Plugin from "./assets/plugin.svg";
+import Repo from "./assets/repo.svg";
+import StackAlt from "./assets/stackalt.svg";
 
 <Meta title="Example/Introduction" />
 
@@ -180,14 +180,22 @@ We recommend building UIs with a [**component-driven**](https://componentdriven.
       Configure, customize, and extend
     </span>
   </a>
-  <a className="link-item" href="https://storybook.js.org/tutorials/" target="_blank">
+  <a
+    className="link-item"
+    href="https://storybook.js.org/tutorials/"
+    target="_blank"
+  >
     <img src={Direction} alt="direction" />
     <span>
       <strong>In-depth guides</strong>
       Best practices from leading teams
     </span>
   </a>
-  <a className="link-item" href="https://github.com/storybookjs/storybook" target="_blank">
+  <a
+    className="link-item"
+    href="https://github.com/storybookjs/storybook"
+    target="_blank"
+  >
     <img src={Code} alt="code" />
     <span>
       <strong>GitHub project</strong>
@@ -204,6 +212,6 @@ We recommend building UIs with a [**component-driven**](https://componentdriven.
 </div>
 
 <div className="tip-wrapper">
-  <span className="tip">Tip</span>Edit the Markdown in{' '}
+  <span className="tip">Tip</span>Edit the Markdown in{" "}
   <code>src/stories/Introduction.stories.mdx</code>
 </div>
diff --git a/apps/storybook/stories/components/Markdown.stories.tsx b/apps/storybook/stories/components/Markdown.stories.tsx
index f84023f18..89c4e1afa 100644
--- a/apps/storybook/stories/components/Markdown.stories.tsx
+++ b/apps/storybook/stories/components/Markdown.stories.tsx
@@ -19,8 +19,6 @@ ${"```"}js
 console.log("Hello, World!");
 ${"```"}
 
-  
-
 ${"```"}python
 print('Hello, World!')
 ${"```"}
@@ -33,16 +31,12 @@ const listContent = `
     * Subitem
 * Yet another item
 
-  
-
 1. First item
 2. Second item
     1. Subitem
     2. Subitem
 3. Last item
 
-  
-
 - [x] Read ticket thoroughly
 - [ ] Design implementation
 - [ ] Write code and tests