From 04dfd31b1c0ef738af254f3ca8a0b399919930ef Mon Sep 17 00:00:00 2001
From: Renoir Boulanger <contribs@renoirboulanger.com>
Date: Mon, 16 Mar 2026 13:14:36 -0400
Subject: [PATCH 01/13] CLIM-1291: BEGIN


From 4c2c388e79fda2eebb1957e56d5f6a5f2c95a08e Mon Sep 17 00:00:00 2001
From: Renoir Boulanger <contribs@renoirboulanger.com>
Date: Mon, 16 Mar 2026 13:15:07 -0400
Subject: [PATCH 02/13] CLIM-1291: Disable checkbox when not Forecast

---
 apps/src/components/fields/skill.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/apps/src/components/fields/skill.tsx b/apps/src/components/fields/skill.tsx
index 99eee296b..38c0115a2 100644
--- a/apps/src/components/fields/skill.tsx
+++ b/apps/src/components/fields/skill.tsx
@@ -8,6 +8,8 @@ import { __ } from '@/context/locale-provider';
 import TooltipWidget from '@/components/ui/tooltip-widget';
 import React from 'react';
 
+import { ForecastDisplays } from '@/types/climate-variable-interface';
+
 export interface S2DForecastDisplaySkillFieldCheckboxProps {
 	tooltip?: React.ReactNode;
 }
