aws-samples · icoxfog417 · Sep 29, 2025 · Sep 29, 2025 · Sep 29, 2025
diff --git a/yourwork/.amazonq/cli-agents/default-agent.json b/yourwork/.amazonq/cli-agents/default-agent.json
@@ -8,8 +8,6 @@
   ],
   "allowedTools": [
     "fs_read",
-    "fs_write", 
-    "execute_bash",
     "use_aws",
     "report_issue"
   ],

diff --git a/yourwork/template/DEPLOYMENT_GUIDE.md b/yourwork/template/DEPLOYMENT_GUIDE.md
@@ -35,10 +35,10 @@ template/
 
 ## 技術スタック
 
-- **フロントエンド**: React 18 + TypeScript
+- **フロントエンド**: React + TypeScript
 - **ビルドツール**: Vite
-- **スタイリング**: Tailwind CSS + Framer Motion
-- **ルーティング**: React Router v6
+- **スタイリング**: Tailwind CSS v4+ (CSS-first configuration) + Framer Motion
+- **ルーティング**: React Router
 - **テスト**: Vitest + Playwright
 - **ホスティング**: AWS S3 + CloudFront
 - **インフラ**: AWS CloudFormation
@@ -107,13 +107,27 @@ VITE_ENVIRONMENT=development  # 環境名
 
 ### 5. スタイリング/ブランディング
 
-#### **tailwind.config.js**
-- カラーパレットをブランドカラーに変更
-- フォントファミリーの設定
+#### **Tailwind CSS v4 設定** (`src/styles/globals.css`)
+Tailwind CSS v4では設定ファイル不要のCSS-first approach を採用：
 
-#### **src/styles/globals.css**
-- カスタムCSS変数の追加
-- ブランド固有のスタイル定義
+```css
+@import "tailwindcss";
+
+@theme {
+  /* カスタムカラーパレット */
+  --color-primary-500: #0ea5e9;  /* ブランドカラーに変更 */
+  --color-primary-600: #0284c7;
+
+  /* カスタムアニメーション */
+  --animate-fade-in: fadeIn 0.5s ease-in-out;
+}
+```
+
+**重要**: 
+- ❌ `tailwind.config.js` は不要（削除済み）
+- ❌ `postcss.config.js` は不要（削除済み）  
+- ❌ `@tailwindcss/*` プラグインは不要（v4で内蔵）
+- ✅ CSS内で `@theme {}` ブロックで設定
 
 ### 6. ランディングページのカスタマイズ
 
@@ -127,8 +141,8 @@ VITE_ENVIRONMENT=development  # 環境名
 ## 前提条件
 
 ### 必要なツール
-- Node.js 18.x 以上
-- npm 8.x 以上
+- Node.js 20.x 以上
+- npm 10.x 以上
 - AWS CLI v2
 - AWS アカウントと適切な権限
 

diff --git a/yourwork/template/app/cloudformation.yaml b/yourwork/template/app/cloudformation.yaml
@@ -46,7 +46,7 @@ Resources:
     Type: AWS::CloudFront::OriginAccessControl
     Properties:
       OriginAccessControlConfig:
-        Name: !Sub '${ProjectName}-${Environment}-oac'
+        Name: !Sub '${ProjectName}-${Environment}-oac-${AWS::AccountId}'
         OriginAccessControlOriginType: s3
         SigningBehavior: always
         SigningProtocol: sigv4
@@ -139,7 +139,7 @@ Resources:
     Type: AWS::CloudFront::ResponseHeadersPolicy
     Properties:
       ResponseHeadersPolicyConfig:
-        Name: !Sub '${ProjectName}-${Environment}-security-headers'
+        Name: !Sub '${ProjectName}-${Environment}-security-headers-${AWS::AccountId}'
         SecurityHeadersConfig:
           StrictTransportSecurity:
             AccessControlMaxAgeSec: 31536000
@@ -176,28 +176,28 @@ Outputs:
     Description: 'S3 Bucket name for uploading files'
     Value: !Ref S3Bucket
     Export:
