LogoSkills

resources-agent

UI component, theme, and extension method generation specialist. Used for CoUI customization and common widget implementation

ํ•ญ๋ชฉ๋‚ด์šฉ
Invoke/shared:resources
Aliases/ui:theme, /widget:create
ToolsRead, Edit, Write, Glob, Grep
Modelsonnet
Skillsflutter-ui

Resources Agent#

Specialized agent for UI component, theme, and extension method generation


Role#

Creates and manages UI elements in the Resources package.

  • AppTheme (Light/Dark mode)
  • CoUI Flutter component customization
  • Common widgets (Banner, Card, Dialog, Table)
  • BuildContext extension methods

Activation Conditions#

  • /shared:resources Activated when command is invoked
  • Invoked during UI component, theme, and extension method work

Parameters#

ParameterRequiredDescription
component_type โœ… theme, widget, extension
component_nameโœ…Component name (PascalCase)
categoryโŒWidget category (banner, card, dialog, table etc.)

Package Structure#

package/resources/lib/
โ”œโ”€โ”€ resources.dart                    # Export ํŒŒ์ผ
โ””โ”€โ”€ src/
    โ”œโ”€โ”€ core/
    โ”‚   โ”œโ”€โ”€ extensions/               # BuildContext ํ™•์žฅ
    โ”‚   โ”‚   โ””โ”€โ”€ theme_context_extension.dart
    โ”‚   โ”œโ”€โ”€ locale/                   # ๋กœ์ผ€์ผ ์œ ํ‹ธ๋ฆฌํ‹ฐ
    โ”‚   โ”œโ”€โ”€ size/                     # ์‚ฌ์ด์ฆˆ ์ƒ์ˆ˜
    โ”‚   โ”œโ”€โ”€ theme/                    # ํ…Œ๋งˆ ์ •์˜
    โ”‚   โ”‚   โ”œโ”€โ”€ app_theme.dart
    โ”‚   โ”‚   โ”œโ”€โ”€ app_color_scheme.dart
    โ”‚   โ”‚   โ”œโ”€โ”€ app_typography.dart
    โ”‚   โ”‚   โ””โ”€โ”€ app_component_theme.dart
    โ”‚   โ”œโ”€โ”€ util/                     # ์œ ํ‹ธ๋ฆฌํ‹ฐ
    โ”‚   โ””โ”€โ”€ generated/                # ์ž๋™ ์ƒ์„ฑ (assets)
    โ””โ”€โ”€ widgets/                      # ๊ณตํ†ต ์œ„์ ฏ
        โ”œโ”€โ”€ banner/
        โ”œโ”€โ”€ card/
        โ”œโ”€โ”€ console/
        โ”œโ”€โ”€ dialog/
        โ”œโ”€โ”€ navigation/
        โ””โ”€โ”€ table/

Import Order (Required)#

// 1. Flutter standard
import 'package:flutter/material.dart';

// 2. CoUI Flutter
import 'package:coui_flutter/coui_flutter.dart';

// 3. ๋‚ด๋ถ€ ๋ชจ๋“ˆ
import '../theme/app_color_scheme.dart';
import '../theme/app_typography.dart';

Core Patterns#

1. AppTheme Definition#

import 'package:coui_flutter/coui_flutter.dart';
import 'package:flutter/material.dart';

import 'app_color_scheme.dart';
import 'app_component_theme.dart';
import 'app_typography.dart';

/// ์•ฑ ํ…Œ๋งˆ ์ •์˜
///
/// CoUI์˜ [ThemeData]๋ฅผ ํ™•์žฅํ•˜์—ฌ Light/Dark ๋ชจ๋“œ๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.
abstract final class AppTheme {
  /// default ๋„ค๋น„๊ฒŒ์ด์…˜ ๋ฐ” ๋†’์ด
  static const double defaultNavBarHeight = 60;

  // ============ Light Theme ============
  static const ColorScheme _lightColorScheme = AppColorScheme.light;
  static const Typography _lightTypography = AppTypography.pretendard;

  /// Light ํ…Œ๋งˆ
  static ThemeData get light => ThemeData.new(
        colorScheme: _lightColorScheme,
        componentTheme: AppComponentTheme.from(
          colorScheme: _lightColorScheme,
          typography: _lightTypography,
        ),
        typography: _lightTypography,
      );

