Dragoon0x
506 verified skills
forge-design
Design system generator and enforcer. Generates a complete, project-aware design foundation from a single brand color and project type. Produces color palettes, semantic tokens, mathematical type scales, spacing scales, shadow systems, and border radii. Every command operates on YOUR generated system, not generic rules. Use when building any frontend UI to ensure consistent, intentional design decisions from the first line of code.
development
forge-density
Audit visual density and whitespace balance. Checks that spacing from your system creates appropriate rhythm between sections.
testing
forge-a11y
Full accessibility audit using your design system's color tokens. Checks contrast, focus styles, semantic HTML, touch targets, and motion safety.
development
forge-contrast
Check WCAG contrast ratios across your entire token system. Tests every text token against every surface token.
testing
forge-elevation
Audit elevation consistency. Checks that shadow usage follows a logical hierarchy — cards < dropdowns < modals.
testing
forge-export-figma
Export your design system in Figma Tokens format. Ready to import into Figma via the Tokens Studio plugin.
tools
forge-export-tw
Export your design system as a Tailwind CSS configuration. Generates theme.extend with colors, fonts, spacing, shadows, and radii.
development
forge-fix
Auto-fix design system violations. Replaces raw hex values with token references, snaps spacing to the scale, and normalizes font usage.
testing
forge-harmonize
Add a complementary or analogous accent color to your system. Computes the harmonically ideal secondary color from your brand.
development
forge-harden
Add error states, loading states, i18n safety, and edge case handling using your design system's tokens.
content-media
compare
Side-by-side comparison of two versions. Shows score changes per category, what improved, what regressed.
development
motion-audit
Check all motion declarations for purpose, performance, and accessibility. Flags decorative jitter, layout-animating properties, and missing reduced-motion fallbacks.
testing
layout-audit
Map all layout patterns. Identify grid/flexbox usage, spacing patterns, nesting depth, and responsive breakpoints across the codebase.
development
score
Run a full 0-100 OPTIK design quality analysis on the current interface or component. Produces category scores for Typography, Color, Layout, Motion, and Accessibility with specific issue callouts and fix suggestions.
development
score
Run a full 0-100 OPTIK design quality analysis on the current interface or component. Produces category scores for Typography, Color, Layout, Motion, and Accessibility with specific issue callouts and fix suggestions.
development
reduce-motion
Add prefers-reduced-motion support. Wraps existing animations in a media query and provides static fallbacks.
content-media
forge-harmonize
Add a complementary or analogous accent color to your system. Computes the harmonically ideal secondary color from your brand.
development
forge-init
Generate a complete design system from a brand color and project type. Creates .forge.json with palette, tokens, type scale, spacing, shadows, and radii. This is the starting command — everything else references what it generates.
testing
type-rhythm
Align text spacing to a vertical rhythm baseline. Ensures headings, paragraphs, and other elements maintain consistent vertical flow.
testing
forge-pair
Get contextual font pairing recommendations based on your project type. Never suggests banned fonts.
data-ai
forge-dark
Generate a dark mode variant of your design system. Creates dark-mode token overrides that preserve contrast ratios from the light theme.
content-media
a11y-audit
Full accessibility audit covering focus management, semantic HTML, ARIA attributes, color contrast, touch targets, screen reader experience, and motion safety.
development
a11y-audit
Full accessibility audit covering focus management, semantic HTML, ARIA attributes, color contrast, touch targets, screen reader experience, and motion safety.
development
a11y-fix
Auto-fix detectable accessibility issues. Adds focus styles, semantic HTML, ARIA attributes, and touch target sizing.
development
aria
Audit and fix ARIA attributes. Ensures proper aria-label, aria-hidden, aria-live, and role usage throughout the interface.
testing
.agents/skills/animate
--- name: animate description: Add purposeful motion and transitions to the interface. Focuses on high-impact moments: page load reveals, hover states, and scroll-triggered entries. Not decorative jitter. user-invokable: true --- # /animate — Purposeful Motion Add motion that serves a purpose: **Page load:** Staggered fade-up reveals for above-fold content. Use animation-delay in 80-120ms increments. Total reveal sequence should complete within 600ms. **Hover states:** Scale (1.02-1.05), sub
data-ai
aria
Audit and fix ARIA attributes. Ensures proper aria-label, aria-hidden, aria-live, and role usage throughout the interface.
testing
audit
Comprehensive design quality audit with severity ratings, specific line references, and actionable fix instructions. Deeper than /score — examines every declaration.
testing
audit
Comprehensive design quality audit with severity ratings, specific line references, and actionable fix instructions. Deeper than /score — examines every declaration.
testing
certify
Verify the design meets a specific OPTIK score threshold. Returns pass/fail with score breakdown. Use in CI/CD pipelines.
testing
color-audit
Map all colors in the codebase. Find duplicates, near-duplicates, one-off values, and colors not in the token system.
development
color-a11y
Ensure the full color palette passes WCAG contrast at every text size. Tests every foreground/background combination.
testing
compare
Side-by-side comparison of two versions. Shows score changes per category, what improved, what regressed.
development
component-check
Verify component consistency. Same component type should use same spacing, typography, and color patterns everywhere.
testing
contrast
Check WCAG contrast ratios between any two colors. Reports AA/AAA compliance for normal text, large text, and UI components.
testing
contrast
Check WCAG contrast ratios between any two colors. Reports AA/AAA compliance for normal text, large text, and UI components.
testing
critique
UX-focused design review examining visual hierarchy, information architecture, emotional resonance, and user flow. Goes beyond code quality into design effectiveness.
development
dark-mode
Generate dark mode color variant that preserves contrast ratios and visual hierarchy from the light theme. Not just color inversion — proper dark surface design.
content-media
distill
Strip a design to its essential form. Remove every element, decoration, and effect that doesn't earn its place. Reduce without losing meaning.
content-media
forge-design
Design system generator and enforcer. Generates a complete, project-aware design foundation from a single brand color and project type. Produces color palettes, semantic tokens, mathematical type scales, spacing scales, shadow systems, and border radii. Every command operates on YOUR generated system, not generic rules. Use when building any frontend UI to ensure consistent, intentional design decisions from the first line of code.
development
delight
Add memorable moments of joy. Micro-interactions, easter eggs, personality in copy, unexpected animations. Use sparingly for maximum impact.
tools
export-tailwind
Export the current design system as a Tailwind CSS configuration. Generates theme.extend with colors, fonts, spacing, shadows, and custom screens.
development
export-tailwind
Export the current design system as a Tailwind CSS configuration. Generates theme.extend with colors, fonts, spacing, shadows, and custom screens.
development
extract
Pull reusable patterns from the codebase into a design system. Identifies shared tokens, repeated components, and common patterns.
development
focus
Generate a complete focus ring system. Creates consistent, visible :focus-visible styles that match the design aesthetic while meeting accessibility requirements.
content-media
extract
Pull reusable patterns from the codebase into a design system. Identifies shared tokens, repeated components, and common patterns.
development
forge-a11y
Full accessibility audit using your design system's color tokens. Checks contrast, focus styles, semantic HTML, touch targets, and motion safety.
development
forge-audit
Check the current codebase against your .forge.json design system. Finds raw hex values that should be tokens, spacing off your scale, fonts not in your system, and missing token references.
development
forge-bolder
Amplify the design within your system's range. Use stronger palette shades, higher type scale steps, and more dramatic shadows.
content-media
forge-bolder
Amplify the design within your system's range. Use stronger palette shades, higher type scale steps, and more dramatic shadows.
content-media
forge-bolder
Amplify the design within your system's range. Use stronger palette shades, higher type scale steps, and more dramatic shadows.
content-media
forge-color-audit
Find every color in the codebase that isn't in your palette or token system. Lists orphan colors with suggested replacements.
development
forge-color-audit
Find every color in the codebase that isn't in your palette or token system. Lists orphan colors with suggested replacements.
development
forge-color-audit
Find every color in the codebase that isn't in your palette or token system. Lists orphan colors with suggested replacements.
development
forge-color-fix
Replace all orphan colors with the nearest token from your system. Converts raw hex values to var(--token) references.
tools
forge-contrast
Check WCAG contrast ratios across your entire token system. Tests every text token against every surface token.
testing
forge-contrast
Check WCAG contrast ratios across your entire token system. Tests every text token against every surface token.
testing
forge-dark
Generate a dark mode variant of your design system. Creates dark-mode token overrides that preserve contrast ratios from the light theme.
content-media
forge-dark
Generate a dark mode variant of your design system. Creates dark-mode token overrides that preserve contrast ratios from the light theme.
content-media
forge-density
Audit visual density and whitespace balance. Checks that spacing from your system creates appropriate rhythm between sections.
testing
forge-density
Audit visual density and whitespace balance. Checks that spacing from your system creates appropriate rhythm between sections.
testing
forge-density
Audit visual density and whitespace balance. Checks that spacing from your system creates appropriate rhythm between sections.
testing
forge-design
Design system generator and enforcer. Generates a complete, project-aware design foundation from a single brand color and project type. Produces color palettes, semantic tokens, mathematical type scales, spacing scales, shadow systems, and border radii. Every command operates on YOUR generated system, not generic rules. Use when building any frontend UI to ensure consistent, intentional design decisions from the first line of code.
development
forge-diff
Show the difference between your .forge.json design system and what's actually in the code. Lists every value that drifts from the system.
development
forge-elevation
Audit elevation consistency. Checks that shadow usage follows a logical hierarchy — cards < dropdowns < modals.
testing
forge-elevation
Audit elevation consistency. Checks that shadow usage follows a logical hierarchy — cards < dropdowns < modals.
testing
forge-export-css
Export your complete design system as CSS custom properties. Includes palette, tokens, type scale, spacing, shadows, and radii in a single :root block.
development
forge-diff
Show the difference between your .forge.json design system and what's actually in the code. Lists every value that drifts from the system.
development
forge-elevation
Audit elevation consistency. Checks that shadow usage follows a logical hierarchy — cards < dropdowns < modals.
testing
forge-grid
Snap all spacing values in the codebase to your system's grid. Replaces arbitrary padding, margin, and gap values.
development
forge-grid
Snap all spacing values in the codebase to your system's grid. Replaces arbitrary padding, margin, and gap values.
development
forge-export-scss
Export your design system as SCSS variables and mixins. Includes palette map, type scale mixin, spacing function, and breakpoint mixin.
development
forge-export-tw
Export your design system as a Tailwind CSS configuration. Generates theme.extend with colors, fonts, spacing, shadows, and radii.
development
forge-export-css
Export your complete design system as CSS custom properties. Includes palette, tokens, type scale, spacing, shadows, and radii in a single :root block.
development
forge-export-json
Export your design system as W3C Design Tokens JSON format. Compatible with Style Dictionary, Figma Tokens, and token management tools.
tools
forge-export-json
Export your design system as W3C Design Tokens JSON format. Compatible with Style Dictionary, Figma Tokens, and token management tools.
tools
forge-export-tw
Export your design system as a Tailwind CSS configuration. Generates theme.extend with colors, fonts, spacing, shadows, and radii.
development
forge-fix
Auto-fix design system violations. Replaces raw hex values with token references, snaps spacing to the scale, and normalizes font usage.
testing
forge-focus
Generate a focus ring system using your system's accent color. Creates consistent :focus-visible styles for all interactive elements.
tools
forge-focus
Generate a focus ring system using your system's accent color. Creates consistent :focus-visible styles for all interactive elements.
tools
forge-focus
Generate a focus ring system using your system's accent color. Creates consistent :focus-visible styles for all interactive elements.
tools
forge-grid
Snap all spacing values in the codebase to your system's grid. Replaces arbitrary padding, margin, and gap values.
development
forge-harden
Add error states, loading states, i18n safety, and edge case handling using your design system's tokens.
content-media
forge-harden
Add error states, loading states, i18n safety, and edge case handling using your design system's tokens.
content-media
forge-harden
Add error states, loading states, i18n safety, and edge case handling using your design system's tokens.
content-media
forge-harmonize
Add a complementary or analogous accent color to your system. Computes the harmonically ideal secondary color from your brand.
development
forge-init
Generate a complete design system from a brand color and project type. Creates .forge.json with palette, tokens, type scale, spacing, shadows, and radii. This is the starting command — everything else references what it generates.
testing
forge-init
Generate a complete design system from a brand color and project type. Creates .forge.json with palette, tokens, type scale, spacing, shadows, and radii. This is the starting command — everything else references what it generates.
testing
.claude/skills/forge-measure
--- name: forge-measure description: Check line lengths across the interface. Optimal: 45-75 characters per line. Flags containers that are too wide or too narrow for their font size. user-invokable: true --- # /forge-measure — Line Measure Check Calculate line measure for text containers: container-width / (font-size × 0.5) ≈ characters per line Flag: - Over 75 chars: add max-width constraint - Under 45 chars: container may be too narrow Suggest max-width values to achieve optimal measure.
testing
.cursor/skills/forge-measure
--- name: forge-measure description: Check line lengths across the interface. Optimal: 45-75 characters per line. Flags containers that are too wide or too narrow for their font size. user-invokable: true --- # /forge-measure — Line Measure Check Calculate line measure for text containers: container-width / (font-size × 0.5) ≈ characters per line Flag: - Over 75 chars: add max-width constraint - Under 45 chars: container may be too narrow Suggest max-width values to achieve optimal measure.
testing
forge-normalize
Align every value in the codebase to the nearest system token. The nuclear option for system compliance.
development
forge-normalize
Align every value in the codebase to the nearest system token. The nuclear option for system compliance.
development
forge-normalize
Align every value in the codebase to the nearest system token. The nuclear option for system compliance.
development
forge-normalize
Align every value in the codebase to the nearest system token. The nuclear option for system compliance.
development
forge-pair
Get contextual font pairing recommendations based on your project type. Never suggests banned fonts.
data-ai
forge-palette
Regenerate the 50-950 shade palette from the current brand color in .forge.json. Updates the palette section without changing other parts of the system.
tools
forge-palette
Regenerate the 50-950 shade palette from the current brand color in .forge.json. Updates the palette section without changing other parts of the system.
tools
forge-polish
Final quality pass checking every value against your design system. The last command before shipping.
testing
forge-quieter
Tone down the design within your system's range. Use subtler shades, smaller type differences, and softer shadows.
content-media
forge-radius
Regenerate the border radius scale based on project type. SaaS gets moderate, portfolio gets soft, e-commerce gets tight.
tools
forge-radius
Regenerate the border radius scale based on project type. SaaS gets moderate, portfolio gets soft, e-commerce gets tight.
tools
forge-radius
Regenerate the border radius scale based on project type. SaaS gets moderate, portfolio gets soft, e-commerce gets tight.
tools
forge-responsive
Check responsive behavior using your system's spacing scale. Verifies that spacing reduces proportionally at smaller breakpoints.
testing
forge-rhythm
Enforce vertical rhythm using your system's baseline grid. Ensures heading margins, paragraph spacing, and section padding are multiples of the baseline.
testing
forge-rhythm
Enforce vertical rhythm using your system's baseline grid. Ensures heading margins, paragraph spacing, and section padding are multiples of the baseline.
testing
forge-rhythm
Enforce vertical rhythm using your system's baseline grid. Ensures heading margins, paragraph spacing, and section padding are multiples of the baseline.
testing
forge-score
Score how well the codebase adheres to your design system. 0-100, where 100 means every value references a token and every pattern follows the system.
development
forge-score
Score how well the codebase adheres to your design system. 0-100, where 100 means every value references a token and every pattern follows the system.
development
forge-semantic
Rebuild the semantic token mapping from your palette. Maps surface, text, border, accent, and feedback tokens to specific palette shades based on project type.
development
forge-shadow
Regenerate the shadow elevation system tinted with your brand hue. Produces 5 levels from sm to 2xl.
tools
forge-shadow
Regenerate the shadow elevation system tinted with your brand hue. Produces 5 levels from sm to 2xl.
tools
forge-spacing
Regenerate the spacing scale from your system's base unit. Outputs 13 steps from 4px to 128px.
testing
forge-spacing-audit
Find every spacing value in the codebase that doesn't match your scale. Lists violations by file and line.
development
forge-spacing
Regenerate the spacing scale from your system's base unit. Outputs 13 steps from 4px to 128px.
testing
forge-surface-audit
Check background color hierarchy. Verifies that surfaces, cards, and modals use the correct token from your system.
testing
forge-surface-audit
Check background color hierarchy. Verifies that surfaces, cards, and modals use the correct token from your system.
testing
forge-surface-audit
Check background color hierarchy. Verifies that surfaces, cards, and modals use the correct token from your system.
testing
forge-touch
Verify all interactive elements meet 44×44px minimum touch target size. Suggests padding increases using your spacing scale.
testing
forge-touch
Verify all interactive elements meet 44×44px minimum touch target size. Suggests padding increases using your spacing scale.
testing
forge-touch
Verify all interactive elements meet 44×44px minimum touch target size. Suggests padding increases using your spacing scale.
testing
forge-type-audit
Find every font-size in the codebase that doesn't match your type scale. Lists violations with suggested scale values.
development
forge-type-audit
Find every font-size in the codebase that doesn't match your type scale. Lists violations with suggested scale values.
development
forge-type
Regenerate the type scale from your .forge.json ratio and base size. Outputs 8 steps with px values and CSS custom properties.
development
forge-type-fix
Snap all font sizes to the nearest step in your type scale. Replaces arbitrary values with var(--type-step) references.
tools
forge-type-fix
Snap all font sizes to the nearest step in your type scale. Replaces arbitrary values with var(--type-step) references.
tools
forge-type-fix
Snap all font sizes to the nearest step in your type scale. Replaces arbitrary values with var(--type-step) references.
tools
forge-type
Regenerate the type scale from your .forge.json ratio and base size. Outputs 8 steps with px values and CSS custom properties.
development
forge-update
Regenerate the entire design system from a new brand color while preserving the project type. Updates .forge.json and shows what changed.
content-media
forge-update
Regenerate the entire design system from a new brand color while preserving the project type. Updates .forge.json and shows what changed.
content-media
harden
Improve interface resilience. Add error handling, i18n support, text overflow handling, and edge case management.
tools
harmonize
Fix palette coherence issues. Ensures all colors in the palette work together harmonically (complementary, analogous, triadic, or split-complementary).
development
harmonize
Fix palette coherence issues. Ensures all colors in the palette work together harmonically (complementary, analogous, triadic, or split-complementary).
development
layout-fix
Auto-fix layout issues. Snaps off-grid spacing, adds missing max-width constraints, and normalizes gap usage.
testing
layout-fix
Auto-fix layout issues. Snaps off-grid spacing, adds missing max-width constraints, and normalizes gap usage.
testing
motion-audit
Check all motion declarations for purpose, performance, and accessibility. Flags decorative jitter, layout-animating properties, and missing reduced-motion fallbacks.
testing
optik-design
Design intelligence engine for frontend interfaces. Measures and enforces design quality through scoring algorithms, mathematical scales, and anti-pattern detection. Goes beyond subjective prompting with computable metrics across typography, color, layout, motion, and accessibility. Use when building any frontend UI to ensure output avoids generic AI aesthetics and hits measurable quality thresholds.
development
polish
Final quality pass before shipping. Checks alignment, spacing consistency, hover states, focus styles, loading states, edge cases, and overall refinement.
testing
quieter
Tone down overly aggressive designs. Reduce contrast, soften colors, decrease animation intensity, and restore breathing room without losing character.
content-media
reduce-motion
Add prefers-reduced-motion support. Wraps existing animations in a media query and provides static fallbacks.
content-media
report
Generate a shareable OPTIK score card. Produces an SVG/image showing score, category breakdowns, and grade.
development
responsive
Check responsive behavior at key breakpoints. Verifies layout doesn't break, text remains readable, touch targets meet minimum sizes, and spacing scales appropriately.
testing
rhythm
Enforce vertical spacing rhythm. Ensures consistent vertical flow using a baseline grid approach.
testing
spacing
Generate a complete spacing scale from a base unit. Outputs CSS custom properties and shows recommended usage for each step.
development
touch-target
Verify all interactive elements meet 44x44px minimum touch target size. Suggests fixes for undersized targets.
testing
transition
Audit and improve CSS transition declarations. Replace generic easing with intentional curves. Ensure consistent durations.
development
type-pair
Recommend font pairings based on the project context. Pairs a distinctive display font with a complementary body font. Never suggests banned fonts.
data-ai
type-rhythm
Align text spacing to a vertical rhythm baseline. Ensures headings, paragraphs, and other elements maintain consistent vertical flow.
testing
forge-color-fix
Replace all orphan colors with the nearest token from your system. Converts raw hex values to var(--token) references.
tools
forge-export-css
Export your complete design system as CSS custom properties. Includes palette, tokens, type scale, spacing, shadows, and radii in a single :root block.
development
.agents/skills/forge-measure
--- name: forge-measure description: Check line lengths across the interface. Optimal: 45-75 characters per line. Flags containers that are too wide or too narrow for their font size. user-invokable: true --- # /forge-measure — Line Measure Check Calculate line measure for text containers: container-width / (font-size × 0.5) ≈ characters per line Flag: - Over 75 chars: add max-width constraint - Under 45 chars: container may be too narrow Suggest max-width values to achieve optimal measure.
testing
forge-spacing
Regenerate the spacing scale from your system's base unit. Outputs 13 steps from 4px to 128px.
testing
forge-type
Regenerate the type scale from your .forge.json ratio and base size. Outputs 8 steps with px values and CSS custom properties.
development
forge-surface-audit
Check background color hierarchy. Verifies that surfaces, cards, and modals use the correct token from your system.
testing
forge-type
Regenerate the type scale from your .forge.json ratio and base size. Outputs 8 steps with px values and CSS custom properties.
development
align
Verify visual alignment across sections. Check that headings, text, images, and components share consistent alignment points.
testing
audit
Comprehensive design quality audit with severity ratings, specific line references, and actionable fix instructions. Deeper than /score — examines every declaration.
testing
color-a11y
Ensure the full color palette passes WCAG contrast at every text size. Tests every foreground/background combination.
testing
color-fix
Auto-fix color issues. Replace failing contrast pairs, consolidate near-duplicates, and add missing CSS custom properties.
development
contrast
Check WCAG contrast ratios between any two colors. Reports AA/AAA compliance for normal text, large text, and UI components.
testing
density
Audit visual density and whitespace balance. Checks that sections alternate between sparse and dense, avoiding uniform monotony.
testing
export-css
Export the current design system as CSS custom properties. Includes color, typography, spacing, shadows, and radii tokens.
development
export-json
Export the current design system as W3C Design Tokens JSON format. Compatible with Style Dictionary, Figma Tokens, and other token management tools.
tools
focus
Generate a complete focus ring system. Creates consistent, visible :focus-visible styles that match the design aesthetic while meeting accessibility requirements.
content-media
grid
Apply 8px grid system with automatic snap correction. Finds all spacing values not aligned to the grid and snaps them to the nearest valid value.
testing
normalize
Align an interface to its design system standards. Replace one-off values with tokens. Ensure every element uses the system.
content-media
overdrive
Push past conventional limits with technically ambitious effects. WebGL shaders, spring physics, GPU-accelerated particle systems, scroll-driven 3D transforms. Use sparingly for maximum impact.
development
responsive
Check responsive behavior at key breakpoints. Verifies layout doesn't break, text remains readable, touch targets meet minimum sizes, and spacing scales appropriately.
testing
screen-reader
Test the screen reader experience. Simulate how a screen reader would traverse the page and identify issues with reading order, landmarks, and announcements.
testing
scroll-fx
Add scroll-triggered reveals and parallax effects. Uses IntersectionObserver for reveals and CSS scroll-driven animations for parallax.
development
layout-audit
Map all layout patterns. Identify grid/flexbox usage, spacing patterns, nesting depth, and responsive breakpoints across the codebase.
development
semantic-color
Generate a complete semantic color token set from a brand palette. Produces surface, text, border, accent, feedback, and interactive state tokens.
databases
tokens
Generate a complete design token set. Covers color, typography, spacing, shadows, radii, and breakpoints. Exports as CSS custom properties, Tailwind config, SCSS variables, and W3C Design Tokens JSON.
development
trend
Track OPTIK score across iterations. Shows improvement over time with category-level delta tracking.
development
type-hierarchy
Enforce proper heading and body text hierarchy. Verify h1 > h2 > h3 progression, size ratios, and weight differentiation.
testing
type-set
Apply a complete typography system in one command. Sets type scale, font pairings, line heights, letter spacing, and hierarchy simultaneously.
testing
a11y-fix
Auto-fix detectable accessibility issues. Adds focus styles, semantic HTML, ARIA attributes, and touch target sizing.
development
certify
Verify the design meets a specific OPTIK score threshold. Returns pass/fail with score breakdown. Use in CI/CD pipelines.
testing
color-audit
Map all colors in the codebase. Find duplicates, near-duplicates, one-off values, and colors not in the token system.
development
color-fix
Auto-fix color issues. Replace failing contrast pairs, consolidate near-duplicates, and add missing CSS custom properties.
development
critique
UX-focused design review examining visual hierarchy, information architecture, emotional resonance, and user flow. Goes beyond code quality into design effectiveness.
development
component-check
Verify component consistency. Same component type should use same spacing, typography, and color patterns everywhere.
testing
dark-mode
Generate dark mode color variant that preserves contrast ratios and visual hierarchy from the light theme. Not just color inversion — proper dark surface design.
content-media
density
Audit visual density and whitespace balance. Checks that sections alternate between sparse and dense, avoiding uniform monotony.
testing
distill
Strip a design to its essential form. Remove every element, decoration, and effect that doesn't earn its place. Reduce without losing meaning.
content-media
harmonize
Fix palette coherence issues. Ensures all colors in the palette work together harmonically (complementary, analogous, triadic, or split-complementary).
development
focus
Generate a complete focus ring system. Creates consistent, visible :focus-visible styles that match the design aesthetic while meeting accessibility requirements.
content-media
normalize
Align an interface to its design system standards. Replace one-off values with tokens. Ensure every element uses the system.
content-media
overdrive
Push past conventional limits with technically ambitious effects. WebGL shaders, spring physics, GPU-accelerated particle systems, scroll-driven 3D transforms. Use sparingly for maximum impact.
development
palette
Generate a complete 50-950 shade palette from a single hex color. Outputs 11 perceptually uniform shades with CSS variables, Tailwind config, and design token formats.
development
report
Generate a shareable OPTIK score card. Produces an SVG/image showing score, category breakdowns, and grade.
development
rhythm
Enforce vertical spacing rhythm. Ensures consistent vertical flow using a baseline grid approach.
testing
semantic-color
Generate a complete semantic color token set from a brand palette. Produces surface, text, border, accent, feedback, and interactive state tokens.
databases
screen-reader
Test the screen reader experience. Simulate how a screen reader would traverse the page and identify issues with reading order, landmarks, and announcements.
testing
transition
Audit and improve CSS transition declarations. Replace generic easing with intentional curves. Ensure consistent durations.
development
tokens
Generate a complete design token set. Covers color, typography, spacing, shadows, radii, and breakpoints. Exports as CSS custom properties, Tailwind config, SCSS variables, and W3C Design Tokens JSON.
development
type-measure
Check line lengths (measure) across the interface. Optimal reading length is 45-75 characters per line.
testing
type-set
Apply a complete typography system in one command. Sets type scale, font pairings, line heights, letter spacing, and hierarchy simultaneously.
testing
.codex/prompts/animate
--- name: animate provider: codex description: Add purposeful motion and transitions to the interface. Focuses on high-impact moments: page load reveals, hover states, and scroll-triggered entries. Not decorative jitter. user-invokable: true --- # /animate — Purposeful Motion Add motion that serves a purpose: **Page load:** Staggered fade-up reveals for above-fold content. Use animation-delay in 80-120ms increments. Total reveal sequence should complete within 600ms. **Hover states:** Scale
development
component-check
Verify component consistency. Same component type should use same spacing, typography, and color patterns everywhere.
testing
delight
Add memorable moments of joy. Micro-interactions, easter eggs, personality in copy, unexpected animations. Use sparingly for maximum impact.
tools
density
Audit visual density and whitespace balance. Checks that sections alternate between sparse and dense, avoiding uniform monotony.
testing
export-tailwind
Export the current design system as a Tailwind CSS configuration. Generates theme.extend with colors, fonts, spacing, shadows, and custom screens.
development
grid
Apply 8px grid system with automatic snap correction. Finds all spacing values not aligned to the grid and snaps them to the nearest valid value.
testing
normalize
Align an interface to its design system standards. Replace one-off values with tokens. Ensure every element uses the system.
content-media
overdrive
Push past conventional limits with technically ambitious effects. WebGL shaders, spring physics, GPU-accelerated particle systems, scroll-driven 3D transforms. Use sparingly for maximum impact.
development
palette
Generate a complete 50-950 shade palette from a single hex color. Outputs 11 perceptually uniform shades with CSS variables, Tailwind config, and design token formats.
development
polish
Final quality pass before shipping. Checks alignment, spacing consistency, hover states, focus styles, loading states, edge cases, and overall refinement.
testing
responsive
Check responsive behavior at key breakpoints. Verifies layout doesn't break, text remains readable, touch targets meet minimum sizes, and spacing scales appropriately.
testing
rhythm
Enforce vertical spacing rhythm. Ensures consistent vertical flow using a baseline grid approach.
testing
score
Run a full 0-100 OPTIK design quality analysis on the current interface or component. Produces category scores for Typography, Color, Layout, Motion, and Accessibility with specific issue callouts and fix suggestions.
development
screen-reader
Test the screen reader experience. Simulate how a screen reader would traverse the page and identify issues with reading order, landmarks, and announcements.
testing
scroll-fx
Add scroll-triggered reveals and parallax effects. Uses IntersectionObserver for reveals and CSS scroll-driven animations for parallax.
development
semantic-color
Generate a complete semantic color token set from a brand palette. Produces surface, text, border, accent, feedback, and interactive state tokens.
databases
spacing
Generate a complete spacing scale from a base unit. Outputs CSS custom properties and shows recommended usage for each step.
development
tokens
Generate a complete design token set. Covers color, typography, spacing, shadows, radii, and breakpoints. Exports as CSS custom properties, Tailwind config, SCSS variables, and W3C Design Tokens JSON.
development
trend
Track OPTIK score across iterations. Shows improvement over time with category-level delta tracking.
development
touch-target
Verify all interactive elements meet 44x44px minimum touch target size. Suggests fixes for undersized targets.
testing
type-measure
Check line lengths (measure) across the interface. Optimal reading length is 45-75 characters per line.
testing
type-rhythm
Align text spacing to a vertical rhythm baseline. Ensures headings, paragraphs, and other elements maintain consistent vertical flow.
testing
a11y-audit
Full accessibility audit covering focus management, semantic HTML, ARIA attributes, color contrast, touch targets, screen reader experience, and motion safety.
development
a11y-fix
Auto-fix detectable accessibility issues. Adds focus styles, semantic HTML, ARIA attributes, and touch target sizing.
development
type-set
Apply a complete typography system in one command. Sets type scale, font pairings, line heights, letter spacing, and hierarchy simultaneously.
testing
align
Verify visual alignment across sections. Check that headings, text, images, and components share consistent alignment points.
testing
.cursor/skills/animate
--- name: animate description: Add purposeful motion and transitions to the interface. Focuses on high-impact moments: page load reveals, hover states, and scroll-triggered entries. Not decorative jitter. user-invokable: true --- # /animate — Purposeful Motion Add motion that serves a purpose: **Page load:** Staggered fade-up reveals for above-fold content. Use animation-delay in 80-120ms increments. Total reveal sequence should complete within 600ms. **Hover states:** Scale (1.02-1.05), sub
content-media
aria
Audit and fix ARIA attributes. Ensures proper aria-label, aria-hidden, aria-live, and role usage throughout the interface.
testing
certify
Verify the design meets a specific OPTIK score threshold. Returns pass/fail with score breakdown. Use in CI/CD pipelines.
testing
color-a11y
Ensure the full color palette passes WCAG contrast at every text size. Tests every foreground/background combination.
testing
color-audit
Map all colors in the codebase. Find duplicates, near-duplicates, one-off values, and colors not in the token system.
development
color-fix
Auto-fix color issues. Replace failing contrast pairs, consolidate near-duplicates, and add missing CSS custom properties.
development
component-check
Verify component consistency. Same component type should use same spacing, typography, and color patterns everywhere.
testing
contrast
Check WCAG contrast ratios between any two colors. Reports AA/AAA compliance for normal text, large text, and UI components.
testing
density
Audit visual density and whitespace balance. Checks that sections alternate between sparse and dense, avoiding uniform monotony.
testing
export-css
Export the current design system as CSS custom properties. Includes color, typography, spacing, shadows, and radii tokens.
development
grid
Apply 8px grid system with automatic snap correction. Finds all spacing values not aligned to the grid and snaps them to the nearest valid value.
testing
extract
Pull reusable patterns from the codebase into a design system. Identifies shared tokens, repeated components, and common patterns.
development
overdrive
Push past conventional limits with technically ambitious effects. WebGL shaders, spring physics, GPU-accelerated particle systems, scroll-driven 3D transforms. Use sparingly for maximum impact.
development
polish
Final quality pass before shipping. Checks alignment, spacing consistency, hover states, focus styles, loading states, edge cases, and overall refinement.
testing
responsive
Check responsive behavior at key breakpoints. Verifies layout doesn't break, text remains readable, touch targets meet minimum sizes, and spacing scales appropriately.
testing
screen-reader
Test the screen reader experience. Simulate how a screen reader would traverse the page and identify issues with reading order, landmarks, and announcements.
testing
semantic-color
Generate a complete semantic color token set from a brand palette. Produces surface, text, border, accent, feedback, and interactive state tokens.
databases
transition
Audit and improve CSS transition declarations. Replace generic easing with intentional curves. Ensure consistent durations.
development
tokens
Generate a complete design token set. Covers color, typography, spacing, shadows, radii, and breakpoints. Exports as CSS custom properties, Tailwind config, SCSS variables, and W3C Design Tokens JSON.
development
type-fix
Auto-fix typography issues found by /type-audit. Replaces banned fonts, normalizes type scale, adds missing line-height and letter-spacing declarations.
testing
type-hierarchy
Enforce proper heading and body text hierarchy. Verify h1 > h2 > h3 progression, size ratios, and weight differentiation.
testing
align
Verify visual alignment across sections. Check that headings, text, images, and components share consistent alignment points.
testing
forge-palette
Regenerate the 50-950 shade palette from the current brand color in .forge.json. Updates the palette section without changing other parts of the system.
tools
scroll-fx
Add scroll-triggered reveals and parallax effects. Uses IntersectionObserver for reveals and CSS scroll-driven animations for parallax.
development
system-audit
Check for design system drift. Finds tokens that are defined but unused, used values that aren't in tokens, and inconsistencies between token definition and usage.
testing
forge-dark
Generate a dark mode variant of your design system. Creates dark-mode token overrides that preserve contrast ratios from the light theme.
content-media
extract
Pull reusable patterns from the codebase into a design system. Identifies shared tokens, repeated components, and common patterns.
development
benchmark
Compare the current design against quality baselines. Shows where the design ranks relative to typical AI output, typical professional output, and exceptional output.
testing
benchmark
Compare the current design against quality baselines. Shows where the design ranks relative to typical AI output, typical professional output, and exceptional output.
testing
benchmark
Compare the current design against quality baselines. Shows where the design ranks relative to typical AI output, typical professional output, and exceptional output.
testing
bolder
Amplify safe, boring designs. Increase contrast, enlarge key elements, add motion, intensify color, and push the aesthetic direction further.
content-media
bolder
Amplify safe, boring designs. Increase contrast, enlarge key elements, add motion, intensify color, and push the aesthetic direction further.
content-media
dark-mode
Generate dark mode color variant that preserves contrast ratios and visual hierarchy from the light theme. Not just color inversion — proper dark surface design.
content-media
dark-mode
Generate dark mode color variant that preserves contrast ratios and visual hierarchy from the light theme. Not just color inversion — proper dark surface design.
content-media
delight
Add memorable moments of joy. Micro-interactions, easter eggs, personality in copy, unexpected animations. Use sparingly for maximum impact.
tools
palette
Generate a complete 50-950 shade palette from a single hex color. Outputs 11 perceptually uniform shades with CSS variables, Tailwind config, and design token formats.
development
palette
Generate a complete 50-950 shade palette from a single hex color. Outputs 11 perceptually uniform shades with CSS variables, Tailwind config, and design token formats.
development
quieter
Tone down overly aggressive designs. Reduce contrast, soften colors, decrease animation intensity, and restore breathing room without losing character.
content-media
quieter
Tone down overly aggressive designs. Reduce contrast, soften colors, decrease animation intensity, and restore breathing room without losing character.
content-media
harden
Improve interface resilience. Add error handling, i18n support, text overflow handling, and edge case management.
tools
forge-audit
Check the current codebase against your .forge.json design system. Finds raw hex values that should be tokens, spacing off your scale, fonts not in your system, and missing token references.
development
forge-color-fix
Replace all orphan colors with the nearest token from your system. Converts raw hex values to var(--token) references.
tools
forge-dark
Generate a dark mode variant of your design system. Creates dark-mode token overrides that preserve contrast ratios from the light theme.
content-media
forge-density
Audit visual density and whitespace balance. Checks that spacing from your system creates appropriate rhythm between sections.
testing
forge-color-audit
Find every color in the codebase that isn't in your palette or token system. Lists orphan colors with suggested replacements.
development
forge-design
Design system generator and enforcer. Generates a complete, project-aware design foundation from a single brand color and project type. Produces color palettes, semantic tokens, mathematical type scales, spacing scales, shadow systems, and border radii. Every command operates on YOUR generated system, not generic rules. Use when building any frontend UI to ensure consistent, intentional design decisions from the first line of code.
development
forge-elevation
Audit elevation consistency. Checks that shadow usage follows a logical hierarchy — cards < dropdowns < modals.
testing
forge-export-scss
Export your design system as SCSS variables and mixins. Includes palette map, type scale mixin, spacing function, and breakpoint mixin.
development
forge-export-json
Export your design system as W3C Design Tokens JSON format. Compatible with Style Dictionary, Figma Tokens, and token management tools.
tools
forge-color-fix
Replace all orphan colors with the nearest token from your system. Converts raw hex values to var(--token) references.
tools
forge-export-tw
Export your design system as a Tailwind CSS configuration. Generates theme.extend with colors, fonts, spacing, shadows, and radii.
development
forge-export-css
Export your complete design system as CSS custom properties. Includes palette, tokens, type scale, spacing, shadows, and radii in a single :root block.
development
forge-grid
Snap all spacing values in the codebase to your system's grid. Replaces arbitrary padding, margin, and gap values.
development
forge-harmonize
Add a complementary or analogous accent color to your system. Computes the harmonically ideal secondary color from your brand.
development
forge-fix
Auto-fix design system violations. Replaces raw hex values with token references, snaps spacing to the scale, and normalizes font usage.
testing
forge-init
Generate a complete design system from a brand color and project type. Creates .forge.json with palette, tokens, type scale, spacing, shadows, and radii. This is the starting command — everything else references what it generates.
testing
forge-pair
Get contextual font pairing recommendations based on your project type. Never suggests banned fonts.
data-ai
forge-shadow
Regenerate the shadow elevation system tinted with your brand hue. Produces 5 levels from sm to 2xl.
tools
forge-motion
Check that all animations have prefers-reduced-motion fallbacks. Adds them if missing.
testing
forge-quieter
Tone down the design within your system's range. Use subtler shades, smaller type differences, and softer shadows.
content-media
.codex/prompts/forge-measure
--- name: forge-measure description: Check line lengths across the interface. Optimal: 45-75 characters per line. Flags containers that are too wide or too narrow for their font size. user-invokable: true --- # /forge-measure — Line Measure Check Calculate line measure for text containers: container-width / (font-size × 0.5) ≈ characters per line Flag: - Over 75 chars: add max-width constraint - Under 45 chars: container may be too narrow Suggest max-width values to achieve optimal measure.
development
forge-responsive
Check responsive behavior using your system's spacing scale. Verifies that spacing reduces proportionally at smaller breakpoints.
testing
forge-normalize
Align every value in the codebase to the nearest system token. The nuclear option for system compliance.
development
forge-polish
Final quality pass checking every value against your design system. The last command before shipping.
testing
forge-score
Score how well the codebase adheres to your design system. 0-100, where 100 means every value references a token and every pattern follows the system.
development
forge-type-audit
Find every font-size in the codebase that doesn't match your type scale. Lists violations with suggested scale values.
development
forge-rhythm
Enforce vertical rhythm using your system's baseline grid. Ensures heading margins, paragraph spacing, and section padding are multiples of the baseline.
testing
forge-spacing-audit
Find every spacing value in the codebase that doesn't match your scale. Lists violations by file and line.
development
forge-semantic
Rebuild the semantic token mapping from your palette. Maps surface, text, border, accent, and feedback tokens to specific palette shades based on project type.
development
forge-spacing
Regenerate the spacing scale from your system's base unit. Outputs 13 steps from 4px to 128px.
testing
forge-bolder
Amplify the design within your system's range. Use stronger palette shades, higher type scale steps, and more dramatic shadows.
content-media
forge-touch
Verify all interactive elements meet 44×44px minimum touch target size. Suggests padding increases using your spacing scale.
testing
forge-a11y
Full accessibility audit using your design system's color tokens. Checks contrast, focus styles, semantic HTML, touch targets, and motion safety.
development
forge-update
Regenerate the entire design system from a new brand color while preserving the project type. Updates .forge.json and shows what changed.
content-media
forge-spacing-fix
Auto-fix all off-scale spacing values. Snaps to nearest system value and replaces with token reference.
testing
forge-diff
Show the difference between your .forge.json design system and what's actually in the code. Lists every value that drifts from the system.
development
forge-export-css
Export your complete design system as CSS custom properties. Includes palette, tokens, type scale, spacing, shadows, and radii in a single :root block.
development
forge-density
Audit visual density and whitespace balance. Checks that spacing from your system creates appropriate rhythm between sections.
testing
forge-contrast
Check WCAG contrast ratios across your entire token system. Tests every text token against every surface token.
testing
forge-export-scss
Export your design system as SCSS variables and mixins. Includes palette map, type scale mixin, spacing function, and breakpoint mixin.
development
forge-harmonize
Add a complementary or analogous accent color to your system. Computes the harmonically ideal secondary color from your brand.
development
forge-export-figma
Export your design system in Figma Tokens format. Ready to import into Figma via the Tokens Studio plugin.
tools
forge-export-json
Export your design system as W3C Design Tokens JSON format. Compatible with Style Dictionary, Figma Tokens, and token management tools.
tools
forge-export-tw
Export your design system as a Tailwind CSS configuration. Generates theme.extend with colors, fonts, spacing, shadows, and radii.
development
forge-palette
Regenerate the 50-950 shade palette from the current brand color in .forge.json. Updates the palette section without changing other parts of the system.
tools
forge-polish
Final quality pass checking every value against your design system. The last command before shipping.
testing
forge-shadow
Regenerate the shadow elevation system tinted with your brand hue. Produces 5 levels from sm to 2xl.
tools
forge-score
Score how well the codebase adheres to your design system. 0-100, where 100 means every value references a token and every pattern follows the system.
development
forge-surface-audit
Check background color hierarchy. Verifies that surfaces, cards, and modals use the correct token from your system.
testing
forge-type-audit
Find every font-size in the codebase that doesn't match your type scale. Lists violations with suggested scale values.
development
forge-spacing-fix
Auto-fix all off-scale spacing values. Snaps to nearest system value and replaces with token reference.
testing
forge-touch
Verify all interactive elements meet 44×44px minimum touch target size. Suggests padding increases using your spacing scale.
testing
forge-a11y
Full accessibility audit using your design system's color tokens. Checks contrast, focus styles, semantic HTML, touch targets, and motion safety.
development
forge-type
Regenerate the type scale from your .forge.json ratio and base size. Outputs 8 steps with px values and CSS custom properties.
development
forge-spacing
Regenerate the spacing scale from your system's base unit. Outputs 13 steps from 4px to 128px.
testing
forge-bolder
Amplify the design within your system's range. Use stronger palette shades, higher type scale steps, and more dramatic shadows.
content-media
forge-audit
Check the current codebase against your .forge.json design system. Finds raw hex values that should be tokens, spacing off your scale, fonts not in your system, and missing token references.
development
forge-color-fix
Replace all orphan colors with the nearest token from your system. Converts raw hex values to var(--token) references.
tools
forge-design
Design system generator and enforcer. Generates a complete, project-aware design foundation from a single brand color and project type. Produces color palettes, semantic tokens, mathematical type scales, spacing scales, shadow systems, and border radii. Every command operates on YOUR generated system, not generic rules. Use when building any frontend UI to ensure consistent, intentional design decisions from the first line of code.
development
forge-elevation
Audit elevation consistency. Checks that shadow usage follows a logical hierarchy — cards < dropdowns < modals.
testing
forge-export-figma
Export your design system in Figma Tokens format. Ready to import into Figma via the Tokens Studio plugin.
tools
forge-export-scss
Export your design system as SCSS variables and mixins. Includes palette map, type scale mixin, spacing function, and breakpoint mixin.
development
forge-grid
Snap all spacing values in the codebase to your system's grid. Replaces arbitrary padding, margin, and gap values.
development
.gemini/skills/forge-measure
--- name: forge-measure description: Check line lengths across the interface. Optimal: 45-75 characters per line. Flags containers that are too wide or too narrow for their font size. user-invokable: true --- # /forge-measure — Line Measure Check Calculate line measure for text containers: container-width / (font-size × 0.5) ≈ characters per line Flag: - Over 75 chars: add max-width constraint - Under 45 chars: container may be too narrow Suggest max-width values to achieve optimal measure.
testing
forge-pair
Get contextual font pairing recommendations based on your project type. Never suggests banned fonts.
data-ai
forge-polish
Final quality pass checking every value against your design system. The last command before shipping.
testing
forge-palette
Regenerate the 50-950 shade palette from the current brand color in .forge.json. Updates the palette section without changing other parts of the system.
tools
forge-harmonize
Add a complementary or analogous accent color to your system. Computes the harmonically ideal secondary color from your brand.
development
forge-motion
Check that all animations have prefers-reduced-motion fallbacks. Adds them if missing.
testing
forge-quieter
Tone down the design within your system's range. Use subtler shades, smaller type differences, and softer shadows.
content-media
forge-responsive
Check responsive behavior using your system's spacing scale. Verifies that spacing reduces proportionally at smaller breakpoints.
testing
forge-semantic
Rebuild the semantic token mapping from your palette. Maps surface, text, border, accent, and feedback tokens to specific palette shades based on project type.
development
forge-spacing-audit
Find every spacing value in the codebase that doesn't match your scale. Lists violations by file and line.
development
forge-radius
Regenerate the border radius scale based on project type. SaaS gets moderate, portfolio gets soft, e-commerce gets tight.
tools
forge-score
Score how well the codebase adheres to your design system. 0-100, where 100 means every value references a token and every pattern follows the system.
development
forge-rhythm
Enforce vertical rhythm using your system's baseline grid. Ensures heading margins, paragraph spacing, and section padding are multiples of the baseline.
testing
forge-spacing
Regenerate the spacing scale from your system's base unit. Outputs 13 steps from 4px to 128px.
testing
forge-audit
Check the current codebase against your .forge.json design system. Finds raw hex values that should be tokens, spacing off your scale, fonts not in your system, and missing token references.
development
forge-type
Regenerate the type scale from your .forge.json ratio and base size. Outputs 8 steps with px values and CSS custom properties.
development
forge-type-fix
Snap all font sizes to the nearest step in your type scale. Replaces arbitrary values with var(--type-step) references.
tools
forge-dark
Generate a dark mode variant of your design system. Creates dark-mode token overrides that preserve contrast ratios from the light theme.
content-media
forge-color-audit
Find every color in the codebase that isn't in your palette or token system. Lists orphan colors with suggested replacements.
development
forge-export-figma
Export your design system in Figma Tokens format. Ready to import into Figma via the Tokens Studio plugin.
tools
forge-export-css
Export your complete design system as CSS custom properties. Includes palette, tokens, type scale, spacing, shadows, and radii in a single :root block.
development
forge-design
Design system generator and enforcer. Generates a complete, project-aware design foundation from a single brand color and project type. Produces color palettes, semantic tokens, mathematical type scales, spacing scales, shadow systems, and border radii. Every command operates on YOUR generated system, not generic rules. Use when building any frontend UI to ensure consistent, intentional design decisions from the first line of code.
development
forge-harden
Add error states, loading states, i18n safety, and edge case handling using your design system's tokens.
content-media
forge-export-tw
Export your design system as a Tailwind CSS configuration. Generates theme.extend with colors, fonts, spacing, shadows, and radii.
development
forge-export-json
Export your design system as W3C Design Tokens JSON format. Compatible with Style Dictionary, Figma Tokens, and token management tools.
tools
forge-export-scss
Export your design system as SCSS variables and mixins. Includes palette map, type scale mixin, spacing function, and breakpoint mixin.
development
forge-diff
Show the difference between your .forge.json design system and what's actually in the code. Lists every value that drifts from the system.
development
forge-fix
Auto-fix design system violations. Replaces raw hex values with token references, snaps spacing to the scale, and normalizes font usage.
testing
forge-init
Generate a complete design system from a brand color and project type. Creates .forge.json with palette, tokens, type scale, spacing, shadows, and radii. This is the starting command — everything else references what it generates.
testing
forge-rhythm
Enforce vertical rhythm using your system's baseline grid. Ensures heading margins, paragraph spacing, and section padding are multiples of the baseline.
testing
source/skills/forge-measure
--- name: forge-measure description: Check line lengths across the interface. Optimal: 45-75 characters per line. Flags containers that are too wide or too narrow for their font size. user-invokable: true --- # /forge-measure — Line Measure Check Calculate line measure for text containers: container-width / (font-size × 0.5) ≈ characters per line Flag: - Over 75 chars: add max-width constraint - Under 45 chars: container may be too narrow Suggest max-width values to achieve optimal measure.
testing
forge-motion
Check that all animations have prefers-reduced-motion fallbacks. Adds them if missing.
testing
forge-pair
Get contextual font pairing recommendations based on your project type. Never suggests banned fonts.
data-ai
forge-shadow
Regenerate the shadow elevation system tinted with your brand hue. Produces 5 levels from sm to 2xl.
tools
forge-quieter
Tone down the design within your system's range. Use subtler shades, smaller type differences, and softer shadows.
content-media
forge-responsive
Check responsive behavior using your system's spacing scale. Verifies that spacing reduces proportionally at smaller breakpoints.
testing
forge-spacing-audit
Find every spacing value in the codebase that doesn't match your scale. Lists violations by file and line.
development
forge-semantic
Rebuild the semantic token mapping from your palette. Maps surface, text, border, accent, and feedback tokens to specific palette shades based on project type.
development
forge-polish
Final quality pass checking every value against your design system. The last command before shipping.
testing
forge-radius
Regenerate the border radius scale based on project type. SaaS gets moderate, portfolio gets soft, e-commerce gets tight.
tools
forge-radius
Regenerate the border radius scale based on project type. SaaS gets moderate, portfolio gets soft, e-commerce gets tight.
tools
forge-spacing-fix
Auto-fix all off-scale spacing values. Snaps to nearest system value and replaces with token reference.
testing
forge-type-audit
Find every font-size in the codebase that doesn't match your type scale. Lists violations with suggested scale values.
development
forge-type-fix
Snap all font sizes to the nearest step in your type scale. Replaces arbitrary values with var(--type-step) references.
tools
forge-responsive
Check responsive behavior using your system's spacing scale. Verifies that spacing reduces proportionally at smaller breakpoints.
testing
forge-focus
Generate a focus ring system using your system's accent color. Creates consistent :focus-visible styles for all interactive elements.
tools
forge-type-fix
Snap all font sizes to the nearest step in your type scale. Replaces arbitrary values with var(--type-step) references.
tools
forge-motion
Check that all animations have prefers-reduced-motion fallbacks. Adds them if missing.
testing
forge-polish
Final quality pass checking every value against your design system. The last command before shipping.
testing
forge-spacing-audit
Find every spacing value in the codebase that doesn't match your scale. Lists violations by file and line.
development
motion-audit
Check all motion declarations for purpose, performance, and accessibility. Flags decorative jitter, layout-animating properties, and missing reduced-motion fallbacks.
testing
layout-audit
Map all layout patterns. Identify grid/flexbox usage, spacing patterns, nesting depth, and responsive breakpoints across the codebase.
development
score
Run a full 0-100 OPTIK design quality analysis on the current interface or component. Produces category scores for Typography, Color, Layout, Motion, and Accessibility with specific issue callouts and fix suggestions.
development
forge-spacing-fix
Auto-fix all off-scale spacing values. Snaps to nearest system value and replaces with token reference.
testing
forge-pair
Get contextual font pairing recommendations based on your project type. Never suggests banned fonts.
data-ai
type-set
Apply a complete typography system in one command. Sets type scale, font pairings, line heights, letter spacing, and hierarchy simultaneously.
testing
type-scale
Generate a mathematical type scale from base size and ratio. Outputs pixel values, rem equivalents, and CSS custom properties. Use Perfect Fourth (1.333) for compact UIs, Major Third (1.250) for standard, or Perfect Fifth (1.500) for dramatic hierarchy.
development
type-scale
Generate a mathematical type scale from base size and ratio. Outputs pixel values, rem equivalents, and CSS custom properties. Use Perfect Fourth (1.333) for compact UIs, Major Third (1.250) for standard, or Perfect Fifth (1.500) for dramatic hierarchy.
development
type-scale
Generate a mathematical type scale from base size and ratio. Outputs pixel values, rem equivalents, and CSS custom properties. Use Perfect Fourth (1.333) for compact UIs, Major Third (1.250) for standard, or Perfect Fifth (1.500) for dramatic hierarchy.
development
type-scale
Generate a mathematical type scale from base size and ratio. Outputs pixel values, rem equivalents, and CSS custom properties. Use Perfect Fourth (1.333) for compact UIs, Major Third (1.250) for standard, or Perfect Fifth (1.500) for dramatic hierarchy.
development
type-measure
Check line lengths (measure) across the interface. Optimal reading length is 45-75 characters per line.
testing
type-measure
Check line lengths (measure) across the interface. Optimal reading length is 45-75 characters per line.
testing
type-hierarchy
Enforce proper heading and body text hierarchy. Verify h1 > h2 > h3 progression, size ratios, and weight differentiation.
testing
type-hierarchy
Enforce proper heading and body text hierarchy. Verify h1 > h2 > h3 progression, size ratios, and weight differentiation.
testing
type-fix
Auto-fix typography issues found by /type-audit. Replaces banned fonts, normalizes type scale, adds missing line-height and letter-spacing declarations.
testing
type-fix
Auto-fix typography issues found by /type-audit. Replaces banned fonts, normalizes type scale, adds missing line-height and letter-spacing declarations.
testing
type-fix
Auto-fix typography issues found by /type-audit. Replaces banned fonts, normalizes type scale, adds missing line-height and letter-spacing declarations.
testing
type-audit
Audit all font-family, font-size, font-weight, line-height, and letter-spacing declarations across the codebase. Find inconsistencies, banned fonts, and missing hierarchy.
development
type-audit
Audit all font-family, font-size, font-weight, line-height, and letter-spacing declarations across the codebase. Find inconsistencies, banned fonts, and missing hierarchy.
development
type-audit
Audit all font-family, font-size, font-weight, line-height, and letter-spacing declarations across the codebase. Find inconsistencies, banned fonts, and missing hierarchy.
development
type-audit
Audit all font-family, font-size, font-weight, line-height, and letter-spacing declarations across the codebase. Find inconsistencies, banned fonts, and missing hierarchy.
development
trend
Track OPTIK score across iterations. Shows improvement over time with category-level delta tracking.
development
trend
Track OPTIK score across iterations. Shows improvement over time with category-level delta tracking.
development
transition
Audit and improve CSS transition declarations. Replace generic easing with intentional curves. Ensure consistent durations.
development
touch-target
Verify all interactive elements meet 44x44px minimum touch target size. Suggests fixes for undersized targets.
testing
touch-target
Verify all interactive elements meet 44x44px minimum touch target size. Suggests fixes for undersized targets.
testing
system-audit
Check for design system drift. Finds tokens that are defined but unused, used values that aren't in tokens, and inconsistencies between token definition and usage.
testing
system-audit
Check for design system drift. Finds tokens that are defined but unused, used values that aren't in tokens, and inconsistencies between token definition and usage.
testing
system-audit
Check for design system drift. Finds tokens that are defined but unused, used values that aren't in tokens, and inconsistencies between token definition and usage.
testing
spacing
Generate a complete spacing scale from a base unit. Outputs CSS custom properties and shows recommended usage for each step.
development
spacing
Generate a complete spacing scale from a base unit. Outputs CSS custom properties and shows recommended usage for each step.
development
scroll-fx
Add scroll-triggered reveals and parallax effects. Uses IntersectionObserver for reveals and CSS scroll-driven animations for parallax.
development
rhythm
Enforce vertical spacing rhythm. Ensures consistent vertical flow using a baseline grid approach.
testing
report
Generate a shareable OPTIK score card. Produces an SVG/image showing score, category breakdowns, and grade.
development
report
Generate a shareable OPTIK score card. Produces an SVG/image showing score, category breakdowns, and grade.
development
reduce-motion
Add prefers-reduced-motion support. Wraps existing animations in a media query and provides static fallbacks.
content-media
quieter
Tone down overly aggressive designs. Reduce contrast, soften colors, decrease animation intensity, and restore breathing room without losing character.
content-media
polish
Final quality pass before shipping. Checks alignment, spacing consistency, hover states, focus styles, loading states, edge cases, and overall refinement.
testing
optik-design
Design intelligence engine for frontend interfaces. Measures and enforces design quality through scoring algorithms, mathematical scales, and anti-pattern detection. Goes beyond subjective prompting with computable metrics across typography, color, layout, motion, and accessibility. Use when building any frontend UI to ensure output avoids generic AI aesthetics and hits measurable quality thresholds.
development
optik-design
Design intelligence engine for frontend interfaces. Measures and enforces design quality through scoring algorithms, mathematical scales, and anti-pattern detection. Goes beyond subjective prompting with computable metrics across typography, color, layout, motion, and accessibility. Use when building any frontend UI to ensure output avoids generic AI aesthetics and hits measurable quality thresholds.
development
optik-design
Design intelligence engine for frontend interfaces. Measures and enforces design quality through scoring algorithms, mathematical scales, and anti-pattern detection. Goes beyond subjective prompting with computable metrics across typography, color, layout, motion, and accessibility. Use when building any frontend UI to ensure output avoids generic AI aesthetics and hits measurable quality thresholds.
development
normalize
Align an interface to its design system standards. Replace one-off values with tokens. Ensure every element uses the system.
content-media
layout-fix
Auto-fix layout issues. Snaps off-grid spacing, adds missing max-width constraints, and normalizes gap usage.
testing
harmonize
Fix palette coherence issues. Ensures all colors in the palette work together harmonically (complementary, analogous, triadic, or split-complementary).
development
grid
Apply 8px grid system with automatic snap correction. Finds all spacing values not aligned to the grid and snaps them to the nearest valid value.
testing
focus
Generate a complete focus ring system. Creates consistent, visible :focus-visible styles that match the design aesthetic while meeting accessibility requirements.
content-media
export-json
Export the current design system as W3C Design Tokens JSON format. Compatible with Style Dictionary, Figma Tokens, and other token management tools.
tools
export-json
Export the current design system as W3C Design Tokens JSON format. Compatible with Style Dictionary, Figma Tokens, and other token management tools.
tools
export-json
Export the current design system as W3C Design Tokens JSON format. Compatible with Style Dictionary, Figma Tokens, and other token management tools.
tools
export-css
Export the current design system as CSS custom properties. Includes color, typography, spacing, shadows, and radii tokens.
development
export-css
Export the current design system as CSS custom properties. Includes color, typography, spacing, shadows, and radii tokens.
development
distill
Strip a design to its essential form. Remove every element, decoration, and effect that doesn't earn its place. Reduce without losing meaning.
content-media
distill
Strip a design to its essential form. Remove every element, decoration, and effect that doesn't earn its place. Reduce without losing meaning.
content-media
delight
Add memorable moments of joy. Micro-interactions, easter eggs, personality in copy, unexpected animations. Use sparingly for maximum impact.
tools
critique
UX-focused design review examining visual hierarchy, information architecture, emotional resonance, and user flow. Goes beyond code quality into design effectiveness.
development
critique
UX-focused design review examining visual hierarchy, information architecture, emotional resonance, and user flow. Goes beyond code quality into design effectiveness.
development
compare
Side-by-side comparison of two versions. Shows score changes per category, what improved, what regressed.
development
color-fix
Auto-fix color issues. Replace failing contrast pairs, consolidate near-duplicates, and add missing CSS custom properties.
development
color-audit
Map all colors in the codebase. Find duplicates, near-duplicates, one-off values, and colors not in the token system.
development
color-a11y
Ensure the full color palette passes WCAG contrast at every text size. Tests every foreground/background combination.
testing
certify
Verify the design meets a specific OPTIK score threshold. Returns pass/fail with score breakdown. Use in CI/CD pipelines.
testing
bolder
Amplify safe, boring designs. Increase contrast, enlarge key elements, add motion, intensify color, and push the aesthetic direction further.
content-media
benchmark
Compare the current design against quality baselines. Shows where the design ranks relative to typical AI output, typical professional output, and exceptional output.
testing
audit
Comprehensive design quality audit with severity ratings, specific line references, and actionable fix instructions. Deeper than /score — examines every declaration.
testing
audit
Comprehensive design quality audit with severity ratings, specific line references, and actionable fix instructions. Deeper than /score — examines every declaration.
testing
aria
Audit and fix ARIA attributes. Ensures proper aria-label, aria-hidden, aria-live, and role usage throughout the interface.
testing
aria
Audit and fix ARIA attributes. Ensures proper aria-label, aria-hidden, aria-live, and role usage throughout the interface.
testing
.gemini/skills/animate
--- name: animate description: Add purposeful motion and transitions to the interface. Focuses on high-impact moments: page load reveals, hover states, and scroll-triggered entries. Not decorative jitter. user-invokable: true --- # /animate — Purposeful Motion Add motion that serves a purpose: **Page load:** Staggered fade-up reveals for above-fold content. Use animation-delay in 80-120ms increments. Total reveal sequence should complete within 600ms. **Hover states:** Scale (1.02-1.05), sub
content-media
.claude/skills/animate
--- name: animate description: Add purposeful motion and transitions to the interface. Focuses on high-impact moments: page load reveals, hover states, and scroll-triggered entries. Not decorative jitter. user-invokable: true --- # /animate — Purposeful Motion Add motion that serves a purpose: **Page load:** Staggered fade-up reveals for above-fold content. Use animation-delay in 80-120ms increments. Total reveal sequence should complete within 600ms. **Hover states:** Scale (1.02-1.05), sub
content-media
align
Verify visual alignment across sections. Check that headings, text, images, and components share consistent alignment points.
testing
align
Verify visual alignment across sections. Check that headings, text, images, and components share consistent alignment points.
testing
a11y-fix
Auto-fix detectable accessibility issues. Adds focus styles, semantic HTML, ARIA attributes, and touch target sizing.
development
a11y-fix
Auto-fix detectable accessibility issues. Adds focus styles, semantic HTML, ARIA attributes, and touch target sizing.
development
a11y-audit
Full accessibility audit covering focus management, semantic HTML, ARIA attributes, color contrast, touch targets, screen reader experience, and motion safety.
development
a11y-audit
Full accessibility audit covering focus management, semantic HTML, ARIA attributes, color contrast, touch targets, screen reader experience, and motion safety.
development
type-pair
Recommend font pairings based on the project context. Pairs a distinctive display font with a complementary body font. Never suggests banned fonts.
data-ai
bolder
Amplify safe, boring designs. Increase contrast, enlarge key elements, add motion, intensify color, and push the aesthetic direction further.
content-media
forge-spacing-fix
Auto-fix all off-scale spacing values. Snaps to nearest system value and replaces with token reference.
testing
layout-fix
Auto-fix layout issues. Snaps off-grid spacing, adds missing max-width constraints, and normalizes gap usage.
testing
forge-motion
Check that all animations have prefers-reduced-motion fallbacks. Adds them if missing.
testing
compare
Side-by-side comparison of two versions. Shows score changes per category, what improved, what regressed.
development
export-tailwind
Export the current design system as a Tailwind CSS configuration. Generates theme.extend with colors, fonts, spacing, shadows, and custom screens.
development
type-pair
Recommend font pairings based on the project context. Pairs a distinctive display font with a complementary body font. Never suggests banned fonts.
data-ai
type-rhythm
Align text spacing to a vertical rhythm baseline. Ensures headings, paragraphs, and other elements maintain consistent vertical flow.
testing
forge-a11y
Full accessibility audit using your design system's color tokens. Checks contrast, focus styles, semantic HTML, touch targets, and motion safety.
development
forge-contrast
Check WCAG contrast ratios across your entire token system. Tests every text token against every surface token.
testing
forge-bolder
Amplify the design within your system's range. Use stronger palette shades, higher type scale steps, and more dramatic shadows.
content-media
forge-export-figma
Export your design system in Figma Tokens format. Ready to import into Figma via the Tokens Studio plugin.
tools
forge-diff
Show the difference between your .forge.json design system and what's actually in the code. Lists every value that drifts from the system.
development
forge-focus
Generate a focus ring system using your system's accent color. Creates consistent :focus-visible styles for all interactive elements.
tools
forge-harden
Add error states, loading states, i18n safety, and edge case handling using your design system's tokens.
content-media
forge-audit
Check the current codebase against your .forge.json design system. Finds raw hex values that should be tokens, spacing off your scale, fonts not in your system, and missing token references.
development
forge-fix
Auto-fix design system violations. Replaces raw hex values with token references, snaps spacing to the scale, and normalizes font usage.
testing
forge-motion
Check that all animations have prefers-reduced-motion fallbacks. Adds them if missing.
testing
forge-semantic
Rebuild the semantic token mapping from your palette. Maps surface, text, border, accent, and feedback tokens to specific palette shades based on project type.
development
forge-update
Regenerate the entire design system from a new brand color while preserving the project type. Updates .forge.json and shows what changed.
content-media
forge-export-json
Export your design system as W3C Design Tokens JSON format. Compatible with Style Dictionary, Figma Tokens, and token management tools.
tools
harden
Improve interface resilience. Add error handling, i18n support, text overflow handling, and edge case management.
tools
forge-audit
Check the current codebase against your .forge.json design system. Finds raw hex values that should be tokens, spacing off your scale, fonts not in your system, and missing token references.
development
forge-palette
Regenerate the 50-950 shade palette from the current brand color in .forge.json. Updates the palette section without changing other parts of the system.
tools
forge-a11y
Full accessibility audit using your design system's color tokens. Checks contrast, focus styles, semantic HTML, touch targets, and motion safety.
development
forge-color-audit
Find every color in the codebase that isn't in your palette or token system. Lists orphan colors with suggested replacements.
development
forge-contrast
Check WCAG contrast ratios across your entire token system. Tests every text token against every surface token.
testing
forge-export-figma
Export your design system in Figma Tokens format. Ready to import into Figma via the Tokens Studio plugin.
tools
forge-export-scss
Export your design system as SCSS variables and mixins. Includes palette map, type scale mixin, spacing function, and breakpoint mixin.
development
forge-fix
Auto-fix design system violations. Replaces raw hex values with token references, snaps spacing to the scale, and normalizes font usage.
testing
forge-grid
Snap all spacing values in the codebase to your system's grid. Replaces arbitrary padding, margin, and gap values.
development
forge-semantic
Rebuild the semantic token mapping from your palette. Maps surface, text, border, accent, and feedback tokens to specific palette shades based on project type.
development
forge-normalize
Align every value in the codebase to the nearest system token. The nuclear option for system compliance.
development
forge-quieter
Tone down the design within your system's range. Use subtler shades, smaller type differences, and softer shadows.
content-media
forge-quieter
Tone down the design within your system's range. Use subtler shades, smaller type differences, and softer shadows.
content-media
forge-responsive
Check responsive behavior using your system's spacing scale. Verifies that spacing reduces proportionally at smaller breakpoints.
testing
forge-spacing-audit
Find every spacing value in the codebase that doesn't match your scale. Lists violations by file and line.
development
forge-touch
Verify all interactive elements meet 44×44px minimum touch target size. Suggests padding increases using your spacing scale.
testing
forge-type-audit
Find every font-size in the codebase that doesn't match your type scale. Lists violations with suggested scale values.
development
forge-update
Regenerate the entire design system from a new brand color while preserving the project type. Updates .forge.json and shows what changed.
content-media
forge-update
Regenerate the entire design system from a new brand color while preserving the project type. Updates .forge.json and shows what changed.
content-media
forge-spacing-fix
Auto-fix all off-scale spacing values. Snaps to nearest system value and replaces with token reference.
testing
forge-surface-audit
Check background color hierarchy. Verifies that surfaces, cards, and modals use the correct token from your system.
testing
forge-color-fix
Replace all orphan colors with the nearest token from your system. Converts raw hex values to var(--token) references.
tools
forge-score
Score how well the codebase adheres to your design system. 0-100, where 100 means every value references a token and every pattern follows the system.
development
motion-audit
Check all motion declarations for purpose, performance, and accessibility. Flags decorative jitter, layout-animating properties, and missing reduced-motion fallbacks.
testing
forge-init
Generate a complete design system from a brand color and project type. Creates .forge.json with palette, tokens, type scale, spacing, shadows, and radii. This is the starting command — everything else references what it generates.
testing
forge-diff
Show the difference between your .forge.json design system and what's actually in the code. Lists every value that drifts from the system.
development
forge-focus
Generate a focus ring system using your system's accent color. Creates consistent :focus-visible styles for all interactive elements.
tools
forge-shadow
Regenerate the shadow elevation system tinted with your brand hue. Produces 5 levels from sm to 2xl.
tools
layout-audit
Map all layout patterns. Identify grid/flexbox usage, spacing patterns, nesting depth, and responsive breakpoints across the codebase.
development
harden
Improve interface resilience. Add error handling, i18n support, text overflow handling, and edge case management.
tools
reduce-motion
Add prefers-reduced-motion support. Wraps existing animations in a media query and provides static fallbacks.
content-media
type-pair
Recommend font pairings based on the project context. Pairs a distinctive display font with a complementary body font. Never suggests banned fonts.
data-ai