【AWS MCP Servers】 Frontend MCP ServerをClaude Codeで使ってみた

# BrushTrack Application Analysis

## Application Overview
- **Name**: BrushTrack
- **Description**: 歯磨き習慣を楽しく管理・改善するためのWebアプリケーション
- **Target Users**: 歯磨き習慣を改善したい個人、子供の歯磨きを管理したい親
- **Primary Purpose**: 毎日の歯磨きを記録し、習慣化を促進

## Core Features (Prioritized)
1. **歯磨き記録機能**
   - 朝・夜の歯磨き完了をワンタップで記録
   - 歯磨き時間の記録（2分タイマー機能）
   - 記録時にメモを追加可能
   - Success criteria: ユーザーが簡単に毎日の記録を残せる
   - Backend integration: 記録データの永続化に必要

2. **進捗トラッキング**
   - 連続記録日数（ストリーク）表示
   - カレンダービューで履歴確認
   - 月間・週間の達成率表示
   - Success criteria: 視覚的に進捗が確認できる
   - Backend integration: 履歴データの保存・取得に必要

3. **リマインダー機能**
   - 朝・夜の歯磨き時間にプッシュ通知
   - カスタマイズ可能な通知時間設定
   - Success criteria: 設定した時間に通知が届く
   - Backend integration: 通知設定の保存に必要

4. **歯磨きアドバイス・ガイダンス**
   - 正しい歯磨き方法のガイド表示
   - 2分間タイマーと音声ガイド
   - 歯磨きのコツやアドバイス表示
   - Success criteria: ユーザーが適切な歯磨き方法を学べる
   - Backend integration: コンテンツ管理に必要

## Page List
1. **Dashboard (ダッシュボード)**
   - Purpose: 今日の歯磨き状況確認と全体的な進捗の可視化
   - Components: 
     - 今日の歯磨きステータスカード（朝・夜）
     - 現在のストリーク表示
     - 週間達成率チャート
     - クイック記録ボタン
     - 最近の記録リスト
   - Data: 本日の記録、ストリーク数、週間達成率、最近の記録履歴

2. **Record (記録)**
   - Purpose: 歯磨きの実行と記録
   - Components:
     - 2分カウントダウンタイマー
     - 進捗バー
     - 一時停止/再開ボタン
     - 完了記録ボタン
     - メモ入力フィールド
     - 歯磨きガイド表示
   - Data: タイマー状態、記録データ、ガイダンステキスト

3. **History (履歴)**
   - Purpose: 過去の歯磨き記録の確認
   - Components:
     - カレンダービュー（記録済み日をマーク）
     - 月間統計サマリー
     - 日付選択機能
     - 詳細履歴リスト
     - フィルター機能（朝/夜）
   - Data: 全記録履歴、月間統計、選択日の詳細

4. **Progress (進捗)**
   - Purpose: 長期的な進捗と達成状況の可視化
   - Components:
     - 現在のストリーク表示（大きなカード）
     - 最長ストリーク記録
     - 達成バッジ一覧
     - 月別達成率グラフ
     - 週別トレンドチャート
     - 統計サマリー（総記録日数など）
   - Data: ストリーク情報、達成バッジ、統計データ

5. **Settings (設定)**
   - Purpose: アプリケーションの設定とカスタマイズ
   - Components:
     - リマインダー時間設定（朝・夜）
     - 通知のオン/オフスイッチ
     - 目標設定（1日の歯磨き回数）
     - テーマ選択
     - プロフィール管理
   - Data: ユーザー設定、通知設定、プロフィール情報

## Data Models
1. **BrushingRecord**
   - id: string
   - userId: string
   - timestamp: Date
   - timeOfDay: 'morning' | 'night'
   - duration: number (seconds)
   - notes: string (optional)
   - completed: boolean

2. **UserProfile**
   - id: string
   - name: string
   - email: string
   - avatar: string (optional)
   - createdAt: Date

3. **UserSettings**
   - userId: string
   - morningReminder: string (time)
   - nightReminder: string (time)
   - notificationsEnabled: boolean
   - dailyGoal: number
   - theme: 'light' | 'dark'

4. **StreakInfo**
   - userId: string
   - currentStreak: number
   - longestStreak: number
   - lastBrushingDate: Date

5. **Achievement**
   - id: string
   - title: string
   - description: string
   - icon: string
   - unlockedAt: Date (optional)