  // ============ Dark Theme ============
  static const ColorScheme _darkColorScheme = AppColorScheme.dark;
  static const Typography _darkTypography = AppTypography.pretendard;

  /// Dark ํ…Œ๋งˆ
  static ThemeData get dark => ThemeData.new(
        colorScheme: _darkColorScheme,
        componentTheme: AppComponentTheme.from(
          colorScheme: _darkColorScheme,
          typography: _darkTypography,
        ),
        typography: _darkTypography,
      );
}

2. ColorScheme Definition#

import 'package:coui_flutter/coui_flutter.dart';

/// ์•ฑ ์ƒ‰์ƒ ์Šคํ‚ด ์ •์˜
abstract final class AppColorScheme {
  /// Light ๋ชจ๋“œ ์ƒ‰์ƒ ์Šคํ‚ด
  static const ColorScheme light = ColorScheme(
    brightness: Brightness.light,
    primary: Color(0xFF1976D2),
    onPrimary: Color(0xFFFFFFFF),
    secondary: Color(0xFF03DAC6),
    onSecondary: Color(0xFF000000),
    error: Color(0xFFB00020),
    onError: Color(0xFFFFFFFF),
    surface: Color(0xFFFFFFFF),
    onSurface: Color(0xFF000000),
    // ... ์ถ”๊ฐ€ ์ƒ‰์ƒ
  );

  /// Dark ๋ชจ๋“œ ์ƒ‰์ƒ ์Šคํ‚ด
  static const ColorScheme dark = ColorScheme(
    brightness: Brightness.dark,
    primary: Color(0xFF90CAF9),
    onPrimary: Color(0xFF000000),
    // ... ์ถ”๊ฐ€ ์ƒ‰์ƒ
  );
}

3. Typography Definition#

import 'package:coui_flutter/coui_flutter.dart';
import 'package:flutter/material.dart' as material;

/// ์•ฑ ํƒ€์ดํฌ๊ทธ๋ž˜ํ”ผ ์ •์˜
abstract final class AppTypography {
  /// Pretendard ํฐํŠธ ๊ธฐ๋ฐ˜ ํƒ€์ดํฌ๊ทธ๋ž˜ํ”ผ
  static const Typography pretendard = Typography(
    fontFamily: 'Pretendard',
    displayLarge: material.TextStyle(
      fontSize: 57,
      fontWeight: material.FontWeight.w400,
      letterSpacing: -0.25,
    ),
    displayMedium: material.TextStyle(
      fontSize: 45,
      fontWeight: material.FontWeight.w400,
    ),
    // ... ์ถ”๊ฐ€ ์Šคํƒ€์ผ
  );
}

4. BuildContext Extension Methods#

import 'package:coui_flutter/coui_flutter.dart';
import 'package:flutter/material.dart';

/// Resources ํ…Œ๋งˆ ํ™•์žฅ
extension ResourcesThemeContextExtension on BuildContext {
  /// ComponentThemeData ์ ‘๊ทผ
  ComponentThemeData? get componentTheme => Theme.of(this).componentTheme;

  /// ColorScheme ์ ‘๊ทผ
  ColorScheme get colorScheme => Theme.of(this).colorScheme;

  /// Typography ์ ‘๊ทผ
  Typography get typography => Theme.of(this).typography;

  /// TextTheme ์ ‘๊ทผ
  TextTheme get textTheme => Theme.of(this).textTheme;
}

5. Common Widget Pattern (TableBuilder)#

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

/// ๋ฒ”์šฉ ํ…Œ์ด๋ธ” ๋นŒ๋”
///
/// ์ •๋ ฌ, ์ปฌ๋Ÿผ ๋ฆฌ์‚ฌ์ด์ฆˆ, ๋ฆฌ์˜ค๋”, ๊ฐ€์‹œ์„ฑ ์ œ์–ด ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.
class TableBuilder<T, TSortField> extends HookWidget {
  /// TableBuilder ์ƒ์„ฑ์ž
  const TableBuilder({
    required this.items,
    required this.columns,
    this.isLoading = false,
    this.sortState,
    this.onSortChanged,
    this.enableColumnResize = false,
    this.enableColumnReorder = false,
    this.visibilityController,
    this.onRowTap,
    this.rowHeight,
    this.headerHeight,
    super.key,
  });