-      Name: !Sub '${ProjectName}-${Environment}-bucket-name'
+      Name: !Sub '${ProjectName}-${Environment}-bucket-name-${AWS::AccountId}'
 
   CloudFrontDistributionId:
     Description: 'CloudFront Distribution ID'
     Value: !Ref CloudFrontDistribution
     Export:
-      Name: !Sub '${ProjectName}-${Environment}-distribution-id'
+      Name: !Sub '${ProjectName}-${Environment}-distribution-id-${AWS::AccountId}'
 
   CloudFrontDomainName:
     Description: 'CloudFront Distribution Domain Name'
     Value: !GetAtt CloudFrontDistribution.DomainName
     Export:
-      Name: !Sub '${ProjectName}-${Environment}-domain-name'
+      Name: !Sub '${ProjectName}-${Environment}-domain-name-${AWS::AccountId}'
 
   WebsiteURL:
     Description: 'Website URL'
     Value: !Sub 'https://${CloudFrontDistribution.DomainName}'
     Export:
-      Name: !Sub '${ProjectName}-${Environment}-website-url'
+      Name: !Sub '${ProjectName}-${Environment}-website-url-${AWS::AccountId}'
 
   S3BucketRegion:
     Description: 'S3 Bucket Region'
     Value: !Ref 'AWS::Region'
     Export:
