ariffazil/FORGE-tailwind-tokens
skills/FORGE-tailwind-tokens/SKILL.md
Tailwind design tokens — Trinity Design System for federation cockpit and web surfaces.
$ install --global
skillsauthnpx skillsauth add ariffazil/openclaw-workspace FORGE-tailwind-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 19, 2026, 3:53 AM132.2s1 file scanned
SKILL.md
- id:
- FORGE-tailwind-tokens
- name:
- FORGE-tailwind-tokens
- version:
- 1.0.0-2026.07.17
- description:
- Tailwind design tokens — Trinity Design System for federation cockpit and web surfaces.
- owner:
- A-FORGE
- risk_tier:
- low
- floor_scope:
- ['F1', 'F4']
- autonomy_tier:
- T1
⚒️ Tailwind Tokens — Trinity Design System
DITEMPA BUKAN DIBERI — Forged, Not Given.
Purpose
Maintain Tailwind CSS configuration aligned with Trinity design tokens: federation colour palette, organ-specific accents, dark theme, CSS variable bridge for dynamic theming.
When to Use
- Setting up or modifying
tailwind.config.{ts,js}for any federation surface - Defining colour tokens, spacing scale, typography, breakpoints
- Dark theme implementation —
classstrategy, CSS variable integration - Organ-specific theming (arifOS amber, GEOX teal, WEALTH gold, WELL violet)
When NOT to Use
- Component-level styling decisions — use TW utility classes directly
- Animation/keyframe definitions — belong in CSS, not token config
- Runtime theme switching outside the Trinity design seam contract
Constitutional Floor Alignment
| Floor | Application | |-------|-------------| | F1 AMANAH | Token renames must be staged; deprecated tokens kept as aliases for one cycle | | F2 TRUTH | Token values in config must match design spec; no drift between figma → config | | F4 CLARITY | Max 3 grey neutrals, 5 colour steps per hue — no infinite token explosion | | F6 MARUAH | Colour contrast meets WCAG AA minimum; dignity in readability | | F13 SOVEREIGN | Brand colours (primary, accent) approved by Arif before deploy |
Commands & Patterns
// tailwind.config.ts — Trinity token structure
colors: {
midnight: { 50: '...', 900: '...' }, // base neutral
forge: { 500: '#f59e0b', ... }, // amber — action
geox: { 500: '#14b8a6', ... }, // teal — earth
wealth: { 500: '#fbbf24', ... }, // gold — capital
well: { 500: '#8b5cf6', ... }, // violet — human
sovereign:{ 500: '#ef4444', ... }, // red — veto
}
// CSS variable bridge for dynamic theming
:root { --color-forge: theme('colors.forge.500'); }
// Dark theme — class strategy
darkMode: 'class',
// Usage: <html class="dark"> or <ThemeToggle />
Refusal Surface
- ❌ Inline styles or
style={}for anything themable via token - ❌ Hex values outside the token config (no colour literals in components)
- ❌ Removing deprecated tokens without alias fallback
- ❌ RGB/HSL values that lack WCAG AA contrast verification
Related Skills
ariffazil/openclaw
testing
VerifiedTrustedCommunity
OpenClaw edge agent bridge — operational triage, doctor, restart, and A2A bridge routing for the federation edge (Telegram surface). USE WHEN: "openclaw unhealthy", "gateway down", "edge bot not responding", "a2a bridge disconnected", "watchdog tripped", "openclaw doctor", "openclaw restart". NOT for token/security audit — use FORGE-telegram-audit.
2SKILL.mdUpdated Aug 8, 2026
ariffazil/MiniMax Image Generation
tools
VerifiedTrustedCommunity
Generate images, videos, TTS, voice clone, and music via MiniMax MCP server. Use when user asks to "draw", "generate image", "create picture", "make a photo", "text to image", "image generation".
2SKILL.mdUpdated Aug 8, 2026
ariffazil/arifos-constitutional-judge
testing
VerifiedTrustedCommunity
Single load-bearing constitutional-judgment skill. Routes all F1–F13, verdict, hold, seal, scope, authority and floor-check calls through the live arif_judge surface. Replaces 7 overlapping predecessors (arifos-constitutional-judge, arifos-constitutional-judge, arifos-constitutional-judge, arifos-constitutional-judge, arifos-constitutional-judge, arifos-constitutional-judge, arifos-constitutional-judge).
2SKILL.mdUpdated Aug 8, 2026
ariffazil/FORGE-lsp-pre-edit-gate
development
VerifiedTrustedCommunity
MANDATORY LSP grounding gate BEFORE any code mutation on .ts, .py, .js, .tsx, .jsx files. Forces the agent to read real-time compiler diagnostics and structural project context before editing — eliminating blind guesses and anchoring every mutation in F2 (TRUTH). Routes through arifOS kernel (:8088) for centralized gate logic.
2SKILL.mdUpdated Aug 8, 2026