opencode-skills-collection 3.1.0 → 3.1.2

package/bundled-skills/design-it/dark-mode/SKILL.md

@@ -0,0 +1,289 @@
+---
+name: dark-mode
+description: Web and App implementation guide for Dark Mode Design. Trigger when user wants dark surfaces, reduced eye strain, and premium sleek aesthetics.
+date_added: "2026-06-17"
+risk: safe
+source: self
+source_type: self
+---
+
+# Dark Mode Design
+
+> "Not just inverted colors. A carefully constructed hierarchy of light on dark."
+
+
+## When to Use
+Use this sub-style when the user's request matches the aesthetic described above. This is a child reference of the `design-it` skill and is not meant to be triggered directly.
+
+## Core Principles
+1. **Never Pure Black**: True `#000000` causes smearing on OLED screens and extreme eye strain with white text. Use dark greys (e.g., `#121212` or `#0A0A0A`).
+2. **Elevation via Lightness**: In light mode, shadows show elevation. In dark mode, shadows are invisible, so elevated surfaces must be lighter than the background.
+3. **Desaturated Accents**: Saturated colors vibrate painfully against dark backgrounds. Tone down the saturation of brand colors.
+
+## Visual DNA
+- **Colors**: **Midnight Luxury** or **Minimalist Slate** (inverted). Background `#121212`. Elevated cards `#1E1E1E`, `#252525`. Primary text `#E1E1E1` (not `#FFFFFF`).
+- **Typography**: Standard highly readable sans-serifs, but often dropped down one font weight compared to light mode, as light text on dark backgrounds appears optically thicker.
+- **Shadows**: Pure black shadows, but with much lower opacity, mostly to separate slightly different shades of grey.
+
+## Web Implementation
+- **CSS Example**:
+```css
+:root {
+  --bg-base: #121212;
+  --bg-elevated-1: #1E1E1E;
+  --bg-elevated-2: #242424;
+  --text-high-emphasis: rgba(255, 255, 255, 0.87);
+  --text-medium-emphasis: rgba(255, 255, 255, 0.60);
+  
+  /* Accent color: Desaturated purple instead of bright purple */
+  --accent-color: #BB86FC; 
+}
+
+body {
+  background-color: var(--bg-base);
+  color: var(--text-high-emphasis);
+  font-weight: 300; /* Thinner weight for dark mode */
+}
+
+.dark-card {
+  background-color: var(--bg-elevated-1);
+  border-radius: 8px;
+  padding: 24px;
+  
+  /* Very subtle border can help separate dark surfaces */
+  border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.dark-card:hover {
+  /* On hover, the element moves closer to the user, so it gets lighter */
+  background-color: var(--bg-elevated-2);
+}
+
+.dark-btn {
+  background-color: var(--accent-color);
+  color: #000; /* Dark text on light accent is highly readable */
+  font-weight: 600;
+  border: none;
+  padding: 12px 24px;
+  border-radius: 4px;
+}
+```
+
+## App Implementation
+
+### SwiftUI
+```swift
+struct DarkModeView: View {
+    // Force Dark Mode on this specific view (or use system settings)
+    @Environment(\.colorScheme) var colorScheme
+    
+    var body: some View {
+        ScrollView {
+            VStack(spacing: 20) {
+                // Primary elevated card
+                VStack(alignment: .leading, spacing: 12) {
+                    Text("Elevation via Lightness")
+                        .font(.headline)
+                        .foregroundColor(.primary) // Auto-adapts
+                    Text("In dark mode, elevated surfaces are lighter grey, not shadowed.")
+                        .font(.subheadline)
+                        .foregroundColor(.secondary) // Auto-adapts
+                }
+                .padding()
+                .frame(maxWidth: .infinity, alignment: .leading)
+                // Use native semantic colors. .secondarySystemBackground is lighter than .systemBackground
+                .background(Color(UIColor.secondarySystemBackground))
+                .cornerRadius(12)
+                
+                // Desaturated Accent Button
+                Button(action: {}) {
+                    Text("Desaturated Accent")
+                        .fontWeight(.semibold)
+                        .foregroundColor(.black) // Dark text on light accent
+                        .padding()
+                        .frame(maxWidth: .infinity)
+                        .background(Color(red: 0.73, green: 0.52, blue: 0.98)) // #BB86FC (Desaturated purple)
+                        .cornerRadius(8)
+                }
+            }
+            .padding()
+        }
+        // #121212 is the standard dark mode background, which systemBackground maps to closely
+        .background(Color(UIColor.systemBackground))
+    }
+}
+// .preferredColorScheme(.dark) to force
+```
+- **Rely on Semantics**: SwiftUI's `Color.primary`, `Color.secondary`, `Color(UIColor.systemBackground)` and `Color(UIColor.secondarySystemBackground)` handle perfect dark mode transitions automatically.
+- Avoid forcing explicit hex codes for backgrounds unless you are building a custom-themed app.
+
+### Flutter
+```dart
+import 'package:flutter/material.dart';
+
+class DarkModeApp extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      // Configure the Dark Theme
+      themeMode: ThemeMode.dark,
+      darkTheme: ThemeData.dark().copyWith(
+        scaffoldBackgroundColor: const Color(0xFF121212), // Standard dark background
+        cardColor: const Color(0xFF1E1E1E), // Elevated surface
+        colorScheme: const ColorScheme.dark().copyWith(
+          primary: const Color(0xFFBB86FC), // Desaturated accent
+          onPrimary: Colors.black, // Dark text on light accent
+          surface: const Color(0xFF1E1E1E),
+        ),
+      ),
+      home: Scaffold(
+        appBar: AppBar(title: const Text('Dark Mode', style: TextStyle(color: Colors.white70))),
+        body: ListView(
+          padding: const EdgeInsets.all(16),
+          children: [
+            Card(
+              elevation: 0, // Shadows don't show well anyway
+              shape: RoundedRectangleBorder(
+                borderRadius: BorderRadius.circular(12),
+                side: BorderSide(color: Colors.white.withOpacity(0.05)), // Subtle border
+              ),
+              child: const Padding(
+                padding: EdgeInsets.all(16.0),
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Text('Elevation via Lightness', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
+                    SizedBox(height: 8),
+                    Text('Elevated surfaces use lighter greys.', style: TextStyle(color: Colors.white60)),
+                  ],
+                ),
+              ),
+            ),
+            const SizedBox(height: 20),
+            ElevatedButton(
+              onPressed: () {},
+              child: const Text('Desaturated Accent'),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+```
+- When using `ThemeData.dark()`, actively override `scaffoldBackgroundColor` to `#121212` and `cardColor` to `#1E1E1E`.
+- Ensure your `colorScheme.onPrimary` is black so text is readable when placed on top of your desaturated primary accent button.
+
+### React Native
+```jsx
+import { useColorScheme } from 'react-native';
+
+const DarkModeScreen = () => {
+  const isDark = useColorScheme() === 'dark';
+  
+  // Custom dark theme dictionary
+  const theme = {
+    bgBase: isDark ? '#121212' : '#FFFFFF',
+    bgElevated: isDark ? '#1E1E1E' : '#F5F5F5',
+    textHigh: isDark ? 'rgba(255, 255, 255, 0.87)' : 'rgba(0, 0, 0, 0.87)',
+    textMedium: isDark ? 'rgba(255, 255, 255, 0.60)' : 'rgba(0, 0, 0, 0.60)',
+    accent: isDark ? '#BB86FC' : '#6200EE', // Desaturated for dark, vibrant for light
+    onAccent: isDark ? '#000' : '#FFF',
+  };
+
+  return (
+    <View style={{ flex: 1, backgroundColor: theme.bgBase, padding: 16 }}>
+      <View style={{
+        backgroundColor: theme.bgElevated,
+        padding: 24,
+        borderRadius: 12,
+        borderWidth: isDark ? 1 : 0,
+        borderColor: 'rgba(255,255,255,0.05)',
+        marginBottom: 20
+      }}>
+        <Text style={{ color: theme.textHigh, fontSize: 18, fontWeight: 'bold', marginBottom: 8 }}>
+          Elevation via Lightness
+        </Text>
+        <Text style={{ color: theme.textMedium }}>
+          Elevated surfaces use lighter greys.
+        </Text>
+      </View>
+
+      <TouchableOpacity style={{
+        backgroundColor: theme.accent,
+        padding: 16,
+        borderRadius: 8,
+        alignItems: 'center'
+      }}>
+        <Text style={{ color: theme.onAccent, fontWeight: 'bold' }}>Desaturated Accent</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+```
+- Rely on `useColorScheme()` hook from React Native.
+- Define a strict dictionary of your color tokens. Notice how `theme.accent` shifts from a vibrant purple (`#6200EE`) in light mode to a desaturated pastel purple (`#BB86FC`) in dark mode.
+
+### Jetpack Compose
+```kotlin
+@Composable
+fun DarkModeScreen() {
+    // Typically this logic lives in your Theme.kt
+    val darkColors = darkColorScheme(
+        background = Color(0xFF121212),
+        surface = Color(0xFF1E1E1E),
+        primary = Color(0xFFBB86FC),
+        onPrimary = Color.Black,
+        onBackground = Color.White.copy(alpha = 0.87f),
+        onSurface = Color.White.copy(alpha = 0.87f)
+    )
+
+    MaterialTheme(colorScheme = darkColors) {
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+                .background(MaterialTheme.colorScheme.background)
+                .padding(16.dp)
+        ) {
+            Card(
+                colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surface),
+                shape = RoundedCornerShape(12.dp),
+                border = BorderStroke(1.dp, Color.White.copy(alpha = 0.05f))
+            ) {
+                Column(modifier = Modifier.padding(24.dp)) {
+                    Text("Elevation via Lightness", 
+                        style = MaterialTheme.typography.titleMedium, 
+                        color = MaterialTheme.colorScheme.onSurface)
+                    Spacer(Modifier.height(8.dp))
+                    Text("Elevated surfaces use lighter greys.", 
+                        style = MaterialTheme.typography.bodyMedium, 
+                        color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.6f))
+                }
+            }
+            
+            Spacer(Modifier.height(20.dp))
+            
+            Button(
+                onClick = {},
+                colors = ButtonDefaults.buttonColors(
+                    containerColor = MaterialTheme.colorScheme.primary,
+                    contentColor = MaterialTheme.colorScheme.onPrimary
+                ),
+                modifier = Modifier.fillMaxWidth().height(50.dp)
+            ) {
+                Text("Desaturated Accent", fontWeight = FontWeight.Bold)
+            }
+        }
+    }
+}
+```
+- Material 3 handles Dark Mode semantics perfectly. Define your `darkColorScheme`.
+- Use `Color(0xFF1E1E1E)` for `surface` and `Color(0xFF121212)` for `background`. Compose will automatically map these to `Card`s and Scaffolds.
+
+## Do's and Don'ts
+- **DO**: Meet WCAG contrast standards. Just because it's dark doesn't mean the text should be illegibly dim.
+- **DON'T**: Use bright, highly saturated primary colors.
+
+## Limitations
+- This is a styling reference and does not replace environment-specific validation, accessibility testing, or expert review.
+- Ensure appropriate contrast ratios and responsive behaviors are verified separately.

