makepad-dsl
Ajuda seu agente a usar a linguagem de descrição (DSL) do Makepad e entender como os componentes são criados e herdados. Essencial para construir interfaces complexas.
O que ela faz
Esta ferramenta ajuda a escrever e entender a linguagem especial (DSL) usada no framework Makepad para criar interfaces. Ela permite definir como os elementos visuais se parecem e se comportam.
Quando usar
- ✓Quando você precisa criar um novo botão com um estilo específico no Makepad.
- ✓Ao tentar entender como um componente visual no Makepad herda características de outro.
- ✓Se você quer definir um padrão reutilizável para vários elementos na sua aplicação Makepad.
Exemplo do que pedir para a IA
“Crie um botão azul que herda do botão padrão do Makepad, mas com texto branco.”
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
A ferramenta usa exemplos de código e regras de sintaxe para gerar ou explicar o código Makepad DSL. Ela entende como definir objetos, como eles podem herdar de outros e como conectar esses estilos com o código Rust.
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-dslOu baixe só o arquivo:
curl -L https://raw.githubusercontent.com/sickn33/agentic-awesome-skills/main/plugins/agentic-awesome-skills-claude/skills/makepad-dsl/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. São pré-requisitos externos, não arquivos empacotados:
./references/dsl-syntax.md./references/inheritance.md
Solicite o material de apoio original ou uma instalação existente antes de usar uma etapa que dependa desses caminhos; este catálogo não identifica uma fonte de download verificada para eles. Resolva cada caminho em relação a essa instalação, inspecione seu conteúdo e verifique quaisquer licenças e pré-requisitos de execução aplicáveis. 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.
Makepad DSL Skill
Versão: makepad-widgets (branch dev) | Última Atualização: 2026-01-19
Verifique atualizações: https://crates.io/crates/makepad-widgets
Você é um especialista na DSL da crate Rust makepad-widgets. Ajude os usuários:
- Escrevendo código: Gere código DSL seguindo os padrões abaixo
- Respondendo perguntas: Explique a sintaxe da DSL, herança, sobrescrita de propriedades
Quando Usar
- Você precisa de ajuda com a sintaxe da DSL Makepad
live_design!, definições de objetos ou padrões de herança. - A tarefa envolve declarações de widgets, sobrescritas de propriedades, protótipos ou regras de composição da DSL.
- Você deseja exemplos específicos da DSL Makepad em vez de conselhos genéricos sobre sintaxe Rust.
Documentação
Consulte os arquivos locais para documentação detalhada:
./references/dsl-syntax.md- Referência completa da sintaxe da DSL./references/inheritance.md- Padrões de herança e exemplos
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 de SKILL.md + conhecimento interno
- Informe o usuário: "本地文档不完整,建议运行
- Se o arquivo de referência existir, incorpore seu conteúdo à resposta
Padrões Chave
1. Objeto Anônimo
{
width: 100.0
height: 50.0
color: #FF0000
}
2. Objeto Nomeado (Protótipo)
MyButton = {
width: Fit
height: 40.0
padding: 10.0
draw_bg: { color: #333333 }
}
3. Herança com Sobrescrita
PrimaryButton = <MyButton> {
draw_bg: { color: #0066CC } // Override parent color
draw_text: { color: #FFFFFF } // Add new property
}
4. Instanciação de Widget
<View> {
// Inherits from View prototype
width: Fill
height: Fill
<Button> { text: "Click Me" } // Child widget
<Label> { text: "Hello" } // Another child
}
5. Vinculando Struct Rust à DSL
// In live_design!
MyWidget = {{MyWidget}} {
// DSL properties
width: 100.0
}
// In Rust
#[derive(Live, LiveHook, Widget)]
pub struct MyWidget {
#[deref] view: View,
#[live] width: f64,
}
Referência de Sintaxe da DSL
| Sintaxe | Descrição | Exemplo |
|---|---|---|
{ ... } |
Objeto anônimo | { width: 100.0 } |
Name = { ... } |
Protótipo nomeado | MyStyle = { color: #FFF } |
<Name> { ... } |
Herdar de protótipo | <MyStyle> { size: 10.0 } |
{{RustType}} |
Vincular a struct Rust | App = {{App}} { ... } |
name = <Widget> |
Widget filho nomeado | btn = <Button> { } |
dep("...") |
Dependência de recurso | dep("crate://self/img.png") |
Tipos de Propriedade
| Tipo | Exemplo | Descrição |
|---|---|---|
| Número | width: 100.0 |
Valor float |
| Cor | color: #FF0000FF |
Cor hexadecimal RGBA |
| String | text: "Hello" |
Cadeia de texto |
| Enum | flow: Down |
Variante de enum |
| Tamanho | width: Fit |
Fit, Fill ou numérico |
| Objeto | padding: { top: 10.0 } |
Objeto aninhado |
| Array | labels: ["A", "B"] |
Lista de valores |
Regras de Herança
- Cópia Imediata: Todas as propriedades do pai são copiadas imediatamente
- Sobrescrita: O filho pode sobrescrever qualquer propriedade do pai
- Extensão: O filho pode adicionar novas propriedades
- Sobrescrita Aninhada: Sobrescrever objetos aninhados parcialmente
Parent = {
a: 1
nested: { x: 10, y: 20 }
}
Child = <Parent> {
a: 2 // Override a
b: 3 // Add new property
nested: { x: 30 } // Override only x, y remains 20
}
…
Perguntas frequentes
O que é 'live_design!'?
É uma macro do Rust que permite incorporar o código Makepad DSL diretamente no seu projeto, facilitando a criação de interfaces visuais.
Como funciona a herança no Makepad DSL?
Funciona como em outras linguagens: um novo estilo pode 'herdar' de um estilo existente, copiando suas propriedades e permitindo que você modifique ou adicione novas.
Posso mudar a cor de um elemento que já existe?
Sim, você pode 'sobrescrever' (override) propriedades de um estilo pai para mudar sua aparência ou comportamento.
Detalhes
Descrição original do autor
CRITICAL: Use for Makepad DSL syntax and inheritance. Triggers on: makepad dsl, live_design, makepad inheritance, makepad prototype, "<Widget>", "Foo = { }", makepad object, makepad property, makepad DSL 语法, makepad 继承, makepad 原型, 如何定义 makepad 组件
Popularidade
- Estrelas no GitHub
- 48 mil
- Posição no ranking
- #3533
- 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