osmani_skill

Overview

This skill writes JavaScript in the voice and engineering approach of Addy Osmani, focusing on design patterns, performance-first thinking, and progressive enhancement. It produces idiomatic, practical code and recommendations that prioritize load-time, runtime efficiency, and maintainable architecture. Use it to get clear, pattern-driven implementations and performance guidance for modern web apps.

How this skill works

The skill inspects the problem and selects appropriate battle-tested patterns (module, observer, factory, singleton, virtualization) while applying performance techniques like code-splitting, lazy loading, and debouncing. It returns compact, actionable code samples and rationale: when to use a pattern, expected trade-offs, and measurable performance checks to run before and after changes. It also suggests progressive enhancement and device/connection-aware strategies.

When to use it

• Building a new feature that must be modular, testable, and performant
• Refactoring a monolithic codebase into smaller, encapsulated modules
• Optimizing critical rendering paths and reducing bundle size
• Implementing lazy loading or route-based code splitting
• Designing event-driven systems or large-list UIs that need virtualization

Best practices

• Pick the simplest pattern that solves the problem; avoid over-engineering
• Measure performance before and after changes; rely on real devices and throttled networks
• Defer noncritical work: dynamic imports, requestIdleCallback, or interaction-based loading
• Prefer Intersection Observer for visibility-driven loading and avoid scroll listeners
• Keep main-thread work short; offload heavy computation to workers or async chunks

Example use cases

• Create a sharable Module Pattern shopping cart with encapsulated state and public API
• Replace expensive scroll handlers with Intersection Observer-driven lazy image loading
• Implement route-based dynamic imports to shrink initial bundle and prefetch on idle
• Build a virtualized list component for thousands of items to maintain smooth scrolling
• Design an EventEmitter using the Observer pattern for decoupled UI updates