xiaohongshu
xiaohongshu
chief-architect
UNIFIED ARCHITECT - Strategic development orchestrator AND systematic project planner for personal productivity applications. Use for architecture decisions, feature planning, task breakdown, implementation strategy, roadmaps. Triggers on "plan", "break down", "how should I implement", "architect...
Full skill instructions
Version: 4.1.0 Last Updated: January 30, 2026 Category: Meta-Skill / Unified Architect Related Skills: dev-debugging, qa-testing, codebase-health-auditor, smart-doc-manager, kde-plasma-widget-dev, stress-tester, supabase-debugger, tauri-debugger
The unified architect skill for FlowState personal productivity application development. This skill combines:
Optimized for single-developer projects serving 10-100 users.
IMPORTANT: After completing planning/architecture work, automatically invoke these skills:
dev-debugging, dev-vueuse, dev-implement-ui-ux)Skill(qa-testing) to verify the implementationSkill(smart-doc-manager) for doc updatesSkill(smart-doc-manager) (includes master-plan management)Skill(stress-tester) for reliability testingSkill(kde-plasma-widget-dev) for Plasma 6 widgetsExample chaining workflow:
User: "Plan how to add recurring tasks"
1. Claude uses chief-architect skill (this skill)
2. Creates detailed plan with phases and tasks
3. User approves plan
4. Claude invokes: Skill(dev-debugging) or appropriate dev skill
5. After implementation → Claude invokes: Skill(qa-testing)
6. After tests pass → Ask user to verify
Self-verification is fundamentally flawed. Claude can write tests that pass but don't verify the right things.
EVERY completed task MUST follow this protocol:
Provide context-aware proof before ANY "done" claim:
| Context | Required Artifacts |
|---|---|
| Web UI changes | Playwright screenshot, test output, git diff |
| Tauri/Desktop app | Console logs, test output, git diff, verification instructions |
| Backend/API changes | curl/API response, test output, database query results |
| Database changes | Before/after query results, migration logs |
| Build/Config changes | Build output, npm run dev logs |
| Pure logic changes | Unit test output, git diff |
Minimum for ANY change:
├── Git diff (what changed)
├── Test output (existing tests pass)
└── Verification instructions (how USER can test it)
5-Step Verification Process:
Define success/failure criteria BEFORE implementation:
TEMPLATE:
┌─────────────────────────────────────────────────────────┐
│ Task: [What you're implementing] │
│ SUCCESS: [Observable outcome that proves it works] │
│ FAILURE: [What would prove it DOESN'T work] │
└─────────────────────────────────────────────────────────┘
NEVER say: "Done", "Complete", "Working", "Ready", "Fixed", "Implemented"
ALWAYS say: "I've implemented X. Here are the artifacts: [artifacts]. Can you test it and confirm it works?"
For complex features, use Dev-Maestro's judge endpoint:
Use systematic planning when the user:
Understand the current state:
Codebase Context
Requirements Analysis
Dependency Mapping
Create a Work Breakdown Structure (WBS):
High-Level Phases Break the project into 3-5 major phases:
Example:
Phase 1: Data Model & Store Setup
Phase 2: UI Components & Views
Phase 3: Integration & State Management
Phase 4: Testing & Polish
Phase 5: Documentation & Deployment
Task Decomposition For each phase, create specific, actionable tasks:
Dependency Graph Document task relationships:
Priority & Sequencing Order tasks by:
Risk Assessment For each high-complexity task:
Testing Strategy Define testing approach:
Present the plan in this structure:
## Project Plan: [Feature Name]
### Overview
[Brief description of what we're building and why]
### Success Criteria
- [ ] Criterion 1
- [ ] Criterion 2
- [ ] Criterion 3
### Failure Criteria (Falsifiability)
- [ ] What would prove this DOESN'T work
### Architecture Changes
[What architectural changes are needed? New stores, composables, components?]
### Implementation Phases
#### Phase 1: [Phase Name]
**Goal**: [What this phase accomplishes]
**Tasks:**
1. **[Task Name]** (Complexity: Low/Medium/High)
- File: `src/path/to/file.ts`
- Description: [What to do]
- Acceptance: [How to verify it works]
- Dependencies: [Other tasks needed first]
2. **[Next Task]** (Complexity: Medium)
- ...
#### Phase 2: [Phase Name]
...
### Critical Path
1. Task A → Task B → Task C
2. Task D can run parallel to Task B
### Risk Mitigation
- **Risk**: [What could go wrong]
**Mitigation**: [How to prevent/handle it]
### Testing Plan
- [ ] Unit tests: [What to test]
- [ ] Component tests: [What to test]
- [ ] Integration tests: [What to test]
- [ ] Playwright E2E: [Critical user flows]
### Open Questions
- Question 1?
- Question 2?
### Next Steps
1. [First concrete action to take]
2. [Second action]
Focus Areas:
supabase-js v2.x, PostgreSQL, Realtime subscriptions, Edge Functionspinia-shared-state (Native BroadcastChannel) for cross-tab syncuseBackupSystem.ts)src/composables/useSWRCache.tsFocus Areas:
src/assets/design-tokens.css - NEVER hardcode colors/spacingKey Stores (10 total):
| Store | Purpose | File |
|---|---|---|
tasks | Core task CRUD, filtering | src/stores/tasks.ts |
canvas | Canvas state, nodes, layout | src/stores/canvas.ts |
timer | Pomodoro timer + device leadership | src/stores/timer.ts |
auth | Supabase auth state | src/stores/auth.ts |
settings | User preferences | src/stores/settings.ts |
ui | UI state (modals, panels) | src/stores/ui.ts |
projects | Project management | src/stores/projects.ts |
theme | Theme management, CSS variables | src/stores/theme.ts |
notifications | Scheduled notifications, reminders | src/stores/notifications.ts |
quickSort | QuickSort session state | src/stores/quickSort.ts |
Focus Areas:
@vueuse/gesture)Tauri Plugins (10 total, from Cargo.toml):
dialog, fs, shell, process, notificationupdater, store, log, http, single-instanceRust Commands (10 total):
greet, check_docker, start_docker, stop_docker, start_supabasestop_supabase, get_supabase_status, get_docker_statusshow_window, hide_windowKey Files:
src-tauri/tauri.conf.json # App config, version, updater
src-tauri/src/lib.rs # Rust commands
src/composables/useTauriStartup.ts # Frontend startup sequence
.github/workflows/release.yml # CI/CD release workflow
Focus Areas:
scripts/checkpoint-with-backup.sh)validate:comprehensive)MASTER_PLAN.md as central source of truthTesting Infrastructure (615+ tests):
| Type | Framework | Count | Location |
|---|---|---|---|
| Unit/Integration | Vitest | ~590 | tests/, src/**/*.spec.ts |
| Storybook | Vitest Browser | ~25 | src/stories/ |
| E2E | Playwright | varies | tests/e2e/ |
| Stress | Custom | ~20 | stress-tester skill |
Focus Areas:
Architecture:
User (HTTPS) → Cloudflare (DNS/CDN) → Contabo VPS (Caddy) → Self-hosted Supabase
↓
PWA Static Files (/var/www/flowstate)
VPS Specifications (Contabo Cloud VPS 2):
| Spec | Value |
|---|---|
| Provider | Contabo |
| OS | Ubuntu 22.04 LTS |
| vCPU | 6 cores |
| RAM | 16 GB |
| Storage | NVMe SSD |
| IP | 84.46.253.137 |
Production URLs:
| Domain | Purpose |
|---|---|
in-theflow.com | PWA frontend |
api.in-theflow.com | Supabase API (self-hosted) |
Infrastructure Stack:
| Component | Technology | Location |
|---|---|---|
| Reverse Proxy | Caddy | /etc/caddy/Caddyfile |
| SSL/TLS | Cloudflare Origin Certificate | /etc/caddy/certs/ (15-year validity) |
| DNS/CDN | Cloudflare (proxied) | Orange cloud enabled |
| Database | PostgreSQL (Supabase) | Docker at /opt/supabase/docker/ |
| Static Files | PWA build | /var/www/flowstate/ |
| Secrets | Doppler | Fetched at build time |
Key VPS Paths:
/var/www/flowstate/ # PWA static files (deployment target)
/opt/supabase/docker/ # Self-hosted Supabase installation
/etc/caddy/Caddyfile # Caddy configuration
/etc/caddy/certs/ # Cloudflare origin certificates
VPS Maintenance Commands:
# SSH into VPS
ssh [email protected] -p <custom-port>
# Check Caddy status
systemctl status caddy
# View Caddy logs
journalctl -u caddy -f
# Restart Supabase
cd /opt/supabase/docker && docker compose restart
# Check disk space
df -h
# Docker resource usage
docker stats
Contabo-Specific Gotchas:
ufw manuallyDeployment Methods:
| Method | Trigger | What Deploys |
|---|---|---|
| CI/CD (Primary) | Push to master | PWA static files via rsync |
| Manual | npm run build + rsync | PWA static files |
CI/CD Workflow (.github/workflows/deploy.yml):
dist/ to VPS /var/www/flowstate/Secrets Management (Doppler):
.env files on VPS| Secret Location | Secrets |
|---|---|
Doppler (flowstate-prod) | VITE_SUPABASE_URL, VITE_SUPABASE_ANON_KEY, VITE_GROQ_API_KEY |
| GitHub Secrets | DOPPLER_TOKEN, SSH_PRIVATE_KEY, VPS_HOST, VPS_USER |
Local Development: Continue using .env.local (not Doppler).
Relevant SOPs:
docs/sop/SOP-026-custom-domain-deployment.md - Domain, Cloudflare, Caddy setupdocs/sop/SOP-030-doppler-secrets-management.md - Secrets managementdocs/sop/SOP-031-cors-configuration.md - CORS troubleshootingdocs/sop/SOP-036-supabase-jwt-key-regeneration.md - JWT key regenerationdocs/sop/deployment/VPS-DEPLOYMENT.md - Full VPS setup guidedocs/sop/deployment/PWA-DEPLOYMENT-CHECKLIST.md - Pre/post deploy verificationCRITICAL: JWT keys must be signed with the same secret as the Supabase instance.
| Environment | JWT Secret | Keys Location |
|---|---|---|
| Local Supabase | super-secret-jwt-token-with-at-least-32-characters-long | .env |
| Production (VPS) | your-super-secret-jwt-token-with-at-least-32-characters-long | Doppler + VPS /opt/supabase/docker/.env |
If 401 Unauthorized or JwtSignatureError occurs:
.env AND Doppler secretsKey Files:
/opt/supabase/docker/.env (VPS) - Contains JWT_SECRET, ANON_KEY, SERVICE_ROLE_KEYscripts/generate-supabase-keys.cjs - Generates keys for LOCAL Supabase onlyCRITICAL: Canvas Geometry Invariants (TASK-255)
Position drift and "jumping" tasks occur when multiple code paths mutate geometry.
Full SOP: docs/sop/canvas/CANVAS-POSITION-SYSTEM.md
Quick Rules:
parentId, canvasPosition, positionuseCanvasSync.ts MUST NEVER call updateTask() or updateGroup()dueDate/status/priority, NEVER geometryQuarantined Features (DO NOT RE-ENABLE):
useMidnightTaskMover.ts - Auto-moved tasks at midnightuseCanvasOverdueCollector.ts - Auto-collected overdue tasksThese violated geometry invariants and caused position drift. See ADR comments in each file.
Canvas Composables (src/composables/canvas/ - 29 total):
| Composable | Purpose |
|---|---|
useCanvasSync.ts | CRITICAL - Single source of truth for node sync |
useCanvasInteractions.ts | Drag-drop, selection, position management |
useCanvasEvents.ts | Vue Flow event handlers |
useCanvasActions.ts | Task/group CRUD operations |
useCanvasOrchestrator.ts | Main canvas coordination |
useCanvasCore.ts | Core canvas functionality |
useNodeSync.ts | Node synchronization logic |
useCanvasSelection.ts | Multi-select and selection state |
useCanvasGroupActions.ts | Group-specific operations |
useCanvasGroupMembership.ts | Parent-child relationships |
useCanvasTaskActions.ts | Task-specific canvas operations |
useCanvasOperationState.ts | Operation state machine |
state-machine.ts | Canvas state machine definitions |
Additional Canvas Composables:
useCanvasNavigation.ts, useCanvasZoom.ts - Viewport controluseCanvasModals.ts, useCanvasContextMenus.ts - UI interactionsuseCanvasResizeState.ts, useCanvasResizeCalculation.ts - Node resizinguseCanvasEdgeSync.ts, useCanvasConnections.ts - Edge/connection handlinguseCanvasAlignment.ts - Snap-to-grid and alignmentuseCanvasHotkeys.ts - Keyboard shortcutsuseCanvasLifecycle.ts - Mount/unmount lifecycleuseCanvasFilteredState.ts, useCanvasGroups.ts, useCanvasSectionProperties.ts - State filteringSmart Groups:
src/composables/canvas/useSmartGroups.tsFull SOP: docs/claude-md-extension/backup-system.md
Layer Architecture:
| Layer | Technology | Frequency | Location |
|---|---|---|---|
| Layer 1 | Local History | On change | IndexedDB |
| Layer 2 | Golden Backup | Manual + auto | backups/golden-backup.json |
| Layer 3 | Shadow Mirror | Every 5 min | backups/shadow.db (SQLite) |
| Layer 4 | SQL Dumps | Manual | supabase/backups/*.sql |
Key Composables:
src/composables/useBackupSystem.ts - Main backup orchestrationsrc/composables/useShadowBackup.ts - SQLite mirror logicsrc/composables/useLocalHistory.ts - IndexedDB historyRecovery UI: Settings > Storage tab
Tombstones Pattern:
Soft delete with deleted_at timestamp for recoverability:
// Instead of DELETE, set deleted_at
await supabase.from('tasks').update({ deleted_at: new Date() }).eq('id', taskId)
// Recovery: set deleted_at = null
SWR Cache Pattern (src/composables/useSWRCache.ts):
Architecture: Device leadership model where one device "leads" the countdown and others follow.
| Device | Role | Sync Method |
|---|---|---|
| Vue App | Leader-capable | Supabase Realtime (WebSocket) |
| KDE Widget | Follower | REST API polling (2s interval) |
Key Rules:
device_leader_last_seen)Critical Pattern - Auth-Aware Initialization:
// Timer store MUST wait for auth before loading session
watch(
() => authStore.isAuthenticated,
(isAuthenticated) => {
if (isAuthenticated && !hasLoadedSession.value) {
initializeStore() // Now userId is available
}
},
{ immediate: true }
)
Timer Active Task Highlighting: When a timer is running, the associated task is visually highlighted across all views with an amber glow + pulse animation.
Design Tokens: --timer-active-border, --timer-active-glow, --timer-active-glow-strong
Full SOP: docs/sop/active/TIMER-sync-architecture.md
Key Files:
src/stores/timer.ts # Timer state + leadership logic
kde-widget/package/contents/ui/main.qml # KDE Plasma widget
Mobile-Specific Composables:
src/composables/mobile/useMobileFilters.ts - Mobile-optimized filter UIsrc/composables/useMobileDetection.ts - Device/viewport detectionsrc/composables/useLongPress.ts - Long press gesture handlingVoice Input (Dual Implementation):
| Method | API | Use Case |
|---|---|---|
| Whisper | Supabase Edge Function + Groq | Primary (high accuracy) |
| Browser | Web Speech API | Fallback (offline) |
Key Files:
src/mobile/components/VoiceTaskConfirmation.vue # Voice input UI
supabase/functions/whisper-transcribe/ # Edge function
PWA Features:
IMPORTANT: Rather than hardcoding skill names, discover available skills dynamically.
To find current skills, check .claude/skills/ directory:
| Category | Skills |
|---|---|
| Debugging | dev-debugging, vue-flow-debug, supabase-debugger, tauri-debugger |
| Development | dev-vueuse, dev-implement-ui-ux, frontend-design, tiptap-vue3 |
| Fixes | dev-undo-redo, ops-port-manager |
| Quality | qa-testing, codebase-health-auditor, stress-tester |
| Documentation | smart-doc-manager, dev-storybook, task |
| Infrastructure | kde-plasma-widget-dev, start-dev, done |
| Analysis | master-plan-auditor |
| Meta | skill-creator-doctor, chief-architect |
| Workflows | feature-creator, design-system-migrator |
// Route based on task type - use EXISTING skills only
function routeTask(taskType: string): string {
const routing = {
// Debugging & Fixes
'bug': 'dev-debugging',
'vue-reactivity': 'dev-debugging',
'canvas-issue': 'vue-flow-debug',
'supabase-issue': 'supabase-debugger',
'tauri-issue': 'tauri-debugger',
'keyboard-shortcut': 'dev-debugging',
'undo-redo': 'dev-undo-redo',
'port-conflict': 'ops-port-manager',
// Development
'composable': 'dev-vueuse',
'ui-ux': 'dev-implement-ui-ux',
'frontend': 'frontend-design',
'rich-text': 'tiptap-vue3',
// Quality
'testing': 'qa-testing',
'dead-code': 'codebase-health-auditor',
'stress-test': 'stress-tester',
// Documentation
'documentation': 'smart-doc-manager',
'master-plan': 'smart-doc-manager',
'add-task': 'task',
'storybook': 'dev-storybook',
// Infrastructure
'kde-widget': 'kde-plasma-widget-dev',
'plasma-widget': 'kde-plasma-widget-dev',
'start-work': 'start-dev',
'complete-work': 'done',
// Quality (continued)
'e2e-test': 'qa-testing'
};
return routing[taskType] || 'dev-debugging';
}
Claude Code hooks enforce project rules automatically:
| Hook | Purpose | Location |
|---|---|---|
destructive-command-blocker.sh | Block dangerous DB commands | .claude/hooks/ |
task-lock-enforcer.sh | Multi-instance locking | .claude/hooks/ |
completion-validator.sh | Enforce 5-layer completion | .claude/hooks/ |
atomic-task-enforcer.sh | Break down broad requests | .claude/hooks/ |
Lock files: .claude/locks/TASK-XXX.lock
Lock expiry: 4 hours (stale locks auto-cleaned)
When planning for this project, always:
Check Existing Patterns
src/assets/design-tokens.cssState Management
Performance
Testing Requirements
Deployment Awareness
User: "I want to add recurring tasks to FlowState"
chief-architect response:
1. Analyzes current task data model
2. Creates WBS with phases:
- Phase 1: Data model changes (Task interface, RecurrenceRule type)
- Phase 2: Store logic (recurrence calculation, instance generation)
- Phase 3: UI components (recurrence picker, visual indicators)
- Phase 4: Calendar integration (show all instances)
- Phase 5: Testing (edge cases, DST handling, performance)
3. Documents dependencies and critical path
4. After approval, chains to implementation skills
User: "Should we use WebSockets or polling for real-time updates?"
chief-architect response:
1. Analyzes current Supabase setup
2. Evaluates trade-offs for personal app scale
3. Recommends Supabase Realtime (already integrated)
4. Documents decision rationale
User: "How do I deploy a hotfix to production?"
chief-architect response:
1. Explains CI/CD workflow (push to master)
2. Notes Doppler secret fetching
3. Describes Caddy reload process
4. References SOP-026 for details
User: "Why do tasks jump around when I refresh?"
chief-architect response:
1. Explains geometry invariants (TASK-255)
2. Identifies likely violation of single-writer principle
3. Checks if sync is accidentally calling updateTask()
4. References CANVAS-POSITION-SYSTEM.md SOP
CRITICAL: Before claiming ANY issue, bug, or problem is "fixed", "resolved", "working", or "complete", the following verification protocol is MANDATORY:
REQUIRED: Use the AskUserQuestion tool to explicitly ask the user to verify the fix:
"I've implemented [description of fix]. Before I mark this as complete, please verify:
1. [Specific thing to check #1]
2. [Specific thing to check #2]
3. Does this fix the issue you were experiencing?
Please confirm the fix works as expected, or let me know what's still not working."
Remember: The user is the final authority on whether something is fixed. No exceptions.
xiaohongshu
technical spec
product ux expert
database patterns
Conduct multi-agent task orchestration and workflow coordination.
Initialize project with Conductor artifacts (product definition,
Expert in web animations, transitions, and motion design using Framer Motion and CSS
Creates Mermaid and ASCII diagrams for flowcharts, architecture, ERDs, state machines, mindmaps, and more. Use when user mentions diagram, flowchart, mermaid, ASCII diagram, text diagram, terminal diagram, visualize, C4, mindmap, architecture diagram, sequence diagram, ERD, or needs visual docume...
PostgreSQL bindings for H3 hexagonal grid system. Use when working with H3 cells in Postgres, including spatial indexing, geometry/geography integration, and raster analysis.
Context-Driven Development skill for projects using Conductor. Use this skill when you detect a `conductor/` directory in the project, when working on tasks defined in a `plan.md` file, or when the user asks about tracks, specs, or plans. Automatically applies TDD workflow, tracks task completion...
Display project status, active tracks, and next actions
Official Stakpak application containerization standard operating procedure, a step-by-step guidline to properly dockerize applications. This is a rule book curated by the Stakpak Team.
Generate, edit, and beat-sync AI video with leading models in one workspace.
The world's fastest calendar for remote work
Transform Your Design with AI Designer by ImgCreator.ai
Revolutionizing Video Production with AI-Powered Creativity
Extend an image past the frame and let AI fill the new aspect ratio.
Discover your celebrity doppelgänger with StarByFace!
ChainClarity explains 700+ crypto whitepapers in plain English, with layered summaries, comparisons, research tools, alerts, and a $4.99 Pro plan.
Opus.ai: Revolutionize Your Web Experience