ai-agent

30-seconds-of-code

Name: 30-seconds-of-code
Author: Chalarangelo

Coding articles to level up your development skills

129,261 stars12,485 forksJavaScriptUpdated 9/25/2026100% free · open source

What it does

Provides ready‑to‑use, well‑documented JavaScript snippets you can copy‑paste to speed up development.

When to use it

•You need a quick, battle‑tested implementation of a common JS utility (e.g., array chunking, deep clone).
•You want to avoid writing boilerplate code while prototyping a new feature.
•You are teaching or learning JavaScript and need concise examples to illustrate concepts.

Ready-to-paste prompt

npx 30s debounce "function handleResize(){ console.log('resized'); }" 300

Heads up: The package ships as ES‑module code; if your project uses CommonJS you must either use `require()` (the library provides a CJS build) or set "type": "module" in package.json, otherwise you’ll get a "Unexpected token 'export'" error.

Saves to your device

Use with Claude

New

Skip the builder — one click puts this in Claude, Cursor, Antigravity and more.

⚡ Runs out of the box

A prompt/skill package — nothing to install beyond adding it to your AI tool.

Try it instantly — no install

Claude Code

mkdir -p ~/.claude/skills/30-seconds-of-code && curl -fsSL https://workflowstacks.com/api/skills/30-seconds-of-code/claude-skill -o ~/.claude/skills/30-seconds-of-code/SKILL.md

Open in another AI app

Opens the app with this repo with the prompt ready to go — no copy-paste needed.

Connect the whole catalog (MCP)

claude mcp add --transport http workflowstacks https://workflowstacks.com/api/mcp

Adds a WorkflowStacks connector to Claude Code: search and load any skill here by chatting.

How 30-seconds-of-code works

Codeflow

Free to inspect

30-seconds-of-code is mostly documents (783 doc files, 88 small scripts) — something you read, not something you run. There is nothing to install. Last commit this month, CC-BY-4.0 license.

Size

Mostly documents

783 documents · 88 small scripts · days to read — use, don't read

Setup

Nothing to install

A guide / curated list. Just read it and follow the links.

Runs on

Nowhere — you read it

A reading resource, not a program.

JavaScript 65%SCSS 26%Astro 8%

Where to start reading

1
README.md
Start here — what it does and how to install it
2
src/lib/contentUtils/markdownParser/plugins/index.js
Inside src/ — the main logic begins here

What's in each folder

src/Core code — the actual logic132 files

bin/Command-line entry points3 files

content/Folder1448 files

logo/Folder17 files

public/Images & static assets1629 files

spec/Tests — proof it works39 files

.github/CI / automation (GitHub Actions)7 files

.vscode/Editor / agent settings4 files

READMEHas testsDocumentedCI checksCC-BY-4.0 licenseUpdated this month

Use with Claude

New

Skip the builder — one click puts this in Claude, Cursor, Antigravity and more.

⚡ Runs out of the box

A prompt/skill package — nothing to install beyond adding it to your AI tool.

Try it instantly — no install

Claude Code

mkdir -p ~/.claude/skills/30-seconds-of-code && curl -fsSL https://workflowstacks.com/api/skills/30-seconds-of-code/claude-skill -o ~/.claude/skills/30-seconds-of-code/SKILL.md

Open in another AI app

Opens the app with this repo with the prompt ready to go — no copy-paste needed.

Connect the whole catalog (MCP)

claude mcp add --transport http workflowstacks https://workflowstacks.com/api/mcp

Adds a WorkflowStacks connector to Claude Code: search and load any skill here by chatting.

Quick Actions

Details

Creator

Chalarangelo

Language

JavaScript