hjemmesidekongen/pencil-tokens
plugins/segl/skills/pencil-tokens/SKILL.md
Bridges design tokens to Pencil. Reads tokens.yml and guideline.yml, resolves all YAML references to concrete values, maps semantic colors + typography + spacing + radius + shadows to Pencil's set_variables format, then calls set_variables. Light mode only. One-shot token injection — run before any Pencil design work.
development
Updated Apr 5, 2026
$ install --global
skillsauthnpx skillsauth add hjemmesidekongen/ai pencil-tokensInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 5, 2026, 5:25 PM51.2s2 files scanned
SKILL.md
- name:
- pencil-tokens
- user_invocable:
- false
- interactive:
- false
- description:
- >
- depends_on:
- [visual-identity]
- writes:
- []
- model_tier:
- senior
- model:
- sonnet
- type:
- token_validation
- - name:
- category_coverage
- verify:
- Variables include colors (30+), typography (2+ families), spacing, radius, shadows
- fail_action:
- Check tokens.yml has all sections — may need /segl:design-identity regeneration
- on_fail:
- Report missing tokens and suggest remediation
- on_pass:
- Pencil variables loaded — ready for design work
- origin:
- original
- ported_date:
- 2026-03-11
- iteration:
- 3
- changes:
- ["initial creation", "audit fixes: depends_on, date, reference resolution, dark mode note, missing tokens", "audit round 2: variable count corrected to ~50, hex casing, status palette docs"]
Pencil Tokens
Reads design tokens from .ai/design/{name}/tokens.yml and brand context from
.ai/brand/{name}/guideline.yml, then injects them into the active Pencil
document via set_variables. Light mode only — dark mode tokens are excluded
by default.
Process
- Read
tokens.yml— parse YAML, extract all sections - Resolve references — walk all semantic values. Any value matching
"{primitives.color.*}"must be resolved to the concrete hex from the primitives section. Pencil cannot interpret YAML references. - Read
guideline.yml— extract brand name, tagline for context - Map to Pencil variable format (see
references/process.mdfor mapping table) - Call
set_variableswith the complete variable set (~50 variables) - Run checkpoint — verify variables were accepted
Token Mapping Summary
| tokens.yml section | Pencil variable type | Example |
|---|---|---|
| semantic.color.* (all keys) | color | primary → #e1943d |
| primitives.color.{palette}.50/100/900 | color | primary-50 → #FEF7ED |
| typography.family.* | string | font-heading → "'Lato', sans-serif" |
| spacing.scale (selected stops) | number | spacing-md → 16 |
| radius.* (all named stops) | number | radius-xl → 12 |
| shadow.* (all named stops) | string | shadow-sm → CSS shadow value |
Execution
See references/process.md for the full mapping algorithm and edge case handling.
Related Skills
hjemmesidekongen/brand-strategy
development
VerifiedTrustedCommunity
Creates a brand from scratch through market research and interactive sparring. Runs competitive research via Perplexity, then guides the user through positioning, audience, voice, values, and content pillars. Produces the full brand guideline set at .ai/brand/{name}/. Use when building a new brand, defining brand strategy for a product, or when /våbenskjold:create is invoked.
SKILL.mdUpdated Apr 5, 2026
hjemmesidekongen/brand-loader
testing
VerifiedTrustedCommunity
Loads brand guidelines from .ai/brand/{name}/ and makes them available to the current context. Progressive disclosure: L1 confirms brand exists, L2 loads summary, L3 loads specific files on demand. Use when a downstream skill or user needs brand context, or when /våbenskjold:apply is invoked.
SKILL.mdUpdated Apr 5, 2026
hjemmesidekongen/brand-evolve
documentation
VerifiedTrustedCommunity
Guided reinvention of an existing brand guideline. Loads current brand from .ai/brand/{name}/, identifies what to keep vs change, and walks the user through targeted evolution. Preserves brand equity while updating positioning, voice, or values. Use when refreshing a brand or when /våbenskjold:evolve is invoked.
SKILL.mdUpdated Apr 5, 2026
hjemmesidekongen/brand-audit
development
VerifiedTrustedCommunity
Codifies an existing brand from materials, samples, and references. Analyzes provided content to extract voice patterns, values, and positioning. Produces the same guideline format as brand-strategy. Use when a brand already exists but isn't documented, or when /våbenskjold:audit is invoked.
SKILL.mdUpdated Apr 5, 2026