From johnlindquist-claude
Design system and token management. Use for managing design tokens, colors, typography, and maintaining design consistency.
npx claudepluginhub joshuarweaver/cascade-ai-ml-engineering --plugin johnlindquist-claudeThis skill uses the workspace's default tool permissions.
Manage design tokens and maintain design consistency.
Creates isolated Git worktrees for feature branches with prioritized directory selection, gitignore safety checks, auto project setup for Node/Python/Rust/Go, and baseline verification.
Executes implementation plans in current session by dispatching fresh subagents per independent task, with two-stage reviews: spec compliance then code quality.
Dispatches parallel agents to independently tackle 2+ tasks like separate test failures or subsystems without shared state or dependencies.
Manage design tokens and maintain design consistency.
:root {
/* Colors */
--color-primary: #3b82f6;
--color-primary-dark: #2563eb;
--color-secondary: #64748b;
--color-success: #22c55e;
--color-warning: #f59e0b;
--color-error: #ef4444;
/* Typography */
--font-sans: 'Inter', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', monospace;
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
/* Spacing */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-6: 1.5rem;
--space-8: 2rem;
/* Border Radius */
--radius-sm: 0.25rem;
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--radius-full: 9999px;
/* Shadows */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
}
{
"color": {
"primary": { "value": "#3b82f6" },
"primary-dark": { "value": "#2563eb" },
"secondary": { "value": "#64748b" }
},
"font": {
"family": {
"sans": { "value": "'Inter', system-ui, sans-serif" },
"mono": { "value": "'JetBrains Mono', monospace" }
},
"size": {
"xs": { "value": "0.75rem" },
"sm": { "value": "0.875rem" },
"base": { "value": "1rem" },
"lg": { "value": "1.125rem" }
}
},
"spacing": {
"1": { "value": "0.25rem" },
"2": { "value": "0.5rem" },
"4": { "value": "1rem" }
}
}
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
primary: {
DEFAULT: '#3b82f6',
dark: '#2563eb',
},
secondary: '#64748b',
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
mono: ['JetBrains Mono', 'monospace'],
},
},
},
};
gemini -m pro -o text -e "" "Generate a color palette for:
Base color: #3b82f6 (blue)
Purpose: SaaS dashboard
Provide:
1. 10-step shade scale (50-900)
2. Semantic colors (success, warning, error)
3. Neutral grays
4. CSS custom properties format
5. Ensure WCAG AA contrast ratios"
gemini -m pro -o text -e "" "Check contrast ratios:
Foreground: #ffffff
Backgrounds:
- #3b82f6
- #2563eb
- #1d4ed8
For each:
1. Calculate contrast ratio
2. WCAG AA compliance (4.5:1 normal, 3:1 large)
3. WCAG AAA compliance (7:1 normal, 4.5:1 large)
4. Suggest adjustments if needed"
gemini -m pro -o text -e "" "Convert this color to all formats:
Input: #3b82f6
Output:
- HEX
- RGB
- RGBA
- HSL
- HSLA
- CSS custom property"
gemini -m pro -o text -e "" "Generate a type scale:
Base: 16px
Ratio: 1.25 (major third)
Steps: 8 (xs to 4xl)
Provide:
1. Sizes in rem
2. Corresponding line-heights
3. Letter-spacing recommendations
4. CSS custom properties"
gemini -m pro -o text -e "" "Suggest font pairings for:
Style: Modern, professional SaaS
Needs: Headings, body text, code
For each pairing:
1. Heading font
2. Body font
3. Code font
4. Google Fonts links
5. Fallback stack"
gemini -m pro -o text -e "" "Generate a spacing scale:
Base: 4px
Approach: 4-point grid
Provide:
1. Scale from 0 to 96
2. Named tokens (xs, sm, md, lg, etc.)
3. Use cases for each size
4. CSS custom properties"
:root {
/* Button Base */
--btn-padding-x: var(--space-4);
--btn-padding-y: var(--space-2);
--btn-font-size: var(--text-sm);
--btn-font-weight: 500;
--btn-border-radius: var(--radius-md);
/* Button Primary */
--btn-primary-bg: var(--color-primary);
--btn-primary-text: white;
--btn-primary-hover-bg: var(--color-primary-dark);
/* Button Secondary */
--btn-secondary-bg: transparent;
--btn-secondary-text: var(--color-primary);
--btn-secondary-border: var(--color-primary);
}
:root {
--input-padding-x: var(--space-3);
--input-padding-y: var(--space-2);
--input-font-size: var(--text-base);
--input-border-width: 1px;
--input-border-color: var(--color-gray-300);
--input-border-radius: var(--radius-md);
--input-focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.3);
}
cat tokens.json | jq -r '
to_entries | .[] |
"--\(.key): \(.value.value);"
' > tokens.css
cat tokens.json | jq '
to_entries | map({(.key): .value.value}) | add
' > tokens.js
cat tokens.json | jq -r '
to_entries | .[] |
"$\(.key): \(.value.value);"
' > _tokens.scss
gemini -m pro -o text -e "" "Audit this color system:
$(cat src/styles/tokens.css)
Check:
1. Sufficient contrast ratios
2. Consistent naming
3. Complete semantic colors
4. Dark mode compatibility
5. Accessibility issues"
gemini -m pro -o text -e "" "Audit this typography system:
$(cat src/styles/typography.css)
Check:
1. Readable line heights
2. Appropriate scale ratio
3. Responsive considerations
4. Font loading strategy
5. Accessibility"
--color-error not --color-red