beedev-refactor-frontend-vuejs

name: bee:dev-refactor-frontend-vuejs description: | Analyzes Vue.js/Nuxt 3 frontend codebase against Bee standards and generates refactoring tasks for bee:dev-cycle-frontend-vuejs. Dispatches Vue.js-specific agents in ANALYSIS mode.

trigger: |

• User wants to refactor existing Vue.js/Nuxt 3 frontend project to follow standards
• Legacy Vue.js codebase needs modernization (Options API → Composition API, Vuex → Pinia)
• Vue.js/Nuxt 3 frontend project audit requested

skip_when: |

• Greenfield project -> Use /bee:pre-dev-* instead
• Single file fix -> Use bee:dev-cycle-frontend-vuejs directly
• Backend-only project -> Use bee:dev-refactor instead

sequence: before: [bee:dev-cycle-frontend-vuejs]

related: complementary: [bee:dev-refactor, bee:dev-cycle-frontend-vuejs, bee:using-dev-team]

input_schema: required: [] optional: - name: project_path type: string description: "Path to Vue.js/Nuxt 3 frontend project root (default: current directory)" - name: prompt type: string description: "Direct instruction for refactoring focus" - name: standards_path type: string description: "Custom standards file path (default: Bee Vue.js standards via WebFetch)" - name: analyze_only type: boolean description: "Generate report without executing bee:dev-cycle-frontend-vuejs" - name: critical_only type: boolean description: "Limit execution to Critical and High severity (analysis still tracks all)" - name: dry_run type: boolean description: "Show what would be analyzed without executing"

output_schema: format: markdown artifacts: - name: "codebase-report.md" description: "Codebase analysis from bee:codebase-explorer" - name: "reports/{agent-name}-report.md" description: "Individual agent analysis reports" - name: "findings.md" description: "All findings mapped from agent reports" - name: "tasks.md" description: "1:1 mapped REFACTOR-XXX tasks from findings" - name: "change-report.html" description: "Visual HTML change report from bee:visual-explainer"

traceability: "Bee Standard -> Agent Report -> FINDING-XXX -> REFACTOR-XXX -> Implementation"

Dev Refactor Frontend Vue.js Skill

Analyzes existing Vue.js/Nuxt 3 frontend codebase against Bee/Lerian standards and generates refactoring tasks compatible with bee:dev-cycle-frontend-vuejs.

Standards Loading (MANDATORY)

Before any step execution, you MUST load Bee Vue.js standards.

Standards Source Resolution

if standards_path is provided:
  → Read tool: {standards_path}
  → If file not found or empty: STOP and report blocker
  → Use loaded content as Vue.js frontend standards
else:
  → WebFetch the default Bee Vue.js standards (see URLs below)

Default URLs (used when standards_path is not provided):

Fetch URLs above and extract: Agent Modification Verification requirements, Anti-Rationalization Tables requirements, Critical Rules, and Vue.js Frontend Standards.

If any condition is true, STOP and report blocker. Cannot proceed without Bee standards.

MANDATORY GAP PRINCIPLE (NON-NEGOTIABLE)

any divergence from Bee standards = MANDATORY gap to implement.

Non-negotiable, not open to interpretation - a HARD RULE.

Anti-Rationalization: Mandatory Gap Principle

See shared-patterns/shared-anti-rationalization.md for:

• Refactor Gap Tracking section (mandatory gap principle rationalizations)
• Gate Execution section (workflow skip rationalizations)
• TDD section (test-first rationalizations)
• Universal section (general anti-patterns)

Verification Rule

COUNT(non-checkmark items in all Standards Coverage Tables) == COUNT(FINDING-XXX entries)

If counts don't match -> SKILL FAILURE. Go back and add missing findings.

Architecture Pattern Applicability

Not all architecture patterns apply to all Vue.js/Nuxt 3 frontend projects. Before flagging gaps, verify the pattern is applicable.

Detection Criteria

Full Vue 3 / Nuxt 3 App (Vue.js Frontend Standards APPLICABLE):

• Project uses Vue 3 or Nuxt 3 as framework
• Contains components, pages, and state management
• Uses Composition API (<script setup>, ref(), computed(), watch())
• Uses Pinia for state management (or Vuex — flag as migration gap)
• Has Vue Router or Nuxt routing
• -> MUST follow frontend-vuejs.md standards

Simple Vue.js Frontend (Partial applicability):

• Content-only sites with minimal interactivity
• Static Nuxt Content sites
• -> Apply directory structure and styling; skip state management, BFF patterns

Agent Instruction

When dispatching specialist agents, include:

ARCHITECTURE APPLICABILITY CHECK:
1. If project is a full Vue 3 / Nuxt 3 app -> APPLY all frontend-vuejs.md sections
2. If project is a Nuxt Content site -> APPLY directory structure and styling only
3. If project is a utility package -> Do not flag Vue-specific gaps

MANDATORY: Initialize Todo List FIRST

Before any other action, create the todo list with all steps:

