hot-reload-fast-feedback

name	hot-reload-fast-feedback
description	Hot Reload and Fast Feedback Loops enable developers to see changes Use when this capability is needed.
metadata	{"author":"amnadtaowsoam"}

Hot Reload Fast Feedback

Skill Profile

(Select at least one profile to enable specific modules)

• DevOps
• Backend
• Frontend
• AI-RAG
• Security Critical

Overview

Hot Reload and Fast Feedback Loops enable developers to see changes instantly without restarting the application, dramatically improving productivity and iteration speed.

Core Principle: "The faster you see results, the faster you learn. Optimize for instant feedback."

---

Why This Matters

• :
• :
• :

Core Concepts & Rules

1. Core Principles

• Follow established patterns and conventions
• Maintain consistency across codebase
• Document decisions and trade-offs

2. Implementation Guidelines

• Start with the simplest viable solution
• Iterate based on feedback and requirements
• Test thoroughly before deployment

Inputs / Outputs / Contracts

• Inputs:
  • <e.g., env vars, request payload, file paths, schema>
• Entry Conditions:
  • <Pre-requisites: e.g., Repo initialized, DB running, specific branch checked out>
• Outputs:
  • <e.g., artifacts (PR diff, docs, tests, dashboard JSON)>
• Artifacts Required (Deliverables):
  • <e.g., Code Diff, Unit Tests, Migration Script, API Docs>
• Acceptance Evidence:
  • <e.g., Test Report (screenshot/log), Benchmark Result, Security Scan Report>
• Success Criteria:
  • <e.g., p95 < 300ms, coverage ≥ 80%>

Skill Composition

• Depends on: None
• Compatible with: None
• Conflicts with: None
• Related Skills: None

Quick Start

Assumptions

• Modern browsers support HMR
• Development environment is local
• File system supports watching

Compatibility

• Works with React, Vue, Svelte
• Compatible with most build tools
• Can be adapted to any framework

---

Test Scenario Matrix

Scenario	Expected Behavior	Notes
Save CSS file	Instant style update	HMR preserves state
Save component file	Component updates	React Fast Refresh
Save backend file	Server restarts	Nodemon/tsx watch
Save test file	Tests re-run	Jest/Vitest watch mode

---

Technical Guardrails & Security Threat Model

1. Security & Privacy (Threat Model)

• Top Threats: Injection attacks, authentication bypass, data exposure

• Data Handling: Sanitize all user inputs to prevent Injection attacks. Never log raw PII
• Secrets Management: No hardcoded API keys. Use Env Vars/Secrets Manager
• Authorization: Validate user permissions before state changes

2. Performance & Resources

• Execution Efficiency: Consider time complexity for algorithms
• Memory Management: Use streams/pagination for large data
• Resource Cleanup: Close DB connections/file handlers in finally blocks

3. Architecture & Scalability

• Design Pattern: Follow SOLID principles, use Dependency Injection
• Modularity: Decouple logic from UI/Frameworks

4. Observability & Reliability

• Logging Standards: Structured JSON, include trace IDs request_id
• Metrics: Track error_rate, latency, queue_depth
• Error Handling: Standardized error codes, no bare except
• Observability Artifacts:
  • Log Fields: timestamp, level, message, request_id
  • Metrics: request_count, error_count, response_time
  • Dashboards/Alerts: High Error Rate > 5%

Agent Directives & Error Recovery

(ข้อกำหนดสำหรับ AI Agent ในการคิดและแก้ปัญหาเมื่อเกิดข้อผิดพลาด)

• Thinking Process: Analyze root cause before fixing. Do not brute-force.
• Fallback Strategy: Stop after 3 failed test attempts. Output root cause and ask for human intervention/clarification.
• Self-Review: Check against Guardrails & Anti-patterns before finalizing.
• Output Constraints: Output ONLY the modified code block. Do not explain unless asked.

Definition of Done

• Frontend HMR configured
• Backend watch mode enabled
• CSS hot reload working
• Test watch mode configured
• Docker volumes for hot reload
• Build speed optimized
• Error overlay enabled
• Auto-open browser configured
• Multi-service hot reload working

---

Anti-patterns / Pitfalls

• ⛔ Don't: Log PII, catch-all exception, N+1 queries
• ⚠️ Watch out for: Common symptoms and quick fixes
• 💡 Instead: Use proper error handling, pagination, and logging

Reference Links

• Vite HMR Documentation
• React Fast Refresh
• Webpack HMR
• Nodemon Documentation

---

Versioning & Changelog

• Version: 1.0.0
• Changelog:
  • 2026-02-22: Initial version with complete template structure

---

Converted and distributed by TomeVault — claim your Tome and manage your conversions.