## UI Components
1. **Dashboard Page**
   - shadcn: Card, Button, Progress, Badge, Tabs, Avatar
   - Custom: BrushingStatusCard, StreakDisplay, QuickRecordButton, RecentActivityList

2. **Record Page**
   - shadcn: Card, Button, Progress, Textarea, Dialog
   - Custom: BrushingTimer, TimerControls, BrushingGuide

3. **History Page**
   - shadcn: Card, Calendar, Select, Badge, Tabs, ScrollArea
   - Custom: BrushingCalendar, DailyDetailCard, MonthlyStats

4. **Progress Page**
   - shadcn: Card, Badge, Progress, Tabs
   - Recharts: LineChart, BarChart, RadialChart
   - Custom: StreakCard, AchievementGrid, ProgressChart

5. **Settings Page**
   - shadcn: Form, Input, Switch, Select, Button, Separator, Card
   - Custom: ReminderTimeInput, NotificationSettings

# Implementation Checklist

## Phase 1: Setup & Configuration
- [x] Generate a modern app name/description and a project folder name [brush-track] based on the app name
- [x] Clone repo to [brush-track] folder and install dependencies
- [ ] Update the README.md based on your analysis of the codebase and frontend stack
- [ ] Update package.json name and app name references
- [ ] Update app name and description on the login page

## Phase 2: Branding & Assets
- [ ] Generate favicon.png (歯ブラシアイコン、320x320)
- [ ] Generate splash.png (歯磨きコンセプトイラスト、1024x1024)

## Phase 3: Backend Configuration
- [ ] Create mock amplify_outputs.json file

## Phase 4: State Management
- [ ] Extend Zustand store with BrushingRecord data model
- [ ] Add UserSettings to store
- [ ] Add StreakInfo to store
- [ ] Add sample brushing records data
- [ ] Add achievements data

## Phase 5: UI Development - Core Pages
- [ ] Create Dashboard page with brushing status cards
- [ ] Create Record page with timer functionality
- [ ] Create History page with calendar view
- [ ] Create Progress page with charts and stats
- [ ] Update Settings page for app-specific preferences

## Phase 6: UI Development - Components
- [ ] Create BrushingTimer component
- [ ] Create StreakDisplay component
- [ ] Create BrushingCalendar component
- [ ] Create QuickRecordButton component
- [ ] Create AchievementGrid component
- [ ] Install additional shadcn components as needed

## Phase 7: Navigation & Routing
- [ ] Add new routes for Record, History, Progress pages
- [ ] Update app-sidebar.tsx with new navigation items
- [ ] Update navigation icons to match functionality
- [ ] Ensure proper route protection for authenticated users

## Phase 8: Final Polish
- [ ] Add loading states and error handling
- [ ] Test all features and navigation
- [ ] Verify responsive design on mobile
- [ ] Ensure all required pages are created and wired up
- [ ] Run lint and typecheck commands

# Web application development instructions                                                                                                                       
## Introduction

This document provides instructions to create a custom web applications based on a frontend starter template. The template uses React, Tailwind CSS, React Router v7, shadcn UI components, AWS Amplify, and Zustand for state management. You should use this information to analyze user requirements, suggest appropriate approaches, and provide implementation steps for customizing the reference template to meet their specific needs. Follow the structured approach outlined below to deliver high-quality applications efficiently while maintaining consistency with the existing architecture and best practices.

## Important

- Authentication, basic routing, and private/public layouts are already implemented

- Sample dashboard and settings pages exist as reference

- AWS backend integration will be handled separately

- If you run into issues, you MUST seek guidance from the AWSLabs Frontend MCP server under the "Troubleshooting" topic.

## Project Implementation Flow

### 0. Requirements Analysis

- Generate a modern app name and description

