dev-preferences.json

{
  "styling": {
    "colors": "hsl",
    "cssFramework": "css-modules",
    "respectGlobalStyles": true
  },
  "codeGeneration": {
    "avoidPackages": ["tailwindcss"],
    "preferredPackages": [
      "postcss",
      "autoprefixer",
      "postcss-preset-env",
      "stylelint",
      "stylelint-order",
      "stylelint-config-standard",
      "react-router-dom",
      "zustand",
      "zod"
    ]
  },
  "documentation": {
    "includeComments": false
  },
  "typescript": {
    "preferTypes": true,
    "preferFunctionDeclarations": true
  },
  "react": {
    "preferComponentProps": true,
    "preferEventHandlers": true,
    "useEffectGuidelines": "Prefer event handlers to useEffect. useEffect is not supposed to be used for working with events inside React - use event handlers for that. useEffect should only be used for syncing with APIs outside of React (e.g., Web Audio API).",
    "useEffectDependencies": "One concern per useEffect. If the dependency list is long or mixes unrelated values, split it into smaller effects. Use useMemo/useCallback to reduce dependencies to only what's meaningful. A long dependency list isn't bad if all values belong to the same concern and every change truly needs to trigger the effect."
  },
  "ui": {
    "iconLibrary": "lucide"
  },
  "programming": {
    "paradigm": "functional",
    "preferImmutability": true,
    "preferPureFunctions": true,
    "avoidSideEffects": true
  },
  "principles": {
    "singleResponsibility": {
      "enforceComponentSeparation": true,
      "maxComponentLines": 200,
      "maxFunctionLines": 50,
      "preferPureFunctions": true
    }
  },
  "structure": {
    "colocateFiles": true,
    "colocationDescription": "Whenever possible, place related files (component, styles, tests, hooks, types, audio, store, utils, etc.) in the same directory to improve discoverability and maintainability.",
    "indexFileForComponents": true,
    "indexFileDescription": "Each component directory should include an index.ts file that re-exports the default component (e.g., export { default } from './ComponentName';) to enable cleaner and more consistent imports."
  },
  "testing": {
    "focusOnBehavior": true,
    "avoidImplementationDetails": true,
    "layeredTestingStrategy": {
      "unitTests": {
        "dspLayer": "Test oscillators, filters, envelopes, and mixer modules in isolation. Assert Web Audio API node connections, parameter values, and range enforcement. Use OfflineAudioContext where possible to render and inspect short audio buffers."
      },
      "integrationTests": {
        "audioGraph": "Create small synth patches and verify that parameter changes propagate through the graph. Confirm oscillator frequencies, filter cutoffs, and envelope shapes match expected outputs."
      },
      "uiBehaviorTests": {
        "userInteractions": "Use React Testing Library to simulate clicks, knob drags, and key presses. Assert these actions trigger correct DSP parameter updates and start/stop audio as expected."
      }
    },
    "testingGuidelines": "Follow a layered testing approach: For UI state, avoid directly testing hooks or component internals — rely on user-observable changes. For DSP state, testing 'internal details' is acceptable and required, because DSP internals are part of the app's public API to the UI. Test what the component does, not how it does it, except where DSP internals are the public API."
  }
}