Dragoon0x/type-scale
.agents/skills/type-scale/SKILL.md
Generate a mathematical type scale from base size and ratio. Outputs pixel values, rem equivalents, and CSS custom properties. Use Perfect Fourth (1.333) for compact UIs, Major Third (1.250) for standard, or Perfect Fifth (1.500) for dramatic hierarchy.
development
Updated Apr 17, 2026
$ install --global
skillsauthnpx skillsauth add Dragoon0x/optik type-scaleInstall 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 17, 2026, 5:18 AM6.0s1 file scanned
SKILL.md
- name:
- type-scale
- description:
- Generate a mathematical type scale from base size and ratio. Outputs pixel values, rem equivalents, and CSS custom properties. Use Perfect Fourth (1.333) for compact UIs, Major Third (1.250) for standard, or Perfect Fifth (1.500) for dramatic hierarchy.
- user-invokable:
- true
/type-scale — Mathematical Type Scale Generator
Usage
/type-scale [base] [ratio]
Default: base=16px, ratio=1.250 (Major Third)
Available Ratios
- Minor Second: 1.067 — very tight, for data-heavy UIs
- Major Second: 1.125 — compact apps and dashboards
- Minor Third: 1.200 — balanced, good default for apps
- Major Third: 1.250 — clear hierarchy, good for marketing
- Perfect Fourth: 1.333 — strong hierarchy, landing pages
- Augmented Fourth: 1.414 — dramatic, editorial
- Perfect Fifth: 1.500 — very dramatic, hero-focused
Output
Generate 7 scale stops and output as:
- Pixel values (rounded to nearest integer)
- Rem equivalents
- CSS custom properties
- Suggested usage (which element gets which size)
Rules
- Round all values to whole pixels
- Body text is always the base size
- Minimum heading size is 1 step above base
- Maximum 7 steps in the scale
- For app UIs: use fixed scale. For marketing: fluid typography with clamp() is acceptable
- Always pair with line-height recommendations: headings 1.1-1.2, body 1.5-1.7
Related Skills
Dragoon0x/audit
testing
VerifiedTrustedCommunity
Comprehensive design quality audit with severity ratings, specific line references, and actionable fix instructions. Deeper than /score — examines every declaration.
SKILL.mdUpdated Apr 17, 2026
Dragoon0x/aria
testing
VerifiedTrustedCommunity
Audit and fix ARIA attributes. Ensures proper aria-label, aria-hidden, aria-live, and role usage throughout the interface.
SKILL.mdUpdated Apr 17, 2026
Dragoon0x/.gemini/skills/animate
content-media
VerifiedTrustedCommunity
--- name: animate description: Add purposeful motion and transitions to the interface. Focuses on high-impact moments: page load reveals, hover states, and scroll-triggered entries. Not decorative jitter. user-invokable: true --- # /animate — Purposeful Motion Add motion that serves a purpose: **Page load:** Staggered fade-up reveals for above-fold content. Use animation-delay in 80-120ms increments. Total reveal sequence should complete within 600ms. **Hover states:** Scale (1.02-1.05), sub
SKILL.mdUpdated Apr 17, 2026
Dragoon0x/align
testing
VerifiedTrustedCommunity
Verify visual alignment across sections. Check that headings, text, images, and components share consistent alignment points.
SKILL.mdUpdated Apr 17, 2026