beedev-cycle-frontend-vuejs

name: bee:dev-cycle-frontend-vuejs description: | Vue.js/Nuxt 3 frontend development cycle orchestrator with 8 gates. Loads tasks from PM team output or backend handoff and executes through implementation → accessibility → unit testing → visual testing → E2E testing → performance testing → review → validation.

trigger: |

• Starting a new Vue.js frontend development cycle with a task file
• Resuming an interrupted Vue.js frontend development cycle (--resume flag)
• After backend dev cycle completes (consuming handoff)

prerequisite: |

• Tasks file exists with structured subtasks
• Not already in a specific gate skill execution

skip_when: |

• "Task is simple" → Simple ≠ risk-free. Execute gates.
• "Tests already pass" → Tests ≠ review. Different concerns.
• "Backend already tested this" → Frontend has different quality concerns.

sequence: before: [bee:dev-feedback-loop]

related: complementary: [bee:dev-frontend-accessibility-vuejs, bee:dev-unit-testing, bee:dev-frontend-visual-vuejs, bee:dev-frontend-e2e-vuejs, bee:dev-frontend-performance-vuejs, bee:requesting-code-review, bee:dev-validation, bee:dev-feedback-loop]

verification: automated: - command: "test -f docs/bee:dev-cycle-frontend-vuejs/current-cycle.json" description: "State file exists" success_pattern: "exit 0" manual: - "All gates for current task show PASS in state file"

examples:

• name: "New Vue.js frontend from backend handoff" invocation: "/bee:dev-cycle-frontend-vuejs docs/pre-dev/auth/tasks-frontend.md" expected_flow: |
  1. Load tasks with subtasks
  2. Detect UI library mode (sindarian-vue or fallback)
  3. Load backend handoff if available
  4. Ask user for execution mode
  5. Execute Gate 0→1→2→3→4→5→6→7 for each task
  6. Generate feedback report
• name: "Resume interrupted Vue.js frontend cycle" invocation: "/bee:dev-cycle-frontend-vuejs --resume"
• name: "Direct prompt mode" invocation: "/bee:dev-cycle-frontend-vuejs Implement dashboard with transaction list and charts"

Vue.js Frontend Development Cycle Orchestrator

Standards Loading (MANDATORY)

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

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.

Overview

The Vue.js frontend development cycle orchestrator loads tasks/subtasks from PM team output (or manual task files) and executes through 8 gates (Gate 0-7) with all gates executing per unit (no deferred execution):

• Gates 0-7 (per unit): Write code + run tests/checks per task/subtask
• All 8 gates are sequential and mandatory

Unlike the backend bee:dev-cycle (which defers integration/chaos test execution), the Vue.js frontend cycle executes all gates fully per unit. Frontend testing tools (Playwright, Vitest, Lighthouse) do not require heavy container infrastructure.

MUST announce at start: "I'm using the bee:dev-cycle-frontend-vuejs skill to orchestrate Vue.js frontend task execution through 8 gates (Gate 0-7). All gates execute per unit."

CRITICAL: Specialized Agents Perform All Tasks

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

Summary: You orchestrate. Agents execute. If using Read/Write/Edit/Bash on source code, STOP. Dispatch agent.

ORCHESTRATOR BOUNDARIES (HARD GATE)

What Orchestrator CAN Do (PERMITTED)

What Orchestrator CANNOT Do (FORBIDDEN)

Any of these actions by orchestrator = IMMEDIATE VIOLATION. Dispatch agent instead.

The 3-FILE RULE

If a task requires editing MORE than 3 files, MUST dispatch specialist agent.

• 1-3 files of non-source content (markdown, json, yaml) - Orchestrator MAY edit directly
• 1+ source code files (*.vue, *.ts, *.css) - MUST dispatch agent
• 4+ files of any type - MUST dispatch agent

Orchestrator Workflow Order (MANDATORY)

