feat(skills): introduce react-frontend-standards and upgrade SkillLoader

- Add 'react-frontend-standards' skill definition in 'client/skills/'
  - Enforces 'Backend-Driven UI' architecture
  - Integrates Vercel's React performance best practices
- Update 'SkillLoader' in 'server/mcp/skills.py' to support multiple skill directories (server/ and client/)
- Update 'server/mcp/server.py' to initialize SkillLoader with both 'server/skills' and 'client/skills'
- Update 'quanuxctl' command to use the new multi-directory loader

Author: quantDIY

client/skills/react-frontend-standards/SKILL.md

@@ -0,0 +1,65 @@
+---
+name: react-frontend-standards
+description: Expert guidance on QuanuX frontend development, enforcing Backend-Driven UI architecture and high-performance React patterns.
+metadata:
+  version: 1.0.0
+  author: QuanuX
+  priority: 10
+---
+
+# QuanuX Frontend Standards & React Best Practices
+
+You are an expert QuanuX Frontend Developer specializing in React for Desktop (Tauri) and Web.
+Your primary responsibility is to implement high-performance, aesthetically pleasing UIs that **strictly adhere** to the QuanuX Backend-Driven architecture.
+
+## 1. Architectural Protocols (CRITICAL)
+
+### [RULE 1] Backend Origin
+**All data presented on the frontend MUST be generated on the backend.**
+- **Do not** create mock data arrays in client components.
+- **Do not** implement business logic or data transformation in the client.
+- **Do not** guess data shapes. Ask to see the Pydantic model or API response from the backend.
+- **Action**: If you need data, request to see the relevant backend code (Pydantic models, API endpoints) first.
+
+### [RULE 2] Dynamic Presentation Layer Only
+**The frontend is a dynamic presentation layer only.**
+- Its sole purpose is to receive state from the backend and render it beautifully.
+- Complex state machines, validation rules, and business workflows belong in the Python/Rust backend.
+- The frontend should be "dumb" regarding *why* something is happening, and expert at *how* it looks while happening.
+
+## 2. Data Fetching Strategy
+
+QuanuX uses specific protocols for data exchange. 
+**Do not invent new fetching mechanisms.**
+
+- **Reference Documentation**: See `docs/MCP_INTEGRATION.md` for specific API details.
+- **REST/HTTP**: Use the provided API hooks or generic Query client wrappers.
+- **Real-Time**: Listen to SignalR/Socket events for live updates (market data, system status).
+
+## 3. React Best Practices (Performance & Quality)
+
+Adhere to these Vercel-derived standards for optimal performance.
+
+### A. Eliminating Waterfalls (Critical)
+- **Do not** chain dependent requests in `useEffect`. 
+- **Preferred**: Parallel data fetching where possible.
+- **Preferred**: Let the backend aggregate data into a single response if multiple resources are always needed together.
+
+### B. Re-render Optimization (Medium)
+- **Use `useMemo`** for expensive calculations (though expensive calcs should ideally be on backend).
+- **Use `useCallback`** for event handlers passed to child components.
+- **Ensure stable references** for dependency arrays in hooks.
+
+### C. Bundle Size (Critical)
+- **Lazy Load** non-critical components/routes using `React.lazy` and `Suspense`.
+- **Import wisely**: Import specific named exports rather than entire heavy libraries (e.g., specific Lodash functions).
+
+### D. Rendering Performance (Medium)
+- **Virtualize** long lists (e.g., trade logs, order books) using `react-window` or similar.
+- **Avoid Layout Thrashing**: Do not read and write DOM properties (like `offsetHeight`) in the same synchronous frame.
+
+## 4. Tech Stack & Styling
+
+- **Styling**: Tailwind CSS (strict). Do not write custom CSS files unless absolutely necessary for animations not covered by Tailwind config.
+- **Components**: Shadcn UI (Radix based). Reuse existing components from `client/shared` where possible.
+- **Icons**: Lucide React.

server/cli/src/quanuxctl/commands/skills.py

@@ -9,7 +9,7 @@
 
 # specific path needs to be handled carefully depending on where quanuxctl is run from
 # Assuming running from root as per usual dev workflow, or we need to find root
-skill_loader = SkillLoader("server/skills")
+skill_loader = SkillLoader(["server/skills", "client/skills"])
 
 @app.command("list")
 def list_skills():

server/mcp/server.py

@@ -14,7 +14,7 @@
 
 # Initialize Skill Loader
 from server.mcp.skills import SkillLoader
-skill_loader = SkillLoader("server/skills")
+skill_loader = SkillLoader(["server/skills", "client/skills"])
 
 @mcp.tool(name="agent.skills.list")
 async def list_skills() -> str:

server/mcp/skills.py

@@ -13,57 +13,74 @@ class Skill:
     metadata: Optional[Dict[str, Any]] = None
 
 class SkillLoader:
