Dragoon0x/palette
.cursor/skills/palette/SKILL.md
Generate a complete 50-950 shade palette from a single hex color. Outputs 11 perceptually uniform shades with CSS variables, Tailwind config, and design token formats.
development
Updated Apr 17, 2026
$ install --global
skillsauthnpx skillsauth add Dragoon0x/optik paletteInstall 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 16, 2026, 3:02 PM4.1s1 file scanned
SKILL.md
- name:
- palette
- description:
- Generate a complete 50-950 shade palette from a single hex color. Outputs 11 perceptually uniform shades with CSS variables, Tailwind config, and design token formats.
- user-invokable:
- true
/palette — Full Shade Palette Generator
Usage
/palette [hex-color]
Algorithm
Given a single brand color:
- Convert to HSL
- Generate 11 stops (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950)
- 500 = the input color
- Lighter stops: increase lightness, slightly decrease saturation
- Darker stops: decrease lightness, slightly increase saturation, shift hue toward blue
- 50 = near white with hue tint, 950 = near black with hue tint
Output
- CSS custom properties: --color-primary-50 through --color-primary-950
- Tailwind config extension
- Hex values table
- Contrast ratio of each shade against white and black backgrounds
Quality Checks
- Every shade must be visually distinct from adjacent shades
- 50 must work as a subtle background color
- 500-700 must pass AA contrast against white text
- 800-950 must work as dark mode surface colors
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