LogoSkills

feature:presentation

Clean Architecture Presentation Layer generation (BLoC, Page, Widget, Tests, Widgetbook)

ํ•ญ๋ชฉ๋‚ด์šฉ
Invoke/feature:presentation
Aliases/presentation, /presentation:create
Categorypetmedi-workflow
Complexitystandard
MCP Serversserena, context7, magic

/feature:presentation#

Context Framework Note: This behavioral instruction activates when Claude Code users type /feature:presentation patterns.

Triggers#

  • When a new Feature Presentation Layer is needed
  • When BLoC, Page, Widget, and Route generation are needed
  • /feature:create orchestration Step 5

Context Trigger Pattern#

/feature:presentation {feature_name} {entity_name} [--options]

Parameters#

ParameterRequiredDescriptionExample
feature_name โœ… Feature module name (snake_case) community, chat
entity_name โœ… Entity name (PascalCase) Post, Message
--location โŒ Location application , common , console (default: application )
--pages โŒ Page list to generate "list, detail, create"

Behavioral Flow#

1. Existing Pattern Analysis#

Analyze existing Presentation Layer patterns using Serena MCP:
- feature/application/community/lib/src/presentation/bloc/post_list/post_list_bloc.dart
- feature/application/community/lib/src/presentation/bloc/post_list/post_list_event.dart
- feature/application/community/lib/src/presentation/bloc/post_list/post_list_state.dart

2. BLoC Event Generation (sealed class + private implementation)#

part of '{feature}_list_bloc.dart';

/// {Feature} ๋ชฉ๋ก ์ด๋ฒคํŠธ
@immutable
sealed class {Feature}ListEvent {
  const {Feature}ListEvent();

  // Factory constructors (Public API)
  const factory {Feature}ListEvent.loadRequested() = _LoadRequested;
  const factory {Feature}ListEvent.refreshRequested() = _RefreshRequested;
  const factory {Feature}ListEvent.categoryChanged({
    {Entity}Category? category,
  }) = _CategoryChanged;
}

// Private implementation classes
@immutable
final class _LoadRequested extends {Feature}ListEvent {
  const _LoadRequested();
}

@immutable
final class _RefreshRequested extends {Feature}ListEvent {
  const _RefreshRequested();
}

@immutable
final class _CategoryChanged extends {Feature}ListEvent {
  const _CategoryChanged({this.category});
  final {Entity}Category? category;
}

3. BLoC State Generation#

part of '{feature}_list_bloc.dart';

/// {Feature} ๋ชฉ๋ก ์ƒํƒœ
@immutable
sealed class {Feature}ListState {
  const {Feature}ListState({
    required this.{entity}s,
    required this.currentSort,
    this.currentCategory,
  });

  final List<{Entity}> {entity}s;
  final {Entity}Category? currentCategory;
  final {Entity}SortType currentSort;
}

@immutable
final class {Feature}ListInitial extends {Feature}ListState {
  const {Feature}ListInitial()
      : super({entity}s: const [], currentSort: {Entity}SortType.latest);
}

@immutable
final class {Feature}ListLoading extends {Feature}ListState { ... }

@immutable
final class {Feature}ListLoaded extends {Feature}ListState {
  // ... hasMore, total ์ถ”๊ฐ€
  // copyWith ๋ฉ”์„œ๋“œ ํฌํ•จ
}

@immutable
final class {Feature}ListError extends {Feature}ListState {
  // ... message ์ถ”๊ฐ€
}

4. BLoC Class Generation (Optional Constructor Injection)#

import 'package:dependencies/dependencies.dart';

part '{feature}_list_event.dart';
part '{feature}_list_state.dart';

/// {Feature} ๋ชฉ๋ก BLoC
class {Feature}ListBloc extends Bloc<{Feature}ListEvent, {Feature}ListState> {
  {Feature}ListBloc({
    Get{Entity}sUsecase? get{Entity}sUsecase,
  }) : _get{Entity}sUsecase = get{Entity}sUsecase ?? const Get{Entity}sUsecase(),
       super(const {Feature}ListInitial()) {
    on<_LoadRequested>(_onLoadRequested);
    on<_RefreshRequested>(_onRefreshRequested);
  }

  final Get{Entity}sUsecase _get{Entity}sUsecase;