package/bundled-skills/design-it/dashboard-design/SKILL.md

@@ -0,0 +1,331 @@
+---
+name: dashboard-design
+description: Web and App implementation guide for Dashboard Design. Trigger when user wants analytics-focused layouts, data visualization, and modular overview screens.
+date_added: "2026-06-17"
+risk: safe
+source: self
+source_type: self
+---
+
+# Dashboard Design
+
+> "Data at a glance. Organized, scannable, and highly functional."
+
+
+## When to Use
+Use this sub-style when the user's request matches the aesthetic described above. This is a child reference of the `design-it` skill and is not meant to be triggered directly.
+
+## Core Principles
+1. **Modular Grid**: The screen is broken down into functional "widgets" or cards. Usually a sidebar on the left and a top nav.
+2. **Data Hierarchy**: The most important numbers (KPIs) are large and usually at the top. Charts take up the middle, and lists/tables are at the bottom.
+3. **Muted Backgrounds**: A soft grey or off-white background so the white data cards stand out clearly.
+
+## Visual DNA
+- **Colors**: **Minimalist Slate** or **Earth-Grounded Elegance**. Avoid too many colors. Use red/green strictly for positive/negative trends.
+- **Typography**: Clean, tabular sans-serifs (`Inter`, `Roboto Mono` for numbers).
+- **Styling**: Very subtle shadows or 1px borders to separate cards.
+
+## Web Implementation
+- Use CSS Grid for the macro layout (Sidebar, Header, Main).
+- **CSS Example**:
+```css
+body {
+  background-color: #F8F9FA;
+  color: #212529;
+  font-family: 'Inter', sans-serif;
+  margin: 0;
+}
+
+.dashboard-layout {
+  display: grid;
+  grid-template-columns: 250px 1fr;
+  grid-template-rows: 70px 1fr;
+  height: 100vh;
+}
+
+.sidebar {
+  grid-row: 1 / 3;
+  background-color: #ffffff;
+  border-right: 1px solid #e9ecef;
+  padding: 20px;
+}
+
+.header {
+  background-color: #ffffff;
+  border-bottom: 1px solid #e9ecef;
+  padding: 0 30px;
+  display: flex;
+  align-items: center;
+}
+
+.main-content {
+  padding: 30px;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 20px;
+  overflow-y: auto;
+}
+
+/* KPI Card */
+.kpi-card {
+  background: #fff;
+  border-radius: 8px;
+  padding: 24px;
+  border: 1px solid #e9ecef;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
+}
+
+.kpi-title { font-size: 0.9rem; color: #6c757d; }
+.kpi-value { font-size: 2rem; font-weight: 700; margin-top: 8px; }
+.kpi-trend.positive { color: #28a745; }
+```
+
+## App Implementation
+
+### SwiftUI
+```swift
+struct DashboardView: View {
+    // For iPad/Mac, NavigationSplitView is ideal.
+    // For iPhone, we use a scrolling VGrid.
+    let columns = [
+        GridItem(.adaptive(minimum: 150), spacing: 16)
+    ]
+    
+    var body: some View {
+        NavigationView {
+            ScrollView {
+                LazyVGrid(columns: columns, spacing: 16) {
+                    KPICard(title: "Revenue", value: "$45,231", trend: "+12.5%", isPositive: true)
+                    KPICard(title: "Active Users", value: "2,405", trend: "+4.1%", isPositive: true)
+                    KPICard(title: "Churn Rate", value: "1.2%", trend: "-0.4%", isPositive: false)
+                    KPICard(title: "Avg. Session", value: "4m 12s", trend: "+0.1%", isPositive: true)
+                }
+                .padding()
+                
+                // Placeholder for Chart
+                RoundedRectangle(cornerRadius: 12)
+                    .fill(Color.white)
+                    .frame(height: 250)
+                    .overlay(Text("Chart Area").foregroundColor(.gray))
+                    .padding(.horizontal)
+            }
+            .background(Color(UIColor.systemGroupedBackground))
+            .navigationTitle("Overview")
+        }
+    }
+}
+
+struct KPICard: View {
+    let title: String
+    let value: String
+    let trend: String
+    let isPositive: Bool
+    
+    var body: some View {
+        VStack(alignment: .leading, spacing: 8) {
+            Text(title).font(.subheadline).foregroundColor(.secondary)
+            Text(value).font(.title2).fontWeight(.bold)
+            Text(trend)
+                .font(.caption)
+                .fontWeight(.semibold)
+                .foregroundColor(isPositive ? .green : .red)
+        }
+        .padding()
+        .frame(maxWidth: .infinity, alignment: .leading)
+        .background(Color.white)
+        .cornerRadius(12)
+        .shadow(color: Color.black.opacity(0.02), radius: 4, y: 2)
+    }
+}
+```
+- Dashboards require `.adaptive` grids. `LazyVGrid` handles rearranging 4 cards in a row on iPad down to 2 cards on iPhone automatically.
+- Use `Color(UIColor.systemGroupedBackground)` to provide that subtle off-white contrast against stark white cards.
+
+### Flutter
+```dart
+class DashboardScreen extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: const Color(0xFFF8F9FA),
+      appBar: AppBar(
+        title: const Text('Overview', style: TextStyle(color: Colors.black)),
+        backgroundColor: Colors.white,
+        elevation: 1,
+      ),
+      // On tablets, use a Row with NavigationRail. On mobile, use Drawer.
+      drawer: const Drawer(), 
+      body: CustomScrollView(
+        slivers: [
+          SliverPadding(
+            padding: const EdgeInsets.all(16),
+            sliver: SliverGrid.extent(
+              maxCrossAxisExtent: 200, // Adapts layout based on width
+              mainAxisSpacing: 16,
+              crossAxisSpacing: 16,
+              childAspectRatio: 1.5,
+              children: [
+                _buildKPI('Revenue', '\$45,231', '+12.5%', true),
+                _buildKPI('Active Users', '2,405', '+4.1%', true),
+                _buildKPI('Churn Rate', '1.2%', '-0.4%', false),
+                _buildKPI('Avg. Session', '4m 12s', '+0.1%', true),
+              ],
+            ),
+          ),
+          SliverPadding(
+            padding: const EdgeInsets.symmetric(horizontal: 16),
+            sliver: SliverToBoxAdapter(
+              child: Container(
+                height: 250,
+                decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(12)),
+                child: const Center(child: Text('Chart Area', style: TextStyle(color: Colors.grey))),
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildKPI(String title, String value, String trend, bool isPositive) {
+    return Container(
+      padding: const EdgeInsets.all(16),
+      decoration: BoxDecoration(
+        color: Colors.white,
+        borderRadius: BorderRadius.circular(12),
+        border: Border.all(color: Colors.grey[200]!),
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          Text(title, style: const TextStyle(color: Colors.grey, fontSize: 14)),
+          const SizedBox(height: 8),
+          Text(value, style: const TextStyle(fontSize: 24, fontWeight: FontWeight.bold)),
+          Text(trend, style: TextStyle(color: isPositive ? Colors.green : Colors.red, fontWeight: FontWeight.w600)),
+        ],
+      ),
+    );
+  }
+}
+```
+- `SliverGrid.extent` with a `maxCrossAxisExtent` is the responsive magic bullet for Flutter dashboards. It handles varying screen widths flawlessly.
+- For charts, the `fl_chart` package is the gold standard in Flutter.
+
+### React Native
+```jsx
+const DashboardScreen = () => {
+  return (
+    <ScrollView style={{ flex: 1, backgroundColor: '#F8F9FA' }}>
+      <View style={{ padding: 16, flexDirection: 'row', flexWrap: 'wrap', gap: 16 }}>
+        <KPICard title="Revenue" value="$45,231" trend="+12.5%" isPositive={true} />
+        <KPICard title="Users" value="2,405" trend="+4.1%" isPositive={true} />
+        <KPICard title="Churn" value="1.2%" trend="-0.4%" isPositive={false} />
+        <KPICard title="Session" value="4m 12s" trend="+0.1%" isPositive={true} />
+      </View>
+      
+      <View style={{ paddingHorizontal: 16, paddingBottom: 32 }}>
+        <View style={{ height: 250, backgroundColor: '#FFF', borderRadius: 12, justifyContent: 'center', alignItems: 'center' }}>
+          <Text style={{ color: '#999' }}>Chart Area</Text>
+        </View>
+      </View>
+    </ScrollView>
+  );
+};
+
+const KPICard = ({ title, value, trend, isPositive }) => (
+  <View style={{
+    backgroundColor: '#FFF',
+    padding: 16,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: '#E9ECEF',
+    flexBasis: '47%', // roughly half width minus gap
+    minWidth: 150
+  }}>
+    <Text style={{ color: '#6C757D', fontSize: 14, marginBottom: 4 }}>{title}</Text>
+    <Text style={{ fontSize: 22, fontWeight: '700', marginBottom: 4 }}>{value}</Text>
+    <Text style={{ color: isPositive ? '#28A745' : '#DC3545', fontWeight: '600', fontSize: 12 }}>{trend}</Text>
+  </View>
+);
+```
+- To make responsive flex grids in React Native, use `flexDirection: 'row'`, `flexWrap: 'wrap'`, and set the children to `flexBasis: '47%'`.
+- For heavy data visualization, look into `victory-native` or `@shopify/react-native-skia`.
+
+### Jetpack Compose
+```kotlin
+@Composable
+fun DashboardScreen() {
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(Color(0xFFF8F9FA))
+            .verticalScroll(rememberScrollState())
+    ) {
+        // Top App Bar substitute
+        Text(
+            text = "Overview",
+            style = MaterialTheme.typography.headlineSmall,
+            fontWeight = FontWeight.Bold,
+            modifier = Modifier.padding(16.dp)
+        )
+
+        // KPI Grid
+        LazyVerticalGrid(
+            columns = GridCells.Adaptive(minSize = 150.dp),
+            contentPadding = PaddingValues(horizontal = 16.dp),
+            horizontalArrangement = Arrangement.spacedBy(16.dp),
+            verticalArrangement = Arrangement.spacedBy(16.dp),
+            modifier = Modifier.heightIn(max = 400.dp) // Bound the grid height in scrollview
+        ) {
+            item { KPICard("Revenue", "$45,231", "+12.5%", true) }
+            item { KPICard("Active Users", "2,405", "+4.1%", true) }
+            item { KPICard("Churn Rate", "1.2%", "-0.4%", false) }
+            item { KPICard("Avg. Session", "4m 12s", "+0.1%", true) }
+        }
+
+        Spacer(Modifier.height(16.dp))
+
+        // Chart Area
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(horizontal = 16.dp)
+                .height(250.dp)
+                .background(Color.White, RoundedCornerShape(12.dp))
+                .border(1.dp, Color(0xFFE9ECEF), RoundedCornerShape(12.dp)),
+            contentAlignment = Alignment.Center
+        ) {
+            Text("Chart Area", color = Color.Gray)
+        }
+        
+        Spacer(Modifier.height(32.dp))
+    }
+}
+
+@Composable
+fun KPICard(title: String, value: String, trend: String, isPositive: Boolean) {
+    Column(
+        modifier = Modifier
+            .background(Color.White, RoundedCornerShape(8.dp))
+            .border(1.dp, Color(0xFFE9ECEF), RoundedCornerShape(8.dp))
+            .padding(16.dp)
+    ) {
+        Text(title, color = Color.Gray, fontSize = 14.sp)
+        Spacer(Modifier.height(4.dp))
+        Text(value, fontSize = 22.sp, fontWeight = FontWeight.Bold)
+        Spacer(Modifier.height(4.dp))
+        Text(trend, color = if (isPositive) Color(0xFF28A745) else Color(0xFFDC3545), fontWeight = FontWeight.SemiBold, fontSize = 12.sp)
+    }
+}
+```
+- `GridCells.Adaptive(minSize = 150.dp)` creates the responsive card layout automatically.
+- Warning: Nesting `LazyVerticalGrid` inside a `Column` with `.verticalScroll` can cause height calculation issues. You must use `.heightIn(max=...)` on the grid, or completely convert the entire layout to a single `LazyVerticalGrid` where the chart is just a `GridItemSpan(maxLineSpan)` element.
+
+## Do's and Don'ts
+- **DO**: Right-align numbers in tables so they are easier to scan and compare.
+- **DON'T**: Clutter cards with unnecessary decorative images. The data is the decoration.
+
+## Limitations
+- This is a styling reference and does not replace environment-specific validation, accessibility testing, or expert review.
+- Ensure appropriate contrast ratios and responsive behaviors are verified separately.