Unlighted01/add-theme
.claude/skills/ui/add-theme/SKILL.md
Add proper theme support (glass/bubble/minimalist + dark mode) to a ResearchMate component, or add new CSS variables to index.css for a specific theme
development
Updated Apr 16, 2026
$ install --global
skillsauthnpx skillsauth add Unlighted01/ResearchMate-Website add-themeInstall 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, 12:36 AM318.6s1 file scanned
SKILL.md
- name:
- add-theme
- description:
- Add proper theme support (glass/bubble/minimalist + dark mode) to a ResearchMate component, or add new CSS variables to index.css for a specific theme
- disable-model-invocation:
- true
- effort:
- medium
- allowed-tools:
- Read, Edit
Add theme support to: $ARGUMENTS
Steps:
- Read the target file
- Read index.css to understand existing theme variable patterns under:
html[data-ui-theme="glass"]/html.dark[data-ui-theme="glass"]html[data-ui-theme="bubble"]/html.dark[data-ui-theme="bubble"]html[data-ui-theme="minimalist"]/html.dark[data-ui-theme="minimalist"]
- For a component:
- Replace hardcoded colors with
--ui-*CSS variables - Add
dark:variants for every Tailwind color class - Use
backdrop-filter: blur(18px) saturate(1.6)for glass surfaces
- Replace hardcoded colors with
- For index.css additions:
- Add under all 6 theme selectors (3 themes × light + dark)
- Follow existing variable naming:
--ui-surface-bg,--ui-surface-border, etc.
- Apply changes and show a summary table: theme → what changed → light value → dark value
Related Skills
Unlighted01/write-tests
development
VerifiedTrustedCommunity
Write Vitest integration tests for a ResearchMate API endpoint following all established patterns from ocr.integration.test.ts
SKILL.mdUpdated Apr 16, 2026
Unlighted01/run-tests
testing
VerifiedTrustedCommunity
Run the ResearchMate OCR integration test suite using Vitest. Optionally filter by test name.
SKILL.mdUpdated Apr 16, 2026
Unlighted01/new-endpoint
development
VerifiedTrustedCommunity
Scaffold a new ResearchMate Vercel serverless API endpoint with correct fallback chain, credit refund pattern, auth, PART sections, and TypeScript
SKILL.mdUpdated Apr 16, 2026
Unlighted01/new-component
development
VerifiedTrustedCommunity
Scaffold a new ResearchMate React component with full PART sections, Apple design system, dark mode variants, and TypeScript. Reads existing components first to match exact patterns.
SKILL.mdUpdated Apr 16, 2026