design-tokens
Design Token System
Single source of truth for visual design decisions with accessibility compliance.
When to Use This Skill
- Building a consistent design system
- Need WCAG AA compliant color contrast
- Want type-safe token access
- Supporting multiple frameworks (Tailwind, CSS-in-JS)
Core Concepts
Design tokens provide:
- Typography - Font families, sizes, weights, presets
- Colors - Semantic palettes with contrast ratios
- Type safety - TypeScript types for autocomplete
- Framework agnostic - Export to CSS vars, Tailwind, etc.
More from dadbodgeoff/drift
sse-streaming
Implement Server-Sent Events (SSE) for real-time updates with automatic reconnection and heartbeats. Use when building live dashboards, notifications, progress indicators, or any feature needing server-to-client push.
78oauth-social-login
Implement OAuth 2.0 social login with Google, GitHub, and other providers. Handles token exchange, user creation, and account linking.
50multi-tenancy
Implement multi-tenant architecture with tenant isolation, data separation, and per-tenant configuration. Supports shared database and schema-per-tenant models.
45deduplication
Event deduplication with canonical selection, reputation scoring, and hash-based grouping for multi-source data aggregation. Handles both ID-based and content-based deduplication.
43fuzzy-matching
Multi-stage fuzzy matching pipeline for entity reconciliation. PostgreSQL trigram pre-filter, salient overlap check, and multi-factor similarity scoring.
41webhook-security
Implement secure webhook handling with signature verification, replay protection, and idempotency. Use when receiving webhooks from third-party services like Stripe, GitHub, Twilio, or building your own webhook system.
37