baphomet480/kitchen-sink-design-system
skills/kitchen-sink-design-system/SKILL.md
Script-First design system workflow. Uses a deterministic auditor script to detect frameworks, inventory components, and detect design drift (hardcoded hex, arbitrary Tailwind). Provides a clear report for the agent to judge and implement a Kitchen Sink page.
development
Updated Apr 27, 2026
$ install --global
skillsauthnpx skillsauth add baphomet480/claude-skills kitchen-sink-design-systemInstall 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 27, 2026, 5:03 AM57.8s9 files scanned
SKILL.md
- name:
- kitchen-sink-design-system
- version:
- 2.0.0
- description:
- Script-First design system workflow. Uses a deterministic auditor script to detect frameworks, inventory components, and detect design drift (hardcoded hex, arbitrary Tailwind). Provides a clear report for the agent to judge and implement a Kitchen Sink page.
Kitchen Sink Design System
Build every component for real, wire it into a single sink page, and let the page prove the design system works.
This workflow uses a Script-First approach: an auditor script handles the "labor" of crawling the codebase and identifying drift, leaving the agent to handle the "judgment" of fixing components and assembling the sink.
Usage
When asked for a Kitchen Sink page, Design System Audit, or Component Inventory:
-
Run the auditor script:
python3 ~/.agents/skills/kitchen-sink-design-system/scripts/audit_design_system.py \ --root "." \ --out "design_audit.json" -
Read the report: Load
design_audit.jsonto see:- Detected framework (Next.js, Astro, etc.).
- Inventory of existing components.
- Design Drift Report: Hardcoded hex values and arbitrary Tailwind values (
-[...]) found in component files. - Checklist Gap: Tier 1 primitives (Button, Card, etc.) missing from the codebase.
-
Establish/Adopt:
- If a guide exists: Map discovered tokens to the guide.
- If no guide exists: Propose a
design-tokens.mdbased on de-facto tokens found in the drift report.
Phase 1: Build & Fix Components
For every MISSING item or file with DRIFT:
- Refactor to use semantic design tokens.
- Apply the base + variant pattern (CVA for React, Props for Astro).
- Wire into the sink page immediately.
Phase 2: Assemble Sink Page
Create the sink route (e.g., app/sink/page.tsx or src/pages/sink.astro) following the standard section order:
- Header & Franchise declaration
- Design Tokens visualization
- Voice & Tone
- Illustration Gallery (via omni-image)
- Component categories (Typography, Buttons, Forms, etc.)
Phase 3: Verify
pnpm build
pnpm lint
pnpm dlx @axe-core/cli http://localhost:3000/sink
Anti-patterns (The "Hot Take" List)
- Agent labor: Don't manually
grepfor hex codes; use the script. - Draft placeholders: Build real components or nothing.
- Arbitrary values:
w-[37px]is a failure of the design system. - Count drift: Deriving counts from collections, not hardcoding strings.
Related Skills
baphomet480/google-analytics
development
VerifiedTrustedCommunity
Sets up, configures, and optimizes Google Analytics 4 (GA4) properties. Evaluates websites for proper GA4 implementation, tracking codes, and configuration improvements. Uses the Google Analytics Admin API for programmatic setup or provides manual integration paths via gtag.js or Next.js Third Parties.
SKILL.mdUpdated May 17, 2026
baphomet480/osint
development
VerifiedTrustedCommunity
Open-source intelligence on people, companies, domains, and B2B accounts. Use when the user wants to investigate, vet, research, or build a dossier on a target — phrases like "OSINT", "due diligence", "background check", "research this person", "look into [company/domain]", "vet this prospect/vendor", "what does X do", "is this account worth pursuing", "find me a contact at", "who's the buyer for", or any open-source investigation task. Disambiguates identities before reporting and grades every claim by independent source count.
SKILL.mdUpdated Apr 27, 2026
baphomet480/omni-image
development
VerifiedTrustedCommunity
Generate, edit, describe, restyle, restore, thumbnail, and batch-process images using xAI (Grok) or OpenAI image APIs and GPT-4o vision. Default provider is xAI ($0.02/image flat rate). Use this skill whenever the user asks to generate, create, make, draw, or design an image or picture using AI, or wants to edit, modify, transform, restyle, composite, or inpaint an existing image. Also handles image description and alt-text generation, background removal, style transfer, photo restoration, thumbnail creation, and batch generation from JSON manifests. Trigger when the user mentions DALL-E, gpt-image, Grok image, xAI image, OpenAI image generation, or wants AI-generated visuals for any purpose (logos, mockups, illustrations, thumbnails, icons, concept art, memes). Also trigger for batch image generation, generating a set or series of images, processing multiple images from a manifest, or creating consistent image collections. If the user says "make me an image of...", "generate a picture", "edit this photo to...", "describe this image", "remove the background", "make this look like watercolor", "restore this old photo", "create a thumbnail", "generate a batch of images", or "process this image manifest", this is the skill to use.
SKILL.mdUpdated Apr 27, 2026
baphomet480/heartbeat
testing
VerifiedTrustedCommunity
Agentic OS Orchestrator. Process and execute tasks from the shared .agent/state/tasks.json queue. Use when the user asks to 'check the queue', 'process tasks', or run the heartbeat.
SKILL.mdUpdated Apr 27, 2026