makepad-2.0-design-judgment

Name: makepad-2.0-design-judgment
Author: ZhangHanDong

743stars87forks

How to install makepad-2.0-design-judgment?

zhanghandong/makepad-skills/makepad-2.0-design-judgment

$npx -y skills add ZhangHanDong/makepad-skills --skill makepad-2.0-design-judgment

Installs into the current project.

Summary

CRITICAL: Entry-level skill for Makepad 2.0 GUI development. This is the FIRST skill to load for any Makepad task — it provides design judgment anchors ABOVE the other 13 Makepad 2.0 skills. Triggers on: makepad, makepad app, makepad project, makepad design, live_design!, app_mai

Files · 1

View on GitHub

SKILL.md

1	# Makepad 2.0 Design Judgment Skill
2
3	> Role: Entry-level routing + design judgment anchors for Makepad 2.0 development.
4	> Relationship to other skills: This skill is the liberation layer (释放层).
5	> The other 13 Makepad 2.0 skills are the compliance layer (服从层) — they provide
6	> DSL syntax, API patterns, widget catalogs. Don't argue with them. Obey them.
7	> This skill provides conceptual anchors for design decisions that have no single
8	> correct answer.
9
10	## How This Skill Works
11
12	This skill operates as a quality valve (质量阀门), simultaneously performing two functions:
13
14	- Constraint (约束): Route to the correct compliance-layer skill for syntax/API questions
15	- Liberation (释放): Activate the right conceptual anchors for design judgment questions
16
17	Key principle: Conceptual anchors set boundary conditions for emergence.
18	They don't instruct the model what to output — they shape the space in which
19	good output emerges. Rules tell you "don't do X". Anchors tell you "think like Y".
20
21	---
22
23	## Step 1: Route to Compliance Layer
24
25	For any Makepad question, FIRST identify which compliance skill(s) to co-load:
26
27	\| Question Domain \| Co-load Skill \|
28	\|----------------\|---------------\|
29	\| App setup, Cargo.toml, hot reload, `app_main!` \| makepad-2.0-app-structure \|
30	\| DSL syntax, `script_mod!`, property system \| makepad-2.0-dsl \|
31	\| Width, height, Flow, Fill, Fit, spacing \| makepad-2.0-layout \|
32	\| Widget catalog, View, Button, Label, PortalList \| makepad-2.0-widgets \|
33	\| Events, actions, `on_click`, `handle_event` \| makepad-2.0-events \|
34	\| Animator, hover, pressed, state transitions \| makepad-2.0-animation \|
35	\| `draw_bg`, Sdf2d, pixel fn, GPU shaders \| makepad-2.0-shaders \|
36	\| Splash scripting, `script_mod!`, hot reload \| makepad-2.0-splash \|
37	\| Theme colors, fonts, dark/light mode \| makepad-2.0-theme \|
38	\| Vector graphics, SVG, gradients, tweens \| makepad-2.0-vector \|
39	\| Performance, GC, draw batching, profiling \| makepad-2.0-performance \|
40	\| Errors, bugs, widget not showing, FAQ \| makepad-2.0-troubleshooting \|
41	\| Migrating from 1.x to 2.0 \| makepad-2.0-migration \|
42
43	Always co-load at least one compliance skill. This skill alone is not enough —
44	it provides judgment, not syntax.
45
46	---
47
48	## Step 2: Apply Design Judgment Anchors
49
50	When the question involves HOW to organize, structure, or design (not just WHAT syntax to use),
51	apply these conceptual anchors. Each anchor activates a region of subsidiary awareness
52	in the model — let the integration happen, don't force chain-of-thought on judgment tasks.
53
54	### Anchor 1: Data Flow — Elm Architecture (Evan Czaplicki)
55
56	- State is centralized. UI is a projection of state. Events trigger updates.
57	- Makepad's `MatchEvent::handle_actions` IS Elm's `update` function.
58	- Decision heuristic: If you find state scattered across multiple components
59	that need to be aware of each other — STOP. Lift state to a common ancestor.
60	- Popup corollary: Menus, tooltips, and language pickers that must escape a local
61	widget's bounds should be owned by a common ancestor or overlay owner, not buried
62	as ordinary children inside the triggering widget.
63	- External reality to obey: Makepad's event system is the arbiter.
64	`Cx::post_action` + `SignalToUI` is the canonical async→UI bridge.
65	Don't invent alternatives.
66
67	### Anchor 2: Component Split — Dan Abramov (Presentational vs Container)
68
69	- Presentational components: Only receive live properties. No state. No side effects.
70	In Makepad: widgets with `#[live]` fields and `#[deref] view: View` delegation.
71	- Container components: Own state, handle events, coordinate children.
72	In Makepad: widgets with `#[rust]` fields that hold business state.
73	- Decision heuristic: If a widget both renders complex UI AND manages business logic,
74	split it. The `#[deref]` delegation pattern exists precisely for this.
75
76	### Anchor 3: Rendering Mental Model — Casey Muratori (Handmade Hero)
77
78	- This is NOT a DOM. It's a GPU surface redrawn every frame.
79	- Don't think "modify a node." Think "what do I paint next frame."
80	- `redraw(cx)` doesn't "mark a node dirty" — it tells the GPU to repaint this region.
81	- Decision heuristic: If you're reaching for patterns from React/DOM mental models
82	(virtual diff, reconciliation, component lifecycle), stop and reframe.
83	The question is always: "what does the next frame look like?"
84
85	### Anchor 4: Layout — CSS Flexbox (but simpler and self-co

