PixelPilot uiux-flutter.instructions.md

OpenCode UI/UX 2026 — Flutter Integration Skill

This skill provides guidelines and best practices for integrating the OpenCode UI/UX 2026 design system within Flutter applications. It covers mapping design tokens to Flutter's ThemeData, implementing dark/light modes, handling navigation, displaying alerts, managing gestures, and adapting to platform-specific behaviors.

1. Design Tokens → ThemeData Mapping

Flutter's ThemeData is the central place to define the visual properties of your application. Mapping OpenCode design tokens (like var(--accent), var(--space-4)) to ThemeData ensures consistency and allows for easy theming.

Manual Mapping

For smaller projects or specific needs, you can manually map design tokens to ThemeData properties.

Step-by-step Instructions

1. Define a ThemeData object: Create a ThemeData instance and populate its properties (colors, text styles, spacing) using values derived from your design tokens.
2. Use Theme.of(context): Access these properties throughout your widget tree using Theme.of(context).colorScheme.primary or Theme.of(context).textTheme.bodyMedium.

Code Example

// lib/theme/app_theme.dart
import 'package:flutter/material.dart';

class AppTheme {
  static final Color _primaryColor = Color(0xFF0066FF); // Corresponds to var(--accent)
  static final Color _backgroundColor = Color(0xFFFFFFFF); // Corresponds to var(--bg) light
  static final Color _textColor = Color(0xFF0F1117); // Corresponds to var(--text) light

  static ThemeData lightTheme = ThemeData(
    brightness: Brightness.light,
    primaryColor: _primaryColor,
    colorScheme: ColorScheme.light(
      primary: _primaryColor,
      background: _backgroundColor,
      onBackground: _textColor,
      surface: Color(0xFFF7F8FA), // Corresponds to var(--surface) light
    ),
    textTheme: TextTheme(
      bodyMedium: TextStyle(color: _textColor, fontSize: 16.0), // Corresponds to var(--text-base)
      // Map other text styles
    ),
    // Define spacing using constants or extensions
    // For example, using a custom extension for spacing:
    // extension BuildContextExtension on BuildContext {
    //   double get space1 => 4.0;
    //   double get space2 => 8.0;
    // }
  );

  static ThemeData darkTheme = ThemeData(
    brightness: Brightness.dark,
    primaryColor: Color(0xFF4D8EFF), // Corresponds to var(--accent) dark
    colorScheme: ColorScheme.dark(
      primary: Color(0xFF4D8EFF),
      background: Color(0xFF0A0B0E), // Corresponds to var(--bg) dark
      onBackground: Color(0xFFEDF0F5), // Corresponds to var(--text) dark
      surface: Color(0xFF13151A), // Corresponds to var(--surface) dark
    ),
    textTheme: TextTheme(
      bodyMedium: TextStyle(color: Color(0xFFEDF0F5), fontSize: 16.0),
    ),
  );
}

// Usage in a widget:
// Text(
//   'Hello OpenCode',
//   style: Theme.of(context).textTheme.bodyMedium,
// )
// Container(
//   color: Theme.of(context).colorScheme.primary,
//   padding: EdgeInsets.all(context.space4), // If using custom spacing extension
// )