makepad-basics
Ajuda seu agente a entender os conceitos básicos e a estrutura de um aplicativo Makepad. Isso é útil para iniciar novos projetos e aprender como o Makepad funciona.
O que ela faz
Ajuda você a começar a criar aplicativos com Makepad, mostrando a estrutura básica do código e como configurar seu projeto.
Quando usar
- ✓Quando você quer criar seu primeiro app em Makepad.
- ✓Para entender como organizar o código inicial de um app.
- ✓Ao configurar um novo projeto Makepad.
Exemplo do que pedir para a IA
“Como faço para criar um app simples em Makepad?”
Quer saber mais? Abra as seções abaixo.
Como usar
O jeito mais fácil: copie a mensagem abaixo e cole no Claude, ChatGPT, Cursor ou outra IA. Ela lê a skill e segue as instruções.
Link da skill
Mensagem pronta para colar
Como funciona
Ele gera o código inicial necessário para um aplicativo Makepad, incluindo a estrutura básica e as configurações de dependência. Ele também explica como o Makepad lida com eventos e atualiza a interface.
Instalação
Jeito mais fácil: copie o link da skill e cole no Claude, ChatGPT ou Cursor pedindo para seguir as instruções.
No terminal (Claude Code, Codex, Cursor), na pasta do projeto:
npx skills add sickn33/agentic-awesome-skills --skill makepad-basicsOu baixe só o arquivo:
curl -L https://raw.githubusercontent.com/sickn33/agentic-awesome-skills/main/plugins/agentic-awesome-skills-claude/skills/makepad-basics/SKILL.md -o SKILL.mdConteúdo técnico (SKILL.md)
Tradução do texto original do autor no GitHub. Os comandos e códigos estão como no original.
Disponibilidade de Material de Apoio
Esta cópia do catálogo contém as orientações inline abaixo, mas não inclui os seguintes caminhos de suporte. Eles são pré-requisitos externos, não arquivos empacotados:
./references/app-structure.md./references/event-handling.md
Obtenha o material necessário da fonte upstream declarada, ou de uma instalação fornecida pelo usuário dessa fonte. Resolva cada caminho em relação a essa instalação, inspecione seu conteúdo e verifique quaisquer licenças aplicáveis e pré-requisitos de execução. Não execute um comando nem afirme que um procedimento referenciado foi seguido até que seu arquivo necessário exista. Não fabrique os scripts ausentes nem trate um arquivo não relacionado com o mesmo nome como equivalente. Etapas independentes totalmente documentadas aqui podem prosseguir dentro do escopo autorizado do usuário; relate qualquer etapa dependente como indisponível.
Noções Básicas do Makepad
Versão: makepad-widgets (branch dev) | Última Atualização: 2026-01-19
Verifique atualizações: https://crates.io/crates/makepad-widgets
Você é um especialista no crate Rust makepad-widgets. Ajude os usuários:
- Escrevendo código: Gere código Rust seguindo os padrões abaixo
- Respondendo perguntas: Explique conceitos, solucione problemas, consulte documentação
Quando Usar
- Você precisa começar com o Makepad ou entender a estrutura básica de aplicativos e o código boilerplate.
- A tarefa envolve configuração de projeto,
live_design!,app_main!ou conexão da aplicação de primeira tela. - Você quer orientação fundamental do Makepad antes de passar para tópicos mais específicos de layout, widgets ou shaders.
Documentação
Consulte os arquivos locais para documentação detalhada:
./references/app-structure.md- Boilerplate e estrutura completa do aplicativo./references/event-handling.md- Padrões de tratamento de eventos
IMPORTANTE: Verificação de Completude da Documentação
Antes de responder perguntas, Claude DEVE:
- Ler o(s) arquivo(s) de referência relevante(s) listado(s) acima
- Se a leitura do arquivo falhar ou o arquivo estiver vazio:
- Informe o usuário: "本地文档不完整,建议运行
/sync-crate-skills makepad --force更新文档" - Ainda assim, responda com base nos padrões do SKILL.md + conhecimento interno
- Informe o usuário: "本地文档不完整,建议运行
- Se o arquivo de referência existir, incorpore seu conteúdo à resposta
Padrões Chave
1. Estrutura Básica do Aplicativo
use makepad_widgets::*;
live_design! {
use link::theme::*;
use link::shaders::*;
use link::widgets::*;
App = {{App}} {
ui: <Root> {
main_window = <Window> {
body = <View> {
width: Fill, height: Fill
flow: Down
<Label> { text: "Hello Makepad!" }
}
}
}
}
}
app_main!(App);
#[derive(Live, LiveHook)]
pub struct App {
#[live] ui: WidgetRef,
}
impl LiveRegister for App {
fn live_register(cx: &mut Cx) {
crate::makepad_widgets::live_design(cx);
}
}
impl AppMain for App {
fn handle_event(&mut self, cx: &mut Cx, event: &Event) {
self.ui.handle_event(cx, event, &mut Scope::empty());
}
}
2. Configuração do Cargo.toml
[package]
name = "my_app"
version = "0.1.0"
edition = "2024"
[dependencies]
makepad-widgets = { git = "https://github.com/makepad/makepad", branch = "dev" }
3. Tratamento de Cliques de Botão
impl AppMain for App {
fn handle_event(&mut self, cx: &mut Cx, event: &Event) {
let actions = self.ui.handle_event(cx, event, &mut Scope::empty());
if self.ui.button(id!(my_button)).clicked(&actions) {
log!("Button clicked!");
}
}
}
4. Acessando e Modificando Widgets
// Get widget references
let label = self.ui.label(id!(my_label));
label.set_text("Updated text");
let input = self.ui.text_input(id!(my_input));
let text = input.text();
Tabela de Referência da API
| Macro/Tipo | Descrição | Exemplo |
|---|---|---|
live_design! |
Define UI em DSL | live_design! { App = {{App}} { ... } } |
app_main! |
Macro de ponto de entrada | app_main!(App); |
#[derive(Live)] |
Deriva dados ao vivo | #[derive(Live, LiveHook)] |
WidgetRef |
Referência para a árvore de UI | #[live] ui: WidgetRef |
Cx |
Contexto para renderização | fn handle_event(&mut self, cx: &mut Cx, ...) |
id!() |
Macro de ID de Widget | self.ui.button(id!(my_button)) |
Configuração da Plataforma
| Plataforma | Requisitos |
|---|---|
| macOS | Funciona imediatamente |
| Windows | Funciona imediatamente |
…
Perguntas frequentes
O que é `live_design!`?
É uma forma de definir a interface do seu aplicativo usando uma linguagem especial que o Makepad entende. As mudanças feitas aqui aparecem na hora, sem precisar compilar o código de novo.
O que é `app_main!(App)`?
Isso marca o ponto de entrada principal do seu aplicativo, dizendo ao Makepad qual estrutura de código usar para iniciar tudo.
Como o Makepad funciona em diferentes sistemas?
Makepad foi feito para funcionar em vários lugares: computadores (Windows, macOS, Linux), celulares (Android, iOS) e até na web. O mesmo código roda em todos eles.
Detalhes
Descrição original do autor
CRITICAL: Use for Makepad getting started and app structure. Triggers on: makepad, makepad getting started, makepad tutorial, live_design!, app_main!, makepad project setup, makepad hello world, "how to create makepad app", makepad 入门, 创建 makepad 应用, makepad 教程, makepad 项目结构
Popularidade
- Estrelas no GitHub
- 48 mil
- Posição no ranking
- #3531
- Licença
- MIT
- Atualizada em
- 15/10/2026
Comentários
- …
Mais skills deste repositório
00-andruia-consultant
Ajuda seu agente a iniciar ou melhorar projetos de IA. Ele analisa código, sugere ferramentas e cria planos de ação em espanhol.
sickn33/agentic-awesome-skills
007
Faz seu agente realizar auditorias de segurança e modelagem de ameaças. É útil para proteger projetos contra ataques e vulnerabilidades.
sickn33/agentic-awesome-skills
10-andruia-skill-smith
Ajuda seu agente a criar ou melhorar ferramentas de IA. Ele define como as ferramentas funcionam, escreve a documentação e valida a estrutura.
sickn33/agentic-awesome-skills
20-andruia-niche-intelligence
Faz seu agente criar um resumo sobre um setor específico. É útil para entender o contexto, regras, padrões de uso e riscos de um projeto, usando fontes confiáveis.
sickn33/agentic-awesome-skills
Skills parecidas
angular-developer
Ajuda seu agente a criar código Angular e a dar conselhos sobre a estrutura do projeto. É útil para iniciar novos projetos, criar partes do código ou melhorar a performance e acessibilidade.
affaan-m/ECC
frontend-a11y
Ajuda seu agente a tornar interfaces web acessíveis para todos. Ele garante que sites e apps funcionem bem com leitores de tela e navegação por teclado.
affaan-m/ECC
frontend-patterns
Faz seu agente aplicar padrões modernos no desenvolvimento frontend. Ele otimiza performance, gerencia estado e segue boas práticas em React e Next.js.
affaan-m/ECC