+------------------------------------------------------------------+
|  CORRECT WORKFLOW ORDER                                           |
+------------------------------------------------------------------+
|                                                                   |
|  1. Load task file (Read docs/pre-dev/*/tasks-frontend.md)        |
|  2. Detect UI library mode (Step 0)                               |
|  3. Load backend handoff if available                             |
|  4. Ask execution mode (AskUserQuestion)                          |
|  5. Determine state path + Check/Load state                       |
|  6. WebFetch Bee Standards (CLAUDE.md + frontend-vuejs.md)        |
|  7. LOAD SUB-SKILL for current gate (Skill tool)                  |
|  8. Execute sub-skill instructions (dispatch agent via Task)      |
|  9. Wait for agent completion                                     |
|  10. Verify agent output (Standards Coverage Table)               |
|  11. Update state (Write to JSON)                                 |
|  12. Proceed to next gate                                         |
|                                                                   |
|  ================================================================ |
|  WRONG: Load -> Mode -> Standards -> Task(agent) directly         |
|  RIGHT: Load -> Mode -> Standards -> Skill(sub) -> Task(agent)    |
|  ================================================================ |
+------------------------------------------------------------------+

UI Library Mode Detection (MANDATORY - Step 0)

Before any gate execution, detect the project's UI library configuration:

Read tool: package.json

Parse the JSON content:
  - If "dependencies" or "devDependencies" contains "@luanrodrigues/sindarian-vue"
    → ui_library_mode = "sindarian-vue"
  - Otherwise
    → ui_library_mode = "fallback-only"

Store result in state file under ui_library_mode.

@luanrodrigues/sindarian-vue is PRIMARY. shadcn-vue + Radix Vue is FALLBACK for missing components.

Anti-Rationalization for UI Library Mode:

Backend Handoff Loading (Optional)

If the Vue.js frontend cycle follows a backend bee:dev-cycle, load the handoff file:

Check: Does docs/bee:dev-cycle/handoff-frontend.json exist?

  YES -> Load and parse:
    - endpoints: API endpoints implemented by backend
    - types: TypeScript types/interfaces exported by backend
    - contracts: Request/response schemas
    - auth_pattern: Authentication approach (JWT, session, etc.)
    Store in state.backend_handoff

  NO -> Proceed without handoff (standalone Vue.js frontend development)

Handoff contents are CONTEXT for agents, not requirements. Agents MUST still follow all gate requirements regardless of handoff content.

SUB-SKILL LOADING IS MANDATORY (HARD GATE)

Before dispatching any agent, you MUST load the corresponding sub-skill first.

Between "WebFetch standards" and "Task(agent)" there MUST be "Skill(sub-skill)".

Anti-Rationalization for Skipping Sub-Skills

Between "WebFetch standards" and "Task(agent)" there MUST be "Skill(sub-skill)".

Anti-Rationalization for Direct Coding

Red Flags - Orchestrator Violation in Progress

RED FLAG: About to Read *.vue or *.ts file
   -> STOP. Dispatch agent instead.

RED FLAG: About to Write/Create source code
   -> STOP. Dispatch agent instead.

RED FLAG: About to Edit source code or CSS
   -> STOP. Dispatch agent instead.

RED FLAG: About to run "npm test" or "npx playwright test" or "npx vitest"
   -> STOP. Agent runs tests, not you.

RED FLAG: Thinking "I'll just..."
   -> STOP. "Just" is the warning word. Dispatch agent.

RED FLAG: Thinking "This Vue component is simple enough..."
   -> STOP. Simplicity is irrelevant. Dispatch agent.

RED FLAG: Standards loaded, but next action is not Task tool
   -> STOP. After standards, IMMEDIATELY dispatch agent.

Blocker Criteria - STOP and Report

Cannot Be Overridden

No exceptions. User cannot override. Time pressure cannot override.

The 8 Gates

All gates are MANDATORY. No exceptions. No skip reasons.

Gate 0: Agent Selection Logic

UI library mode (detected in Step 0) MUST be passed to the agent as context.

Gate 0: Vue.js Frontend TDD Policy

TDD (RED→GREEN) applies to behavioral logic. Visual/presentational Vue components use test-after.

Rules:

1. Behavioral composables and Pinia stores in Gate 0 MUST produce TDD RED failure output before implementation
2. Visual/presentational Vue SFCs in Gate 0 are implemented without RED phase; Gate 3 creates their snapshot tests
3. Mixed components (behavior + visual): TDD for the behavioral part, test-after for the visual part
4. Gate 2 (Unit Testing) coverage threshold (85%) still applies to ALL component types

Vue.js-Specific TDD Anti-Rationalization:

Gate 6: Code Review Adaptation (5 Reviewers)

For the Vue.js frontend cycle, the 5 parallel reviewers are:

NOTE: The 5th reviewer slot uses bee:frontend-engineer-vuejs in review mode. The Vue.js frontend engineer reviews accessibility compliance, Composition API adherence, Pinia store patterns, and Nuxt 3 standards.

All 5 reviewers MUST be dispatched in a single message with 5 parallel Task calls.

# Gate 6: Dispatch all 5 reviewers in parallel (SINGLE message)
Task 1: { subagent_type: "bee:code-reviewer", ... }
Task 2: { subagent_type: "bee:business-logic-reviewer", ... }
Task 3: { subagent_type: "bee:security-reviewer", ... }
Task 4: { subagent_type: "bee:test-reviewer", ... }
Task 5: { subagent_type: "bee:frontend-engineer-vuejs", prompt: "REVIEW MODE: Review accessibility compliance, Composition API patterns, Pinia store usage, and Vue.js/Nuxt 3 standards adherence...", ... }

Gate Completion Definition (HARD GATE)

A gate is COMPLETE only when all components finish successfully:

CRITICAL for Gate 6: Running 4 of 5 reviewers is not a partial pass - it's a FAIL. Re-run all 5 reviewers.

Gate Order Enforcement (HARD GATE)

Gates MUST execute in order: 0 -> 1 -> 2 -> 3 -> 4 -> 5 -> 6 -> 7. All 8 gates are MANDATORY.

Execution Order

Core Principle: Each execution unit passes through all 8 gates. All gates execute and complete per unit.

Per-Unit Flow: Unit -> Gate 0->1->2->3->4->5->6->7 -> Unit Checkpoint -> Task Checkpoint -> Next Unit

Commit Timing

User selects when commits happen (during initialization).

Commit Message Format

State Management

State Path

State File Structure

{
  "version": "1.0.0",
  "cycle_id": "uuid",
  "started_at": "ISO timestamp",
  "updated_at": "ISO timestamp",
  "source_file": "path/to/tasks-frontend.md",
  "state_path": "docs/bee:dev-cycle-frontend-vuejs/current-cycle.json",
  "cycle_type": "frontend-vuejs",
  "ui_library_mode": "sindarian-vue | fallback-only",
  "backend_handoff": {
    "loaded": true,
    "source": "docs/bee:dev-cycle/handoff-frontend.json",
    "endpoints": [],
    "types": [],
    "contracts": []
  },
  "execution_mode": "manual_per_subtask|manual_per_task|automatic",
  "commit_timing": "per_subtask|per_task|at_end",
  "custom_prompt": {
    "type": "string",
    "optional": true,
    "max_length": 500,
    "description": "User-provided context for agents. Max 500 characters."
  },
  "status": "in_progress|completed|failed|paused|paused_for_approval|paused_for_task_approval",
  "feedback_loop_completed": false,
  "current_task_index": 0,
  "current_gate": 0,
  "current_subtask_index": 0,
  "tasks": [
    {
      "id": "T-001",
      "title": "Task title",
      "status": "pending|in_progress|completed|failed|blocked",
      "feedback_loop_completed": false,
      "subtasks": [
        {
          "id": "ST-001-01",
          "file": "subtasks/T-001/ST-001-01.md",
          "status": "pending|completed"
        }
      ],
      "gate_progress": {
        "implementation": {
          "status": "pending|in_progress|completed",
          "started_at": "...",
          "tdd_red": {
            "status": "pending|in_progress|completed",
            "test_file": "path/to/composable.spec.ts",
            "failure_output": "FAIL: expected element not found",
            "completed_at": "ISO timestamp"
          },
          "tdd_green": {
            "status": "pending|in_progress|completed",
            "implementation_file": "path/to/Component.vue",
            "test_pass_output": "PASS: 12 tests passed",
            "completed_at": "ISO timestamp"
          }
        },
        "accessibility": {
          "status": "pending|in_progress|completed",
          "wcag_violations": 0,
          "keyboard_nav_tested": false,
          "screen_reader_tested": false
        },
        "unit_testing": {
          "status": "pending|in_progress|completed",
          "coverage_actual": 0,
          "coverage_threshold": 85
        },
        "visual_testing": {
          "status": "pending|in_progress|completed",
          "snapshots_total": 0,
          "snapshots_passed": 0,
          "responsive_breakpoints_covered": []
        },
        "e2e_testing": {
          "status": "pending|in_progress|completed",
          "flows_tested": 0,
          "browsers_tested": [],
          "stability_runs": 0
        },
        "performance_testing": {
          "status": "pending|in_progress|completed",
          "lcp_ms": 0,
          "cls": 0,
          "inp_ms": 0,
          "lighthouse_score": 0
        },
        "review": {"status": "pending"},
        "validation": {"status": "pending"}
      },
      "agent_outputs": {
        "implementation": {
          "agent": "bee:frontend-engineer-vuejs",
          "output": "## Summary\n...",
          "timestamp": "ISO timestamp",
          "duration_ms": 0,
          "iterations": 1,
          "standards_compliance": {
            "total_sections": 12,
            "compliant": 12,
            "not_applicable": 0,
            "non_compliant": 0,
            "gaps": []
          }
        },
        "accessibility": {
          "agent": "bee:qa-analyst-frontend-vuejs",
          "test_mode": "accessibility",
          "output": "## Summary\n...",
          "verdict": "PASS",
          "wcag_violations": 0,
          "keyboard_nav_issues": 0,
          "screen_reader_issues": 0,
          "iterations": 1,
          "timestamp": "ISO timestamp"
        },
        "unit_testing": {
          "agent": "bee:qa-analyst-frontend-vuejs",
          "test_mode": "unit",
          "output": "## Summary\n...",
          "verdict": "PASS",
          "coverage_actual": 87.5,
          "coverage_threshold": 85,
          "iterations": 1,
          "timestamp": "ISO timestamp"
        },
        "visual_testing": {
          "agent": "bee:qa-analyst-frontend-vuejs",
          "test_mode": "visual",
          "output": "## Summary\n...",
          "verdict": "PASS",
          "snapshots_total": 15,
          "snapshots_passed": 15,
          "iterations": 1,
          "timestamp": "ISO timestamp"
        },
        "e2e_testing": {
          "agent": "bee:qa-analyst-frontend-vuejs",
          "test_mode": "e2e",
          "output": "## Summary\n...",
          "verdict": "PASS",
          "flows_tested": 5,
          "browsers_tested": ["chromium", "firefox", "webkit"],
          "stability_runs": 3,
          "iterations": 1,
          "timestamp": "ISO timestamp"
        },
        "performance_testing": {
          "agent": "bee:qa-analyst-frontend-vuejs",
          "test_mode": "performance",
          "output": "## Summary\n...",
          "verdict": "PASS",
          "lcp_ms": 2100,
          "cls": 0.05,
          "inp_ms": 150,
          "lighthouse_score": 93,
          "iterations": 1,
          "timestamp": "ISO timestamp"
        },
        "review": {
          "iterations": 1,
          "timestamp": "ISO timestamp",
          "duration_ms": 0,
          "code_reviewer": {
            "agent": "bee:code-reviewer",
            "output": "...",
            "verdict": "PASS",
            "issues": []
          },
          "business_logic_reviewer": {
            "agent": "bee:business-logic-reviewer",
            "output": "...",
            "verdict": "PASS",
            "issues": []
          },
          "security_reviewer": {
            "agent": "bee:security-reviewer",
            "output": "...",
            "verdict": "PASS",
            "issues": []
          },
          "test_reviewer": {
            "agent": "bee:test-reviewer",
            "output": "...",
            "verdict": "PASS",
            "issues": []
          },
          "frontend_engineer_reviewer": {
            "agent": "bee:frontend-engineer-vuejs",
            "mode": "review",
            "output": "...",
            "verdict": "PASS",
            "issues": []
          }
        },
        "validation": {
          "result": "approved|rejected",
          "timestamp": "ISO timestamp"
        }
      }
    }
  ],
  "metrics": {
    "total_duration_ms": 0,
    "gate_durations": {},
    "review_iterations": 0,
    "testing_iterations": 0
  }
}

State Persistence Rule (MANDATORY)

"Update state" means BOTH update the object and write to file. Not just in-memory.

After every gate transition, MUST execute:

# Step 1: Update state object with gate results
state.tasks[current_task_index].gate_progress.[gate_name].status = "completed"
state.current_gate = [next_gate_number]
state.updated_at = "[ISO timestamp]"

# Step 2: Write to file (MANDATORY - use Write tool)
Write tool:
  file_path: "docs/bee:dev-cycle-frontend-vuejs/current-cycle.json"
  content: [full JSON state]

# Step 3: Verify persistence (MANDATORY - use Read tool)
Read tool:
  file_path: "docs/bee:dev-cycle-frontend-vuejs/current-cycle.json"

Checkpoint Modes

CRITICAL: Execution mode affects CHECKPOINTS (user approval pauses), not GATES (quality checks). All gates execute regardless of mode.

Checkpoint Questions

Unit Checkpoint (after subtask completes Gate 7):

VISUAL CHANGE REPORT (MANDATORY - before checkpoint question):

• MUST invoke Skill("bee:visual-explainer") to generate a code-diff HTML report for this execution unit
• Content sourced from state JSON agent_outputs for the current unit:
  • TDD Output: tdd_red (failing test) + tdd_green (implementation)
  • Files Changed: Per-file before/after diff panels using git diff data from the implementation agent
  • Vue.js-Specific Metrics: WCAG violations resolved (Gate 1), Vitest snapshot pass rate (Gate 3), LCP/CLS/INP values (Gate 5), Lighthouse score (Gate 5)
  • Review Verdicts: Summary of all 5 reviewer verdicts from Gate 6
• Save to: docs/bee:dev-cycle-frontend-vuejs/reports/unit-{unit_id}-report.html
• Open in browser and tell the user the file path

Step 0: Verify PROJECT_RULES.md Exists (HARD GATE)

Check: Does docs/PROJECT_RULES.md exist?

  YES -> Proceed to Step 1 (Initialize or Resume)

  NO -> ASK: "Is this a LEGACY project?"
    YES (legacy) -> Dispatch bee:codebase-explorer + ask 3 questions + generate PROJECT_RULES.md
    NO (new) -> Check for PM documents (PRD/TRD/Feature Map)
      HAS PM docs -> Generate PROJECT_RULES.md from PM docs
      NO PM docs -> HARD BLOCK: "Run /bee:pre-dev-full or /bee:pre-dev-feature first"

Step 1: Initialize or Resume

Prompt-Only Mode (no task file)

1. Detect prompt-only mode: No task file argument provided
2. Analyze prompt: Extract intent, scope, and Vue.js/Nuxt 3 frontend requirements
3. Explore codebase: Dispatch bee:codebase-explorer to understand project structure
4. Generate tasks: Create task structure internally based on prompt + codebase analysis
5. Present generated tasks: Show user the auto-generated task breakdown
6. Confirm with user: "I generated X tasks from your prompt. Proceed?"
7. Continue to execution mode selection

New Cycle (with task file path)

1. Detect input: File -> Load directly | Directory -> Load tasks-frontend.md + discover subtasks/
2. Build order: Read tasks, check for subtasks (ST-XXX-01, 02...)
3. Detect UI library mode (Step 0 above)
4. Load backend handoff if docs/bee:dev-cycle/handoff-frontend.json exists
5. Capture and validate custom instructions: If second argument provided
6. Initialize state: Generate cycle_id, create state file, set indices to 0
7. Display plan: "Loaded X tasks with Y subtasks. UI mode: {mode}. Backend handoff: {loaded/not found}."
8. ASK EXECUTION MODE (MANDATORY - AskUserQuestion):
   • Options: (a) Manual per subtask (b) Manual per task (c) Automatic
   • Do not skip: User hints ≠ mode selection. Only explicit a/b/c is valid.
9. ASK COMMIT TIMING (MANDATORY - AskUserQuestion):
   • Options: (a) Per subtask (b) Per task (c) At the end
10. Start: Display mode + commit timing, proceed to Gate 0

Resume Cycle (--resume flag)

1. Find existing state file: Check docs/bee:dev-cycle-frontend-vuejs/current-cycle.json
2. Load state file, validate
3. Display: cycle started, tasks completed/total, current task/subtask/gate, paused reason
4. Handle paused states:

Step 2-9: Gate Execution (Per Unit)

Step 2: Gate 0 - Implementation

REQUIRED SUB-SKILL: Skill("bee:dev-implementation")

Dispatch appropriate Vue.js agent based on task type. Agent follows TDD (RED then GREEN) with frontend-vuejs.md standards.

Step 3: Gate 1 - Accessibility

REQUIRED SUB-SKILL: Skill("bee:dev-frontend-accessibility-vuejs")

Dispatch bee:qa-analyst-frontend-vuejs with test_mode="accessibility". MUST verify:

• 0 WCAG 2.1 AA violations (axe-core scan with @testing-library/vue)
• Keyboard navigation works for all interactive elements
• Screen reader announcements are correct
• Focus management via Vue's nextTick() and Teleport components is proper
• Color contrast ratios meet AA thresholds

Step 4: Gate 2 - Unit Testing

REQUIRED SUB-SKILL: Skill("bee:dev-unit-testing")

Dispatch bee:qa-analyst-frontend-vuejs with test_mode="unit". MUST verify:

• Coverage >= 85% (Vitest)
• All acceptance criteria have corresponding tests
• Composables, Pinia store actions, and event handlers tested
• createTestingPinia() used for store-dependent component tests
• flushPromises() used for async composable tests

Step 5: Gate 3 - Visual Testing

REQUIRED SUB-SKILL: Skill("bee:dev-frontend-visual-vuejs")

Dispatch bee:qa-analyst-frontend-vuejs with test_mode="visual". MUST verify:

• All Vue SFC component states have Vitest snapshots (default, hover, active, disabled, error, loading)
• Responsive breakpoints covered (mobile 375px, tablet 768px, desktop 1280px)
• No sindarian-vue component duplication in components/ui/
• Visual regression baseline established

Step 6: Gate 4 - E2E Testing

REQUIRED SUB-SKILL: Skill("bee:dev-frontend-e2e-vuejs")

Dispatch bee:qa-analyst-frontend-vuejs with test_mode="e2e". MUST verify:

• All user flows tested end-to-end with Playwright
• Cross-browser: Chromium, Firefox, WebKit
• 3x consecutive stable pass (no flakiness)
• Vue Router navigation guards tested
• Pinia store reset between test scenarios

Step 7: Gate 5 - Performance Testing

REQUIRED SUB-SKILL: Skill("bee:dev-frontend-performance-vuejs")

Dispatch bee:qa-analyst-frontend-vuejs with test_mode="performance". MUST verify:

• LCP (Largest Contentful Paint) < 2.5s
• CLS (Cumulative Layout Shift) < 0.1
• INP (Interaction to Next Paint) < 200ms
• Lighthouse Performance score >= 90
• NuxtImg used for ALL images (no bare <img> tags)
• useAsyncData/useLazyFetch used for all page data fetching (not raw fetch())

Step 8: Gate 6 - Code Review

REQUIRED SUB-SKILL: Skill("bee:requesting-code-review")

Dispatch all 5 reviewers in parallel (see Gate 6: Code Review Adaptation above).

Step 9: Gate 7 - Validation

REQUIRED SUB-SKILL: Skill("bee:dev-validation")

Present implementation summary to user. Require explicit "APPROVED" response.

Execution Report

Vue.js Frontend-Specific Metrics

Pressure Resistance

Vue.js-specific pressure scenarios:

Common Rationalizations - REJECTED