- Identify the primary color for the app if provided by the user, if not use shadcn defaults (usually #171717)

- Identify target users and primary purpose

- List and prioritize core features

- Map features to existing template structure

- Identify new pages and components needed

- Reuse the current authentication layouts and flow

- Reuse the current private page layout, with the application sidebar on the left and page content on the right

- Always include a dashboard page as the start page, and incorporate charts and lists based on the functional needs of the application

- Incorporate an AI Chat assistant to the application if helpful

- Make the UI design contemporary, clean and minimal.

### 1. Document your plan

Once you have completed your analysis, you MUST create a CHECKLIST.md in the root folder of the project with two clearly defined sections:

**Section 1: Application Analysis**

- Application name and description

- Target users and primary purpose

- Core features (prioritized list)

  - Be specific and detailed for each feature

  - Include success criteria for each feature

  - Identify which features require backend integration

- Complete page list with brief descriptions for each page

  - Detail EVERY page needed for the application

  - Include purpose, key components, and data needs for each page

  - Map pages to features they support

- Data models/entities needed

- UI components required for implementation

  - List shadcn components to be used for each page

  - Identify any custom components needed

**Example: Task Tracking App**

```markdown

# TaskFlow Application Analysis

## Application Overview

- **Name**: TaskFlow

- **Description**: A collaborative task tracking application for small teams

- **Target Users**: Small teams (5-15 people), project managers, freelancers

- **Primary Purpose**: Simplify task management and improve team coordination

## Core Features (Prioritized)

1. **Task Management**

   - Create, edit, delete tasks with title, description, due date, priority

   - Assign tasks to team members

   - Success criteria: Users can perform all CRUD operations on tasks

   - Backend integration: Required for persistent storage

2. **Task Board Views**

   - Kanban board with customizable columns (Todo, In Progress, Done)

   - List view with sorting and filtering options

   - Success criteria: Users can switch between views and drag-drop tasks

   - Backend integration: Required for state persistence

3. **Team Collaboration**

   - Comment on tasks

   - @mention team members

   - Success criteria: Users receive notifications when mentioned

   - Backend integration: Required for notifications

## Page List

1. **Dashboard**

   - Purpose: Overview of tasks, recent activity, and team performance

   - Components: Task summary cards, activity feed, progress charts

   - Data: Task counts by status, recent activities, completion rates

2. **Task Board**

   - Purpose: Visual kanban-style task management

   - Components: Drag-drop columns, task cards, filtering controls

   - Data: All tasks with status, assignee, priority information

3. **Task Details**

   - Purpose: View and edit detailed task information

   - Components: Form fields, comments section, activity log

   - Data: Single task with full details and comment history

4. **Team Members**

   - Purpose: Manage team members and view their tasks

   - Components: User list, user profile cards, assigned tasks

   - Data: User profiles and task assignments

5. **Settings**

   - Purpose: Configure application preferences

   - Components: Form fields for notification settings, theme options

   - Data: User preferences

## Data Models

1. **Task**

   - id, title, description, status, priority, dueDate, assigneeId, createdAt

2. **User**

   - id, name, email, avatar, role

3. **Comment**

   - id, taskId, userId, content, createdAt

## UI Components

1. **Dashboard Page**

   - shadcn: Card, Tabs, Avatar, Button, Select

   - Custom: TaskSummaryCard, ActivityFeed

2. **Task Board Page**

   - shadcn: Card, Badge, Avatar, Button, DropdownMenu

   - Custom: DraggableTaskCard, KanbanColumn

3. **Task Details Page**

   - shadcn: Form, Input, Textarea, Select, Button, Tabs, ScrollArea

   - Custom: CommentThread, TaskActivityLog

4. **Team Members Page**

   - shadcn: Card, Avatar, Table, Dialog, Badge

   - Custom: UserProfileCard, TaskAssignmentList

5. **Settings Page**

   - shadcn: Form, Switch, RadioGroup, Separator, Button

   - Custom: NotificationPreferences

**Section 2: Implementation Checklist**

- [ ] Generate a modern app name/description and a project folder name [app-name] based on the app name

- [ ] Clone repo to [app-name] folder and install dependencies

- [ ] Update the README.md based on your analysis of the codebase and frontend stack

- [ ] Update package.json name and app name references

- [ ] Update app name and description on the login page

- [ ] Generate favicon.png and splash.png images using nova canvas MCP server

- [ ] Create mock amplify_outputs.json file

- [ ] Add/update pages and required components, using shadcn components

- [ ] Extend routing structure

- [ ] Add sample data to Zustand store

- [ ] Update navigation

- [ ] Ensure all required pages are created and wired up

As you go through the implementation, keep updating the checklist to ensure that you have completely created all the pages and features necessary to meet the functional needs of the application. The analysis section should be completed BEFORE beginning any implementation tasks.

### 2. Setup & Configuration

```bash
# Clone repository into [app-name] folder
git clone -b starterkits https://github.com/awslabs/mcp.git [app-name]
# navigate to the frontend folder
cd [app-name]/frontend
# install packages
npm install

Analyze this code base after cloning to understand how it is structured and the key architectural patterns and frontend stack.

Based on your analysis, update the README.md with an overview of the functional goal of the application and the frontend stack, including specific versions (e.g. React 18 instead of just React)

**PHASE VERIFICATION**: Ensure repository is cloned successfully and all dependencies are installed without errors. Confirm README.md is updated with accurate information.

### 3. Application Branding & Identity

- Update package.json with new application name

- Update app name references in components (e.g., app-sidebar.tsx)

- Update the app name and description on the login page

- Update document title and metadata in index.html

- Customize the primary color for the application using Tailwind if the user has provided a custom primary color for the app

- When setting primary color, you MUST update both the Tailwind and Amplify theme to keep them in sync

- Use Nova Canvas MCP Server to create the following 2 images:

  - **favicon.png (320x320)**

	- Create a minimal abstract icon that represents the app concept

	- Use monochromatic shades of the primary color

	- Design should be simple enough to be recognizable at small sizes

	- Avoid text or complex details that won't scale down well

  - **splash.png (1024x1024)**

	- Create a compelling minimal abstract conceptual editorial illustration relevant to the concept of the app

	- Use primarily dark shades of the primary color with subtle accent colors if appropriate

	- Design should convey the app's purpose through abstract visual elements

	- Can include subtle patterns, gradients, or geometric shapes

- You MUST use 'mv' to move the generated image and overwrite the existing image, as users can be on Windows or Unix systems and the 'move' command might not be available.

```bash
mv source-folder/file destination-folder/file

- Replace existing app icon references with generated favicon.png

**PHASE VERIFICATION**: Confirm all branding elements are consistently updated throughout the application. Verify both favicon.png and splash.png are properly generated and placed in the public folder.

### 4. UI Development

- Add new pages following existing patterns

- Reuse existing pages, layouts, components where possible

- Install or use shadcn components vs. creating custom components where possible

- Add required shadcn components: `npx shadcn add [component-name]`

- Keep component organization flat and simple

- Extend routing using react-router v7 as configured

- Update navigation components

- Add sample data to the Zustand store

**PHASE VERIFICATION**: Ensure all pages in the application analysis document are implemented. Verify routing works correctly between all pages. Confirm components use shadcn UI where appropriate.

### 5. Backend Configuration

- Create a mock `amplify_outputs.json` file for development

- Structure it to match expected backend resources

- This file will later be updated by an external build process

**PHASE VERIFICATION**: Confirm the mock amplify_outputs.json file is correctly formatted and contains all necessary configuration for local development.

**Example: Task App Mock Backend Configuration**

```json
{
  "auth": {
    "userPoolId": "mock-user-pool-id",
    "userPoolWebClientId": "mock-client-id",
    "region": "us-east-1",
    "identityPoolId": "mock-identity-pool-id"
  },
  "api": {
    "endpoints": [
      {
        "name": "TasksAPI",
        "endpoint": "https://example.com/api/tasks",
        "region": "us-east-1"
      }
    ]
  }
}

## Technical Guidelines

### State Management

- Always use central Zustand store instead of component state

- Avoid prop drilling completely

- Components should access store directly via hooks

- Only use component state for temporary UI states (form inputs while typing)

### Component Organization

- Keep component organization flat

- Place new components in appropriate existing folders

- Don't group by features unless app is complex

- Follow existing naming conventions

- Always use shadcn components if available

## Final check

Conduct a final check to make sure that all items in the CHECKLIST.md are completed with a high level of quality and there are no errors or missing functionality.

# Solutions to common issues when generating code for the application                                                                       
- Always check for guidance from the awslabs.frontend-mcp-server MCP server when implementing new features or adding new pages
- Routing - always the already installed react-router v7 in Declarative mode for routing. Do not use the outdated react-router-dom package
- Components - always look for existing shadcn components before attempting to create new custom components
- Copying/Moving files - the user might be on Windows, try cross-platform commands
- Generating Images - a minimum resolution of 320x320 is required for Nova Canvas MCP server to generate images
- Creating Charts - Use shadcn charts for any charting https://ui.shadcn.com/charts

In addition:
 - You MUST carefully analyze the current patterns and packages before suggesting structural or dependency changes
 - Avoid changing existing layouts, login.tsx, app-sidebar.tsx, and authentication and keep any required changes minimal
 - When adding new features, don't complete the analysis prematurely, continue analyzing even if you think you found a solution
 - Ensure the code is complete and pages and components for new features are implemented fully and connected with the rest of the application