diff --git a/.claude/settings.json b/.claude/settings.json
new file mode 100644
index 0000000..e231013
--- /dev/null
+++ b/.claude/settings.json
@@ -0,0 +1,5 @@
+{
+  "enabledPlugins": {
+    "vue-skills-bundle@vue-skills": true
+  }
+}
diff --git a/.mcp.json b/.mcp.json
new file mode 100644
index 0000000..573abbf
--- /dev/null
+++ b/.mcp.json
@@ -0,0 +1,8 @@
+{
+  "mcpServers": {
+    "vuetify-mcp": {
+      "type": "http",
+      "url": "https://mcp.vuetifyjs.com/mcp"
+    }
+  }
+}
\ No newline at end of file
diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000..43c994c
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1 @@
+@AGENTS.md
diff --git a/app/citizen-frontend/CLAUDE.md b/app/citizen-frontend/CLAUDE.md
new file mode 100644
index 0000000..63a7691
--- /dev/null
+++ b/app/citizen-frontend/CLAUDE.md
@@ -0,0 +1,19 @@
+# Project Rules
+
+## General
+
+- Follow the existing code style and patterns.
+- Use pnpm for running project commands.
+- Keep code in TypeScript unless migration is required.
+
+## Stack
+
+- Framework: Vue 3 + Vite
+- UI Library: Vuetify
+- Enabled Features: ESLint, Pinia, Vue I18n, Vue Router
+
+## UI Construction
+
+- Prefer Vuetify built-in UI components and utility classes when building pages.
+- Use custom CSS only when Vuetify components or utilities cannot express the required layout, spacing, color, or interaction clearly.
+- @app/citizen-frontend/DESIGN.md