makepad-font
Ajuda seu agente a gerenciar fontes e a renderizar texto em aplicativos Makepad. Importante para a aparência visual e legibilidade do seu app.
O que ela faz
Esta ferramenta ajuda a configurar e exibir textos em seus projetos usando a biblioteca Makepad. Você pode definir fontes, tamanhos, cores e como o texto se organiza na tela.
Quando usar
- ✓Quando quiser mudar a fonte de um texto.
- ✓Para ajustar o tamanho ou a cor do texto.
- ✓Ao organizar parágrafos e linhas de texto.
Exemplo do que pedir para a IA
“Como faço para usar a fonte 'Roboto' com tamanho 16 e cor azul em um texto?”
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 configura como as fontes são carregadas e desenhadas na tela. Ela usa técnicas como 'text shaping' para organizar as letras corretamente e 'SDF' para que o texto fique nítido em qualquer tamanho.
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-fontOu baixe só o arquivo:
curl -L https://raw.githubusercontent.com/sickn33/agentic-awesome-skills/main/plugins/agentic-awesome-skills-claude/skills/makepad-font/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/font-system.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 ou 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 Font 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 em renderização de texto e fontes do Makepad. Ajude os usuários com:
- Configuração de fontes: Famílias de fontes, tamanhos, estilos
- Layout de texto: Compreensão do layout e modelagem de texto
- Renderização de texto: Renderização de texto baseada em GPU com SDF
Documentação
Consulte os arquivos locais para documentação detalhada:
./references/font-system.md- Estrutura do módulo de fontes e APIs
IMPORTANTE: Verificação de Completude da Documentação
Antes de responder a 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:
- Informar ao usuário: "本地文档不完整,建议运行
/sync-crate-skills makepad --force更新文档" - Ainda assim, responder com base nos padrões do SKILL.md + conhecimento interno
- Informar ao usuário: "本地文档不完整,建议运行
- Se o arquivo de referência existir, incorporar seu conteúdo à resposta
Estrutura do Módulo de Texto
draw/src/text/
├── font.rs # Font handle and metrics
├── font_atlas.rs # GPU texture atlas for glyphs
├── font_face.rs # Font face data
├── font_family.rs # Font family management
├── fonts.rs # Built-in fonts
├── glyph_outline.rs # Glyph vector outlines
├── glyph_raster_image.rs # Rasterized glyph images
├── layouter.rs # Text layout engine
├── rasterizer.rs # Glyph rasterization
├── sdfer.rs # Signed distance field generator
├── selection.rs # Text selection/cursor
├── shaper.rs # Text shaping (harfbuzz)
Usando Fontes em DSL
Estilo de Texto
<Label> {
text: "Hello World"
draw_text: {
text_style: {
font: { path: dep("crate://self/resources/fonts/MyFont.ttf") }
font_size: 16.0
line_spacing: 1.5
letter_spacing: 0.0
}
color: #FFFFFF
}
}
Fontes do Tema
<Label> {
text: "Styled Text"
draw_text: {
text_style: <THEME_FONT_REGULAR> {
font_size: (THEME_FONT_SIZE_P)
}
}
}
Definição de Fonte em DSL
live_design! {
// Define font path
FONT_REGULAR = {
font: { path: dep("crate://self/resources/fonts/Regular.ttf") }
}
FONT_BOLD = {
font: { path: dep("crate://self/resources/fonts/Bold.ttf") }
}
// Use in widget
<Label> {
draw_text: {
text_style: <FONT_REGULAR> {
font_size: 14.0
}
}
}
}
API do Layouter
pub struct Layouter {
loader: Loader,
cache_size: usize,
cached_params: VecDeque<OwnedLayoutParams>,
cached_results: HashMap<OwnedLayoutParams, Rc<LaidoutText>>,
}
impl Layouter {
pub fn new(settings: Settings) -> Self;
pub fn rasterizer(&self) -> &Rc<RefCell<Rasterizer>>;
pub fn is_font_family_known(&self, id: FontFamilyId) -> bool;
pub fn define_font_family(&mut self, id: FontFamilyId, definition: FontFamilyDefinition);
pub fn define_font(&mut self, id: FontId, definition: FontDefinition);
pub fn get_or_layout(&mut self, params: impl LayoutParams) -> Rc<LaidoutText>;
}
Parâmetros de Layout
pub struct OwnedLayoutParams {
pub text: Substr,
pub spans: Box<[Span]>,
pub options: LayoutOptions,
}
pub struct Span {
pub style: Style,
pub len: usize,
}
pub struct Style {
pub font_family_id: FontFamilyId,
pub font_size_in_pts: f32,
pub color: Option<Color>,
}
pub struct LayoutOptions {
pub max_width_in_lpxs: Option<f32>, // Largura máxima para quebra de linha
…
Perguntas frequentes
O que é 'text shaping'?
É o processo de organizar as letras de um texto para que elas apareçam corretamente, considerando idiomas e ligaduras (letras que se juntam).
O que é 'SDF'?
É uma técnica que permite que o texto seja exibido de forma clara e nítida, mesmo quando você aumenta ou diminui o tamanho dele.
Onde ficam os arquivos de fonte?
A ferramenta espera que os arquivos de fonte estejam disponíveis em um local específico. Se não estiverem, pode ser necessário atualizá-la.
Detalhes
Descrição original do autor
CRITICAL: Use for Makepad font and text rendering. Triggers on: makepad font, makepad text, makepad glyph, makepad typography, font atlas, text layout, font family, font size, text shaping, makepad 字体, makepad 文字, makepad 排版, makepad 字形
Popularidade
- Estrelas no GitHub
- 48 mil
- Posição no ranking
- #3535
- 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