Agent skill

Makepad Widgets

by sickn33 in sickn33/agentic-awesome-skills

Version: makepad-widgets (dev branch) | Last Updated: 2026-01-19 Check for updates: https://crates.io/crates/makepad-widgets

MITAuto-check passed

Install Makepad Widgets

skills CLI

$ npx skills add sickn33/agentic-awesome-skills --skill makepad-widgets -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install sickn33/agentic-awesome-skills makepad-widgets --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/sickn33/agentic-awesome-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/makepad-widgets .claude/skills/makepad-widgets && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "makepad-widgets" agent skill from https://github.com/sickn33/agentic-awesome-skills/tree/main/skills/makepad-widgets into .claude/skills/makepad-widgets/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "makepad-widgets", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/sickn33/agentic-awesome-skills/tree/main/skills/makepad-widgets

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add sickn33/agentic-awesome-skills --skill makepad-widgets -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install sickn33/agentic-awesome-skills makepad-widgets --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/sickn33/agentic-awesome-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/makepad-widgets .agents/skills/makepad-widgets && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "makepad-widgets" agent skill from https://github.com/sickn33/agentic-awesome-skills/tree/main/skills/makepad-widgets into .agents/skills/makepad-widgets/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "makepad-widgets", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add sickn33/agentic-awesome-skills --skill makepad-widgets -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install sickn33/agentic-awesome-skills makepad-widgets --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/sickn33/agentic-awesome-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/makepad-widgets .cursor/skills/makepad-widgets && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "makepad-widgets" agent skill from https://github.com/sickn33/agentic-awesome-skills/tree/main/skills/makepad-widgets into .cursor/skills/makepad-widgets/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "makepad-widgets", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/sickn33/agentic-awesome-skills.git --path skills/makepad-widgets

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add sickn33/agentic-awesome-skills --skill makepad-widgets -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install sickn33/agentic-awesome-skills makepad-widgets --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/sickn33/agentic-awesome-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/makepad-widgets .gemini/skills/makepad-widgets && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "makepad-widgets" agent skill from https://github.com/sickn33/agentic-awesome-skills/tree/main/skills/makepad-widgets into .gemini/skills/makepad-widgets/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "makepad-widgets", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install sickn33/agentic-awesome-skills makepad-widgets

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add sickn33/agentic-awesome-skills --skill makepad-widgets -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/sickn33/agentic-awesome-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/makepad-widgets .github/skills/makepad-widgets && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "makepad-widgets" agent skill from https://github.com/sickn33/agentic-awesome-skills/tree/main/skills/makepad-widgets into .github/skills/makepad-widgets/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "makepad-widgets", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add sickn33/agentic-awesome-skills --skill makepad-widgets -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install sickn33/agentic-awesome-skills makepad-widgets --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/sickn33/agentic-awesome-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/makepad-widgets .opencode/skills/makepad-widgets && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "makepad-widgets" agent skill from https://github.com/sickn33/agentic-awesome-skills/tree/main/skills/makepad-widgets into .opencode/skills/makepad-widgets/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "makepad-widgets", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: makepad-widgets
GitHub stars: 47k
Used in: 2 other repos
Token cost: ~1.7k tokens
SKILL.md length: 528 words
Files: 1
Skills in repo: 1,394
Repo updated: Oct 6, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

Version: makepad-widgets (dev branch) | Last Updated: 2026-01-19 Check for updates: https://crates.io/crates/makepad-widgets

Works in 5 steps: View (Basic Container) → Button → Label with Styling → …
SKILL.md covers When to Use, Documentation, IMPORTANT: Documentation… and Key Patterns, plus 9 more sections
Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Makepad Widgets is an agent skill from sickn33/agentic-awesome-skills. Version: makepad-widgets (dev branch) | Last Updated: 2026-01-19 Check for updates: https://crates.io/crates/makepad-widgets

Its SKILL.md is about 1.7k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It works with Makepad. The repository describes itself as: AAS Core is the local, agent-first control plane for complete catalog discovery, agent-owned selection, stack validation, and planning, backed by 2,400+ agentic skills. Includes… The licence is MIT.

Example prompts

“/makepad-widgets”

Workflow steps

5 steps, taken from the step headings in SKILL.md.

View (Basic Container)
Button
Label with Styling
Image
TextInput