People who liked this also viewed

6 picks

Type

makepad-2.0-design-judgment

743stars87forks

View on GitHub

How to install makepad-2.0-design-judgment?

zhanghandong/makepad-skills/makepad-2.0-design-judgment

$npx -y skills add ZhangHanDong/makepad-skills --skill makepad-2.0-design-judgment

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Makepad 2.0 Design Judgment Skill
2
3	> Role: Entry-level routing + design judgment anchors for Makepad 2.0 development.
4	> Relationship to other skills: This skill is the liberation layer (释放层).
5	> The other 13 Makepad 2.0 skills are the compliance layer (服从层) — they provide
6	> DSL syntax, API patterns, widget catalogs. Don't argue with them. Obey them.
7	> This skill provides conceptual anchors for design decisions that have no single
8	> correct answer.
9
10	## How This Skill Works
11
12	This skill operates as a quality valve (质量阀门), simultaneously performing two functions:
13
14	- Constraint (约束): Route to the correct compliance-layer skill for syntax/API questions
15	- Liberation (释放): Activate the right conceptual anchors for design judgment questions
16
17	Key principle: Conceptual anchors set boundary conditions for emergence.
18	They don't instruct the model what to output — they shape the space in which
19	good output emerges. Rules tell you "don't do X". Anchors tell you "think like Y".
20
21	---
22
23	## Step 1: Route to Compliance Layer
24
25	For any Makepad question, FIRST identify which compliance skill(s) to co-load:
26
27	\| Question Domain \| Co-load Skill \|
28	\|----------------\|---------------\|
29	\| App setup, Cargo.toml, hot reload, `app_main!` \| makepad-2.0-app-structure \|
30	\| DSL syntax, `script_mod!`, property system \| makepad-2.0-dsl \|
31	\| Width, height, Flow, Fill, Fit, spacing \| makepad-2.0-layout \|
32	\| Widget catalog, View, Button, Label, PortalList \| makepad-2.0-widgets \|
33	\| Events, actions, `on_click`, `handle_event` \| makepad-2.0-events \|
34	\| Animator, hover, pressed, state transitions \| makepad-2.0-animation \|
35	\| `draw_bg`, Sdf2d, pixel fn, GPU shaders \| makepad-2.0-shaders \|
36	\| Splash scripting, `script_mod!`, hot reload \| makepad-2.0-splash \|
37	\| Theme colors, fonts, dark/light mode \| makepad-2.0-theme \|
38	\| Vector graphics, SVG, gradients, tweens \| makepad-2.0-vector \|
39	\| Performance, GC, draw batching, profiling \| makepad-2.0-performance \|
40	\| Errors, bugs, widget not showing, FAQ \| makepad-2.0-troubleshooting \|
41	\| Migrating from 1.x to 2.0 \| makepad-2.0-migration \|
42
43	Always co-load at least one compliance skill. This skill alone is not enough —
44	it provides judgment, not syntax.
45
46	---
47
48	## Step 2: Apply Design Judgment Anchors
49
50	When the question involves HOW to organize, structure, or design (not just WHAT syntax to use),
51	apply these conceptual anchors. Each anchor activates a region of subsidiary awareness
52	in the model — let the integration happen, don't force chain-of-thought on judgment tasks.
53
54	### Anchor 1: Data Flow — Elm Architecture (Evan Czaplicki)
55
56	- State is centralized. UI is a projection of state. Events trigger updates.
57	- Makepad's `MatchEvent::handle_actions` IS Elm's `update` function.
58	- Decision heuristic: If you find state scattered across multiple components
59	that need to be aware of each other — STOP. Lift state to a common ancestor.
60	- Popup corollary: Menus, tooltips, and language pickers that must escape a local
61	widget's bounds should be owned by a common ancestor or overlay owner, not buried
62	as ordinary children inside the triggering widget.
63	- External reality to obey: Makepad's event system is the arbiter.
64	`Cx::post_action` + `SignalToUI` is the canonical async→UI bridge.
65	Don't invent alternatives.
66
67	### Anchor 2: Component Split — Dan Abramov (Presentational vs Container)
68
69	- Presentational components: Only receive live properties. No state. No side effects.
70	In Makepad: widgets with `#[live]` fields and `#[deref] view: View` delegation.
71	- Container components: Own state, handle events, coordinate children.
72	In Makepad: widgets with `#[rust]` fields that hold business state.
73	- Decision heuristic: If a widget both renders complex UI AND manages business logic,
74	split it. The `#[deref]` delegation pattern exists precisely for this.
75
76	### Anchor 3: Rendering Mental Model — Casey Muratori (Handmade Hero)
77
78	- This is NOT a DOM. It's a GPU surface redrawn every frame.
79	- Don't think "modify a node." Think "what do I paint next frame."
80	- `redraw(cx)` doesn't "mark a node dirty" — it tells the GPU to repaint this region.
81	- Decision heuristic: If you're reaching for patterns from React/DOM mental models
82	(virtual diff, reconciliation, component lifecycle), stop and reframe.
83	The question is always: "what does the next frame look like?"
84
85	### Anchor 4: Layout — CSS Flexbox (but simpler and self-co

People who liked this also viewed

6 picks

Type