SkillFoxx

Makepad Skills

14 skills for Claude Code on Makepad 2.0: DSL, layout, widgets, events, animation, shaders, themes and migration from 1.x

  • 753 ★ on the repository
  • Last commit
Skill

Minimal access

Why this level

  • The skills are reference instructions and run nothing themselves, but once copied into `~/.claude/skills` they apply to all your projects
All reasons and checks

zhanghandong/makepad-skillsAuthor:ZhangHanDong

Install

In your terminal, with SkillFoxx CLI

npx skillfoxx add skills/makepad-skills

Detects the agents on your machine, shows the access level and pins the version.

Other ways to install

Access and checks

How we review

Minimal accessThe tool runs nothing and makes no network calls.

  • The skills are reference instructions and run nothing themselves, but once copied into `~/.claude/skills` they apply to all your projects

This is third-party code. Review the repository files before installing.

What it does

The set of 14 skills teaches an agent to write cross-platform Rust interfaces with the Makepad 2.0 framework. Each skill covers one topic and loads by keyword: app structure and `app_main!`, DSL syntax and `script_mod!`, the Flow, Fill and Fit layout system, the widget catalog, events and actions, the animator with states, Sdf2d shaders, the Splash language, themes with dark and light modes, vector graphics, performance, common mistakes and migration from 1.x. The entry skill `makepad-2.0-design-judgment` loads first. It routes a request to the matching topic skills and supplies anchor ideas for decisions with no single right answer: Elm-style architecture, presentational versus container components, and the GPU rendering model. The other 13 skills act as syntax and API references, each with a `references` folder of detailed tables and examples. The skills sit in the `skills` directory and connect in three ways: as an extra working directory, through symlinks, or by copying into `~/.claude/skills`.

Who it is for. For Rust developers building desktop, mobile and web interfaces on Makepad 2.0 with Claude Code who want the agent to know the DSL syntax and widget APIs.

Good fit when

  • You start a Makepad 2.0 project and the agent needs app structure, Cargo setup and hot reload
  • You build a screen with `PortalList`, `Dock` or `TextInput` and want the agent to take widgets from the catalog without inventing its own
  • You need a custom button or card background on a shader with `draw_bg` and `Sdf2d`
  • An old Makepad 1.x project is being migrated to 2.0 using the migration guide
  • The agent has to make an architecture call: split components, plan data flow, choose where state lives

Not a fit when

  • The project stays on Makepad 1.x: the skills describe 2.0 only, and 1.x material sits in the archive branch
  • The interface is written on another framework such as Tauri, egui or Slint: syntax and rules differ
  • You need a general Rust course: the skills assume you already know the language
  • The task is server-side with no graphical interface

Example request

Build a Makepad 2.0 sign-in screen with two fields and a button, with the button background as a gradient shader.

Limitations

The skills cover Makepad 2.0 only. The repository was last updated on 7 April 2026, so recent framework API changes may be missing from the references, and doubtful spots are worth checking against the Makepad sources.

There is no install command, and the skills connect by hand: by copying, through symlinks or as an extra working directory. The repository has a plugin manifest, but its contact address is a placeholder and its metadata describes the older Makepad, Robius and MolyKit set. The author states the MIT license in the description, though GitHub did not detect it.

How to disable. Remove the set's directory from `additionalWorkingDirectories` in `.claude/settings.json`. If you copied or linked the skills, delete the `makepad-2.0-*` folders from `~/.claude/skills`.

FAQ

How do I install makepad-skills in Claude Code?

Clone the repository and run `cp -r skills/* ~/.claude/skills/`. You can also add the repository folder to `additionalWorkingDirectories` in `.claude/settings.json` or link the skill folders with `ln -sf`.

How many skills are in makepad-skills and which one loads first?

There are 14. Load `makepad-2.0-design-judgment` first: it picks which of the other 13 the task needs and sets anchor ideas for architecture decisions.