TodoWrite:
  todos:
    - content: "Validate PROJECT_RULES.md exists"
      status: "pending"
      activeForm: "Validating PROJECT_RULES.md exists"
    - content: "Detect Vue.js/Nuxt 3 stack and UI library mode"
      status: "pending"
      activeForm: "Detecting Vue.js stack"
    - content: "Read PROJECT_RULES.md for context"
      status: "pending"
      activeForm: "Reading PROJECT_RULES.md"
    - content: "Generate codebase report via bee:codebase-explorer"
      status: "pending"
      activeForm: "Generating codebase report"
    - content: "Dispatch Vue.js frontend specialist agents in parallel"
      status: "pending"
      activeForm: "Dispatching Vue.js frontend specialist agents"
    - content: "Save individual agent reports"
      status: "pending"
      activeForm: "Saving agent reports"
    - content: "Map agent findings to FINDING-XXX entries"
      status: "pending"
      activeForm: "Mapping agent findings"
    - content: "Generate findings.md"
      status: "pending"
      activeForm: "Generating findings.md"
    - content: "Map findings 1:1 to REFACTOR-XXX tasks"
      status: "pending"
      activeForm: "Mapping findings to tasks (1:1)"
    - content: "Generate tasks.md"
      status: "pending"
      activeForm: "Generating tasks.md"
    - content: "Generate visual change report"
      status: "pending"
      activeForm: "Generating visual change report"
    - content: "Get user approval"
      status: "pending"
      activeForm: "Getting user approval"
    - content: "Save all artifacts"
      status: "pending"
      activeForm: "Saving artifacts"
    - content: "Handoff to bee:dev-cycle-frontend-vuejs"
      status: "pending"
      activeForm: "Handing off to bee:dev-cycle-frontend-vuejs"

This is NON-NEGOTIABLE. Do not skip creating the todo list.

Input Flags: Early Exit Check

if dry_run == true:
  → Execute Step 1 (Validate PROJECT_RULES.md) and Step 1b (Detect Vue.js Stack)
  → Output dry-run summary:
      - Project path: {project_path or current directory}
      - Standards source: {standards_path or "Bee Vue.js defaults via WebFetch"}
      - Vue.js stack detected: {Vue 3 / Nuxt 3 version}
      - UI library mode: {sindarian-vue / fallback-only}
      - Agents that would be dispatched: {list of 5-7 agents}
      - Conditional agents: {BFF if detected, UI Engineer if ux-criteria.md exists}
      - Artifact path: docs/bee:dev-refactor-frontend-vuejs/{timestamp}/
  → Mark all remaining todos as `completed` (skipped - dry run)
  → TERMINATE with "Dry run complete. Re-run without --dry-run to execute."

If dry_run is not true, continue to next section.

CRITICAL: Specialized Agents Perform All Tasks

See shared-patterns/shared-orchestrator-principle.md for full ORCHESTRATOR principle, role separation, forbidden/required actions, step-to-agent mapping, and anti-rationalization table.

Summary: You orchestrate. Agents execute. If using Bash/Grep/Read to analyze code, STOP. Dispatch agent.

Step 1: Validate PROJECT_RULES.md

TodoWrite: Mark "Validate PROJECT_RULES.md exists" as in_progress

If condition is true, output blocker and TERMINATE. Otherwise continue to Step 1b.

Check: Does docs/PROJECT_RULES.md exist?

• YES -> Mark todo as completed, continue to Step 1b
• NO -> Output blocker and TERMINATE:

## BLOCKED: PROJECT_RULES.md Not Found

Cannot proceed without project standards baseline.

**Required Action:** Create `docs/PROJECT_RULES.md` with:
- Architecture patterns (Vue 3 Composition API, Nuxt 3, Pinia)
- Code conventions (SFC structure, composable naming)
- Testing requirements (Vitest, Vue Testing Library, Playwright)
- Technology stack decisions

Re-run after file exists.

Step 1b: Detect Vue.js/Nuxt 3 Stack

TodoWrite: Mark "Detect Vue.js/Nuxt 3 stack and UI library mode" as in_progress

SCOPE: VUE.JS FRONTEND AND BFF CODE ONLY. This skill analyzes Vue.js/Nuxt 3 code exclusively. MUST use bee:dev-refactor for backend code.

FORBIDDEN: Dispatching backend agents from this skill. Backend agents belong to bee:dev-refactor.

MANDATORY: Verify this is a Vue.js/Nuxt 3 project. If not, redirect.

Check for Vue.js/Nuxt 3 frontend indicators:

Detection Logic:

1. package.json exists?
   NO  -> STOP: "Not a Node.js project. Use bee:dev-refactor instead."
   YES -> Continue

2. Vue 3 or Nuxt 3 in dependencies?
   NO  -> STOP: "Not a Vue.js frontend project. Use bee:dev-refactor instead."
   YES -> Continue

3. @luanrodrigues/sindarian-vue in dependencies?
   YES -> ui_library_mode = "sindarian-vue"
   NO  -> ui_library_mode = "fallback-only"

4. BFF layer detected? (/server/api/ routes in Nuxt, Express/Fastify in deps)
   YES -> dispatch_bff = true
   NO  -> dispatch_bff = false

5. ux-criteria.md exists?
   YES -> dispatch_ui_engineer = true
   NO  -> dispatch_ui_engineer = false

6. Vuex in dependencies?
   YES -> flag_vuex_migration = true (mandatory Pinia migration gap)
   NO  -> flag_vuex_migration = false

7. Options API patterns detected in source?
   YES -> flag_composition_api_migration = true
   NO  -> flag_composition_api_migration = false

TodoWrite: Mark "Detect Vue.js/Nuxt 3 stack and UI library mode" as completed

Step 2: Read PROJECT_RULES.md

TodoWrite: Mark "Read PROJECT_RULES.md for context" as in_progress

Read tool: docs/PROJECT_RULES.md

Extract project-specific conventions for agent context.

TodoWrite: Mark "Read PROJECT_RULES.md for context" as completed

Step 3: Generate Codebase Report

TodoWrite: Mark "Generate codebase report via bee:codebase-explorer" as in_progress

MANDATORY: Use Task Tool with bee:codebase-explorer