name	workflows-code
description	Orchestrator guiding developers through implementation, debugging, and verification phases across specialized code quality skills (project)
allowed-tools	Read, Grep, Glob, Bash
version	2.0.0

Code Workflows - Development Orchestrator

Unified workflow guidance across 6 specialized code quality skills for frontend development.

Core Principle: Implementation → Debugging (if needed) → Verification (MANDATORY) = reliable frontend code.

1. 🎯 WHEN TO USE

Activation Triggers

Use this skill when:

Starting frontend development work
Implementing forms, APIs, DOM manipulation
Integrating external libraries or media
JavaScript files have been modified
Encountering console errors or unexpected behavior
Deep call stack issues or race conditions
Multiple debugging attempts needed
Need root cause identification
Before ANY completion claim ("works", "fixed", "done", "complete", "passing")
After implementing or debugging frontend code

Keyword triggers:

Implementation: "implement", "build", "create", "add feature", "async", "validation", "CDN", "animation", "webflow", "performance", "security"
Debugging: "debug", "fix", "error", "not working", "broken", "issue", "bug", "console error"
Verification: "done", "complete", "works", "fixed", "finished", "verify", "test"

When NOT to Use

Do NOT use this skill for:

Non-frontend tasks (backend, infrastructure, DevOps)
Documentation-only changes
Pure research without implementation
Git/version control operations (use workflows-git instead)
Skill creation/editing (use workflows-documentation instead)

Phase Overview

This orchestrator operates in three primary phases:

Phase	Purpose	Trigger
Phase 1: Implementation	Writing code with async handling, validation, cache-busting	Starting new code, modifying existing
Phase 2: Debugging	Fixing issues systematically using DevTools	Console errors, unexpected behavior
Phase 3: Verification	Browser testing before completion claims	Before ANY "done" or "works" claim

The Iron Law: NO COMPLETION CLAIMS WITHOUT FRESH BROWSER VERIFICATION EVIDENCE

2. 🧭 SMART ROUTING

Resource Loading Levels

Level	When to Load	Resources
ALWAYS	Every phase invocation	Core workflow + essential patterns
CONDITIONAL	If task keywords match	Domain-specific references
ON_DEMAND	Only on explicit request	Deep-dive optimization guides

Task Keyword Triggers

TASK_KEYWORDS = {
    "VERIFICATION": ["done", "complete", "works", "verify", "finished"],
    "DEBUGGING": ["bug", "fix", "error", "broken", "issue", "failing"],
    "CODE_QUALITY": ["style check", "quality check", "validate code", "check standards", "code review"],
    "ANIMATION": ["animation", "motion", "gsap", "lenis", "scroll"],
    "FORMS": ["form", "validation", "input", "submit", "botpoison"],
    "VIDEO": ["video", "hls", "streaming", "player"],
    "DEPLOYMENT": ["deploy", "minify", "cdn", "r2", "production"],
    # ON_DEMAND explicit request triggers
    "PERFORMANCE": ["performance", "optimize", "core web vitals", "lazy load", "cache"],
    "OBSERVERS": ["observer", "mutation", "intersection", "resize observer"]
}

Phase Detection