Do these skills work for Makepad 1.x?

No. The main branch describes Makepad 2.0, and the 1.x skills, including Robius and MolyKit, moved to the `v1/makepad-1.0` branch.

What do the Makepad shader skills cover?

`makepad-2.0-shaders` covers the shader system, the `draw_bg` property, pixel and vertex functions, `DrawQuad` and shape drawing through `Sdf2d`. References sit in its `references` folder.

Do these skills work in Cursor and Codex?

Most likely yes: the set is made of plain folders with `SKILL.md` that other agents read too. The author tuned it for Claude Code, so replace the paths in the install steps with your agent's skills folder.

Discussion

No questions or reviews yet.

Skills

Skills for Claude Code on Svelte 5 and SvelteKit: runes, data loading, project structure, remote functions and deployment

SkillMinimal access217

145 skill plugins for Claude Code and Codex: Cloudflare, React, Tailwind, Nuxt, APIs, security, testing, installed one by one

PluginExtended access248

35 skills for Cursor, Claude and Codex: design systems from HTML and mocks, image generation, plan interviews and handoff.

SkillExtended access324

A prompt-as-code design system for Codex, Cursor and Claude Code: style catalogs, layouts, blocks and personal UI rules.

SkillExtended access230

A registry of installable design skills: ready SKILL.md and DESIGN.md files with tokens, component rules and accessibility for different styles

SkillMinimal access3.6K

A Claude Code skill collection for copywriting, advertising, SEO and interface design: Ogilvy, editing, rules and CSS techniques.

SkillMinimal access469

README in short

The description lists the 14 skills in a table with a note on each and three ways to connect them. The author names the framework repository itself as the knowledge source.

README badge

Original SKILL.md

---
name: makepad-2.0-design-judgment
description: |
  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_main!, script_mod!, Cx, WidgetRef, Widget,
  makepad-widgets, makepad architecture, makepad how to,
  "how should I", "should I use", "what's the best way",
  makepad 架构, makepad 设计, makepad 怎么做, makepad 最佳实践,
  组件拆分, 状态管理, 数据流, 渲染思维
---

# Makepad 2.0 Design Judgment Skill

> **Role:** Entry-level routing + design judgment anchors for Makepad 2.0 development.
> **Relationship to other skills:** This skill is the **liberation layer** (释放层).
> The other 13 Makepad 2.0 skills are the **compliance layer** (服从层) — they provide
> DSL syntax, API patterns, widget catalogs. Don't argue with them. Obey them.
> This skill provides **conceptual anchors** for design decisions that have no single
> correct answer.

## How This Skill Works

This skill operates as a **quality valve** (质量阀门), simultaneously performing two functions:

- **Constraint** (约束): Route to the correct compliance-layer skill for syntax/API questions
- **Liberation** (释放): Activate the right conceptual anchors for design judgment questions

**Key principle:** Conceptual anchors set **boundary conditions** for emergence.
They don't instruct the model what to output — they shape the space in which
good output emerges. Rules tell you "don't do X". Anchors tell you "think like Y".

---

## Step 1: Route to Compliance Layer

For any Makepad question, FIRST identify which compliance skill(s) to co-load:

| Question Domain | Co-load Skill |
|----------------|---------------|
| App setup, Cargo.toml, hot reload, `app_main!` | makepad-2.0-app-structure |
| DSL syntax, `script_mod!`, property system | makepad-2.0-dsl |
| Width, height, Flow, Fill, Fit, spacing | makepad-2.0-layout |
| Widget catalog, View, Button, Label, PortalList | makepad-2.0-widgets |
| Events, actions, `on_click`, `handle_event` | makepad-2.0-events |
| Animator, hover, pressed, state transitions | makepad-2.0-animation |
| `draw_bg`, Sdf2d, pixel fn, GPU shaders | makepad-2.0-shaders |
| Splash scripting, `script_mod!`, hot reload | makepad-2.0-splash |

Report a problem