dragoon0x/optik

1

bolder Amplify safe, boring designs. Increase contrast, enlarge key elements, add motion, intensify color, and push the aest…

dragoon0x/optik

7

2

layout-audit Map all layout patterns. Identify grid/flexbox usage, spacing patterns, nesting depth, and responsive breakpoints acr…

dragoon0x/optik

7

3

normalize Align an interface to its design system standards. Replace one-off values with tokens. Ensure every element uses the …

dragoon0x/optik

7

4

align Verify visual alignment across sections. Check that headings, text, images, and components share consistent alignment…

dragoon0x/optik

6

5

aria Audit and fix ARIA attributes. Ensures proper aria-label, aria-hidden, aria-live, and role usage throughout the inter…

dragoon0x/optik

6

6

audit Comprehensive design quality audit with severity ratings, specific line references, and actionable fix instructions. …

dragoon0x/optik

6

7

benchmark Compare the current design against quality baselines. Shows where the design ranks relative to typical AI output, typ…

dragoon0x/optik

6

8

certify Verify the design meets a specific OPTIK score threshold. Returns pass/fail with score breakdown. Use in CI/CD pipeli…

dragoon0x/optik

6

9

color-a11y Ensure the full color palette passes WCAG contrast at every text size. Tests every foreground/background combination.

dragoon0x/optik

6

10

color-audit Map all colors in the codebase. Find duplicates, near-duplicates, one-off values, and colors not in the token system.

dragoon0x/optik

6

11

color-fix Auto-fix color issues. Replace failing contrast pairs, consolidate near-duplicates, and add missing CSS custom proper…

dragoon0x/optik

6

12

contrast Check WCAG contrast ratios between any two colors. Reports AA/AAA compliance for normal text, large text, and UI comp…

dragoon0x/optik

6

13

dark-mode Generate dark mode color variant that preserves contrast ratios and visual hierarchy from the light theme. Not just c…

dragoon0x/optik

6

14

density Audit visual density and whitespace balance. Checks that sections alternate between sparse and dense, avoiding unifor…

dragoon0x/optik

6

15

distill Strip a design to its essential form. Remove every element, decoration, and effect that doesn't earn its place. Reduc…

dragoon0x/optik

6

16

extract Pull reusable patterns from the codebase into a design system. Identifies shared tokens, repeated components, and com…

dragoon0x/optik

6

17

grid Apply 8px grid system with automatic snap correction. Finds all spacing values not aligned to the grid and snaps them…

dragoon0x/optik

6

18

harden Improve interface resilience. Add error handling, i18n support, text overflow handling, and edge case management.

dragoon0x/optik

6

19

harmonize Fix palette coherence issues. Ensures all colors in the palette work together harmonically (complementary, analogous,…

dragoon0x/optik

6

20

layout-fix Auto-fix layout issues. Snaps off-grid spacing, adds missing max-width constraints, and normalizes gap usage.

dragoon0x/optik

6

21

optik-design Design intelligence engine for frontend interfaces.

dragoon0x/optik

6

22

overdrive Push past conventional limits with technically ambitious effects. WebGL shaders, spring physics, GPU-accelerated part…

dragoon0x/optik

6

23

palette Generate a complete 50-950 shade palette from a single hex color. Outputs 11 perceptually uniform shades with CSS var…

dragoon0x/optik

6

24

polish Final quality pass before shipping. Checks alignment, spacing consistency, hover states, focus styles, loading states…

dragoon0x/optik

6

25

quieter Tone down overly aggressive designs. Reduce contrast, soften colors, decrease animation intensity, and restore breath…

dragoon0x/optik

6

26

responsive Check responsive behavior at key breakpoints. Verifies layout doesn't break, text remains readable, touch targets mee…

dragoon0x/optik

6

27

rhythm Enforce vertical spacing rhythm. Ensures consistent vertical flow using a baseline grid approach.

dragoon0x/optik

6

28

semantic-color Generate a complete semantic color token set from a brand palette. Produces surface, text, border, accent, feedback, …

dragoon0x/optik

6

29

spacing Generate a complete spacing scale from a base unit. Outputs CSS custom properties and shows recommended usage for eac…

dragoon0x/optik

6

30

trend Track OPTIK score across iterations. Shows improvement over time with category-level delta tracking.

dragoon0x/optik

6

31

type-audit Audit all font-family, font-size, font-weight, line-height, and letter-spacing declarations across the codebase. Find…

dragoon0x/optik

6

32

type-fix Auto-fix typography issues found by /type-audit. Replaces banned fonts, normalizes type scale, adds missing line-heig…

dragoon0x/optik

6

33

type-hierarchy Enforce proper heading and body text hierarchy. Verify h1 > h2 > h3 progression, size ratios, and weight differentiat…

dragoon0x/optik

6

34

type-measure Check line lengths (measure) across the interface. Optimal reading length is 45-75 characters per line.

dragoon0x/optik

6

35

type-pair Recommend font pairings based on the project context. Pairs a distinctive display font with a complementary body font…

dragoon0x/optik

6

36

type-rhythm Align text spacing to a vertical rhythm baseline. Ensures headings, paragraphs, and other elements maintain consisten…

dragoon0x/optik

6

37

type-scale Generate a mathematical type scale from base size and ratio. Outputs pixel values, rem equivalents, and CSS custom pr…

dragoon0x/optik

6

38

type-set Apply a complete typography system in one command. Sets type scale, font pairings, line heights, letter spacing, and …

dragoon0x/optik

6

39

a11y-audit Full accessibility audit covering focus management, semantic HTML, ARIA attributes, color contrast, touch targets, sc…

dragoon0x/optik

5

40

a11y-fix Auto-fix detectable accessibility issues. Adds focus styles, semantic HTML, ARIA attributes, and touch target sizing.

dragoon0x/optik

5

41

compare Side-by-side comparison of two versions. Shows score changes per category, what improved, what regressed.

dragoon0x/optik

5

42

component-check Verify component consistency. Same component type should use same spacing, typography, and color patterns everywhere.

dragoon0x/optik

5

43

critique UX-focused design review examining visual hierarchy, information architecture, emotional resonance, and user flow. Go…

dragoon0x/optik

5

44

delight Add memorable moments of joy. Micro-interactions, easter eggs, personality in copy, unexpected animations. Use sparin…

dragoon0x/optik

5

45

export-css Export the current design system as CSS custom properties. Includes color, typography, spacing, shadows, and radii to…

dragoon0x/optik

5

46

export-json Export the current design system as W3C Design Tokens JSON format. Compatible with Style Dictionary, Figma Tokens, an…

dragoon0x/optik

5

47

export-tailwind Export the current design system as a Tailwind CSS configuration. Generates theme.extend with colors, fonts, spacing,…

dragoon0x/optik

5

48

focus Generate a complete focus ring system. Creates consistent, visible :focus-visible styles that match the design aesthe…

dragoon0x/optik

5

49

motion-audit Check all motion declarations for purpose, performance, and accessibility. Flags decorative jitter, layout-animating …

dragoon0x/optik

5

50

reduce-motion Add prefers-reduced-motion support. Wraps existing animations in a media query and provides static fallbacks.

dragoon0x/optik

5