  Future<void> _onLoadRequested(
    _LoadRequested event,
    Emitter<{Feature}ListState> emit,
  ) async {
    emit({Feature}ListLoading(...));

    // โœ… UseCase call
    final result = await _get{Entity}sUsecase(
      Get{Entity}sParams(
        limit: _pageSize,
        offset: _currentOffset,
        category: state.currentCategory,
      ),
    );

    result.fold(
      (failure) {
        if (!isClosed) {  // โœ… BLoC closed check
          emit({Feature}ListError(message: failure.message ?? '์˜ค๋ฅ˜'));
        }
      },
      ({entity}ListResult) {
        if (!isClosed) {
          emit({Feature}ListLoaded(...));
        }
      },
    );
  }
}

5. BLoC Test Generation#

void main() {
  late MockGet{Entity}sUsecase mockUsecase;

  setUpAll(registerFallbackValues);

  setUp(() {
    mockUsecase = MockGet{Entity}sUsecase();
  });

  blocTest<{Feature}ListBloc, {Feature}ListState>(
    '๋กœ๋“œ ์„ฑ๊ณต ์‹œ {Feature}ListLoaded ์ƒํƒœ',
    build: () => {Feature}ListBloc(
      get{Entity}sUsecase: mockUsecase,  // โœ… Direct mock injection
    ),
    setUp: () {
      when(() => mockUsecase(any()))
        .thenAnswer((_) async => Right(testResult));
    },
    act: (bloc) => bloc.add(const {Feature}ListEvent.loadRequested()),
    expect: () => [
      isA<{Feature}ListLoading>(),
      isA<{Feature}ListLoaded>(),
    ],
  );
}

6. Page Generation (BlocProvider wrapping)#

class {Feature}Page extends StatelessWidget {
  const {Feature}Page({super.key});

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) =>
          {Feature}ListBloc()..add(const {Feature}ListEvent.loadRequested()),
      child: const {Feature}View(),
    );
  }
}

class {Feature}View extends StatelessWidget {
  const {Feature}View({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('{Feature}')),
      body: BlocBuilder<{Feature}ListBloc, {Feature}ListState>(
        builder: (context, state) {
          return switch (state) {
            {Feature}ListInitial() => const SizedBox.shrink(),
            {Feature}ListLoading() => const Center(child: CircularProgressIndicator()),
            {Feature}ListLoaded(:final {entity}s) => ListView.builder(...),
            {Feature}ListError(:final message) => Center(child: Text('์˜ค๋ฅ˜: $message')),
          };
        },
      ),
    );
  }
}

7. Widget Generation (super.key last)#

class {Entity}Card extends StatelessWidget {
  const {Entity}Card({
    required this.{entity},
    this.onTap,
    super.key,  // โœ… Always last
  });

  final {Entity} {entity};
  final VoidCallback? onTap;

  @override
  Widget build(BuildContext context) { ... }
}

8. Widget Test Generation#

testWidgets('{์—”ํ‹ฐํ‹ฐ} ๋ชฉ๋ก ํ‘œ์‹œ', (tester) async {
  when(() => mockRepository.get{Entity}s(...))
    .thenAnswer((_) async => Right(testResult));

  await tester.pumpWidget(const MaterialApp(home: {Feature}Page()));
  await tester.pumpAndSettle();

  expect(find.byType({Entity}Card), findsNWidgets(2));
});

9. Route Generation#

@TypedGoRoute<{Feature}Route>(path: '/{feature}')
class {Feature}Route extends GoRouteData with ${Feature}Route {
  const {Feature}Route();

  static RouteBase get base => ${feature}Route;

  @override
  MaterialPage<void> buildPage(BuildContext context, GoRouterState state) {
    return const MaterialPage<void>(child: {Feature}Page());
  }
}

abstract class {Feature}RouteName {
  static const String path = '/{feature}';
}

10. Generate Widgetbook UseCase#

@widgetbook.UseCase(name: 'Default', type: {Entity}Card)
Widget build{Entity}CardUseCase(BuildContext context) {
  return {Entity}Card(
    {entity}: const {Entity}(id: 1, title: 'ํ…Œ์ŠคํŠธ', ...),
  );
}

11. BDD Test Integration (Optional)#

/bdd:generate generated separately via command:

# Generate BDD tests
/bdd:generate {feature_name} --location {location}

Generation๋˜๋Š” BDD File:

feature/{location}/{feature_name}/test/src/bdd/
โ”œโ”€โ”€ {feature}_list.feature
โ”œโ”€โ”€ {feature}_detail.feature
โ”œโ”€โ”€ {feature}_form.feature
โ”œโ”€โ”€ step/
โ”‚   โ””โ”€โ”€ {feature}_steps.dart
โ””โ”€โ”€ hooks/
    โ””โ”€โ”€ hooks.dart

