From maxim
Maxim Design System Intelligence — token architecture (primitive→semantic→component), component library governance, CSS variable systems, Tailwind integration, design-to-code handoff, Storybook, Figma token export. Activate for design system creation, token audits, component specs, dark mode systems, brand-to-token sync. Powered by Maxim behavioral science + Atomic Design + TOGAF governance.
npx claudepluginhub drnabeelkhan/maxim --plugin mxm-pack-l3-4-govtechThis skill uses the workspace's default tool permissions.
> Maxim behavioral layer active. Behavioral science applied to every output.
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
Maxim behavioral layer active. Behavioral science applied to every output. External reference:
community-packs/ui-ux-pro-max/.claude/skills/design-system/
Owns the three-layer token system from primitive to component.
community-packs/ui-ux-pro-max/.claude/skills/design-system/scripts/generate-tokens.cjsThree-Layer Enforcement:
Primitive (raw values — never used directly in components)
--color-blue-600: #2563EB
↓
Semantic (purpose aliases — what the color MEANS)
--color-primary: var(--color-blue-600)
↓
Component (component-specific — isolated customization)
--button-bg: var(--color-primary)
Owns component specification, state matrix, and variant system.
ui-styling skill for Tailwind/shadcn implementationOwns design-to-code handoff quality and token compliance validation.
community-packs/ui-ux-pro-max/.claude/skills/design-system/scripts/validate-tokens.cjsOwns brand-compliant presentation generation using design tokens.
data/slide-strategies.csv, data/slide-layouts.csv, data/slide-color-logic.csvdesign-tokens.css, use var() exclusively, NO hardcoded hexCore Principle: A design system is a cognitive load reduction tool for both users and development teams. Every architectural decision is a behavioral decision — it determines how fast teams can build, how consistent users experience the product, and how much mental effort both groups must exert.
Framework Selection by Task:
| Task | Framework |
|---|---|
| Token architecture | Atomic Design + Miller's Law + Gestalt Similarity |
| Component governance | TOGAF Component Model + Semantic Versioning |
| Dark mode / theming | Semantic token layer (primitives never change, semantics swap) |
| Handoff quality | Don Norman's Design Principles (visibility, feedback, constraints) |
| Slide generation | Minto Pyramid + Duarte Sparkline + Dual Coding Theory |
| Argument | Agent | External Reference |
|---|---|---|
create | token-architect + component-architect | references/token-architecture.md + templates/design-tokens-starter.json |
tokens | token-architect | references/primitive-tokens.md + references/semantic-tokens.md + references/component-tokens.md |
audit | design-handoff-specialist | scripts/validate-tokens.cjs |
component | component-architect | references/component-specs.md + references/states-and-variants.md |
slides | slide-system-builder | data/slide-strategies.csv + data/slide-layouts.csv + data/slide-color-logic.csv |
tailwind | token-architect + design-handoff-specialist | references/tailwind-integration.md |
brand skill — tokens must derive from brand primitivesui-styling skill — tokens must map correctly to Tailwind/shadcn configengineering skill when component specs are being implemented in codedesign skill for visual consistency validation across the token system🟢 HIGH — brand guidelines exist, token architecture defined, Maxim behavioral layer fully applied
🟡 MEDIUM — partial token system or no existing brand guidelines
🔴 LOW — no design system exists yet (flag: start with create subcommand + brand skill first)
Copyright (c) 2026 iSystematic Inc. Maxim product. BSL 1.1.