agentsclimarketplace

Design system patterns

Skill Dragoon0x/everything-design-taste/skills/design-system-patterns

A taste system for AI agents. 288 skills, 80 agents, 12 rules, and 8 hooks that turn generic AI output into work with genuine design quality. Anti-slop detection, typography craft, color systems, brand voice, product strategy, and 50+ specialized reviewers across UI, industry, platform, and content domains.

Install
npx -y skills add Dragoon0x/everything-design-taste --skill design-system-patterns

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 6 stars6 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Token architecture, component design, naming conventions, theming, and scaling design systems that people actually use.

SKILL.md

3.6 KB, as published. Nobody here has run it

Design System Patterns

Token Architecture

Three-Layer Token System

Global tokens (raw values, never used directly)

--color-blue-500: #3B82F6;
--space-4: 4px;
--font-size-16: 1rem;

Semantic tokens (meaning, used in components)

--color-text-primary: var(--color-gray-900);
--color-bg-surface: var(--color-white);
--color-border-default: var(--color-gray-200);
--color-interactive-primary: var(--color-blue-600);
--color-interactive-primary-hover: var(--color-blue-700);
--color-feedback-error: var(--color-red-600);
--color-feedback-success: var(--color-green-600);

Component tokens (scoped to specific components)

--button-bg: var(--color-interactive-primary);
--button-text: var(--color-white);
--button-radius: var(--radius-md);
--button-padding-x: var(--space-16);
--button-padding-y: var(--space-8);

Spacing Scale

Base unit: 4px. Scale: 0, 1, 2, 3, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128.

--space-0: 0;
--space-1: 0.25rem;  /* 4px */
--space-2: 0.5rem;   /* 8px */
--space-3: 0.75rem;  /* 12px */
--space-4: 1rem;     /* 16px */
--space-6: 1.5rem;   /* 24px */
--space-8: 2rem;     /* 32px */
--space-12: 3rem;    /* 48px */
--space-16: 4rem;    /* 64px */

Type Scale

Use a consistent ratio. 1.25 (major third) for compact UIs. 1.333 (perfect fourth) for spacious layouts.

--text-xs: 0.75rem;    /* 12px */
--text-sm: 0.875rem;   /* 14px */
--text-base: 1rem;     /* 16px */
--text-lg: 1.125rem;   /* 18px */
--text-xl: 1.25rem;    /* 20px */
--text-2xl: 1.5rem;    /* 24px */
--text-3xl: 1.875rem;  /* 30px */
--text-4xl: 2.25rem;   /* 36px */
--text-5xl: 3rem;      /* 48px */

Component Design Principles

API Design

  • Props should be obvious. If someone needs to read docs to use a button, the API failed.
  • Use enums over booleans: variant="primary" not isPrimary={true}
  • Compose over configure: small components that combine > one mega component with 40 props
  • Default to the most common use case. Override for the rest.

State Coverage

Every interactive component must handle:

  • Default, Hover, Active, Focus (keyboard), Disabled
  • Loading (if async), Error (if validation), Empty (if content-dependent)

Naming Convention

[Component][Variant][Size][State]

Button, ButtonPrimary, ButtonPrimaryLg, ButtonPrimaryLgDisabled
Input, InputError, InputWithIcon
Card, CardCompact, CardInteractive

Composition Patterns

  • Slot pattern — Named regions within a component (header, body, footer)
  • Compound pattern — Related components that share state (Tabs + TabPanel)
  • Render prop — Custom rendering without changing component logic

Theming

Dark Mode (not inversion)

Dark mode is not filter: invert(). It requires intentional adjustments:

  • Backgrounds: dark surfaces (gray-900, gray-800), not pure black
  • Text: off-white (gray-100), not pure white
  • Elevation: lighter surfaces = higher elevation (opposite of light mode)
  • Shadows: reduce or remove (they don't work on dark backgrounds)
  • Saturation: reduce color saturation slightly for dark backgrounds
  • Borders: use subtle borders where shadows worked in light mode

Multi-Brand

  • All brand decisions live in the token layer
  • Components reference semantic tokens only
  • Switching brands = swapping the token file
  • Never hardcode brand values in component code

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.