From bee-dev-team
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.
npx claudepluginhub luanrodrigues/ia-frmwrk --plugin bee-dev-teamThis skill uses the workspace's default tool permissions.
**Before any gate execution, you MUST load Bee Vue.js standards:**
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
Before any gate execution, you MUST load Bee Vue.js standards:
<fetch_required> https://raw.githubusercontent.com/luanrodrigues/ia-frmwrk/master/CLAUDE.md https://raw.githubusercontent.com/luanrodrigues/ia-frmwrk/master/dev-team/docs/standards/frontend-vuejs.md </fetch_required>
Fetch URLs above and extract: Agent Modification Verification requirements, Anti-Rationalization Tables requirements, Critical Rules, and Vue.js Frontend Standards.
<block_condition>
If any condition is true, STOP and report blocker. Cannot proceed without Bee standards.
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):
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."
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.
| Action | Tool | Purpose |
|---|---|---|
| Read task files | Read | Load task definitions from docs/pre-dev/*/tasks-frontend.md or docs/pre-dev/*/tasks.md |
| Read state files | Read | Load/verify docs/bee:dev-cycle-frontend-vuejs/current-cycle.json |
| Read PROJECT_RULES.md | Read | Load project-specific rules |
| Read backend handoff | Read | Load docs/bee:dev-cycle/handoff-frontend.json if available |
| Write state files | Write | Persist cycle state to JSON |
| Track progress | TodoWrite | Maintain task list |
| Dispatch agents | Task | Send work to specialist agents |
| Ask user questions | AskUserQuestion | Get execution mode, approvals |
| WebFetch standards | WebFetch | Load Bee Vue.js standards |
Any of these actions by orchestrator = IMMEDIATE VIOLATION. Dispatch agent instead.
If a task requires editing MORE than 3 files, MUST dispatch specialist agent.
*.vue, *.ts, *.css) - MUST dispatch agent+------------------------------------------------------------------+
| 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) |
| ================================================================ |
+------------------------------------------------------------------+
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.
| Mode | Meaning | Agent Behavior |
|---|---|---|
sindarian-vue | Sindarian Vue detected in package.json | Use Sindarian components first, shadcn-vue only for gaps |
fallback-only | No Sindarian Vue detected | Use shadcn-vue + Radix Vue as primary component library |
Anti-Rationalization for UI Library Mode:
| Rationalization | Why It's WRONG | Required Action |
|---|---|---|
| "Skip detection, just use shadcn-vue" | Project may have Sindarian Vue. Skipping = wrong components. | MUST detect before Gate 0 |
| "Mode doesn't matter for this task" | Mode affects every component decision in Gate 0. | MUST detect and store in state |
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.
Before dispatching any agent, you MUST load the corresponding sub-skill first.
<cannot_skip>
Skill("bee:dev-implementation") → then Task(subagent_type="bee:frontend-engineer-vuejs" or "bee:ui-engineer-vuejs" or "bee:frontend-bff-engineer-typescript")Skill("bee:dev-frontend-accessibility-vuejs") → then Task(subagent_type="bee:qa-analyst-frontend-vuejs", test_mode="accessibility")Skill("bee:dev-unit-testing") → then Task(subagent_type="bee:qa-analyst-frontend-vuejs", test_mode="unit")Skill("bee:dev-frontend-visual-vuejs") → then Task(subagent_type="bee:qa-analyst-frontend-vuejs", test_mode="visual")Skill("bee:dev-frontend-e2e-vuejs") → then Task(subagent_type="bee:qa-analyst-frontend-vuejs", test_mode="e2e")Skill("bee:dev-frontend-performance-vuejs") → then Task(subagent_type="bee:qa-analyst-frontend-vuejs", test_mode="performance")Skill("bee:requesting-code-review") → then 5x Task(...) in parallelSkill("bee:dev-validation") → N/A (verification only)
</cannot_skip>Between "WebFetch standards" and "Task(agent)" there MUST be "Skill(sub-skill)".
| Rationalization | Why It's WRONG | Required Action |
|---|---|---|
| "I know what the sub-skill does" | Knowledge ≠ execution. Sub-skill has iteration logic. | Load Skill() first |
| "Task() directly is faster" | Faster ≠ correct. Sub-skill has validation rules. | Load Skill() first |
| "Sub-skill just wraps Task()" | Sub-skills have retry logic, fix dispatch, validation. | Load Skill() first |
Between "WebFetch standards" and "Task(agent)" there MUST be "Skill(sub-skill)".
| Rationalization | Why It's WRONG | Required Action |
|---|---|---|
| "It's just one small Vue component" | File count doesn't determine agent need. Standards do. | DISPATCH specialist agent |
| "I already loaded the standards" | Loading standards ≠ permission to implement. Standards are for AGENTS. | DISPATCH specialist agent |
| "I can write Vue 3 / TypeScript" | Knowing framework ≠ having Bee standards loaded. Agent has them. | DISPATCH specialist agent |
| "Just a quick CSS fix" | "Quick" is irrelevant. All source changes require specialist. | DISPATCH specialist agent |
| "Let me check if tests pass first" | Agent runs tests in TDD cycle. You don't run tests. | DISPATCH specialist agent |
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.
<block_condition>
<cannot_skip>
No exceptions. User cannot override. Time pressure cannot override.
| Gate | Skill | Purpose | Agent | Standards Module |
|---|---|---|---|---|
| 0 | bee:dev-implementation | Write code following TDD | bee:frontend-engineer-vuejs / bee:ui-engineer-vuejs / bee:frontend-bff-engineer-typescript | frontend-vuejs.md |
| 1 | bee:dev-frontend-accessibility-vuejs | WCAG 2.1 AA compliance | bee:qa-analyst-frontend-vuejs (test_mode: accessibility) | testing-accessibility.md |
| 2 | bee:dev-unit-testing | Unit tests 85%+ coverage | bee:qa-analyst-frontend-vuejs (test_mode: unit) | frontend-vuejs.md |
| 3 | bee:dev-frontend-visual-vuejs | Vitest snapshot/visual regression tests | bee:qa-analyst-frontend-vuejs (test_mode: visual) | testing-visual.md |
| 4 | bee:dev-frontend-e2e-vuejs | E2E tests with Playwright | bee:qa-analyst-frontend-vuejs (test_mode: e2e) | testing-e2e.md |
| 5 | bee:dev-frontend-performance-vuejs | Core Web Vitals + Lighthouse + Nuxt optimizations | bee:qa-analyst-frontend-vuejs (test_mode: performance) | testing-performance.md |
| 6 | bee:requesting-code-review | Parallel code review (5 reviewers) | bee:code-reviewer, bee:business-logic-reviewer, bee:security-reviewer, bee:test-reviewer, bee:frontend-engineer-vuejs (review mode) | N/A |
| 7 | bee:dev-validation | Final acceptance validation | N/A (verification) | N/A |
All gates are MANDATORY. No exceptions. No skip reasons.
| Condition | Agent to Dispatch |
|---|---|
| Vue 3 / Nuxt 3 component implementation | bee:frontend-engineer-vuejs |
| Design system / Sindarian Vue component | bee:ui-engineer-vuejs |
| Nuxt server API / BFF aggregation layer | bee:frontend-bff-engineer-typescript |
| Mixed (component + BFF) | Dispatch bee:frontend-engineer-vuejs first, then bee:frontend-bff-engineer-typescript |
UI library mode (detected in Step 0) MUST be passed to the agent as context.
TDD (RED→GREEN) applies to behavioral logic. Visual/presentational Vue components use test-after.
| Component Layer | TDD Required? | Where Tests Are Created | Rationale |
|---|---|---|---|
| Composables (custom hooks) | YES - TDD RED→GREEN | Gate 0 (implementation) | Test defines the composable contract before code |
| Form validation (VeeValidate schemas) | YES - TDD RED→GREEN | Gate 0 (implementation) | Test defines validation rules before code |
| Pinia store actions and getters | YES - TDD RED→GREEN | Gate 0 (implementation) | Test defines state transitions before code |
| Conditional rendering (v-if logic) | YES - TDD RED→GREEN | Gate 0 (implementation) | Test defines when elements show/hide |
| API integration (useFetch/useAsyncData) | YES - TDD RED→GREEN | Gate 0 (implementation) | Test defines expected request/response |
| Layout / styling (templates without logic) | NO - test-after | Gate 3 (visual testing) | Visual output is exploratory; snapshot locks it |
| Animations / Vue transitions | NO - test-after | Gate 3 (visual testing) | Motion is iterative; test captures final state |
| Static presentational components | NO - test-after | Gate 3 (visual testing) | No logic to drive with RED phase |
Rules:
Vue.js-Specific TDD Anti-Rationalization:
| Rationalization | Why It's WRONG | Required Action |
|---|---|---|
| "This composable is simple, skip TDD" | Simple composables still need contract verification. | TDD RED→GREEN for all composables |
| "VeeValidate handles validation, skip TDD" | Your schema rules need test-driven definition. | TDD RED→GREEN for VeeValidate schemas |
| "Pinia action is obvious, skip TDD" | State mutations need deterministic tests before code. | TDD RED→GREEN for Pinia actions |
| "Template rendering is visual" | v-if conditions are logic, not presentation. | TDD RED→GREEN for conditional rendering logic |
| "useFetch is just a wrapper" | Composables wrapping useFetch define caching, error handling contracts. | TDD for composable behavior |
For the Vue.js frontend cycle, the 5 parallel reviewers are:
| # | Reviewer | Focus Area |
|---|---|---|
| 1 | bee:code-reviewer | Code quality, patterns, maintainability, Vue 3 Composition API best practices |
| 2 | bee:business-logic-reviewer | Business logic correctness, domain rules, acceptance criteria |
| 3 | bee:security-reviewer | XSS, CSRF, auth handling, sensitive data exposure, CSP, Nuxt server route security |
| 4 | bee:test-reviewer | Test quality, coverage gaps, Vitest/Playwright patterns, assertion quality |
| 5 | bee:frontend-engineer-vuejs (review mode) | Accessibility compliance, Vue.js/Nuxt 3 standards, component architecture, Pinia patterns |
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...", ... }
A gate is COMPLETE only when all components finish successfully:
| Gate | Components Required | Partial = FAIL |
|---|---|---|
| 0.1 | TDD-RED: Failing test written + failure output captured (behavioral components only - see Vue.js TDD Policy) | Test exists but no failure output = FAIL. Visual-only components skip to 0.2 |
| 0.2 | TDD-GREEN: Implementation passes test (behavioral) OR implementation complete (visual) | Code exists but test fails = FAIL |
| 0 | Both 0.1 and 0.2 complete (behavioral) OR 0.2 complete (visual - snapshots deferred to Gate 3) | 0.1 done without 0.2 = FAIL |
| 1 | 0 WCAG AA violations + keyboard navigation tested + screen reader tested | Any violation = FAIL |
| 2 | Unit test coverage >= 85% + all AC tested | 84% = FAIL |
| 3 | All state snapshots pass + responsive breakpoints covered | Missing snapshots = FAIL |
| 4 | All user flows tested + cross-browser (Chromium, Firefox, WebKit) + 3x stable pass | Flaky = FAIL |
| 5 | LCP < 2.5s + CLS < 0.1 + INP < 200ms + Lighthouse >= 90 + NuxtImg used for all images | Any threshold missed = FAIL |
| 6 | All 5 reviewers PASS | 4/5 reviewers = FAIL |
| 7 | Explicit "APPROVED" from user | "Looks good" = not approved |
CRITICAL for Gate 6: Running 4 of 5 reviewers is not a partial pass - it's a FAIL. Re-run all 5 reviewers.
Gates MUST execute in order: 0 -> 1 -> 2 -> 3 -> 4 -> 5 -> 6 -> 7. All 8 gates are MANDATORY.
| Violation | Why It's WRONG | Consequence |
|---|---|---|
| Skip Gate 1 (Accessibility) | "It's internal tool" | Internal tools MUST be accessible. Legal requirement. |
| Skip Gate 2 (Unit Testing) | "E2E covers it" | E2E is slow, Vitest unit tests catch logic bugs faster |
| Skip Gate 3 (Visual) | "Snapshots are brittle" | Fix brittleness, don't skip regression detection |
| Skip Gate 4 (E2E) | "Manual testing done" | Manual testing is not reproducible or automated |
| Skip Gate 5 (Performance) | "Optimize later" | Later = never. NuxtImg, useAsyncData apply NOW |
| Reorder Gates | "Review before test" | Reviewing untested Vue code wastes reviewer time |
| Parallel Gates | "Run 1 and 2 together" | Dependencies exist. Order is intentional. |
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
| Scenario | Execution Unit | Gates Per Unit |
|---|---|---|
| Task without subtasks | Task itself | 8 gates |
| Task with subtasks | Each subtask | 8 gates per subtask |
User selects when commits happen (during initialization).
| Option | When Commit Happens | Use Case |
|---|---|---|
| (a) Per subtask | After each subtask passes Gate 7 | Fine-grained history, easy rollback per subtask |
| (b) Per task | After all subtasks of a task complete | Logical grouping, one commit per feature chunk |
| (c) At the end | After entire cycle completes | Single commit with all changes, clean history |
| Timing | Message Format | Example |
|---|---|---|
| Per subtask | feat({subtask_id}): {subtask_title} | feat(ST-001-02): implement transaction list component |
| Per task | feat({task_id}): {task_title} | feat(T-001): implement dashboard page |
| At the end | feat({cycle_id}): complete vue.js frontend dev cycle for {feature} | feat(cycle-abc123): complete vue.js frontend dev cycle for dashboard |
| Task Source | State Path |
|---|---|
| Any source | docs/bee:dev-cycle-frontend-vuejs/current-cycle.json |
{
"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
}
}
"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"
| Mode | Checkpoint Behavior | Gate Behavior |
|---|---|---|
| Manual per subtask | Pause after each subtask completes all 8 gates | All 8 gates execute without pause |
| Manual per task | Pause after all subtasks of a task complete | All 8 gates execute without pause |
| Automatic | No pauses | All 8 gates execute without pause |
CRITICAL: Execution mode affects CHECKPOINTS (user approval pauses), not GATES (quality checks). All gates execute regardless of mode.
Unit Checkpoint (after subtask completes Gate 7):
VISUAL CHANGE REPORT (MANDATORY - before checkpoint question):
Skill("bee:visual-explainer") to generate a code-diff HTML report for this execution unitagent_outputs for the current unit:
tdd_red (failing test) + tdd_green (implementation)git diff data from the implementation agentdocs/bee:dev-cycle-frontend-vuejs/reports/unit-{unit_id}-report.htmlCheck: 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"
bee:codebase-explorer to understand project structuredocs/bee:dev-cycle/handoff-frontend.json existsdocs/bee:dev-cycle-frontend-vuejs/current-cycle.json| Status | Action |
|---|---|
paused_for_approval | Re-present unit checkpoint |
paused_for_task_approval | Re-present task checkpoint |
paused (generic) | Ask user to confirm resume |
in_progress | Resume from current gate |
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.
REQUIRED SUB-SKILL: Skill("bee:dev-frontend-accessibility-vuejs")
Dispatch bee:qa-analyst-frontend-vuejs with test_mode="accessibility". MUST verify:
REQUIRED SUB-SKILL: Skill("bee:dev-unit-testing")
Dispatch bee:qa-analyst-frontend-vuejs with test_mode="unit". MUST verify:
REQUIRED SUB-SKILL: Skill("bee:dev-frontend-visual-vuejs")
Dispatch bee:qa-analyst-frontend-vuejs with test_mode="visual". MUST verify:
REQUIRED SUB-SKILL: Skill("bee:dev-frontend-e2e-vuejs")
Dispatch bee:qa-analyst-frontend-vuejs with test_mode="e2e". MUST verify:
REQUIRED SUB-SKILL: Skill("bee:dev-frontend-performance-vuejs")
Dispatch bee:qa-analyst-frontend-vuejs with test_mode="performance". MUST verify:
<img> tags)REQUIRED SUB-SKILL: Skill("bee:requesting-code-review")
Dispatch all 5 reviewers in parallel (see Gate 6: Code Review Adaptation above).
REQUIRED SUB-SKILL: Skill("bee:dev-validation")
Present implementation summary to user. Require explicit "APPROVED" response.
| Metric | Value |
|---|---|
| Duration | Xm Ys |
| Iterations | N |
| Result | PASS/FAIL/PARTIAL |
| Metric | Value |
|---|---|
| UI Library Mode | sindarian-vue / fallback-only |
| Backend Handoff | loaded / not found |
| WCAG Violations | 0 |
| Unit Coverage | XX.X% |
| Visual Snapshots | X/Y passed |
| E2E Stability | 3/3 runs |
| LCP | Xms |
| CLS | X.XX |
| INP | Xms |
| Lighthouse | XX |
| NuxtImg Compliance | YES/NO |
| Reviewers | 5/5 PASS |
Vue.js-specific pressure scenarios:
| Pressure Type | Request | Agent Response |
|---|---|---|
| Accessibility | "Skip accessibility, it's an internal tool" | "FORBIDDEN. Internal tools MUST be accessible. WCAG AA is a legal requirement in many jurisdictions. Gate 1 executes fully." |
| Browser Coverage | "Only test Chromium, it's the main browser" | "All 3 browsers (Chromium, Firefox, WebKit) are REQUIRED. Cross-browser issues are the most common production bugs." |
| Performance | "Performance will be optimized later" | "Performance thresholds apply NOW. LCP < 2.5s, CLS < 0.1, INP < 200ms, Lighthouse >= 90. useAsyncData and NuxtImg apply NOW." |
| Visual Tests | "Vitest snapshots are too brittle to maintain" | "Fix the brittleness (use threshold tolerances or more stable selectors), don't skip regression detection. Gate 3 is MANDATORY." |
| Design System | "We'll align with design system later" | "Design system compliance is part of Gate 0. Components MUST use Sindarian Vue (or shadcn-vue fallback) from the start." |
| Pinia | "Vuex works fine, we'll migrate later" | "Vuex-to-Pinia migration is a standards gap. Gate 0 implements with Pinia. Vuex usage = FINDING-XXX." |
| Excuse | Reality |
|---|---|
| "Backend already tested this endpoint" | Backend tests verify API logic. Frontend tests verify Vue rendering, Pinia state management, user interaction, and accessibility. Different concerns entirely. |
| "Accessibility is optional for MVP" | Accessibility is NEVER optional. WCAG AA compliance is mandatory. Building without it means expensive retrofitting later. |
| "Vitest snapshots are brittle" | Snapshots catch visual regressions that no other test type detects. Fix brittleness with stable slot content and representative store states, don't skip the gate. |
| "E2E tests are slow, unit tests are enough" | Vitest unit tests verify composables in isolation. Playwright E2E tests verify user flows end-to-end. Both are MANDATORY. |
| "Lighthouse score is close enough at 88" | Close enough ≠ passing. Threshold is >= 90. Use NuxtImg, lazy load routes, use useLazyFetch until threshold is met. |
| "Automatic mode means faster" | Automatic mode skips CHECKPOINTS, not GATES. Same quality, less interruption. |
| "Only desktop matters, skip mobile testing" | Responsive design is mandatory. Visual tests MUST cover mobile, tablet, and desktop breakpoints. |
| "Options API works, Composition API migration is optional" | Options API = FINDING-XXX. Composition API with |
| "Pinia is optional, Vuex is still supported" | Vuex usage = mandatory FINDING-XXX. Pinia is the Vue 3 standard state manager. |
If you catch yourself thinking any of those patterns, STOP immediately and return to gate execution.
The "just this once" pattern leads to complete gate erosion:
Day 1: "Skip accessibility just this once" -> Approved (precedent set)
Day 2: "Skip visual tests, we did it last time" -> Approved (precedent extended)
Day 3: "Skip performance, pattern established" -> Approved (gates meaningless)
Day 4: Production incident: inaccessible UI + layout regression + 5s load time + Vuex in Vue 3 codebase
Prevention rules: