FrancoStino/ui-tokens
bundled-skills/ui-tokens/SKILL.md
View, add, or modify design tokens in the StyleSeed design system
$ install --global
skillsauthnpx skillsauth add FrancoStino/opencode-skills-antigravity ui-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: Jul 10, 2026, 3:22 AM119.1s1 file scanned
SKILL.md
- name:
- ui-tokens
- description:
- View, add, or modify design tokens in the StyleSeed design system
- risk:
- unknown
- source:
- https://github.com/bitjaru/styleseed/tree/main/engine/.claude/skills/ss-tokens
- source_repo:
- bitjaru/styleseed
- source_type:
- community
- date_added:
- 2026-07-01
- license:
- MIT
- license_source:
- https://github.com/bitjaru/styleseed/blob/main/LICENSE
Design Token Manager
When to Use
Use this skill when you need view, add, or modify design tokens in the StyleSeed design system.
When NOT to use
- For applying tokens in components → use
/ss-componentor/ss-pattern - For finding token violations in existing code → use
/ss-lint - For brand-wide color/font choices that don't exist yet — define a skin first, then add tokens
- For non-CSS token systems (Figma, native iOS/Android) — Tailwind v4 / CSS variables only
Action: $0 | Token type: $1 Arguments: $ARGUMENTS
Token File Locations
| Type | JSON Source | CSS Implementation |
|------|-----------|-------------------|
| Colors | tokens/colors.json | css/theme.css :root + @theme inline |
| Typography | tokens/typography.json | css/fonts.css + css/base.css |
| Spacing | tokens/spacing.json | Tailwind utilities (no custom CSS needed) |
| Radius | tokens/radii.json | css/theme.css @theme inline |
| Shadows | tokens/shadows.json | css/theme.css :root |
Instructions
list — Show current tokens
Read and display the requested token file in a formatted table.
add — Add new token
- Add the token to the JSON source file (
tokens/*.json) - Add the CSS custom property to
css/theme.cssunder:root - If it needs a Tailwind utility, add to the
@theme inlineblock - If it has a dark mode variant, add to the
.darkblock
update — Modify existing token
- Update the value in the JSON source file
- Update the CSS custom property in
theme.css - Check all components for direct usage that might need updating
Rules
- Always keep JSON and CSS in sync
- Use semantic names, not descriptive names (
--successnot--green-500) - Colors should support both light and dark modes
- New tokens must be added to BOTH the JSON source AND the CSS implementation
Limitations
- Use this skill only when the task clearly matches its upstream source and local project context.
- Verify commands, generated code, dependencies, credentials, and external service behavior before applying changes.
- Do not treat examples as a substitute for environment-specific tests, security review, or user approval for destructive or costly actions.
Related Skills
FrancoStino/llm-security
tools
VerifiedTrustedCommunity
Authorized security assessment of LLM applications and AI agents: prompt injection, tool abuse, RAG exposure, memory poisoning, system-prompt extraction, and agent-compliance engineering per OWASP LLM/ASI Top 10.
68SKILL.mdUpdated Aug 30, 2026
FrancoStino/liuguang-banlan-ui
development
VerifiedTrustedCommunity
Builds two parameterized UI modes—流光溢彩白 (iridescent white) and 五彩斑斓黑 (colorful black)—with OKLCH, WebGL/CSS fallback, vision gating, screenshot QA, and total/per-color intensity reports. Use when a UI request names either mode or needs measured color parameters.
68SKILL.mdUpdated Aug 30, 2026
FrancoStino/kimi-delegate
tools
VerifiedTrustedCommunity
Delegate coding tasks to the Kimi Code CLI (`kimi`) only when the user explicitly requests it, while the orchestrator retains review and landing responsibility.
68SKILL.mdUpdated Aug 30, 2026
FrancoStino/js-reverse
development
VerifiedTrustedCommunity
Front-end JavaScript reverse engineering: locate signature chains, analyze encrypted request parameters, sample runtime behavior, and reproduce logic locally in Node for evidence-based output.
68SKILL.mdUpdated Aug 30, 2026