matthewharwood/fantasy-phonics

1

animejs-v4 Anime.js 4.0 animations for Web Components — drag-drop, click feedback, swaps, cancelable motion. Use when adding ani…

matthewharwood/fantasy-phonics

37

2

ux-spacing-layout Utopia fluid spacing tokens and layout patterns. Use when applying margins, padding, gaps, or creating layouts. Cover…

matthewharwood/fantasy-phonics

16

3

html-semantic-engineering 30 pragmatic rules for production HTML covering semantic markup, accessibility (WCAG 2.1 AA), performance optimizatio…

matthewharwood/fantasy-phonics

15

4

web-components-architecture Build web components using Custom Elements v1 API with Declarative Shadow DOM, attribute-driven state, handleEvent pa…

matthewharwood/fantasy-phonics

14

5

webgpu-canvas WebGPU fundamentals for high-performance canvas rendering. Covers device initialization, buffer management, WGSL shad…

matthewharwood/fantasy-phonics

11

6

audio-design Game audio design patterns for creating sound effects and UI audio. Use when designing sounds for games, writing AI a…

matthewharwood/fantasy-phonics

10

7

ux-iconography Icon usage patterns using Material Symbols v3. Use when adding icons to buttons, navigation, or status indicators. Co…

matthewharwood/fantasy-phonics

10

8

ux-design-principles Cognitive psychology principles for UX design decisions. Use when planning features, structuring interfaces, reducing…

matthewharwood/fantasy-phonics

9

9

web-audio Production-tested patterns for fault-tolerant browser audio with zero-lag rapid-fire support. Use when implementing s…

matthewharwood/fantasy-phonics

8

10

ipad-pro-design CSS and UX patterns for iPad Pro 12.9" development. Covers viewport configuration, touch optimization, safe areas, Pr…

matthewharwood/fantasy-phonics

6

11

ux-animation-motion Animation patterns using Anime.js v4 for UI feedback, transitions, and celebrations. Use when implementing hover effe…

matthewharwood/fantasy-phonics

6

12

ux-feedback-patterns User feedback patterns including success/error messages, loading states, confirmations, and progress indicators. Use …

matthewharwood/fantasy-phonics

6

13

ux-typography Typography patterns using Utopia fluid type scale with cqi units. Use when setting font sizes, line heights, font fam…

matthewharwood/fantasy-phonics

6

14

idb-state-persistence IndexedDB patterns for local-first state persistence using the idb library. Use when implementing features that requi…

matthewharwood/fantasy-phonics

5

15

js-micro-utilities Zero-dependency JavaScript utilities using native APIs and just-* micro-packages. Use when manipulating objects, arra…

matthewharwood/fantasy-phonics

5

16

material-symbols-v3 Material Symbols v3 variable icon font system. Use when adding icons to buttons, navigation, status indicators, or an…

matthewharwood/fantasy-phonics

5

17

utopia-container-queries Container query setup required for this project's cqi-based fluid scales. The type and space tokens use cqi units whi…

matthewharwood/fantasy-phonics

5

18

utopia-fluid-scales Fluid typography and spacing tokens using Utopia.fyi with cqi (container query inline) units. Reference for the exact…

matthewharwood/fantasy-phonics

5

19

utopia-grid-layout CSS Grid utilities using Utopia fluid spacing. Reference for the grid variables and utility classes defined in this p…

matthewharwood/fantasy-phonics

5

20

ux-color-system Fantasy-themed color tokens and semantic color usage. Use when applying colors, creating themes, or ensuring color ac…

matthewharwood/fantasy-phonics

5

21

ux-user-flow Navigation and user flow patterns including routing, state management, progressive disclosure, and game progression. …

matthewharwood/fantasy-phonics

5

22

javascript-pragmatic-rules 30 pragmatic rules for production JavaScript covering async operations, V8 optimization, memory management, testing, …

matthewharwood/fantasy-phonics

4

23

ux-accessibility WCAG 2.2 accessibility patterns for web components. Use when implementing focus management, keyboard navigation, scre…

matthewharwood/fantasy-phonics

4

24

ux-component-states Interactive component state patterns including hover, focus, active, disabled, loading, and error states. Use when bu…

matthewharwood/fantasy-phonics

4

25

ux-form-design Form and input design patterns including validation, labels, error handling, and form-associated custom elements. Use…

matthewharwood/fantasy-phonics

4