Design System Contributor Learning Path

Pre-Req Skills

You should already be comfortable with:

• Using a terminal (basic navigation: cd, ls, mkdir, touch).
• Editing files in a code editor (preferably VS Code).
• Basic HTML and CSS (tags, attributes, selectors, layouts).
• How the web works (requests/responses, client vs. server).

If you need a refresher:

• freeCodeCamp Responsive Web Design
• MDN Web Docs: Getting started with the Web

---

Git

Learn from:

• Pro Git book (Ch. 1–3, branching, tagging).
• Atlassian Git Tutorials.
• Learn Git Branching (interactive).

Before moving on, you should be able to:

• Initialize a repo, add/commit changes, and inspect history.
• Create and merge branches; resolve merge conflicts.
• Push/pull from GitHub; create Pull Requests.
• Tag a version release.

---

GitHub Actions

Learn from:

• GitHub Actions Quickstart.
• Workflow syntax reference.
• Hello GitHub Actions (interactive).

Before moving on, you should be able to:

• Write a workflow in YAML triggered on push/PR.
• Run jobs with Node.js setup and caching.
• Use marketplace actions (like actions/checkout, actions/cache).
• Pass secrets and environment variables securely.

---

JavaScript & TypeScript

Learn from:

• MDN JavaScript Guide.
• freeCodeCamp JavaScript Algorithms & Data Structures.
• TypeScript Handbook.

Before moving on, you should be able to:

• Use modern JS (modules, async/await, arrow functions, destructuring).
• Write and test small functions in JS.
• Add types, interfaces, and generics in TypeScript.
• Configure tsconfig.json and run tsc for type-checking.

---

Node.js Fundamentals

Learn from:

• Introduction to Node.js (official docs).
• Node.js Built-in Modules (fs, path, http, crypto).
• Node.js Test Runner.

Before moving on, you should be able to:

• Explain how Node’s event loop works.
• Build a CLI script with Node built-in modules.
• Read and write files from disk.
• Write and run tests using Node’s built-in test runner.

---

Storybook (Deep Dive)

Learn from:

• Intro to Storybook (official tutorial).
• Writing Stories.
• Component Story Format (CSF3).
• Interaction Testing.

Before moving on, you should be able to:

• Install Storybook in a project.
• Write stories for components with args/controls.
• Use interaction tests to simulate user input.
• Build and export Storybook for docs or CI.

---

Web Components & Lit

Learn from:

• Lit Getting Started.
• Lit Interactive Tutorial.
• MDN: Using Custom Elements.

Before moving on, you should be able to:

• Create a Lit-based Web Component with properties and events.
• Use slots for flexible content.
• Handle attributes vs. properties correctly.
• Document components in Storybook.

---

Playwright (End-to-End Testing)

Learn from:

• Playwright Getting Started.
• Playwright Test Runner.
• Playwright Writing Tests.
• Playwright Assertions.

Before moving on, you should be able to:

• Install and configure Playwright in a Node project.
• Write tests that open a page and check content with locators.
• Simulate user actions (click, type, form submit).
• Run Playwright tests locally and in GitHub Actions.
• Capture screenshots and test across multiple browsers (Chromium, Firefox, WebKit).

---

Storybook + Playwright Integration (Optional Advanced)

Learn from:

• Testing Storybook with Playwright guide.
• Playwright + Storybook examples.

Why this matters:

• You can treat each Storybook story as a test case.
• Playwright can run against Storybook’s isolated component environment.
• This allows visual regression tests (check if UI changed unexpectedly).

Before moving on, you should be able to:

• Run Playwright tests against Storybook stories.
• Write visual regression tests (screenshots & comparisons).
• Combine Playwright + Storybook in CI for UI stability.

---

GitHub Copilot

Learn from:

• Copilot Chat: Overview & Getting Started.
• Repository Custom Instructions.
• Copilot Chat Cookbook.

Before moving on, you should be able to:

• Configure Copilot in VS Code.
• Use inline suggestions and Chat responsibly.
• Add custom repository instructions (coding style, test rules).
• Use Copilot Chat to generate and refine tests, then review outputs critically.