Agent skill

Logo To Swiftui Draw

by RhuanCruz in RhuanCruz/swiftui-logo-draw

Transforma a imagem (PNG) de um logo num Shape do SwiftUI e num componente que desenha o contorno a traço e depois preenche (splash screen, loading, hero).

MITAuto-check passedMobile

Install Logo To Swiftui Draw

skills CLI
$ npx skills add RhuanCruz/swiftui-logo-draw --skill logo-to-swiftui-draw -a claude-code

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

GitHub CLI
$ gh skill install RhuanCruz/swiftui-logo-draw logo-to-swiftui-draw --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/RhuanCruz/swiftui-logo-draw.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skill/logo-to-swiftui-draw .claude/skills/logo-to-swiftui-draw && 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/

Facts

Skill name
logo-to-swiftui-draw
GitHub stars
159
Token cost
~1.7k tokens
SKILL.md length
725 words
Files
7 (incl. scripts)
Skills in repo
1
Repo updated
First seen
Licence
MIT

At a glance

Transforma a imagem (PNG) de um logo num Shape do SwiftUI e num componente que desenha o contorno a traço e depois preenche (splash screen, loading, hero).

  • Works in 4 steps: MeuLogoShape.swift (com comentário de… → models/meu_logo.py + params.json (pra… → overlay.png com o IoU no chat, como… → …
  • Tasks that involve iOS development
  • SKILL.md covers Princípio, Pré-requisitos, Workflow and Entregáveis
  • Runs Python and Shell scripts from its folder; calls python3 and brew

What it does

Logo To Swiftui Draw is an agent skill from RhuanCruz/swiftui-logo-draw. Transforma a imagem (PNG) de um logo num Shape do SwiftUI e num componente que desenha o contorno a traço e depois preenche (splash screen, loading, hero). Use quando o usuário disser "desenhar o logo", "animar o logo", "vetorizar o logo", "logo draw", "trace do logo", "splash com o logo desenhando", ou mandar a imagem de um logo pedindo um componente SwiftUI. Cobre logos geométricos (primitivas + ajuste por IoU) e orgânicos (potrace → SVG → Path).

Its SKILL.md is about 1.7k tokens, which your agent loads only when the skill is triggered. The skill folder holds 8 other files, including scripts (for example `scripts/compare.py`, `scripts/geometry.py` and `scripts/measure.py`).

It sits in Mobile, covering iOS development and Logo and visual identity. It works with SwiftUI. The licence is MIT.

When your agent uses it

  • Tasks that involve iOS development
  • Tasks that involve Logo and visual identity

Example prompts

  • “desenhar o logo”
  • “animar o logo”
  • “vetorizar o logo”
  • “/logo-to-swiftui-draw”

Requirements

  • Python 3
  • A Bash shell

Workflow steps

4 steps, taken from the first numbered list in SKILL.md.

  1. MeuLogoShape.swift (com comentário de onde vieram os números);
  2. models/meu_logo.py + params.json (pra refazer quando o logo mudar);
  3. overlay.png com o IoU no chat, como prova de fidelidade;
  4. o ponto de uso no app.

What it can do on your machine

Read from SKILL.md and the folder at commit 71a3e9e. 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

    Ships 6 files in scripts/ (Python and Shell), which the agent can run.

    Shell commands in SKILL.md call:

    • python3
    • brew

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    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

Logo To Swiftui Draw loads about 1.7k tokens when it runs. Until then it costs about 119 tokens; SKILL.md has 725 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~119
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); the scripts in this folder are not scanned.

SKILL.md

The full file from RhuanCruz/swiftui-logo-draw at commit 71a3e9e, republished under its MIT licence (© RhuanCruz). 725 words, ~1,660 tokens.

Download SKILL.mdSave it as .claude/skills/logo-to-swiftui-draw/SKILL.md (or your agent's skills folder). This skill also uses 6 other files; get the full folder from GitHub.
name
logo-to-swiftui-draw
description
Transforma a imagem (PNG) de um logo num `Shape` do SwiftUI e num componente que desenha o contorno a traço e depois preenche (splash screen, loading, hero). Use quando o usuário disser "desenhar o logo", "animar o logo", "vetorizar o logo", "logo draw", "trace do logo", "splash com o logo desenhando", ou mandar a imagem de um logo pedindo um componente SwiftUI. Cobre logos geométricos (primitivas + ajuste por IoU) e orgânicos (potrace → SVG → Path).

logo-to-swiftui-draw

Princípio

Um logo animado a traço só fica bom se o Path for limpo: poucas primitivas, sem self-intersection, subpaths na ordem em que uma caneta desenharia. Vetorização automática (potrace) dá um path fiel, mas cheio de nós; pra logos geométricos vale mais reconstruir com primitivas e medir a fidelidade contra a imagem, em vez de confiar no olho.

O componente de animação é genérico (LogoDraw<S: Shape>, em Sources/LogoDraw/LogoDraw.swift deste repositório). O trabalho da skill é produzir o Shape.

Pré-requisitos

  • macOS com Xcode (o swiftc e o ImageRenderer do SwiftUI rodam fora de simulador).
  • Python 3 com numpy, pillow, scipy.
  • Pro caminho B (orgânico): brew install potrace.

Scripts em scripts/ desta skill. Rode tudo a partir de um diretório de trabalho temporário.

Workflow

Abra a imagem e decida:

  • Geométrico (traços de largura constante, círculos, cantos arredondados, retas): caminho A. Ex.: pictogramas, monogramas, símbolos "flat".
  • Orgânico (caligrafia, formas livres, larguras variáveis): caminho B.

Se tiver dúvida, comece pelo A e meça: se o IoU não passar de ~0.90 com poucas primitivas, o logo não é geométrico o bastante.

Etapa 1 — Medir (os dois caminhos)
python3 scripts/measure.py logo.png --mask mask.png

Saída: tamanho da imagem, componentes conexos com bounding box. Confira mask.png: o threshold precisa isolar só o glifo (use --threshold / --dark). Se a imagem tiver wordmark ou fundo com brilho, anote um y abaixo do qual ignorar (--ignore-below).

Pra cada componente, tire runs por linha e coluna:

python3 scripts/measure.py logo.png --rows 520 720 6
python3 scripts/measure.py logo.png --cols 400 700 12

Com os runs você deriva, sem chute: largura do traço (largura horizontal × sin do ângulo), ângulo das retas (dx/dy entre duas linhas), centros e raios de pontas redondas (ponto extremo + metade da largura), onde uma reta vira curva (onde a diferença entre linhas muda).

Etapa 2A — Modelar com primitivas (geométrico)

Copie scripts/models/runner.py como ponto de partida. Um modelo é:

  • PARAMS: dicionário com os números medidos (larguras, centros, ângulos, raios);
  • build(P): devolve uma lista de polígonos, um por subpath, construídos só com fillet (= addArc(tangent1End:tangent2End:radius:)), arc (= addRelativeArc) e retas;
  • STEPS / VEC_STEPS: passo de busca de cada parâmetro.

Regras que evitam retrabalho:

  • Construa contornos explícitos, não strokedPath. Contorno explícito dá controle de onde o traço começa e evita self-intersection em curvas com raio menor que meia largura.
  • Cantos externo e interno de um traço nem sempre são concêntricos em logos desenhados à mão ou por IA. Meça os dois raios separadamente (no exemplo: 99 fora, 54 dentro, com traço de 70).
  • A ordem dos subpaths é a ordem da animação. Comece pela peça maior, termine no detalhe (a cabeça do corredor é o "ponto final").

Meça e ajuste:

python3 scripts/tune.py logo.png models/meu_logo.py                 # IoU + overlay.png
python3 scripts/tune.py logo.png models/meu_logo.py --tune          # coordinate descent → params.json

Leia o overlay.png: vermelho é onde o modelo sobra, verde onde falta. Ajuste a construção (não só os números) até o resíduo ser só borda. Referência: 0.96 no exemplo.

Show full SKILL.md (276 more words)Show less
Etapa 2B — Vetorizar (orgânico)
potrace mask.pbm -s -o logo.svg --turdsize 20 --alphamax 1 --opttolerance 0.4

(gere o .pbm a partir de mask.png com o Pillow). Simplifique no Figma/Illustrator se o path vier com nós demais, e exporte de novo. Converta o d do SVG pra Path (move/line/ cubic/close). O componente funciona igual; só a fidelidade da animação de traço depende de o path ter poucos nós e a direção de desenho fazer sentido.

Etapa 3 — Portar pra Swift

Crie MeuLogoShape.swift seguindo Sources/LogoDraw/RunnerLogoShape.swift:

  • designSize = bbox do glifo na imagem; path(in:) calcula scale = min(w/W, h/H) e centra.
  • Função pt(x, y) que converte coordenadas da imagem pro rect; len(v) pra raios.
  • Reproduza build(P) chamada por chamada: fillet → addArc(tangent1End:tangent2End:radius:), arc(c, r, a, a+180) → addRelativeArc(center:radius:startAngle:delta:), círculo → addRelativeArc de 360°. Use addRelativeArc, nunca addArc(... clockwise:): o sentido de clockwise inverte com o eixo y pra baixo e é a fonte clássica de arco "pelo lado errado".
  • Cole os números finais de params.json como constantes comentadas.
Etapa 4 — Verificar o Shape (obrigatório)
scripts/render_shape.sh MeuLogoShape.swift MeuLogoShape render.png \
    --canvas 1254 1254 --frame 418 441 387 370          # canvas = imagem; frame = bbox
python3 scripts/compare.py logo.png render.png            # IoU + overlay
scripts/render_shape.sh MeuLogoShape.swift MeuLogoShape outline.png --mode stroke --canvas 400 400 --frame 50 50 300 300
scripts/render_shape.sh MeuLogoShape.swift MeuLogoShape half.png --mode trim --trim 0.5 --canvas 400 400 --frame 50 50 300 300

O IoU do Swift deve bater com o do Python (diferença < 0.01). Se não bater, um arco está indo pelo lado errado ou um sinal de normal está trocado. Olhe outline.png (contorno limpo, sem laços) e half.png (o traço para onde você espera).

Etapa 5 — Plugar no app
swift
LogoDraw(MeuLogoShape(), drawDuration: 1.2, fillStartPercent: 70, size: 150,
         outlineColor: .primary, fillColor: .primary, freezeAt: freeze) { splashDone() }
  • Use onComplete pra encadear (fechar splash, mostrar wordmark).
  • Exponha freezeAt num launch arg (-splash.freeze 0.45) pra revisar e tirar screenshot de qualquer frame no simulador.
  • Reduce Motion já está tratado: aparece completo e onComplete dispara na hora.

Entregáveis

  1. MeuLogoShape.swift (com comentário de onde vieram os números);
  2. models/meu_logo.py + params.json (pra refazer quando o logo mudar);
  3. overlay.png com o IoU no chat, como prova de fidelidade;
  4. o ponto de uso no app.

© RhuanCruz, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 6 other files (scripts) in skill/logo-to-swiftui-draw of RhuanCruz/swiftui-logo-draw.

  • SKILL.md
  • scripts/compare.py
  • scripts/geometry.py
  • scripts/measure.py
  • scripts/models/runner.py
  • scripts/render_shape.sh
  • scripts/tune.py

Open the folder on GitHubat commit 71a3e9e

Compare with similar skills

Logo To Swiftui Draw 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.

Logo To Swiftui Draw compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Logo To Swiftui Draw this skillRhuanCruz/swiftui-logo-draw159—~1.7kAutomated safety check: PassMIT
Swiftui Designnexu-io/open-design100k—~325Automated safety check: PassApache-2.0
Swiftui Protwostraws/SwiftUI-Agent-Skill5.6k2 repos~1.5kAutomated safety check: PassMIT
Swiftui UI PatternsAFK-surf/OpenBridge4304 repos~887Automated safety check: PassMIT
Swiftui Performance Auditharperreed/dotfiles3348 repos~1.4kAutomated safety check: PassNone
Hig Project Contextraintree-technology/hig-doctor1445 repos~1.2kAutomated safety check: PassMIT

Similar skills

  • Swiftui Design

    nexu-io/open-design

    SwiftUI 前端设计 skill — anti AI-slop rules, design direction advisor, brand asset protocol, and five-dimension review.

    100k GitHub stars~325 tokensUpdated yesterday
    MobileAuto-check passed
  • Swiftui Pro

    twostraws/SwiftUI-Agent-Skill

    Comprehensively reviews SwiftUI code for best practices on modern APIs, maintainability, and performance.

    5.6k GitHub starsUsed in 2 repos~1.5k tokens
    MobileAuto-check passed
  • Swiftui UI Patterns

    AFK-surf/OpenBridge

    Best practices and example-driven guidance for building SwiftUI views and components.

    430 GitHub starsUsed in 4 repos~887 tokens
    MobileAuto-check passed
  • Swiftui Performance Audit

    harperreed/dotfiles

    Audit and improve SwiftUI runtime performance from code review and architecture.

    334 GitHub starsUsed in 8 repos~1.4k tokens
    MobileAuto-check passed
  • Hig Project Context

    raintree-technology/hig-doctor

    Create or update a shared Apple design context document that other HIG skills use to tailor guidance.

    144 GitHub starsUsed in 5 repos~1.2k tokens
    MobileAuto-check passed
  • Hig Components Content

    raintree-technology/hig-doctor

    Apple Human Interface Guidelines for content display components.

    144 GitHub starsUsed in 5 repos~1.3k tokens
    MobileAuto-check passed

Works with

Categories

Questions about Logo To Swiftui Draw

What does Logo To Swiftui Draw do?

Transforma a imagem (PNG) de um logo num Shape do SwiftUI e num componente que desenha o contorno a traço e depois preenche (splash screen, loading, hero). Logo To Swiftui Draw is an agent skill from RhuanCruz/swiftui-logo-draw. Transforma a imagem (PNG) de um logo num Shape do SwiftUI e num componente que desenha o contorno a traço e depois preenche (splash screen, loading, hero).

When should I use Logo To Swiftui Draw?

Logo To Swiftui Draw fits situations like: tasks that involve iOS development; tasks that involve Logo and visual identity.

How do I install Logo To Swiftui Draw in Claude Code?

Run `npx skills add RhuanCruz/swiftui-logo-draw --skill logo-to-swiftui-draw -a claude-code`. Or copy the skill folder (skill/logo-to-swiftui-draw in RhuanCruz/swiftui-logo-draw) into .claude/skills/logo-to-swiftui-draw in your project. Claude Code loads it when a task matches its description.

How do I install Logo To Swiftui Draw in Codex?

Run `npx skills add RhuanCruz/swiftui-logo-draw --skill logo-to-swiftui-draw -a codex`. Or copy the skill folder (skill/logo-to-swiftui-draw in RhuanCruz/swiftui-logo-draw) into .agents/skills/logo-to-swiftui-draw in your project. Codex loads it when a task matches its description.

Can I use Logo To Swiftui Draw 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 RhuanCruz/swiftui-logo-draw --skill logo-to-swiftui-draw -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/logo-to-swiftui-draw, .gemini/skills/logo-to-swiftui-draw, .github/skills/logo-to-swiftui-draw and .opencode/skills/logo-to-swiftui-draw in your project.

What does Logo To Swiftui Draw need to run?

Going by SKILL.md and its folder, Logo To Swiftui Draw needs Python and a shell for the scripts in its folder and the command-line tools its instructions call (python3 and brew). Our summary lists: Python 3; A Bash shell.

Does Logo To Swiftui Draw access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Logo To Swiftui Draw 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. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Logo To Swiftui Draw use?

Logo To Swiftui Draw 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 Logo To Swiftui Draw use?

About 1.7k tokens (SKILL.md is roughly 6.6k 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 Logo To Swiftui Draw?

Skills that share tags, products or a category with Logo To Swiftui Draw: Swiftui Design (nexu-io/open-design, 100k stars), Swiftui Pro (twostraws/SwiftUI-Agent-Skill, 5.6k stars), Swiftui UI Patterns (AFK-surf/OpenBridge, 430 stars) and Swiftui Performance Audit (harperreed/dotfiles, 334 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Logo To Swiftui Draw?

RhuanCruz (a GitHub user) maintains it in RhuanCruz/swiftui-logo-draw, which has 159 GitHub stars. The repository was last updated on September 5, 2026.

Source: RhuanCruz/swiftui-logo-draw on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.