BDD Scenario Examples:

Feature: {feature} List # {feature} ๋ชฉ๋ก
  As a user, I want to view the {feature} list. # ์‚ฌ์šฉ์ž๋กœ์„œ {feature} ๋ชฉ๋ก์„ ๋ณด๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค

  @smoke
  Scenario: List loads successfully # ๋ชฉ๋ก ๋กœ๋”ฉ ์„ฑ๊ณต
    Given the app is running # ์•ฑ์ด ์‹คํ–‰ ์ค‘์ž…๋‹ˆ๋‹ค
    When I navigate to the {feature} page # {feature} ํŽ˜์ด์ง€๋กœ ์ด๋™ํ•ฉ๋‹ˆ๋‹ค
    Then the {feature} list is displayed # {feature} ๋ชฉ๋ก์ด ๋ณด์ž…๋‹ˆ๋‹ค

Output Files#

feature/{location}/{feature_name}/lib/src/presentation/
โ”œโ”€โ”€ bloc/{feature}_list/
โ”‚   โ”œโ”€โ”€ {feature}_list_bloc.dart
โ”‚   โ”œโ”€โ”€ {feature}_list_event.dart
โ”‚   โ””โ”€โ”€ {feature}_list_state.dart
โ”œโ”€โ”€ page/
โ”‚   โ””โ”€โ”€ {feature}_page.dart
โ”œโ”€โ”€ widget/
โ”‚   โ””โ”€โ”€ {entity}_card.dart
โ””โ”€โ”€ route/
    โ””โ”€โ”€ {feature}_route.dart

feature/{location}/{feature_name}/test/
โ”œโ”€โ”€ presentation/
โ”‚   โ”œโ”€โ”€ bloc/{feature}_list_bloc_test.dart
โ”‚   โ””โ”€โ”€ page/{feature}_page_test.dart
โ””โ”€โ”€ src/bdd/                               # BDD ํ…Œ์ŠคํŠธ (์„ ํƒ)
    โ”œโ”€โ”€ {feature}_list.feature
    โ”œโ”€โ”€ {feature}_detail.feature
    โ”œโ”€โ”€ {feature}_form.feature
    โ”œโ”€โ”€ step/{feature}_steps.dart
    โ””โ”€โ”€ hooks/hooks.dart

app/petmedi_widgetbook/lib/src/{feature_name}/
โ””โ”€โ”€ {entity}_card_use_case.dart

MCP Integration#

  • Serena: Existing Presentation Layer Pattern Analysis
  • Context7: BLoC, GoRouter Document reference
  • Magic (21st.dev): UI ์ปดํฌ๋„ŒํŠธ Generation, ์ ‘๊ทผ์„ฑ ๊ฒ€์‚ฌ

Reference Agents#

Detailed implementation rules in ~/.claude/commands/agents/presentation-layer-agent.md reference

Core Rules Summary#

โœ… BLoC Pattern#

// Event: sealed class + factory + private implementation
sealed class {Feature}ListEvent {
  const factory {Feature}ListEvent.loadRequested() = _LoadRequested;
}

final class _LoadRequested extends {Feature}ListEvent {
  const _LoadRequested();
}

// BLoC: Optional Constructor Injection
class {Feature}ListBloc extends Bloc<...> {
  {Feature}ListBloc({
    Get{Entity}sUsecase? get{Entity}sUsecase,
  }) : _get{Entity}sUsecase = get{Entity}sUsecase ?? const Get{Entity}sUsecase(),
       super(...);

  final Get{Entity}sUsecase _get{Entity}sUsecase;

  Future<void> _onLoadRequested(...) async {
    final result = await _get{Entity}sUsecase(params);
    if (!isClosed) { emit(...); }  // โœ… Closed check
  }
}

โŒ Prohibited Patterns#

// โŒ getIt usage prohibited
// create: (_) => getIt<{Feature}Bloc>(),

// โŒ Key? key ํŒจํ„ด ๊ธˆ์ง€
// const {Entity}Card({Key? key}) : super(key: key);

Widget super.key Position#

const {Entity}Card({
  required this.{entity},  // required ๋จผ์ €
  this.onTap,              // optional ๋‹ค์Œ
  super.key,               // โœ… super.key ๋งˆ์ง€๋ง‰
});