-    def __init__(self, skills_dir: str):
-        # Resolve to absolute path relative to CWD if necessary, 
-        # but store relative path for "tool authority" cleanliness
-        self.skills_dir = Path(skills_dir)
+    def __init__(self, skills_dirs: List[str]):
+        """
+        Initialize the loader with a list of directories to search for skills.
+        :param skills_dirs: List of directory paths (relative to CWD)
+        """
+        self.skills_dirs = [Path(d) for d in skills_dirs]
         self.base_dir = Path(os.getcwd())
 
-    def _resolve_skill_path(self, skill_name: str) -> Path:
+    def _resolve_skill_path(self, skill_name: str) -> Optional[Path]:
+        """Find the path to a skill's SKILL.md across all registered directories."""
         # Validate skill name safety (no ../, no weird chars)
         if not skill_name.replace("-", "").isalnum():
              raise ValueError("Invalid skill name")
-        return (self.base_dir / self.skills_dir / skill_name / "SKILL.md").resolve()
+        
+        for d in self.skills_dirs:
+            potential_path = (self.base_dir / d / skill_name / "SKILL.md").resolve()
+            if potential_path.exists():
+                return potential_path
+        return None
 
     def list_skills(self) -> List[Skill]:
-        """Discover skills by scanning the skills directory."""
+        """Discover skills by scanning all skills directories."""
         skills = []
-        abs_skills_dir = (self.base_dir / self.skills_dir).resolve()
 
-        if not abs_skills_dir.exists():
-            return []
+        for relative_dir in self.skills_dirs:
+            abs_skills_dir = (self.base_dir / relative_dir).resolve()
+            
+            if not abs_skills_dir.exists():
+                continue
 
-        for item in abs_skills_dir.iterdir():
-            if item.is_dir():
-                skill_file = item / "SKILL.md"
-                if skill_file.exists():
-                    try:
-                        content = skill_file.read_text(encoding="utf-8")
-                        # Parse frontmatter manually since PyYAML load_all is needed
-                        # Identify YAML block
-                        if content.startswith("---"):
-                            parts = content.split("---", 2)
-                            if len(parts) >= 3:
-                                frontmatter = yaml.safe_load(parts[1])
-                                skills.append(Skill(
-                                    name=frontmatter.get("name", item.name),
-                                    description=frontmatter.get("description", "No description provided."),
-                                    tool_authority_path=str(skill_file.relative_to(self.base_dir)),
-                                    metadata=frontmatter.get("metadata")
-                                ))
-                    except Exception as e:
-                        print(f"Error loading skill {item.name}: {e}")
+            for item in abs_skills_dir.iterdir():
+                if item.is_dir():
+                    skill_file = item / "SKILL.md"
+                    if skill_file.exists():
+                        try:
+                            content = skill_file.read_text(encoding="utf-8")
+                            # Parse frontmatter manually since PyYAML load_all is needed
+                            # Identify YAML block
+                            if content.startswith("---"):
+                                parts = content.split("---", 2)
+                                if len(parts) >= 3:
+                                    frontmatter = yaml.safe_load(parts[1])
+                                    skills.append(Skill(
+                                        name=frontmatter.get("name", item.name),
+                                        description=frontmatter.get("description", "No description provided."),
+                                        # Show path relative to base_dir (e.g. "client/skills/foo/SKILL.md")
+                                        tool_authority_path=str(skill_file.relative_to(self.base_dir)),
+                                        metadata=frontmatter.get("metadata")
+                                    ))
+                        except Exception as e:
+                            print(f"Error loading skill {item.name}: {e}")
         return skills
 
     def read_skill(self, skill_name: str) -> str:
         """Read the full content of a skill file."""
         try:
             skill_path = self._resolve_skill_path(skill_name)
-            if not skill_path.exists():
+            if not skill_path:
                 return f"Error: Skill '{skill_name}' not found."
 
-            # Security check: Ensure path is within skills_dir
-            if not str(skill_path).startswith(str((self.base_dir / self.skills_dir).resolve())):
+            # Security check: Ensure path is within one of the allowed skills_dirs
+            allowed = False
+            for d in self.skills_dirs:
+                 if str(skill_path).startswith(str((self.base_dir / d).resolve())):
+                     allowed = True
+                     break
+            
+            if not allowed:
                 return "Error: Access denied."
 
             return skill_path.read_text(encoding="utf-8")
@@ -74,7 +91,11 @@ async def run_script(self, skill_name: str, script_name: str, args: List[str] =
         """Execute a script bundled with the skill."""
         try:
             # Resolve script path
-            skill_dir = (self.base_dir / self.skills_dir / skill_name).resolve()
+            skill_path = self._resolve_skill_path(skill_name)
+            if not skill_path:
+                 return f"Error: Skill '{skill_name}' not found."
+
+            skill_dir = skill_path.parent
             script_dir = skill_dir / "scripts"
             script_path = (script_dir / script_name).resolve()