TASK CONTEXT
    │
    ├─► Writing new code / implementing feature
    │   └─► PHASE 1: Implementation
    │       └─► Load: phase1-implementation/*.md (ALWAYS: implementation_workflows.md)
    │       └─► At completion: CODE QUALITY GATE (see Phase 1.5)
    │
    ├─► Implementation complete / claiming done
    │   └─► PHASE 1.5: Code Quality Gate (MANDATORY for all code files)
    │       └─► Load: assets/checklists/code_quality_checklist.md (ALWAYS)
    │       └─► Load: references/standards/code_style_enforcement.md (if violations found)
    │       └─► JavaScript (.js): Sections 2-7 of checklist
    │       └─► CSS (.css): Section 8 of checklist
    │       └─► ⚠️ HARD BLOCK: All P0 checklist items must pass before claiming complete
    │
    ├─► Code not working / debugging issues
    │   └─► PHASE 2: Debugging
    │       └─► Load: phase2-debugging/debugging_workflows.md (ALWAYS)
    │       └─► See: workflows-chrome-devtools skill for DevTools reference
    │
    ├─► Code complete / needs verification
    │   └─► PHASE 3: Verification (MANDATORY)
    │       └─► Load: phase3-verification/verification_workflows.md (ALWAYS)
    │       └─► ⚠️ The Iron Law: NO COMPLETION CLAIMS WITHOUT BROWSER VERIFICATION
    │
    └─► Quick reference needed
        └─► Load: standards/quick_reference.md

Specific Use Case Router

Phase 1: Implementation

Use Case	Route To	Load Level
Async/timing issues, DOM not ready, race conditions	implementation_workflows.md#2-⏱️-condition-based-waiting	ALWAYS
Form input, API calls, DOM manipulation validation	implementation_workflows.md#3-🛡️-defense-in-depth-validation	ALWAYS
JavaScript minification, terser, verification	minification_guide.md	CONDITIONAL
CDN deployment, version management, Cloudflare R2	cdn_deployment.md	CONDITIONAL
CSS vs Motion.dev, entrance animations, scroll triggers	animation_workflows.md	CONDITIONAL
Webflow collection lists, platform limits, ID duplication	webflow_patterns.md	CONDITIONAL
Animation/video/asset optimization	performance_patterns.md	ON_DEMAND
XSS, CSRF, injection prevention	security_patterns.md	CONDITIONAL
Third-party library integration, CDN loading, HLS.js	third_party_integrations.md	CONDITIONAL
MutationObserver, IntersectionObserver, DOM watching	observer_patterns.md	ON_DEMAND

Phase 2: Debugging

Use Case	Route To	Load Level
Console errors, layout bugs, event handler failures	debugging_workflows.md#2-🔍-systematic-debugging	ALWAYS
Deep call stack, mysterious failures, corrupted data	debugging_workflows.md#3-🎯-root-cause-tracing	ALWAYS
Slow page, janky animations, memory leaks	debugging_workflows.md#4-🔍-performance-debugging	CONDITIONAL
Collection list not rendering, event listeners failing	webflow_patterns.md	CONDITIONAL
Motion.dev not loading, layout jumps, jank	animation_workflows.md#7-🐛-common-issues-and-solutions	CONDITIONAL

Phase 3: Verification

Use Case	Route To	Load Level
Before claiming "works", "fixed", "done", "complete"	verification_workflows.md	ALWAYS
Animation working, layout fixed, feature complete	verification_workflows.md	ALWAYS
Video/media loads, form submission works	verification_workflows.md	ALWAYS

Resource Router

def route_frontend_resources(task):
    # ──────────────────────────────────────────────────────────────────
    # Level-based loading
    # ALWAYS: Load for every phase invocation
    # CONDITIONAL: Load if keywords match
    # ON_DEMAND: Load on explicit request
    # ──────────────────────────────────────────────────────────────────
    
    # ──────────────────────────────────────────────────────────────────
    # Phase 1: Implementation
    # ALWAYS: implementation_workflows.md
    # CONDITIONAL: animation, webflow, security (if keywords match)
    # ON_DEMAND: performance, observer (on request)
    # ──────────────────────────────────────────────────────────────────
    if task.phase == "implementation":
        # ALWAYS: Load for async/validation
        if task.has_async_loading:
            load("assets/patterns/wait_patterns.js")  # ALWAYS: async waiting patterns
        if task.needs_validation:
            load("assets/patterns/validation_patterns.js")  # ALWAYS: validation templates
        
        # CONDITIONAL: Load if deployment keywords detected
        if task.needs_minification:
            return load("references/deployment/minification_guide.md")  # CONDITIONAL: terser, verification
        if task.needs_cdn_deployment:
            return load("references/deployment/cdn_deployment.md")  # CONDITIONAL: R2 upload, versioning
        
        # CONDITIONAL: Load if animation keywords detected
        if task.has_animations:
            return load("references/phase1-implementation/animation_workflows.md")  # CONDITIONAL: CSS vs Motion.dev
        
        # CONDITIONAL: Load if webflow keywords detected
        if task.webflow_specific:
            return load("references/phase1-implementation/webflow_patterns.md")  # CONDITIONAL: platform limits
        
        # CONDITIONAL: Load if security keywords detected
        if task.security_concerns:
            return load("references/phase1-implementation/security_patterns.md")  # CONDITIONAL: OWASP Top 10
        
        # ON_DEMAND: Load on explicit request (performance optimization)
        if task.needs_performance_optimization:
            return load("references/phase1-implementation/performance_patterns.md")  # ON_DEMAND: Core Web Vitals
        
        # ON_DEMAND: Load on explicit request (observer patterns)
        if task.needs_observer_patterns:
            return load("references/phase1-implementation/observer_patterns.md")  # ON_DEMAND: MutationObserver, IO
        
        # ALWAYS: Default implementation patterns
        return load("references/phase1-implementation/implementation_workflows.md")

    # ──────────────────────────────────────────────────────────────────
    # Phase 1.5: Code Quality Gate (MANDATORY for all code files)
    # ALWAYS: code_quality_checklist.md
    # CONDITIONAL: code_style_enforcement.md (if violations found)
    # JavaScript (.js): Sections 2-7 | CSS (.css): Section 8
    # ──────────────────────────────────────────────────────────────────
    if task.phase == "code_quality" or task.implementation_complete:
        load("assets/checklists/code_quality_checklist.md")  # ALWAYS: validation checklist
        if task.has_violations:
            load("references/standards/code_style_enforcement.md")  # CONDITIONAL: remediation
        return True  # Gate must pass before proceeding

    # ──────────────────────────────────────────────────────────────────
    # Phase 2: Debugging
    # ALWAYS: debugging_workflows.md + debugging_checklist.md
    # ──────────────────────────────────────────────────────────────────
    if task.phase == "debugging":
        load("assets/checklists/debugging_checklist.md")  # ALWAYS: step-by-step workflow
        # For DevTools reference, see workflows-chrome-devtools skill
        return load("references/phase2-debugging/debugging_workflows.md")  # ALWAYS: root cause tracing

    # ──────────────────────────────────────────────────────────────────
    # Phase 3: Verification (MANDATORY)
    # ALWAYS: verification_workflows.md + verification_checklist.md
    # ──────────────────────────────────────────────────────────────────
    if task.phase == "verification" or task.claiming_complete:
        load("assets/checklists/verification_checklist.md")  # ALWAYS: mandatory steps
        return load("references/phase3-verification/verification_workflows.md")  # ALWAYS: browser testing

    # ──────────────────────────────────────────────────────────────────
    # Quick Reference
    # ──────────────────────────────────────────────────────────────────
    if task.needs_quick_reference:
        return load("references/standards/quick_reference.md")  # one-page cheat sheet

# ──────────────────────────────────────────────────────────────────
# STATIC RESOURCES (always available, not conditionally loaded)
# Located in references/standards/ for cross-phase access
# ──────────────────────────────────────────────────────────────────
# references/standards/code_quality_standards.md → Cross-phase: Initialization, error handling, validation patterns
# references/standards/code_style_guide.md → Cross-phase: Naming conventions, formatting, comments
# references/standards/code_style_enforcement.md → Phase 1.5: Enforcement rules with examples and remediation
# references/standards/shared_patterns.md → DevTools, logging, testing, error patterns
# references/phase1-implementation/performance_patterns.md → Phase 1: Performance optimization (ON_DEMAND)
# references/deployment/minification_guide.md → Safe JS minification with terser, verification pipeline
# references/deployment/cdn_deployment.md → Cloudflare R2 upload, version management, HTML updates
# assets/checklists/code_quality_checklist.md → Phase 1.5: Code quality validation checklist

# See "The Iron Law" in Section 1 - Phase 3: Verification
# See "Code Quality Gate" in Section 3 - Phase 1.5 for style enforcement

3. 🛠️ HOW IT WORKS

Development Lifecycle

Frontend development flows through phases with a mandatory quality gate:

Implementation → Code Quality Gate → Debugging (if issues) → Verification (MANDATORY)

Phase 1: Implementation

Implementation involves three specialized workflows:

Condition-Based Waiting - Replace arbitrary setTimeout with condition polling
- Wait for actual conditions, not timeouts
- Includes timeout limits with clear errors
- Handles: DOM ready, library loading, image/video ready, animations
Defense-in-Depth Validation - Validate at every layer data passes through
- Layer 1: Entry point validation
- Layer 2: Processing validation
- Layer 3: Output validation
- Layer 4: Safe access patterns
CDN Version Management - Update version parameters after JS changes
- Manual version increment workflow (see Section 4)
- Updates all HTML files referencing changed JS
- Forces browser cache refresh

See implementation_workflows.md for complete workflows.

Phase 1.5: Code Quality Gate

Before claiming implementation is complete, validate code against style standards:

Identify File Type - Determine which checklist sections apply:
- JavaScript (.js): Sections 2-7 (13 P0 items)
- CSS (.css): Section 8 (4 P0 items)
- Both: All sections (17 P0 items)
Load Checklist - Load code_quality_checklist.md
Validate P0 Items - Check all P0 (blocking) items for the file type:

JavaScript P0 Items:
- File header format (three-line with box-drawing characters)
- Section organization (IIFE, numbered headers)
- No commented-out code
- snake_case naming conventions
- CDN-safe initialization pattern
CSS P0 Items:
- Custom property naming (semantic prefixes: --font-*, --vw-*, etc.)
- Attribute selectors use case-insensitivity flag i
- BEM naming convention (.block--element, .block-modifier)
- GPU-accelerated animation properties only (transform, opacity, scale)
Validate P1 Items - Check all P1 (required) items for the file type
Fix or Document - For any failures:
- P0 violations: MUST fix before proceeding
- P1 violations: Fix OR document approved deferral
- P2 violations: Can defer with documented reason
Only Then - Proceed to verification or claim completion

Gate Rule: If ANY P0 item fails, completion is BLOCKED until fixed.

See code_style_enforcement.md for remediation instructions.

Phase 2: Debugging

Systematic Debugging uses a 4-phase framework:

Root Cause Investigation
- Read error messages carefully
- Reproduce consistently
- Check recent changes
- Gather evidence in DevTools
- Trace data flow
Pattern Analysis
- Find working examples
- Compare against references
- Identify differences
- Understand dependencies
Hypothesis and Testing
- Form single hypothesis
- Test minimally (one change at a time)
- Verify before continuing
- Ask when unsure
Implementation
- Document the fix
- Implement single fix
- Verify in browser
- If 3+ fixes failed → question approach

Root Cause Tracing traces backward through call chain:

Observe symptom
Find immediate cause
Trace one level up
Keep tracing up
Fix at source, not symptom

See debugging_workflows.md for complete workflows.

Phase 3: Verification

The Gate Function - BEFORE claiming any status:

IDENTIFY: What command/action proves this claim?
OPEN: Launch actual browser
TEST: Execute the interaction
VERIFY: Does browser show expected behavior?
VERIFY: Multi-viewport check (mobile + desktop)
VERIFY: Cross-browser check (if critical)
RECORD: Note what you saw
ONLY THEN: Make the claim

Browser Testing Matrix:

Minimum (ALWAYS REQUIRED):

Chrome Desktop (1920px)
Mobile emulation (375px)
DevTools Console - No errors

Standard (Production work):

Chrome Desktop (1920px)
Chrome Tablet emulation (768px)
Chrome Mobile emulation (375px)
DevTools console clear at all viewports

See verification_workflows.md for complete requirements.

4. 📋 RULES

Phase 1: Implementation

✅ ALWAYS

Wait for actual conditions, not arbitrary timeouts (include timeout limits)
Validate all inputs: function parameters, API responses, DOM elements
Sanitize user input before storing or displaying
Update CDN versions after JavaScript modifications
Use optional chaining (?.) and try/catch for safe access
Log meaningful success/error messages

❌ NEVER

Use setTimeout without documenting WHY
Assume data exists without checking
Trust external data without validation
Use innerHTML with unsanitized data
Skip CDN version updates after JS changes

⚠️ ESCALATE IF

Condition never becomes true (infinite wait)
Validation logic becoming too complex
Security concerns with XSS or injection attacks
Script reports no HTML files found
CDN version cannot be determined

See implementation_workflows.md for detailed rules.

Phase 1.5: Code Quality Gate (MANDATORY for all code files)

✅ ALWAYS

Load code_quality_checklist.md before claiming implementation complete
Identify file type (JavaScript → Sections 2-7, CSS → Section 8)
Validate all P0 items for the applicable file type
Fix P0 violations before proceeding
Document any P1/P2 deferrals with reasons
Use code_style_enforcement.md for remediation guidance

❌ NEVER (JavaScript)

Skip the quality gate for "simple" changes
Claim completion with P0 violations
Use commented-out code (delete it)
Use camelCase for variables/functions (use snake_case)
Skip file headers or section organization

❌ NEVER (CSS)

Use generic custom property names without semantic prefixes
Omit case-insensitivity flag i on data attribute selectors
Use inconsistent BEM naming (mix snake_case, camelCase)
Animate layout properties (width, height, top, left, padding, margin)
Set will-change permanently in CSS (set dynamically via JS)

⚠️ ESCALATE IF

Cannot fix a P0 violation
Standard conflicts with existing code patterns
Unclear whether code is compliant

See code_quality_checklist.md and code_style_enforcement.md for detailed rules.

Phase 2: Debugging

✅ ALWAYS

Open DevTools console BEFORE attempting fixes
Read complete error messages and stack traces
Test across multiple viewports (375px, 768px, 1920px)
Test one change at a time
Trace backward from symptom to root cause
Document root cause in comments

❌ NEVER

Skip console error messages
Change multiple things simultaneously
Proceed with 4th fix without questioning approach
Fix only symptoms without tracing root cause
Leave production console.log statements

⚠️ ESCALATE IF

Bug only occurs in production
Issue requires changing Webflow-generated code
Cross-browser compatibility cannot be achieved
Bug intermittent despite extensive logging
Cannot trace backward (dead end)
Root cause in third-party library

See debugging_workflows.md for detailed rules.

Phase 3: Verification (MANDATORY)

✅ ALWAYS

Open actual browser to verify (not just code review)
Test mobile viewport (375px minimum)
Check DevTools console for errors
Test interactive elements by clicking them
Note what you tested in your claim

❌ NEVER

Claim "works" without opening browser
Say "should work" or "probably works" - test it
Test only at one viewport size
Assume desktop testing covers mobile
Express satisfaction before verification

⚠️ ESCALATE IF

Cannot test in required browsers
Real device testing required but unavailable
Issue only reproduces in production
Performance testing requires specialized tools

See verification_workflows.md for detailed rules.

5. 🏆 SUCCESS CRITERIA

Phase 1: Implementation

Implementation is successful when:

✅ No arbitrary setTimeout used (or documented why needed)
✅ All inputs validated (parameters, DOM, API responses)
✅ User input sanitized
✅ CDN versions updated after JS changes
✅ Safe defaults provided for missing data
✅ Clear error messages logged

See implementation_workflows.md for complete criteria.

Phase 1.5: Code Quality Gate

Code Quality Gate passes when:

JavaScript (.js):

✅ All P0 checklist items verified and passing (Sections 2-7)
✅ All P1 checklist items verified or documented deferrals
✅ File headers use correct format (three-line, box-drawing)
✅ Section organization follows standard (IIFE, numbered headers)
✅ No commented-out code present
✅ All naming uses snake_case (not camelCase)
✅ CDN-safe initialization pattern followed

CSS (.css):

✅ All P0 checklist items verified and passing (Section 8)
✅ Custom properties use semantic prefixes (--font-*, --vw-*, etc.)
✅ Attribute selectors include case-insensitivity flag i
✅ Class names follow BEM convention (.block--element, .block-modifier)
✅ Animations use GPU-accelerated properties only (transform, opacity, scale)

See code_quality_checklist.md for complete criteria.

Phase 2: Debugging

Debugging is successful when:

✅ Root cause identified and documented
✅ Fix addresses cause, not symptom
✅ Tested across target browsers and viewports
✅ No console errors introduced
✅ Performance not degraded
✅ Code comments explain WHY fix needed

See debugging_workflows.md for complete criteria.

Phase 3: Verification

Verification is successful when:

✅ Opened actual browser (not just reviewed code)
✅ Tested in multiple viewports (mobile + desktop)
✅ Checked DevTools console (no errors)
✅ Tested interactions by actually clicking/hovering
✅ Documented what was tested in claim
✅ Can describe exactly what was seen in browser

See verification_workflows.md for complete criteria.

Verification Statement Template

See verification_checklist.md for the completion claim template.

6. 🔌 INTEGRATION POINTS

Framework Integration

This skill operates within the behavioral framework defined in AGENTS.md.

Key integrations:

Gate 2: Skill routing via skill_advisor.py
Tool Routing: Per AGENTS.md Section 6 decision tree
Memory: Context preserved via Spec Kit Memory MCP

Code Quality Standards

Primary References:

code_quality_standards.md - Initialization, error handling, validation, async patterns
code_style_guide.md - Naming conventions, formatting, comments

See these reference files for complete standards. Key patterns include CDN-safe initialization, snake_case naming, and defense-in-depth validation.

Tool Usage Guidelines

Bash: Git commands, system operations
Read: Examine code files, documentation
Grep: Pattern searches, finding keywords
Glob: File discovery by patterns

Additional Knowledge Base Dependencies

Code Quality Standards - Initialization and validation patterns in code_quality_standards.md
Code Style Guide - Naming conventions and formatting in code_style_guide.md

External Tools

Browser DevTools - Chrome DevTools MCP (automated testing), Chrome DevTools (manual debugging)
Python 3 - General scripting support
Git - Version control for checking changes
Motion.dev - Animation library (CDN: jsdelivr.net/npm/motion@12.15.0)
mcp-narsil - Security scanning during debugging (OWASP, CWE, taint analysis via Code Mode)

Browser Verification

For browser debugging and verification, use the workflows-chrome-devtools skill which provides:

CLI-first approach via browser-debugger-cli (bdg)
MCP fallback for multi-tool workflows
Complete DevTools integration (644 methods across 53 domains)

See: .opencode/skill/workflows-chrome-devtools/SKILL.md for complete reference.

Quality Review Integration

Note: Review quality manually after file modifications.

Manual quality review steps:

Review recent file changes for quality issues
Check for consistent patterns across modifications
Use as inputs to Phase 1 investigation during debugging

See shared_patterns.md for common patterns across all workflows.

7. 📚 EXTERNAL RESOURCES

Official Documentation

Resource	URL	Use For
MDN Web Docs	developer.mozilla.org	JavaScript, DOM, Web APIs
Webflow University	university.webflow.com	Webflow platform patterns
Motion.dev	motion.dev/docs	Animation library
HLS.js	github.com/video-dev/hls.js	Video streaming
Lenis	lenis.darkroom.engineering	Smooth scroll

Testing & Debugging

Resource	URL	Use For
Chrome DevTools	developer.chrome.com/docs/devtools	Browser debugging
Can I Use	caniuse.com	Browser compatibility

8. 🔗 RELATED RESOURCES

Related Skills

Skill	Use For
workflows-documentation	Documentation quality, skill creation, markdown validation
workflows-git	Git workflows, commit hygiene, PR creation
system-spec-kit	Spec folder management, memory system, context preservation
mcp-narsil	Code intelligence, security scanning, call graphs
workflows-chrome-devtools	Browser debugging, screenshots, console access

Navigation Guide

For Implementation Tasks:

Start with Section 1 (When to Use) to confirm this skill applies
Follow Implementation phase from Section 3 (How It Works)
Load ALWAYS/CONDITIONAL resources from references/phase1-implementation/

For Debugging Tasks:

Load debugging_checklist.md
Follow systematic debugging workflow in Section 3
Use workflows-chrome-devtools skill for DevTools reference

For Verification Tasks:

Load verification_checklist.md
Complete all applicable checks
Only claim "done" when checklist passes

9. 📍 WHERE AM I? (Phase Detection Helper)

If you're unsure which phase you're in:

Phase 1: Implementation

You're here if: Writing/modifying code, not yet testing Exit criteria: Code written, builds successfully

Phase 2: Debugging

You're here if: Code written but has bugs/failing tests Exit criteria: All tests passing, feature functional

Phase 3: Verification

You're here if: Tests pass, performing final validation Exit criteria: Verified in browser, ready to ship

Phase Transitions

Phase 1 → 2: Implementation reveals bugs → Switch to debugging
Phase 2 → 1: Debugging reveals missing code → Return to implementation
Phase 2 → 3: All bugs fixed → Proceed to verification
Phase 3 → 1/2: Verification reveals issues → Return to appropriate phase

Key principle: Always end with Phase 3 before claiming completion.

10. 🏎️ QUICK REFERENCE

Universal Workflow

1. IMPLEMENT → Use condition-based waiting, validate inputs
2. DEBUG (if needed) → DevTools console, trace root cause
3. VERIFY (MANDATORY) → Browser test at 1920px + 375px, check console

The Iron Law

NO COMPLETION CLAIMS WITHOUT FRESH BROWSER VERIFICATION EVIDENCE

Install Skill

SKILL.md

Code Workflows - Development Orchestrator

1. 🎯 WHEN TO USE

Activation Triggers

When NOT to Use

Phase Overview

2. 🧭 SMART ROUTING

Resource Loading Levels

Task Keyword Triggers

Phase Detection

Specific Use Case Router

Resource Router

3. 🛠️ HOW IT WORKS

Development Lifecycle

Phase 1: Implementation

Phase 1.5: Code Quality Gate

Phase 2: Debugging

Phase 3: Verification

4. 📋 RULES

Phase 1: Implementation

✅ ALWAYS

❌ NEVER

⚠️ ESCALATE IF

Phase 1.5: Code Quality Gate (MANDATORY for all code files)

✅ ALWAYS

❌ NEVER (JavaScript)

❌ NEVER (CSS)

⚠️ ESCALATE IF

Phase 2: Debugging

✅ ALWAYS

❌ NEVER

⚠️ ESCALATE IF

Phase 3: Verification (MANDATORY)

✅ ALWAYS

❌ NEVER

⚠️ ESCALATE IF

5. 🏆 SUCCESS CRITERIA

Phase 1: Implementation

Phase 1.5: Code Quality Gate

Phase 2: Debugging

Phase 3: Verification

Verification Statement Template

6. 🔌 INTEGRATION POINTS

Framework Integration

Code Quality Standards

Tool Usage Guidelines

Additional Knowledge Base Dependencies

External Tools

Browser Verification

Quality Review Integration

7. 📚 EXTERNAL RESOURCES

Official Documentation

Testing & Debugging

8. 🔗 RELATED RESOURCES

Related Skills

Navigation Guide

9. 📍 WHERE AM I? (Phase Detection Helper)

Phase 1: Implementation

Phase 2: Debugging

Phase 3: Verification

Phase Transitions

10. 🏎️ QUICK REFERENCE

Universal Workflow

The Iron Law