What it can do on your machine

Read from SKILL.md and the folder at commit 1e53ce2. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md (its code samples are rust).
From the folder's file list and the shell code blocks in SKILL.md.
Network
Links to these hosts (documentation or services it may open):
- crates.io
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Makepad Widgets loads about 1.7k tokens when it runs. Until then it costs about 36 tokens; SKILL.md has 528 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~36
When it runs · the whole SKILL.md, loaded when a task matches: ~1.7k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from sickn33/agentic-awesome-skills at commit 1e53ce2, republished under its MIT licence (© sickn33). 528 words, ~1,686 tokens.

Download SKILL.mdSave it as .claude/skills/makepad-widgets/SKILL.md (or your agent's skills folder).

name: makepad-widgets
description: Version: makepad-widgets (dev branch) | Last Updated: 2026-01-19 > > Check for updates: https://crates.io/crates/makepad-widgets
risk: safe
source: community
date_added: 2026-09-04

Makepad Widgets Skill

Version: makepad-widgets (dev branch) | Last Updated: 2026-01-19

Check for updates: https://crates.io/crates/makepad-widgets

You are an expert at Makepad widgets. Help users by:

Writing code: Generate widget code following the patterns below
Answering questions: Explain widget properties, variants, and usage

When to Use

You need to work with core or advanced widgets in Makepad.
The task involves widget selection, properties, variants, composition, or widget-specific behavior.
You want examples for View, Button, labels, rich text, or other makepad-widgets building blocks.

Documentation

Refer to the local files for detailed documentation:

./references/widgets-core.md - Core widgets (View, Button, Label, etc.)
./references/widgets-advanced.md - Helper and advanced widgets
./references/widgets-richtext.md - Rich text widgets (Markdown, Html, TextFlow)

IMPORTANT: Documentation Completeness Check

Before answering questions, Claude MUST:

Read the relevant reference file(s) listed above
If file read fails or file is empty:
- Inform user: "本地文档不完整，建议运行 /sync-crate-skills makepad --force 更新文档"
- Still answer based on SKILL.md patterns + built-in knowledge
If reference file exists, incorporate its content into the answer

Key Patterns

1. View (Basic Container)

rust

<View> {
    width: Fill
    height: Fill
    flow: Down
    padding: 16.0
    show_bg: true
    draw_bg: { color: #1A1A1A }

    <Label> { text: "Content" }
}

2. Button

rust

<Button> {
    text: "Click Me"
    draw_bg: {
        color: #0066CC
        color_hover: #0088FF
        border_radius: 4.0
    }
    draw_text: {
        color: #FFFFFF
        text_style: { font_size: 14.0 }
    }
}

3. Label with Styling

rust

<Label> {
    width: Fit
    height: Fit
    text: "Hello World"
    draw_text: {
        color: #FFFFFF
        text_style: {
            font_size: 16.0
            line_spacing: 1.4
        }
    }
}

4. Image

rust

<Image> {
    width: 200.0
    height: 150.0
    source: dep("crate://self/resources/photo.png")
    fit: Contain
}

5. TextInput

rust

<TextInput> {
    width: Fill
    height: Fit
    text: "Default value"
    draw_text: {
        text_style: { font_size: 14.0 }
    }
}

rust

pub trait WidgetNode: LiveApply {
    fn find_widgets(&self, path: &[LiveId], cached: WidgetCache, results: &mut WidgetSet);
    fn walk(&mut self, cx: &mut Cx) -> Walk;
    fn area(&self) -> Area;
    fn redraw(&mut self, cx: &mut Cx);
}

pub trait Widget: WidgetNode {
    fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {}
    fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep;
    fn draw(&mut self, cx: &mut Cx2d, scope: &mut Scope) -> DrawStep;
    fn widget(&self, path: &[LiveId]) -> WidgetRef;
}

All Built-in Widgets (84 files in widgets/src/)

Category	Widgets
Basic	`View`, `Label`, `Button`, `Icon`, `Image`
Input	`TextInput`, `CheckBox`, `RadioButton`, `Slider`, `DropDown`, `ColorPicker`
Container	`ScrollBars`, `PortalList`, `FlatList`, `StackNavigation`, `Dock`, `Splitter`
Navigation	`TabBar`, `Tab`, `FoldHeader`, `FoldButton`, `ExpandablePanel`
Overlay	`Modal`, `Tooltip`, `PopupMenu`, `PopupNotification`
Media	`Video`, `RotatedImage`, `ImageBlend`, `MultiImage`
Layout	`AdaptiveView`, `SlidePanel`, `PageFlip`, `SlidesView`
Special	`Markdown`, `Html`, `TextFlow`, `WebView`, `KeyboardView`
Utility	`LoadingSpinner`, `DesktopButton`, `LinkLabel`, `ScrollShadow`

Core Widgets Reference

Widget	Purpose	Key Properties
`View`	Container	`flow`, `align`, `show_bg`, `draw_bg`, `optimize`
`Button`	Clickable	`text`, `draw_bg`, `draw_text`, `draw_icon`
`Label`	Text display	`text`, `draw_text`
`Image`	Image display	`source`, `fit`
`TextInput`	Text entry	`text`, `draw_text`, `draw_cursor`, `draw_selection`
`CheckBox`	Toggle	`text`, `selected`
`RadioButton`	Selection	`text`, `selected`
`Slider`	Value slider	`min`, `max`, `step`
`DropDown`	Select menu	`labels`, `selected`
`PortalList`	Virtual list	Efficient scrolling for large lists
`Modal`	Dialog	Overlay dialog boxes
`Tooltip`	Hint	Hover tooltips

Show full SKILL.md (214 more words)Show less

View Variants

Variant	Description
`SolidView`	Solid background color
`RoundedView`	Rounded corners
`RoundedAllView`	Individual corner control
`RectView`	Rectangle with border/gradient
`CircleView`	Circle/ellipse shape
`GradientXView`	Horizontal gradient
`GradientYView`	Vertical gradient
`RoundedShadowView`	Rounded with shadow
`ScrollXView`	Horizontal scroll
`ScrollYView`	Vertical scroll
`ScrollXYView`	Both directions scroll
`CachedView`	Texture-cached

Button Variants

Variant	Description
`ButtonFlat`	Flat style
`ButtonFlatIcon`	Flat with icon
`ButtonFlatter`	No background
`ButtonGradientX`	Horizontal gradient
`ButtonGradientY`	Vertical gradient
`ButtonIcon`	Standard with icon

ImageFit Values

Value	Description
`Stretch`	Stretch to fill
`Contain`	Fit within, preserve ratio
`Cover`	Cover area, may crop
`Fill`	Fill without ratio

When Writing Code

Always set width and height on widgets
Use show_bg: true to enable background rendering
Access draw_bg, draw_text, draw_icon for shader uniforms
Use dep("crate://self/...") for resource paths
Choose appropriate View variant for visual needs

When Answering Questions

Recommend UI Zoo example for widget exploration
View is the base container - most visual widgets inherit from it
Draw shaders (draw_bg, draw_text) control appearance
All widgets support animation through animator property

Limitations

Use this skill only when the task clearly matches the scope described above.
Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.

Files

Just SKILL.md in skills/makepad-widgets of sickn33/agentic-awesome-skills.

Open the folder on GitHubat commit 1e53ce2

Used in 2 other repositories

We found 15 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 2 other GitHub owners. This page covers the copy in sickn33/agentic-awesome-skills, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Makepad Widgets next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Makepad Widgets compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Makepad Widgets this skillsickn33/agentic-awesome-skills	47k	2 repos	~1.7k	Automated safety check: Pass	MIT	yesterday
Molykitmajiayu000/claude-skill-registry	666	3 repos	~2.6k	Automated safety check: Pass	MIT	today
Makepad Skillsaiskillstore/marketplace	430	5 repos	~198	Automated safety check: Pass	None	today
Makepad Animationsickn33/agentic-awesome-skills	47k	2 repos	~2k	Automated safety check: Pass	MIT	yesterday
Makepad Basicssickn33/agentic-awesome-skills	47k	2 repos	~1.2k	Automated safety check: Pass	MIT	yesterday
Makepad Deploymentsickn33/agentic-awesome-skills	47k	2 repos	~3k	Automated safety check: Notes	MIT	yesterday

Similar skills

Molykit
majiayu000/claude-skill-registry
CRITICAL: Use for MolyKit AI chat toolkit. An agent skill from majiayu000/claude-skill-registry.
666 GitHub starsUsed in 3 repos~2.6k tokens
Auto-check passed
Makepad Skills
aiskillstore/marketplace
Makepad UI development skills for Rust apps: setup, patterns, shaders, packaging, and troubleshooting.
430 GitHub starsUsed in 5 repos~198 tokens
Game DevelopmentAuto-check passed
Makepad Animation
sickn33/agentic-awesome-skills
CRITICAL: Use for Makepad animation system. An agent skill from sickn33/agentic-awesome-skills.
47k GitHub starsUsed in 2 repos~2k tokens
Auto-check passed
Makepad Basics
sickn33/agentic-awesome-skills
CRITICAL: Use for Makepad getting started and app structure.
47k GitHub starsUsed in 2 repos~1.2k tokens
Auto-check passed
Makepad Deployment
sickn33/agentic-awesome-skills
CRITICAL: Use for Makepad packaging and deployment. An agent skill from sickn33/agentic-awesome-skills.
47k GitHub starsUsed in 2 repos~3k tokens
DevOps & CloudAuto-check: notes
Makepad Dsl
sickn33/agentic-awesome-skills
CRITICAL: Use for Makepad DSL syntax and inheritance. An agent skill from sickn33/agentic-awesome-skills.
47k GitHub starsUsed in 2 repos~1.2k tokens
Auto-check passed

Questions about Makepad Widgets

What does Makepad Widgets do?

Version: makepad-widgets (dev branch) | Last Updated: 2026-01-19 Check for updates: https://crates.io/crates/makepad-widgets. Makepad Widgets is an agent skill from sickn33/agentic-awesome-skills.

How do I install Makepad Widgets in Claude Code?

Run `npx skills add sickn33/agentic-awesome-skills --skill makepad-widgets -a claude-code`. Or copy the skill folder (skills/makepad-widgets in sickn33/agentic-awesome-skills) into .claude/skills/makepad-widgets in your project. Claude Code loads it when a task matches its description.

How do I install Makepad Widgets in Codex?

Run `npx skills add sickn33/agentic-awesome-skills --skill makepad-widgets -a codex`. Or copy the skill folder (skills/makepad-widgets in sickn33/agentic-awesome-skills) into .agents/skills/makepad-widgets in your project. Codex loads it when a task matches its description.

Can I use Makepad Widgets in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add sickn33/agentic-awesome-skills --skill makepad-widgets -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/makepad-widgets, .gemini/skills/makepad-widgets, .github/skills/makepad-widgets and .opencode/skills/makepad-widgets in your project.

What does Makepad Widgets need to run?

SKILL.md names no scripts, command-line tools or credentials: Makepad Widgets is instructions for the agent only.

Does Makepad Widgets access the network?

SKILL.md names 1 domain. As links in the text: crates.io. This is read from the text; nothing was executed.

Is Makepad Widgets safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Makepad Widgets use?

Makepad Widgets is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Makepad Widgets use?

About 1.7k tokens (SKILL.md is roughly 6.7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Makepad Widgets?

Skills that share tags, products or a category with Makepad Widgets: Molykit (majiayu000/claude-skill-registry, 666 stars), Makepad Skills (aiskillstore/marketplace, 430 stars), Makepad Animation (sickn33/agentic-awesome-skills, 47k stars) and Makepad Basics (sickn33/agentic-awesome-skills, 47k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Makepad Widgets?

sickn33 (a GitHub user) maintains it in sickn33/agentic-awesome-skills, which has 47,304 GitHub stars. The repository holds 1,394 skills in this directory. The repository was last updated on October 6, 2026.

Source: sickn33/agentic-awesome-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Makepad Widgets

Facts

At a glance

What it does

Example prompts

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Makepad Widgets Skill

When to Use

Documentation

IMPORTANT: Documentation Completeness Check

Key Patterns

1. View (Basic Container)

2. Button

3. Label with Styling

4. Image

5. TextInput

Widget Traits (from source)

All Built-in Widgets (84 files in widgets/src/)

Core Widgets Reference

View Variants

Button Variants

ImageFit Values

When Writing Code

When Answering Questions

Limitations

Files

Used in 2 other repositories

Compare with similar skills

Similar skills

More from sickn33/agentic-awesome-skills

Related

Questions about Makepad Widgets