-      Name: !Sub '${ProjectName}-${Environment}-bucket-region'
+      Name: !Sub '${ProjectName}-${Environment}-bucket-region-${AWS::AccountId}'
diff --git a/yourwork/template/app/package.json b/yourwork/template/app/package.json
@@ -22,9 +22,7 @@
   "dependencies": {
     "@headlessui/react": "^2.2.8",
     "@heroicons/react": "^2.2.0",
-    "@tailwindcss/aspect-ratio": "^0.4.2",
-    "@tailwindcss/forms": "^0.5.10",
-    "@tailwindcss/typography": "^0.5.18",
+
     "clsx": "^2.1.1",
     "framer-motion": "^12.23.16",
     "lucide-react": "^0.544.0",
@@ -47,14 +45,15 @@
     "@vitejs/plugin-react": "^5.0.3",
     "@vitest/coverage-v8": "^3.2.4",
     "@vitest/ui": "^3.2.4",
-    "autoprefixer": "^10.4.21",
+
+    "@tailwindcss/vite": "^4.1.13",
     "eslint": "^9.36.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
     "jsdom": "^27.0.0",
     "msw": "^2.11.2",
-    "postcss": "^8.5.6",
+
     "prettier": "^3.6.2",
     "prettier-plugin-tailwindcss": "^0.6.14",
     "tailwindcss": "^4.1.13",

diff --git a/yourwork/template/app/postcss.config.js b/yourwork/template/app/postcss.config.js
diff --git a/yourwork/template/app/src/components/app/HomePage.tsx b/yourwork/template/app/src/components/app/HomePage.tsx
@@ -1,65 +1,85 @@
-import { useEffect, useRef } from 'react';
-import LoadingSpinner from '@/components/common/LoadingSpinner';
+import React from 'react';
+import { motion } from 'framer-motion';
 import { mlewTracker } from '../../services/mlewTracker';
 
-function HomePage() {
-  const hasTracked = useRef(false);
+const HomePage: React.FC = () => {
+  const handleGetStarted = () => {
+    mlewTracker.trackCTAClick('Get Started', 'home-page', '/features');
+  };
 
-  useEffect(() => {
-    // Track app page view only once (prevent React Strict Mode double execution)
-    if (!hasTracked.current) {
-      hasTracked.current = true;
-      mlewTracker.trackPageView('app-home');
-    }
-  }, []);
+  const handleLearnMore = () => {
+    mlewTracker.trackClick('learn-more-button', { 
+      source: 'home-page',
+      destination: 'features' 
+    });
+  };
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-indigo-50">
-      <div className="container mx-auto px-4 py-16">
-        <div className="text-center">
-          <h1 className="mb-8 text-4xl font-bold text-gray-900 sm:text-5xl md:text-6xl">
-            MLEW React App Template
+    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center p-6">
+      <div className="max-w-4xl mx-auto text-center">
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8 }}
+        >
+          <h1 className="text-5xl md:text-6xl font-bold text-gray-900 mb-6">
+            <span className="bg-gradient-to-r from-blue-600 to-indigo-600 bg-clip-text text-transparent">
+              MLEW React App Template
+            </span>
           </h1>
-          <p className="mb-12 text-xl text-gray-600 sm:text-2xl">
-            Modern React TypeScript application template with analytics integration
-          </p>
 
-          <div className="mb-12 flex justify-center">
-            <LoadingSpinner />
+          <p className="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
+            A modern, production-ready React application template with TypeScript, 
+            Tailwind CSS, and integrated analytics tracking.
+          </p>
+
+          <div className="flex flex-col sm:flex-row gap-4 justify-center">
+            <motion.button
+              onClick={handleGetStarted}
+              data-track="true"
+              data-track-name="home-get-started-cta"
+              className="px-8 py-4 bg-gradient-to-r from-blue-600 to-indigo-600 text-white font-semibold rounded-full shadow-lg hover:shadow-xl transition-all duration-200"
+              whileHover={{ scale: 1.05 }}
+              whileTap={{ scale: 0.95 }}
+            >
+              Get Started
+            </motion.button>
+
+            <motion.button
+              onClick={handleLearnMore}
+              data-track="true"
+              data-track-name="home-learn-more-button"
+              className="px-8 py-4 border-2 border-gray-300 text-gray-700 font-semibold rounded-full hover:border-blue-500 hover:text-blue-600 transition-all duration-200"
+              whileHover={{ scale: 1.05 }}
+              whileTap={{ scale: 0.95 }}
+            >
+              Learn More
+            </motion.button>
           </div>
 
-          <div className="grid gap-8 md:grid-cols-3">
-            <div className="rounded-lg bg-white p-6 shadow-md">
-              <h3 className="mb-4 text-xl font-semibold text-gray-900">
-                React + TypeScript
-              </h3>
-              <p className="text-gray-600">
-                Built with modern React and TypeScript for type-safe development
-              </p>
+          <div className="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6">
+            <div className="bg-white/70 backdrop-blur-sm rounded-2xl p-6 shadow-lg">
+              <div className="text-3xl mb-4">⚡</div>
+              <h3 className="text-lg font-semibold text-gray-900 mb-2">Fast Development</h3>
+              <p className="text-gray-600">Built with Vite for lightning-fast development experience</p>
             </div>
 
-            <div className="rounded-lg bg-white p-6 shadow-md">
-              <h3 className="mb-4 text-xl font-semibold text-gray-900">
-                Tailwind CSS
-              </h3>
-              <p className="text-gray-600">
-                Utility-first CSS framework for rapid UI development
-              </p>
+            <div className="bg-white/70 backdrop-blur-sm rounded-2xl p-6 shadow-lg">
+              <div className="text-3xl mb-4">🎨</div>
+              <h3 className="text-lg font-semibold text-gray-900 mb-2">Modern Design</h3>
+              <p className="text-gray-600">Tailwind CSS v4 with beautiful, responsive components</p>
             </div>
 
-            <div className="rounded-lg bg-white p-6 shadow-md">
-              <h3 className="mb-4 text-xl font-semibold text-gray-900">
-                Analytics Ready
-              </h3>
-              <p className="text-gray-600">
-                Integrated MLEWW3 Tracker for comprehensive analytics
-              </p>
+            <div className="bg-white/70 backdrop-blur-sm rounded-2xl p-6 shadow-lg">
+              <div className="text-3xl mb-4">📊</div>
+              <h3 className="text-lg font-semibold text-gray-900 mb-2">Analytics Ready</h3>
+              <p className="text-gray-600">Integrated MLEW Tracker for comprehensive user analytics</p>
             </div>
           </div>
-        </div>
+        </motion.div>
       </div>
     </div>
   );
-}
+};
 
-export default HomePage;
+export default HomePage;