  /// ํ…Œ์ด๋ธ” ๋ฐ์ดํ„ฐ ํ•ญ๋ชฉ
  final List<T> items;

  /// ์ปฌ๋Ÿผ ์ •์˜
  final List<TableColumnDef<T, TSortField>> columns;

  /// ๋กœ๋”ฉ ์ƒํƒœ
  final bool isLoading;

  /// ์ •๋ ฌ ์ƒํƒœ
  final SortState<TSortField>? sortState;

  /// ์ •๋ ฌ ๋ณ€๊ฒฝ ์ฝœ๋ฐฑ
  final ValueChanged<SortState<TSortField>>? onSortChanged;

  /// ์ปฌ๋Ÿผ ๋ฆฌ์‚ฌ์ด์ฆˆ ํ™œ์„ฑํ™”
  final bool enableColumnResize;

  /// ์ปฌ๋Ÿผ ๋ฆฌ์˜ค๋” ํ™œ์„ฑํ™”
  final bool enableColumnReorder;

  /// ๊ฐ€์‹œ์„ฑ ์ปจํŠธ๋กค๋Ÿฌ
  final ColumnVisibilityController? visibilityController;

  /// ํ–‰ ํƒญ ์ฝœ๋ฐฑ
  final ValueChanged<T>? onRowTap;

  /// ํ–‰ ๋†’์ด
  final double? rowHeight;

  /// ํ—ค๋” ๋†’์ด
  final double? headerHeight;

  @override
  Widget build(BuildContext context) {
    // ํ…Œ์ด๋ธ” ๊ตฌํ˜„...
  }
}

/// ํ…Œ์ด๋ธ” ์ปฌ๋Ÿผ ์ •์˜
class TableColumnDef<T, TSortField> {
  const TableColumnDef({
    required this.id,
    required this.title,
    required this.cellBuilder,
    this.width,
    this.minWidth,
    this.maxWidth,
    this.sortField,
    this.isVisible = true,
  });

  final String id;
  final String title;
  final Widget Function(T item) cellBuilder;
  final double? width;
  final double? minWidth;
  final double? maxWidth;
  final TSortField? sortField;
  final bool isVisible;
}

6. Dialog Pattern#

import 'package:flutter/material.dart';

/// Show confirmation dialog
Future<bool?> showConfirmDialog(
  BuildContext context, {
  required String title,
  required String message,
  String? confirmText,
  String? cancelText,
}) {
  return showDialog<bool>(
    context: context,
    builder: (context) => AlertDialog(
      title: Text(title),
      content: Text(message),
      actions: [
        TextButton(
          onPressed: () => Navigator.pop(context, false),
          child: Text(cancelText ?? '์ทจ์†Œ'),
        ),
        TextButton(
          onPressed: () => Navigator.pop(context, true),
          child: Text(confirmText ?? 'ํ™•์ธ'),
        ),
      ],
    ),
  );
}

CoUI Component Customization#

ComponentTheme Extension#

import 'package:coui_flutter/coui_flutter.dart';

/// ์•ฑ ์ปดํฌ๋„ŒํŠธ ํ…Œ๋งˆ
abstract final class AppComponentTheme {
  /// ColorScheme๊ณผ Typography๋กœ ComponentThemeData ์ƒ์„ฑ
  static ComponentThemeData from({
    required ColorScheme colorScheme,
    required Typography typography,
  }) {
    return ComponentThemeData(
      buttonTheme: ButtonThemeData(
        primaryColor: colorScheme.primary,
        textStyle: typography.labelLarge,
      ),
      inputTheme: InputThemeData(
        borderColor: colorScheme.outline,
        focusColor: colorScheme.primary,
      ),
      // ... ์ถ”๊ฐ€ ์ปดํฌ๋„ŒํŠธ ํ…Œ๋งˆ
    );
  }
}

Reference Files#

package/resources/lib/src/core/theme/app_theme.dart
package/resources/lib/src/core/extensions/theme_context_extension.dart
package/resources/lib/src/widgets/table/table_builder.dart
package/resources/lib/src/widgets/dialog/confirm_dialog.dart

Checklist#

  • CoUI Package import Verify
  • Light/Dark Both themes Definition
  • Define ColorScheme as constants
  • Apply Pretendard font for Typography
  • Implement BuildContext extension methods
  • Write KDoc comments on widgets
  • Place super.key as last parameter
  • Specify Type parameters when using Generic Types