What environments does this JS skill cover?

It covers JavaScript fundamentals applicable to both the browser (frontend) and Node.js (backend), highlighting how the same language works in different environments.

Should I learn var, const, and let together or in steps?

Start with const for stable values, use let for values that will change, and only consider var if you encounter legacy code; the module emphasizes const/let first.

What topics are intentionally deferred for now?

Prototypes, closures, the this keyword, generators, symbols, and proxies are listed as advanced topics to avoid early confusion.

javascript

npx machina-cli add skill DojoCodingLabs/code-sensei/javascript --openclaw

Files (1)

SKILL.md

2.7 KB

JavaScript — CodeSensei Teaching Module

What is JavaScript?

Analogy: If HTML is the skeleton and CSS is the skin, JavaScript is the brain and muscles. It makes things HAPPEN — clicks, animations, data loading, form validation.
Key insight: JavaScript runs in the browser (frontend) AND on the server (backend with Node.js). Same language, two different environments.

Core Concepts to Teach (in order of frequency during vibecoding)

const / let / var

const = a constant, can't be reassigned (use this most of the time)
let = a variable that can change
var = the old way, avoid it (mention only if Claude uses it)
Quiz: "Why did Claude use const instead of let here?"

Arrow Functions `() => {}`

Analogy: A shorthand recipe card. Instead of writing "Function: do this thing," you write "=> do this thing"
This is the #1 syntax that confuses beginners. Normalize it early.

Objects `{}`

Analogy: A filing cabinet with labeled drawers. Each drawer (property) has a name and contains something.
{ name: "Juan", age: 25 } — the object has two "drawers"

Arrays `[]`

Analogy: A numbered list. Items have positions (starting from 0, not 1!)
.map(), .filter(), .forEach() — the "assembly line" methods

Async/Await

Analogy: Ordering food at a restaurant. You place the order (await) and the kitchen works on it while you chat. When it's ready, it arrives. You don't stand at the kitchen door waiting.
Key insight: Some things take time (loading data, saving to database). await means "wait for this to finish before moving on."

Import/Export

Analogy: Sharing tools between workshops. export puts a tool in the shared toolbox. import grabs it from there.
Key insight: This is how code is organized into separate files that work together.

Template Literals `Hello ${name}`

Analogy: Mad Libs — the backtick string has blanks (${}) that get filled in with real values.

Common Patterns in Vibecoded Projects

fetch() — asking another server for data (like calling a restaurant for delivery)
.then() / .catch() — what to do when the data arrives / if something goes wrong
JSON.parse() / JSON.stringify() — translating between text and data objects
console.log() — leaving yourself a note to see what's happening (debugging)

What NOT to Teach Early

Prototypes, closures, this keyword, generators, symbols, proxies
These are advanced topics that vibecoders rarely encounter directly

Source

git clone https://github.com/DojoCodingLabs/code-sensei/blob/main/skills/javascript/SKILL.mdView on GitHub

Overview

A focused CodeSensei module teaching the core JavaScript concepts vibecoders encounter in .js/.mjs/.jsx/.ts files. It covers browser and Node.js environments and uses practical analogies to connect theory to real-world coding.

How This Skill Works

The module presents core concepts in a frequency-ordered sequence, with relatable analogies and quick quizzes. It highlights practical patterns like fetch, promise handling, JSON conversion, and console debugging, while steering learners away from more advanced topics early on.

When to Use It

When you start declaring variables with const/let/var and need guidance on the right choice
When writing frontend interactions with Arrow Functions and event handlers
When modeling data using Objects and Arrays and applying common array methods
When performing asynchronous tasks with Async/Await and data loading
When organizing code across files using Import/Export and modularization

Quick Start

Step 1: Create a JS file (e.g., app.js) and declare sample constants and a simple arrow function, e.g., const name = 'Alex'; const greet = () => `Hello, ${name}!`;
Step 2: Create a second module (utils.js) that exports a function, e.g., export function double(n) { return n * 2; }; and import it into app.js
Step 3: Run the code in a browser or Node.js, use console.log() to verify outputs and try a fetch example to see the common patterns in action

Best Practices

Prefer const for values that won’t be reassigned and use let for values that will change; avoid var unless Claude explicitly uses it
Use Arrow Functions for concise callbacks and to avoid binding issues in events and promises
Leverage template literals for dynamic strings and readable concatenation
Practice common patterns: fetch for server requests, .then()/.catch() for promises, and JSON.parse()/JSON.stringify() for data transformation
Debug with console.log() during development and keep initial code simple before introducing advanced topics like prototypes or this

Example Use Cases

Fetch data from an API and render results in the UI using async/await
Create a small module that exports a utility function and import it in another file
Use an arrow function as an event handler to update the DOM on a button click
Render a user greeting using a template literal with a dynamic name
Handle errors from a fetch call with .then() and .catch() and log useful messages

Frequently Asked Questions

Add this skill to your agents