@@ -18,6 +20,12 @@ export const MaskLowSkillField = (
 	const dispatch = useAppDispatch();
 
 	const checked = useAppSelector(selectLowSkillVisibility());
+	const forecastDisplay = useAppSelector(
+		(state) => state.climateVariable.data?.forecastDisplay,
+	);
+	const isForecast = forecastDisplay === ForecastDisplays.FORECAST
+		|| forecastDisplay === undefined;
+
 	const onCheckedChange = (checked: boolean) => {
 		dispatch(setLowSkillVisibility({visible: checked}));
 	};
@@ -29,6 +37,7 @@ export const MaskLowSkillField = (
 	const fieldProps = {
 		checked,
 		onCheckedChange,
+		disabled: !isForecast,
 		...propsRest,
 	};
 
@@ -41,7 +50,7 @@ export const MaskLowSkillField = (
 			/>
 			<label
 				htmlFor='mask-low-skill-checkbox'
-				className="text-sm font-medium leading-none cursor-pointer"
+				className="text-sm font-medium leading-none cursor-pointer peer-disabled:opacity-50 peer-disabled:cursor-default"
 			>
 				{__('Mask Low Skill')}
 			</label>

From 215c57161a94fe5923fc128098a8b80c5cae2139 Mon Sep 17 00:00:00 2001
From: Renoir Boulanger <contribs@renoirboulanger.com>
Date: Mon, 16 Mar 2026 13:15:36 -0400
Subject: [PATCH 03/13] CLIM-1291: Hide low skill layer when not Forecast

---
 apps/src/components/map-layers/low-skill-layer.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/apps/src/components/map-layers/low-skill-layer.tsx b/apps/src/components/map-layers/low-skill-layer.tsx
index 5fe60ec87..c6299034f 100644
--- a/apps/src/components/map-layers/low-skill-layer.tsx
+++ b/apps/src/components/map-layers/low-skill-layer.tsx
@@ -6,6 +6,7 @@ import { useS2D } from '@/hooks/use-s2d';
 import { useAppSelector } from '@/app/hooks';
 import { selectLowSkillVisibility } from '@/features/map/map-slice';
 import { buildSkillLayerName, buildSkillLayerTime } from '@/lib/s2d';
+import { ForecastDisplays } from '@/types/climate-variable-interface';
 import L from 'leaflet';
 
 interface LowSkillLayerProps {
@@ -19,6 +20,9 @@ const LowSkillLayer = ({
 	pane,
 }: LowSkillLayerProps): React.ReactElement | null => {
 	const { climateVariable } = useClimateVariable();
+	const forecastDisplay = climateVariable?.getForecastDisplay();
+	const isForecast = forecastDisplay === ForecastDisplays.FORECAST
+		|| forecastDisplay === undefined;
 	const { releaseDate } = useS2D();
 	const isLowSkillMasked = !useAppSelector(selectLowSkillVisibility());
 	const {
@@ -49,7 +53,7 @@ const LowSkillLayer = ({
 	// attributes change.
 	return useMemo(
 		() => {
-			if (isLowSkillMasked || !layerName || !timeValue) {
+			if (!isForecast || isLowSkillMasked || !layerName || !timeValue) {
 				return null;
 			}
 
@@ -78,7 +82,7 @@ const LowSkillLayer = ({
 		// above takes care of that). But we still use it as an initial value.
 		//
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[pane, isLowSkillMasked, layerName, timeValue]
+		[pane, isForecast, isLowSkillMasked, layerName, timeValue]
 	);
 };
 

From 8d8669abc5ed6be6bbbf8498a8d15618433625fb Mon Sep 17 00:00:00 2001
From: Renoir Boulanger <contribs@renoirboulanger.com>
Date: Mon, 16 Mar 2026 13:33:14 -0400
Subject: [PATCH 04/13] CLIM-1291: Remove undefined fallback from isForecast

undefined is a transient React re-render state, not a valid
forecastDisplay value. Only positively match ForecastDisplays.FORECAST.
---
 apps/src/components/fields/skill.tsx               | 3 +--
 apps/src/components/map-layers/low-skill-layer.tsx | 3 +--
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/apps/src/components/fields/skill.tsx b/apps/src/components/fields/skill.tsx
index 38c0115a2..0bf57af18 100644
--- a/apps/src/components/fields/skill.tsx
+++ b/apps/src/components/fields/skill.tsx
@@ -23,8 +23,7 @@ export const MaskLowSkillField = (
 	const forecastDisplay = useAppSelector(
 		(state) => state.climateVariable.data?.forecastDisplay,
 	);
-	const isForecast = forecastDisplay === ForecastDisplays.FORECAST
-		|| forecastDisplay === undefined;
+	const isForecast = forecastDisplay === ForecastDisplays.FORECAST;
 
 	const onCheckedChange = (checked: boolean) => {
 		dispatch(setLowSkillVisibility({visible: checked}));
diff --git a/apps/src/components/map-layers/low-skill-layer.tsx b/apps/src/components/map-layers/low-skill-layer.tsx
index c6299034f..92744f450 100644
--- a/apps/src/components/map-layers/low-skill-layer.tsx
+++ b/apps/src/components/map-layers/low-skill-layer.tsx
@@ -21,8 +21,7 @@ const LowSkillLayer = ({
 }: LowSkillLayerProps): React.ReactElement | null => {
 	const { climateVariable } = useClimateVariable();
 	const forecastDisplay = climateVariable?.getForecastDisplay();
-	const isForecast = forecastDisplay === ForecastDisplays.FORECAST
-		|| forecastDisplay === undefined;
+	const isForecast = forecastDisplay === ForecastDisplays.FORECAST;
 	const { releaseDate } = useS2D();
 	const isLowSkillMasked = !useAppSelector(selectLowSkillVisibility());
 	const {

From 9d15407d42b30c026919ad5473e5e6b2bbe57aa3 Mon Sep 17 00:00:00 2001
From: Renoir Boulanger <contribs@renoirboulanger.com>
Date: Mon, 16 Mar 2026 13:42:45 -0400
Subject: [PATCH 05/13] CLIM-1291: One-per-line for conditional and deps array

---
 .../src/components/map-layers/low-skill-layer.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/apps/src/components/map-layers/low-skill-layer.tsx b/apps/src/components/map-layers/low-skill-layer.tsx
index 92744f450..e278717ba 100644
--- a/apps/src/components/map-layers/low-skill-layer.tsx
+++ b/apps/src/components/map-layers/low-skill-layer.tsx
@@ -52,7 +52,12 @@ const LowSkillLayer = ({
 	// attributes change.
 	return useMemo(
 		() => {
-			if (!isForecast || isLowSkillMasked || !layerName || !timeValue) {
+			if (
+			!isForecast
+			|| isLowSkillMasked
+			|| !layerName
+			|| !timeValue
+		) {
 				return null;
 			}
 
@@ -81,7 +86,13 @@ const LowSkillLayer = ({
 		// above takes care of that). But we still use it as an initial value.
 		//
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[pane, isForecast, isLowSkillMasked, layerName, timeValue]
+		[
+			pane,
+			isForecast,
+			isLowSkillMasked,
+			layerName,
+			timeValue,
+		]
 	);
 };
 

From 0600e4943a30d28294e54210474977159b8392a0 Mon Sep 17 00:00:00 2001
From: Renoir Boulanger <contribs@renoirboulanger.com>
Date: Mon, 16 Mar 2026 13:47:06 -0400
Subject: [PATCH 06/13] CLIM-1291: ordering

---
 apps/src/components/map-layers/low-skill-layer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/src/components/map-layers/low-skill-layer.tsx b/apps/src/components/map-layers/low-skill-layer.tsx
index e278717ba..c424e1c57 100644
--- a/apps/src/components/map-layers/low-skill-layer.tsx
+++ b/apps/src/components/map-layers/low-skill-layer.tsx
@@ -87,10 +87,10 @@ const LowSkillLayer = ({
 		//
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[
-			pane,
 			isForecast,
 			isLowSkillMasked,
 			layerName,
+			pane,
 			timeValue,
 		]
 	);

From aa3b01ddd17ea33442497c20c8e783043df97810 Mon Sep 17 00:00:00 2001
From: Renoir Boulanger <contribs@renoirboulanger.com>
Date: Mon, 16 Mar 2026 14:43:33 -0400
Subject: [PATCH 07/13] CLIM-1291: Mute checkbox red when disabled

Swap brand-red background/border to neutral-grey-medium when
disabled + checked, so the checkbox is visually obviously inactive.
---
 apps/src/components/fields/skill.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/src/components/fields/skill.tsx b/apps/src/components/fields/skill.tsx
index 0bf57af18..88432120a 100644
--- a/apps/src/components/fields/skill.tsx
+++ b/apps/src/components/fields/skill.tsx
@@ -44,7 +44,7 @@ export const MaskLowSkillField = (
 		<div className="flex items-center space-x-2">
 			<Checkbox
 				id='mask-low-skill-checkbox'
-				className="text-brand-red"
+				className="text-brand-red disabled:data-[state=checked]:bg-neutral-grey-medium disabled:data-[state=checked]:border-neutral-grey-medium"
 				{...fieldProps}
 			/>
 			<label

From 44e8bdab8a4e7a79882368684c8538a03a8305b0 Mon Sep 17 00:00:00 2001
From: Renoir Boulanger <contribs@renoirboulanger.com>
Date: Thu, 19 Mar 2026 12:42:05 -0400
Subject: [PATCH 08/13] CLIM-1291: Extract named booleans for layer guard

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 apps/src/components/map-layers/low-skill-layer.tsx | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/apps/src/components/map-layers/low-skill-layer.tsx b/apps/src/components/map-layers/low-skill-layer.tsx
index c424e1c57..45828e030 100644
--- a/apps/src/components/map-layers/low-skill-layer.tsx
+++ b/apps/src/components/map-layers/low-skill-layer.tsx
@@ -36,6 +36,9 @@ const LowSkillLayer = ({
 		timeValue = buildSkillLayerTime(climateVariable, releaseDate);
 	}
 
+	const hasLayerData = layerName && timeValue;
+	const shouldHideLayer = !isForecast || isLowSkillMasked;
+
 	// Update the opacity on the *existing* layer if it exists. We do it like
 	// that because we don't want a change in opacity to recreate the layer.
 	// Instead, we want to update the existing layer (else it creates flashing
@@ -52,12 +55,7 @@ const LowSkillLayer = ({
 	// attributes change.
 	return useMemo(
 		() => {
-			if (
-			!isForecast
-			|| isLowSkillMasked
-			|| !layerName
-			|| !timeValue
-		) {
+			if (shouldHideLayer || !hasLayerData) {
 				return null;
 			}
 
@@ -87,10 +85,9 @@ const LowSkillLayer = ({
 		//
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[
-			isForecast,
-			isLowSkillMasked,
 			layerName,
 			pane,
+			shouldHideLayer,
 			timeValue,
 		]
 	);

From ec06ab582585b7eee277dfa13866aa70dd02fc2b Mon Sep 17 00:00:00 2001
From: Renoir Boulanger <contribs@renoirboulanger.com>
Date: Thu, 19 Mar 2026 12:42:12 -0400
Subject: [PATCH 09/13] CLIM-1291: Document "mask" vector graphics semantics in
 JSDoc

The word "mask" in "Mask Low Skill" refers to a vector graphics overlay
(diagonal lines over low-confidence forecast regions), not "to hide"
(French: masquer). This distinction caused confusion during development
and risked incorrect conditional logic. Added JSDoc with @see links to
MaskLowSkillField at the three authoritative locations: MapState type
definition, selectLowSkillVisibility selector, and buildSkillLayerName.

Co-Authored-By: Claude Opus 4.6
---
 apps/src/components/fields/skill.tsx               |  3 +++
 apps/src/components/map-layers/low-skill-layer.tsx |  2 ++
 apps/src/features/map/map-slice.ts                 |  4 +++-
 apps/src/lib/s2d.ts                                |  4 ++++
 apps/src/types/types.ts                            | 11 +++++++++--
 5 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/apps/src/components/fields/skill.tsx b/apps/src/components/fields/skill.tsx
index 88432120a..3287ff32a 100644
--- a/apps/src/components/fields/skill.tsx
+++ b/apps/src/components/fields/skill.tsx
@@ -14,6 +14,9 @@ export interface S2DForecastDisplaySkillFieldCheckboxProps {
 	tooltip?: React.ReactNode;
 }
 
+/**
+ * @see {@link selectLowSkillVisibility} — "skill" is an S2D-specific concept
+ */
 export const MaskLowSkillField = (
 	props: S2DForecastDisplaySkillFieldCheckboxProps,
 ) => {
diff --git a/apps/src/components/map-layers/low-skill-layer.tsx b/apps/src/components/map-layers/low-skill-layer.tsx
index 45828e030..5fc751186 100644
--- a/apps/src/components/map-layers/low-skill-layer.tsx
+++ b/apps/src/components/map-layers/low-skill-layer.tsx
@@ -15,6 +15,8 @@ interface LowSkillLayerProps {
 
 /**
  * Leaflet layer for the "low skill".
+ *
+ * @see {@link selectLowSkillVisibility} — "skill" is an S2D-specific concept
  */
 const LowSkillLayer = ({
 	pane,
diff --git a/apps/src/features/map/map-slice.ts b/apps/src/features/map/map-slice.ts
index 81ee9c5ad..ecdd63368 100644
--- a/apps/src/features/map/map-slice.ts
+++ b/apps/src/features/map/map-slice.ts
@@ -201,7 +201,9 @@ export const {
 } = mapSlice.actions;
 
 /**
- * Selector that returns the visibility of the "low skill" layer.
+ * Selector that returns the visibility of the low-skill vector mask overlay.
+ *
+ * @see {@link MapState.isLowSkillVisible}
  */
 export const selectLowSkillVisibility =
 	() => (state: RootState) =>
diff --git a/apps/src/lib/s2d.ts b/apps/src/lib/s2d.ts
index ed9fc1be0..9c7ecbd20 100644
--- a/apps/src/lib/s2d.ts
+++ b/apps/src/lib/s2d.ts
@@ -152,6 +152,10 @@ export function formatPeriodRange(periodRange: PeriodRange): [string, string] {
 /**
  * Create and return the GeoServer layer name for the Skill layer.
  *
+ * "Skill" in meteorology refers to forecast accuracy relative to a baseline
+ * (e.g., climatology). The skill layer is a vector mask overlay showing
+ * diagonal lines over regions where forecast confidence is low.
+ *
  * The name is `CDC:s2d-skill-<VAR>-<F>-<REF-PERIOD>`
  *
  * Where:
diff --git a/apps/src/types/types.ts b/apps/src/types/types.ts
index ea3447eb1..c58bf430a 100644
--- a/apps/src/types/types.ts
+++ b/apps/src/types/types.ts
@@ -216,8 +216,15 @@ export interface MapState {
 	 */
 	messageDisplayStates: {[key: string]: boolean};
 	/**
-	 * True if the "low skill" layer is visible (i.e. true if "mask low skill"
-	 * is checked)
+	 * Whether the low-skill vector mask overlay is visible on the map.
+	 *
+	 * "Mask" here refers to a vector graphics mask — diagonal lines drawn
+	 * over regions where forecast confidence is low. It does NOT mean
+	 * "to hide" (French: masquer). When `true`, the overlay IS displayed.
+	 *
+	 * Only meaningful for S2D variables when Forecast Display = "Forecast".
+	 *
+	 * Controlled by `MaskLowSkillField` in `components/fields/skill.tsx`.
 	 */
 	isLowSkillVisible: boolean;
 	/**

From ea480219ab8977c0c1489887d54c481fb3c952a9 Mon Sep 17 00:00:00 2001
From: Renoir Boulanger <contribs@renoirboulanger.com>
Date: Thu, 19 Mar 2026 13:48:38 -0400
Subject: [PATCH 10/13] CLIM-1291: Centralize forecastDisplay selector with
 fallback
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

At initial load, state.climateVariable.data.forecastDisplay is undefined
because URL-sync only sets it when the fcastDisp param is explicitly
present. When absent (the default Forecast case), the Redux field stays
undefined while ClimateVariableBase.getForecastDisplay() silently falls
back to ForecastDisplays.FORECAST. This caused the Mask Low Skill
checkbox to render disabled even when Forecast Display is Forecast —
a race condition where the component saw undefined before data loaded
and never recovered because the value was never written to the store.

selectForecastDisplay mirrors the fallback from
ClimateVariableInterface.getForecastDisplay so both access paths agree.
Co-located in map-slice alongside selectLowSkillVisibility because its
consumers already import from there.
---
 apps/src/components/fields/skill.tsx          |  5 ++---
 .../components/map-layers/low-skill-layer.tsx |  7 +++++--
 apps/src/features/map/map-slice.ts            | 19 +++++++++++++++++++
 3 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/apps/src/components/fields/skill.tsx b/apps/src/components/fields/skill.tsx
index 3287ff32a..64967cb2e 100644
--- a/apps/src/components/fields/skill.tsx
+++ b/apps/src/components/fields/skill.tsx
@@ -1,5 +1,6 @@
 import { useAppDispatch, useAppSelector } from '@/app/hooks';
 import {
+	selectForecastDisplay,
 	selectLowSkillVisibility,
 	setLowSkillVisibility,
 } from '@/features/map/map-slice';
@@ -23,9 +24,7 @@ export const MaskLowSkillField = (
 	const dispatch = useAppDispatch();
 
 	const checked = useAppSelector(selectLowSkillVisibility());
-	const forecastDisplay = useAppSelector(
-		(state) => state.climateVariable.data?.forecastDisplay,
-	);
+	const forecastDisplay = useAppSelector(selectForecastDisplay());
 	const isForecast = forecastDisplay === ForecastDisplays.FORECAST;
 
 	const onCheckedChange = (checked: boolean) => {
diff --git a/apps/src/components/map-layers/low-skill-layer.tsx b/apps/src/components/map-layers/low-skill-layer.tsx
index 5fc751186..9935b42fb 100644
--- a/apps/src/components/map-layers/low-skill-layer.tsx
+++ b/apps/src/components/map-layers/low-skill-layer.tsx
@@ -4,7 +4,10 @@ import { WMSTileLayer } from 'react-leaflet';
 import { useClimateVariable } from '@/hooks/use-climate-variable';
 import { useS2D } from '@/hooks/use-s2d';
 import { useAppSelector } from '@/app/hooks';
-import { selectLowSkillVisibility } from '@/features/map/map-slice';
+import {
+	selectForecastDisplay,
+	selectLowSkillVisibility,
+} from '@/features/map/map-slice';
 import { buildSkillLayerName, buildSkillLayerTime } from '@/lib/s2d';
 import { ForecastDisplays } from '@/types/climate-variable-interface';
 import L from 'leaflet';
@@ -22,7 +25,7 @@ const LowSkillLayer = ({
 	pane,
 }: LowSkillLayerProps): React.ReactElement | null => {
 	const { climateVariable } = useClimateVariable();
-	const forecastDisplay = climateVariable?.getForecastDisplay();
+	const forecastDisplay = useAppSelector(selectForecastDisplay());
 	const isForecast = forecastDisplay === ForecastDisplays.FORECAST;
 	const { releaseDate } = useS2D();
 	const isLowSkillMasked = !useAppSelector(selectLowSkillVisibility());
diff --git a/apps/src/features/map/map-slice.ts b/apps/src/features/map/map-slice.ts
index ecdd63368..8115e54e0 100644
--- a/apps/src/features/map/map-slice.ts
+++ b/apps/src/features/map/map-slice.ts
@@ -38,6 +38,11 @@ import {
 	MAP_OPACITY_MIN,
 } from '@/lib/constants';
 import { MapItemsOpacity } from '@/types/types';
+import {
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars -- used in {@link} JSDoc
+	type ClimateVariableInterface,
+	ForecastDisplays,
+} from '@/types/climate-variable-interface';
 import { RootState } from '@/app/store';
 
 const defaultTimePeriodEnd = Math.min(
@@ -209,5 +214,19 @@ export const selectLowSkillVisibility =
 	() => (state: RootState) =>
 		state.map.isLowSkillVisible;
 
+/**
+ * Selector that returns the current forecast display value.
+ *
+ * Includes the fallback to {@link ForecastDisplays.FORECAST} that
+ * {@link ClimateVariableInterface.getForecastDisplay} also applies, ensuring
+ * consistent behavior before climate variable data is fully loaded.
+ *
+ * Co-located in map-slice (not climate-variable-slice) because its
+ * consumers already import from here alongside {@link selectLowSkillVisibility}.
+ */
+export const selectForecastDisplay =
+	() => (state: RootState) =>
+		state.climateVariable.data?.forecastDisplay ?? ForecastDisplays.FORECAST;
+
 // Export reducer
 export default mapSlice.reducer;

From f496f99bbf06861cf02383c8daf624810d37b50f Mon Sep 17 00:00:00 2001
From: Renoir Boulanger <contribs@renoirboulanger.com>
Date: Fri, 20 Mar 2026 13:09:05 -0400
Subject: [PATCH 11/13] CLIM-1291: Use climateVariable.getForecastDisplay()
 instead of useAppSelector

---
 apps/src/components/fields/skill.tsx          |  6 ++++--
 .../components/map-layers/low-skill-layer.tsx |  7 ++-----
 apps/src/features/map/map-slice.ts            | 19 -------------------
 3 files changed, 6 insertions(+), 26 deletions(-)

diff --git a/apps/src/components/fields/skill.tsx b/apps/src/components/fields/skill.tsx
index 64967cb2e..5d423a198 100644
--- a/apps/src/components/fields/skill.tsx
+++ b/apps/src/components/fields/skill.tsx
@@ -1,6 +1,5 @@
 import { useAppDispatch, useAppSelector } from '@/app/hooks';
 import {
-	selectForecastDisplay,
 	selectLowSkillVisibility,
 	setLowSkillVisibility,
 } from '@/features/map/map-slice';
@@ -9,6 +8,7 @@ import { __ } from '@/context/locale-provider';
 import TooltipWidget from '@/components/ui/tooltip-widget';
 import React from 'react';
 
+import { useClimateVariable } from '@/hooks/use-climate-variable';
 import { ForecastDisplays } from '@/types/climate-variable-interface';
 
 export interface S2DForecastDisplaySkillFieldCheckboxProps {
@@ -21,10 +21,12 @@ export interface S2DForecastDisplaySkillFieldCheckboxProps {
 export const MaskLowSkillField = (
 	props: S2DForecastDisplaySkillFieldCheckboxProps,
 ) => {
+	const { climateVariable } = useClimateVariable();
+
 	const dispatch = useAppDispatch();
 
 	const checked = useAppSelector(selectLowSkillVisibility());
-	const forecastDisplay = useAppSelector(selectForecastDisplay());
+	const forecastDisplay = climateVariable?.getForecastDisplay();
 	const isForecast = forecastDisplay === ForecastDisplays.FORECAST;
 
 	const onCheckedChange = (checked: boolean) => {
diff --git a/apps/src/components/map-layers/low-skill-layer.tsx b/apps/src/components/map-layers/low-skill-layer.tsx
index 9935b42fb..5fc751186 100644
--- a/apps/src/components/map-layers/low-skill-layer.tsx
+++ b/apps/src/components/map-layers/low-skill-layer.tsx
@@ -4,10 +4,7 @@ import { WMSTileLayer } from 'react-leaflet';
 import { useClimateVariable } from '@/hooks/use-climate-variable';
 import { useS2D } from '@/hooks/use-s2d';
 import { useAppSelector } from '@/app/hooks';
-import {
-	selectForecastDisplay,
-	selectLowSkillVisibility,
-} from '@/features/map/map-slice';
+import { selectLowSkillVisibility } from '@/features/map/map-slice';
 import { buildSkillLayerName, buildSkillLayerTime } from '@/lib/s2d';
 import { ForecastDisplays } from '@/types/climate-variable-interface';
 import L from 'leaflet';
@@ -25,7 +22,7 @@ const LowSkillLayer = ({
 	pane,
 }: LowSkillLayerProps): React.ReactElement | null => {
 	const { climateVariable } = useClimateVariable();
-	const forecastDisplay = useAppSelector(selectForecastDisplay());
+	const forecastDisplay = climateVariable?.getForecastDisplay();
 	const isForecast = forecastDisplay === ForecastDisplays.FORECAST;
 	const { releaseDate } = useS2D();
 	const isLowSkillMasked = !useAppSelector(selectLowSkillVisibility());
diff --git a/apps/src/features/map/map-slice.ts b/apps/src/features/map/map-slice.ts
index 8115e54e0..ecdd63368 100644
--- a/apps/src/features/map/map-slice.ts
+++ b/apps/src/features/map/map-slice.ts
@@ -38,11 +38,6 @@ import {
 	MAP_OPACITY_MIN,
 } from '@/lib/constants';
 import { MapItemsOpacity } from '@/types/types';
-import {
-	// eslint-disable-next-line @typescript-eslint/no-unused-vars -- used in {@link} JSDoc
-	type ClimateVariableInterface,
-	ForecastDisplays,
-} from '@/types/climate-variable-interface';
 import { RootState } from '@/app/store';
 
 const defaultTimePeriodEnd = Math.min(
@@ -214,19 +209,5 @@ export const selectLowSkillVisibility =
 	() => (state: RootState) =>
 		state.map.isLowSkillVisible;
 
-/**
- * Selector that returns the current forecast display value.
- *
- * Includes the fallback to {@link ForecastDisplays.FORECAST} that
- * {@link ClimateVariableInterface.getForecastDisplay} also applies, ensuring
- * consistent behavior before climate variable data is fully loaded.
- *
- * Co-located in map-slice (not climate-variable-slice) because its
- * consumers already import from here alongside {@link selectLowSkillVisibility}.
- */
-export const selectForecastDisplay =
-	() => (state: RootState) =>
-		state.climateVariable.data?.forecastDisplay ?? ForecastDisplays.FORECAST;
-
 // Export reducer
 export default mapSlice.reducer;

From d61643a07e6018a273e0469a5502991e00780145 Mon Sep 17 00:00:00 2001
From: Renoir Boulanger <contribs@renoirboulanger.com>
Date: Fri, 20 Mar 2026 14:56:31 -0400
Subject: [PATCH 12/13] CLIM-1291: Rename confusing variable name from
 isLowSkillMasked to isLowSkillVisible and flip later where needed.

---
 apps/src/components/map-layers/low-skill-layer.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/src/components/map-layers/low-skill-layer.tsx b/apps/src/components/map-layers/low-skill-layer.tsx
index 5fc751186..37a0798ca 100644
--- a/apps/src/components/map-layers/low-skill-layer.tsx
+++ b/apps/src/components/map-layers/low-skill-layer.tsx
@@ -25,7 +25,7 @@ const LowSkillLayer = ({
 	const forecastDisplay = climateVariable?.getForecastDisplay();
 	const isForecast = forecastDisplay === ForecastDisplays.FORECAST;
 	const { releaseDate } = useS2D();
-	const isLowSkillMasked = !useAppSelector(selectLowSkillVisibility());
+	const isLowSkillVisible = useAppSelector(selectLowSkillVisibility());
 	const {
 		opacity: { mapData },
 	} = useAppSelector((state) => state.map);
@@ -39,7 +39,7 @@ const LowSkillLayer = ({
 	}
 
 	const hasLayerData = layerName && timeValue;
-	const shouldHideLayer = !isForecast || isLowSkillMasked;
+	const shouldHideLayer = !isForecast || !isLowSkillVisible;
 
 	// Update the opacity on the *existing* layer if it exists. We do it like
 	// that because we don't want a change in opacity to recreate the layer.

From b59b03e6aeb9a45f41847c18caf417104be48004 Mon Sep 17 00:00:00 2001
From: Renoir Boulanger <contribs@renoirboulanger.com>
Date: Mon, 23 Mar 2026 13:55:48 -0400
Subject: [PATCH 13/13] CLIM-1291: Comment refactor

---
 apps/src/types/types.ts | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/apps/src/types/types.ts b/apps/src/types/types.ts
index c58bf430a..9f69dc390 100644
--- a/apps/src/types/types.ts
+++ b/apps/src/types/types.ts
@@ -216,11 +216,10 @@ export interface MapState {
 	 */
 	messageDisplayStates: {[key: string]: boolean};
 	/**
-	 * Whether the low-skill vector mask overlay is visible on the map.
+	 * Whether low-skill areas are masked on the map.
 	 *
-	 * "Mask" here refers to a vector graphics mask — diagonal lines drawn
-	 * over regions where forecast confidence is low. It does NOT mean
-	 * "to hide" (French: masquer). When `true`, the overlay IS displayed.
+	 * "Mask" is the verb — to visually cover low-confidence forecast areas
+	 * with diagonal lines. When `true`, those areas are masked.
 	 *
 	 * Only meaningful for S2D variables when Forecast Display = "Forecast".
 	 *