Dragoon0x/tokens
.cursor/skills/tokens/SKILL.md
Generate a complete design token set. Covers color, typography, spacing, shadows, radii, and breakpoints. Exports as CSS custom properties, Tailwind config, SCSS variables, and W3C Design Tokens JSON.
development
Updated Apr 17, 2026
$ install --global
skillsauthnpx skillsauth add Dragoon0x/optik 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 17, 2026, 5:18 AM4.2s1 file scanned
SKILL.md
- name:
- tokens
- description:
- Generate a complete design token set. Covers color, typography, spacing, shadows, radii, and breakpoints. Exports as CSS custom properties, Tailwind config, SCSS variables, and W3C Design Tokens JSON.
- user-invokable:
- true
/tokens — Complete Design Token Generator
Generate tokens for every design dimension:
Color: Full palette (via /palette) + semantic tokens (via /semantic-color) Typography: Type scale (via /type-scale) + font stacks + line heights + letter spacing Spacing: Full spacing scale (via /spacing) Shadows: Elevation system (sm, md, lg, xl, 2xl) Border Radius: Scale (sm: 4px, md: 8px, lg: 12px, xl: 16px, 2xl: 24px, full: 9999px) Breakpoints: sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1440px
Output ALL tokens in four formats:
- CSS Custom Properties (:root block)
- Tailwind config (theme.extend)
- SCSS variables
- W3C Design Tokens JSON
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