malhajri07/audit-tokens
.claude/skills/audit-tokens/SKILL.md
Find hardcoded hex/rgb/hsl colors in frontend files that should be using CSS variable tokens (bg-background, text-foreground, etc.). Use after UI changes and during design-system audits.
development
Updated Apr 16, 2026
$ install --global
skillsauthnpx skillsauth add malhajri07/real-estate-CRM-project audit-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 16, 2026, 12:55 AM4.8s1 file scanned
SKILL.md
- name:
- audit-tokens
- description:
- Find hardcoded hex/rgb/hsl colors in frontend files that should be using CSS variable tokens (bg-background, text-foreground, etc.). Use after UI changes and during design-system audits.
audit-tokens
Per ADR 003, all colors come from CSS variable tokens defined in apps/web/src/index.css (HSL emerald hue 160). Hardcoded colors break dark mode and theme consistency.
What to look for
- Hex codes:
#fff,#10b981,#22c55e, etc. rgb(...),rgba(...),hsl(...)literals- Tailwind palette classes:
bg-emerald-500,text-red-600,border-gray-300, etc. - Inline
style={{ color: '...' }}
What's allowed
- CSS variable references:
bg-background,text-foreground,text-muted-foreground,bg-card,bg-primary,text-primary-foreground,border-border,bg-destructive,text-destructive,bg-warning, etc. - Arbitrary values referencing variables:
bg-[hsl(var(--warning)/0.3)] - Anything in
apps/web/src/index.css(the source of truth)
Steps
- Grep for hex patterns:
#[0-9a-fA-F]{3,8}inapps/web/src/**/*.{tsx,ts,css} - Grep for
rgb(,rgba(,hsl(literals (excludingvar(--...)references) - Grep for Tailwind palette classes:
(bg|text|border|ring|fill|stroke)-(red|green|blue|yellow|emerald|amber|gray|slate|...)-\d+ - Filter allowed exceptions:
index.cssitself- Storybook / dev-only files
- Files in
tests/(test fixtures may use hardcoded values)
- Group by file with proposed token replacements:
bg-emerald-500→bg-primarytext-red-600→text-destructivebg-gray-50→bg-mutedborder-gray-200→border-border
- Report the violations and ask before fixing.
Verification
- [ ] All frontend files scanned
- [ ]
index.cssexcluded - [ ] Replacements suggested per match
- [ ] User asked before bulk-replacing
Notes
- The project's destructive token uses
hsl(0 72% 51%)(softened from default 84% saturation) - See [[Architecture/Frontend Structure]] in the vault for the full token list
Related Skills
malhajri07/obsidian-markdown
testing
VerifiedTrustedCommunity
Create and edit Obsidian Flavored Markdown with wikilinks, embeds, callouts, properties, and other Obsidian-specific syntax. Use when working with .md files in Obsidian, or when the user mentions wikilinks, callouts, frontmatter, tags, embeds, or Obsidian notes.
SKILL.mdUpdated Apr 16, 2026
malhajri07/obsidian-cli
tools
VerifiedTrustedCommunity
Interact with Obsidian vaults using the Obsidian CLI to read, create, search, and manage notes, tasks, properties, and more. Also supports plugin and theme development with commands to reload plugins, run JavaScript, capture errors, take screenshots, and inspect the DOM. Use when the user asks to interact with their Obsidian vault, manage notes, search vault content, perform vault operations from the command line, or develop and debug Obsidian plugins and themes.
SKILL.mdUpdated Apr 16, 2026
malhajri07/obsidian-bases
data-ai
VerifiedTrustedCommunity
Create and edit Obsidian Bases (.base files) with views, filters, formulas, and summaries. Use when working with .base files, creating database-like views of notes, or when the user mentions Bases, table views, card views, filters, or formulas in Obsidian.
SKILL.mdUpdated Apr 16, 2026
malhajri07/json-canvas
tools
VerifiedTrustedCommunity
Create and edit JSON Canvas files (.canvas) with nodes, edges, groups, and connections. Use when working with .canvas files, creating visual canvases, mind maps, flowcharts, or when the user mentions Canvas files in Obsidian.
SKILL.mdUpdated Apr 16, 2026