// Maia theme design system for Compass. Read this skill BEFORE creating or modifying any UI component, page layout, or styling. Covers tokens, typography, color, spacing, component standards, states, motion, and accessibility. Applies whenever working on .tsx files, CSS, or anything visual.
Comprehensive Azure Data Factory knowledge base with official documentation sources, CI/CD methods, deployment patterns, and troubleshooting resources
Comprehensive Azure Data Factory validation rules, activity nesting limitations, linked service requirements, and edge-case handling guidance
Advanced bash array patterns including mapfile, readarray, associative arrays, and array manipulation (2025)
Advanced 2025 Claude Code plugin features. PROACTIVELY activate for: (1) Agent Skills with progressive disclosure (2) Hook automation (PreToolUse, PostToolUse, etc.) (3) MCP server integration (4) Repository-level configuration (5) Team plugin distribution (6) Context efficiency optimization Provides cutting-edge plugin capabilities and patterns.
Advanced T-SQL patterns and techniques for SQL Server. Use this skill when: (1) User needs help with CTEs or recursive queries, (2) User asks about APPLY operator, (3) User wants MERGE or OUTPUT clause help, (4) User works with temporal tables, (5) User needs In-Memory OLTP guidance, (6) User asks about advanced grouping (ROLLUP, CUBE, GROUPING SETS).
Salesforce Agentforce AI agents and autonomous automation (2025)
| name | maia-design-system |
| description | Maia theme design system for Compass. Read this skill BEFORE creating or modifying any UI component, page layout, or styling. Covers tokens, typography, color, spacing, component standards, states, motion, and accessibility. Applies whenever working on .tsx files, CSS, or anything visual. |
Read docs/DESIGN_SYSTEM.md for the full specification. This skill is an actionable summary.
bg-background, text-foreground, border-border, ring-ring. Never write zinc-* in components.font-sans = Inter. font-mono = Geist Mono.globals.css. Components never add dark: overrides.gap-6–gap-8 sections, p-4–p-6 cards, space-y-4 forms, gap-2–gap-3 inline.<div className="flex items-start justify-between gap-6">
<div className="space-y-1">
<h1 className="text-3xl font-semibold tracking-tight">Title</h1>
<p className="text-sm text-muted-foreground">Subtitle</p>
</div>
<div className="flex items-center gap-2">{/* actions */}</div>
</div>
Follow: Header row → Controls row → Content area. Every page, same rhythm.
bunx shadcn@latest add <component>cn() from @/lib/utils for conditional classes.docs/DESIGN_SYSTEM.md.| Element | Classes |
|---|---|
| Page title | text-3xl font-semibold tracking-tight |
| Section title | text-base font-semibold |
| Card title | text-sm font-semibold |
| Body | text-sm |
| Label | text-xs font-medium |
| Muted | text-xs text-muted-foreground |
| Mono value | font-mono text-xs tabular-nums |
| Metric | text-2xl font-semibold tabular-nums |
Only: default, secondary, outline, ghost, destructive. One primary action per page.
Always inside a <Card>. Muted header row. Subtle hover. tabular-nums on number columns.
Use CSS variables: --motion-fast (120ms), --motion-base (180ms), --motion-slow (240ms).
Easing: --ease-standard: cubic-bezier(0.2, 0, 0, 1).
No bounce. No overshoot. No delays.
<label> on every input.