@ubuligan/code-to-lesson

A Claude Code skill that analyzes a code project end-to-end and writes a deep-dive engineering tutorial to code_tutorial.md — architecture, folder structure, design patterns, React patterns, production practices, dependency audit, and anti-pattern refactors.

Install

████  █████  ███   ███  █████ ███ █   █ ███ █████ █   █ 
█   █ █     █   █ █       █    █  █   █  █    █    █ █  
████  ████  █████ █       █    █  █   █  █    █     █   
█  █  █     █   █ █       █    █   █ █   █    █     █   
█   █ █████ █   █  ███    █   ███   █   ███   █     █   
npx @ubuligan/code-to-lesson

Then restart Claude Code so it picks up the new skill.

The installer links the skill into ~/.claude/skills/code-to-lesson (junction on Windows, symlink elsewhere; falls back to a copy if linking is denied).

Other commands:

npx @ubuligan/code-to-lesson --list        # show install status
npx @ubuligan/code-to-lesson --force       # overwrite existing install
npx @ubuligan/code-to-lesson --uninstall   # remove the skill

How to use

In Claude Code, run:

/code-to-lesson [path]

path is optional — pass a file or folder, or omit it to analyze the whole current project. Claude reads the code and writes a full tutorial to code_tutorial.md in the project root.

What it produces

A single code_tutorial.md covering, in order:

1. Target & scope — language, framework, build tool, package manager, size.
2. Architecture & stack — version table, status, upgrade path.
3. Folder structure — current layout, problems, feature-based target, phased migration.
4. Design patterns (Refactoring.guru) — Factory, Singleton, Adapter, Composite, Observer, Strategy, with before/after.
5. React patterns (Patterns.dev) — hook pitfalls, useCallback/useMemo reality check, custom-hook architecture, state management.
6. Production practices (Bullet Proof React) — type safety, error handling, performance, monitoring.
7. Component walkthroughs — labeled code tours with "why each decision".
8. Dependency health — outdated table, breaking changes, upgrade plan.
9. Anti-patterns & refactors — God components, re-renders, prop drilling, plus a tailored checklist.
10. Final summary & next steps.

Non-React/JS projects are handled too — the React-specific phase is skipped and language-appropriate equivalents are applied.

License

MIT © 2026 Javid Salimov