matthewharwood/fantasy-phonics
Overview
This skill provides a compact guide and set of zero-dependency JavaScript micro-utilities that prefer native APIs and fall back to lightweight just-* packages only when necessary. It helps you choose native one-liners first, then recommends tiny, well-scoped packages for edge cases and complex algorithms. The aim is readable, predictable code with minimal dependencies for object, array, string, number, and function tasks.
How this skill works
The skill inspects common needs (diff, deep clone, grouping, debouncing, etc.) and maps each need to a native solution when available, shown in code-friendly snippets. When a native approach is insufficient or error-prone, it recommends a single-purpose just-* package and explains the trade-off. It emphasizes immutability, modern ES APIs (optional chaining, toSorted, fromEntries), and replacing bulky libraries with tiny focused modules.
When to use it
- When you want zero-or-low-dependency utilities for day-to-day JS tasks.
- When a native API provides a clear, readable one-liner (prefer native).
- When correctness or edge-case coverage requires a tested micro-package.
- When building small web components, vanilla JS apps, or educational projects for kids.
- When you need predictable, maintainable helpers without a framework.
Best practices
- Always check native capabilities first (e.g., structuredClone, Object.groupBy, arr.toSorted).
- Prefer immutability: use toSpliced, toSorted, spread, and fromEntries for transforms.
- Limit dependencies to single-purpose just-* packages when native APIs miss edge cases.
- Keep utilities explicit and documented in code — prefer short readable one-liners over clever abstractions.
- Install only the specific just-* packages you use; avoid importing large multi-feature libs.
Example use cases
- Deep-clone game state for undo using structuredClone or just-extend when deep merge is needed.
- Debounce text input handlers with just-debounce-it for search in a phonics game UI.
- Group creature cards by type with Object.groupBy or produce lookup maps via Object.fromEntries.
- Shuffle encounter decks with just-shuffle or dedupe collections using [...new Set(arr)].
- Immutable insert of drawing layers using arr.toSpliced to preserve previous state.
FAQ
Use structuredClone for most deep-clone needs — it’s native and fast. Reach for just-extend or a tested package when you need controlled merging or special handling of prototypes and non-serializable types.
Are just-* packages safe for production?
Yes — they are tiny, focused, and well-tested. Use them only when native APIs are insufficient or when you need battle-tested edge-case behavior.
16 skills
This skill helps you optimize JavaScript tasks by prioritizing native APIs and lightweight utilities for objects, arrays, strings, numbers, and functions.
This skill helps you apply Material Symbols v3 iconography consistently across UI components, improving accessibility, sizing, color integration, and animation.
This skill helps you integrate Material Symbols v3 icons across UI elements by importing, styling, and scaling variable font icons for consistent design.
This skill helps you implement fluid CSS grid layouts with 12 columns and responsive gutters using Utopia utilities.
This skill helps you apply a fantasy-themed, accessible color system by using semantic tokens and CSS vars across surfaces, states, and themes.
This skill helps you write robust production JavaScript by applying pragmatic rules for async error handling performance and testing.
This skill helps you craft semantic, accessible, and high-performance HTML by applying 30 production-ready rules across structure, forms, and SEO.
This skill helps implement accessible, responsive motion patterns using Anime.js v4 for UI feedback, transitions, and celebratory animations.
This skill helps you implement clear UX feedback patterns for success, errors, loading, and progress across components and interactions.
This skill helps design and implement clear multi-step user flows, routing, state management, and progressive disclosure in vanilla JavaScript games.
This skill helps you implement fluid typography using Utopia scale with container query units to improve readability and visual hierarchy.
This skill helps you implement interactive component states with accessible hover, focus, loading, and error feedback for buttons, inputs, and cards.
This skill helps you implement fault-tolerant web audio with zero-lag playback and responsive sound effects across pages.
This skill defines a zero query, attribute driven web components architecture using declarative shadow DOM and handleEvent patterns with pure browser APIs.
This skill helps you implement a fluid Utopia spacing system with container-query aware tokens to create consistent, responsive layouts.
This skill enables smooth web components animations using Anime.js 4 for drag interactions, visual feedback, swaps, and automatic cleanup.
