Agent skill
ui-specialist
PySide6 UI development with dark theme, signals/slots, and NodeGraphQt integration
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/ui-specialist
Metadata
Additional technical details for this skill
- audience
- developers
- workflow
- ui
SKILL.md
What I do
- Create PySide6 widgets and UI components
- Implement dark theme styling with THEME constants
- Design proper signal/slot connections
- Integrate with NodeGraphQt visual nodes
When to use me
Use this when you need to:
- Create custom node widgets
- Design property editors
- Implement dialogs and panels
- Style UI with dark theme
MCP-First Workflow
Always use MCP servers in this order:
-
codebase - Search for UI patterns
pythonsearch_codebase("PySide6 widget dark theme signals slots", top_k=10) -
filesystem - view_file existing UI code
pythonread_file("src/casare_rpa/presentation/canvas/graph/node_widgets.py") -
git - Check UI changes
pythongit_diff("HEAD~5..HEAD", path="src/casare_rpa/presentation/canvas/") -
ref - PySide6 documentation
pythonsearch_documentation("widget", library="PySide6")
Widget Template
from PySide6.QtWidgets import QWidget, QVBoxLayout, QLabel, QLineEdit
from PySide6.QtCore import Signal, Slot
class CustomNodeWidget(QWidget):
value_changed = Signal(str)
def __init__(self, parent=None):
super().__init__(parent)
self._setup_ui()
def _setup_ui(self):
layout = QVBoxLayout(self)
layout.setContentsMargins(4, 4, 4, 4)
self.label = QLabel("Input:")
self.input = QLineEdit()
self.input.textChanged.connect(self._on_value_changed)
layout.addWidget(self.label)
layout.addWidget(self.input)
@Slot(str)
def _on_value_changed(self, value: str):
self.value_changed.emit(value)
def get_value(self) -> str:
return self.input.text()
def set_value(self, value: str):
self.input.setText(value)
Dark Theme (Use THEME Constants!)
from casare_rpa.presentation.canvas.ui.theme import THEME
self.setStyleSheet(f"""
QLineEdit {{
background: {THEME.bg_darker};
color: {THEME.text_primary};
border: 1px solid {THEME.border};
border-radius: 4px;
padding: 4px;
}}
QLineEdit:focus {{
border-color: {THEME.accent};
}}
""")
Signal/Slot Best Practices
| Pattern | Do | Don't |
|---|---|---|
| Parameters | Use @Slot(type) decorator |
Use bare connect() |
| Lambdas | Avoid (captures!) | value_changed.connect(lambda v: ...) |
| Threading | Use Qt.QueuedConnection |
Direct calls cross-thread |
| Disconnecting | Store connection | Let it GC |
# CORRECT
from functools import partial
def _setup_connections(self):
self.input.textChanged.connect(partial(self._on_value_changed, self))
@Slot(str)
def _on_value_changed(self, value: str):
pass
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?