Toolverse
All skills

robius-widget-patterns

by ZhangHanDong

CRITICAL: Use for Robius widget patterns. Triggers on:\napply_over, TextOrImage, modal, 可复用, 模态,\ncollapsible, drag drop, reusable widget, widget design,\npageflip, 组件设计, 组件模式

Installation

Pick a client and clone the repository into its skills directory.

Installation

Quick info

Category
Frontend
Views
2

About this skill

CRITICAL: Use for Robius widget patterns. Triggers on:\napply_over, TextOrImage, modal, 可复用, 模态,\ncollapsible, drag drop, reusable widget, widget design,\npageflip, 组件设计, 组件模式

How to use

  1. Zainstaluj skill w swoim środowisku Makepad, wskazując repozytorium ZhangHanDong/makepad-skills. Skill automatycznie aktywuje się, gdy w projekcie pojawią się słowa kluczowe takie jak: reusable widget, widget design, modal, collapsible, drag drop, pageflip lub ich chińskie odpowiedniki (可复用, 模态, 组件设计, 组件模式).

  2. Otwórz katalog _base/ w repozytorium, aby przeglądać dostępne wzorce. Każdy plik markdown opisuje konkretny problem i jego rozwiązanie — na przykład 02-modal-overlay.md pokazuje, jak budować okna dialogowe za pomocą DrawList2d, a 18-drag-drop-reorder.md wyjaśnia drag-and-drop.

  3. Wybierz wzorzec odpowiadający Twojemu zadaniu. Jeśli tworzysz komponent wielokrotnie używany, zapoznaj się z 01-widget-extension.md (rozszerzanie widgetów metodami pomocniczymi). Dla dynamicznych list zobacz 04-list-template.md z użyciem LivePtr.

  4. Przeanalizuj kod źródłowy z Robrix (klient czatu Matrix) lub Moly (aplikacja czatu AI), które stanowią bazę dla wzorców. Wzorce pokazują rzeczywiste implementacje Avatar, RoomsList, ChatLine i AdaptiveView.

  5. Zastosuj wybrany wzorzec w swoim komponencie, dostosowując go do konkretnych potrzeb. Zwróć uwagę na optymalizacje renderowania opisane w 20-redraw-optimization.md i cache'owanie widoków z 05-lru-view-cache.md, aby zapewnić wydajność produkcyjną.

  6. Testuj komponent w kontekście aplikacji Makepad, weryfikując, że zachowuje się zgodnie z dokumentacją wzorca. Skill pozostaje dostępny do konsultacji podczas całego cyklu rozwoju.

Related skills