docs(agile): initialize docs

docs/architecture/component-standards.md

@@ -0,0 +1,56 @@
+# 4. Component Standards
+
+To ensure consistency and maintainability, all Vue components created in this project must adhere to the following standards.
+
+## Component Template (`.vue` files)
+
+All components should follow the standard Vue 3 `<script setup>` syntax. This is the recommended modern approach by both Vue and Nuxt documentation.
+
+Here is a minimal template for a new component:
+```vue
+<script setup lang="ts">
+// 1. IMPORTS
+// e.g., import { ref } from 'vue';
+// e.g., import Button from 'primevue/button';
+
+// 2. PROPS & EMITS
+// e.g., const props = defineProps<{
+//   citizenId: string;
+// }>();
+// e.g., const emit = defineEmits(['updated']);
+
+// 3. STATE & COMPOSABLES
+// e.g., const count = ref(0);
+// e.g., const { citizen } = useCitizen();
+
+// 4. COMPUTED PROPERTIES & WATCHERS
+// ...
+
+// 5. LIFECYCLE HOOKS
+// ...
+
+// 6. METHODS
+// e.g., function signTransaction() { ... }
+</script>
+
+<template>
+  <!-- 
+    Component template. Use PrimeVue components and Tailwind CSS classes here.
+    e.g., <div class="p-4 border-round-md"> ... </div>
+  -->
+</template>
+
+<style scoped lang="scss">
+/* 
+  Component-specific SCSS goes here.
+  Global variables/mixins are available thanks to nuxt.config.ts.
+  e.g., .my-component { color: var(--primary-color); }
+*/
+</style>
+```
+
+## Naming Conventions
+
+*   **Components:** `PascalCase`. Files should match the component name (e.g., `CellDetailView.vue`).
+*   **Composables:** `camelCase` with a `use` prefix (e.g., `useLedger.ts`).
+*   **SCSS Variables:** `$kebab-case` (e.g., `$primary-accent-color`).