agentsclimarketplace

Polaris design

Skill agykit/agykit/.agent/skills/polaris-design

"The missing link between a chat-bot and a work-bot: a collection of elite skills for real-world application."

Install
npx -y skills add agykit/agykit --skill polaris-design

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

2 things to look at

  • no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
  • 0 stars0 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

Apply Shopify Polaris Design System principles to create professional admin interfaces and dashboards. Use when building React admin panels, data-heavy interfaces, e-commerce dashboards, or when optimizing existing UIs for better usability and data density. Provides color tokens, typography scales, spacing system, and component patterns following Polaris guidelines.

SKILL.md

6.0 KB, as published. Nobody here has run it

Shopify Polaris Design

Apply Polaris design principles to create efficient, accessible admin interfaces optimized for data-heavy workflows.

Core Principles

Color Has Purpose

  • Use neutral backgrounds (black/white) to make colored elements stand out
  • Red for critical errors, green for success, blue for tips/offers
  • Never use color purely for decoration in the UI (only in illustrations)
  • Use color WITH other elements (icons, text) - never alone to convey meaning

Typography Defines Hierarchy

  • Use weight, size, and positioning to establish hierarchy
  • Never rely only on color for hierarchy
  • Mono for code; tabular numbers for currency/amounts
  • Consistently style similar or repeating type

Space Defines Relationships

  • Closer objects = stronger perceived relationship
  • Group related items in the same card
  • Larger/heavier elements attract attention; smaller/lighter for details
  • Avoid nesting shapes; avoid divider lines outside of tables

Design Tokens

For complete token values, see references/design-tokens.md.

Color Palette

/* Neutral Backgrounds */
--p-color-bg: #ffffff;
--p-color-bg-surface: #f1f1f1;
--p-color-bg-surface-secondary: #f7f7f7;
--p-color-bg-surface-hover: #f0f0f0;
--p-color-bg-surface-active: #e8e8e8;

/* Text Colors */
--p-color-text: #1a1a1a;
--p-color-text-secondary: #616161;
--p-color-text-disabled: #8c8c8c;

/* Primary (Interactive) */
--p-color-bg-fill-brand: #008060;
--p-color-text-brand: #008060;

/* Status Colors */
--p-color-bg-fill-success: #008060; /* Green */
--p-color-bg-fill-critical: #d72c0d; /* Red */
--p-color-bg-fill-warning: #ffc453; /* Yellow */
--p-color-bg-fill-info: #0070f3;    /* Blue */

Typography

/* Font Family */
--p-font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--p-font-family-mono: 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;

/* Font Sizes */
--p-font-size-75: 0.75rem;   /* 12px - Caption */
--p-font-size-100: 0.8125rem; /* 13px - Body small */
--p-font-size-200: 0.875rem;  /* 14px - Body */
--p-font-size-300: 1rem;      /* 16px - Body large */
--p-font-size-400: 1.25rem;   /* 20px - Heading */
--p-font-size-500: 1.5rem;    /* 24px - Display */

/* Font Weights */
--p-font-weight-regular: 400;
--p-font-weight-medium: 500;
--p-font-weight-semibold: 600;
--p-font-weight-bold: 700;

/* Line Heights */
--p-font-line-height-1: 1;
--p-font-line-height-2: 1.25;
--p-font-line-height-3: 1.5;

Spacing (4px base unit)

--p-space-050: 0.125rem; /* 2px */
--p-space-100: 0.25rem;  /* 4px */
--p-space-150: 0.375rem; /* 6px */
--p-space-200: 0.5rem;   /* 8px */
--p-space-300: 0.75rem;  /* 12px */
--p-space-400: 1rem;     /* 16px */
--p-space-500: 1.25rem;  /* 20px */
--p-space-600: 1.5rem;   /* 24px */
--p-space-800: 2rem;     /* 32px */
--p-space-1000: 2.5rem;  /* 40px */

Border & Shadow

/* Border Radius */
--p-border-radius-100: 0.25rem; /* 4px */
--p-border-radius-200: 0.5rem;  /* 8px */
--p-border-radius-300: 0.75rem; /* 12px */
--p-border-radius-full: 9999px;

/* Shadows */
--p-shadow-100: 0 1px 0 rgba(0, 0, 0, 0.05);
--p-shadow-200: 0 1px 2px rgba(0, 0, 0, 0.1);
--p-shadow-300: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
--p-shadow-400: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

/* Borders */
--p-border-width-1: 1px;
--p-color-border: #e1e1e1;
--p-color-border-secondary: #d1d1d1;

Component Patterns

For complete component examples, see references/component-patterns.md.

Cards

.polaris-card {
  background: var(--p-color-bg-surface);
  border-radius: var(--p-border-radius-200);
  padding: var(--p-space-400);
  box-shadow: var(--p-shadow-200);
}

Buttons

.polaris-button {
  font-size: var(--p-font-size-200);
  font-weight: var(--p-font-weight-medium);
  padding: var(--p-space-200) var(--p-space-400);
  border-radius: var(--p-border-radius-100);
  transition: background 0.15s ease;
}
.polaris-button--primary {
  background: var(--p-color-bg-fill-brand);
  color: #ffffff;
}

Data Tables

.polaris-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--p-font-size-200);
}
.polaris-table th {
  text-align: left;
  font-weight: var(--p-font-weight-semibold);
  padding: var(--p-space-300) var(--p-space-400);
  border-bottom: var(--p-border-width-1) solid var(--p-color-border);
  color: var(--p-color-text-secondary);
}
.polaris-table td {
  padding: var(--p-space-300) var(--p-space-400);
  border-bottom: var(--p-border-width-1) solid var(--p-color-border);
}
.polaris-table tr:hover {
  background: var(--p-color-bg-surface-hover);
}

Form Inputs

.polaris-input {
  font-size: var(--p-font-size-200);
  padding: var(--p-space-200) var(--p-space-300);
  border: var(--p-border-width-1) solid var(--p-color-border);
  border-radius: var(--p-border-radius-100);
  background: var(--p-color-bg);
  transition: border-color 0.15s ease;
}
.polaris-input:focus {
  outline: none;
  border-color: var(--p-color-bg-fill-brand);
  box-shadow: 0 0 0 1px var(--p-color-bg-fill-brand);
}

Best Practices

Data Density

  • Use 13-14px base font for data-heavy interfaces
  • Reduce padding in table cells for scannability
  • Group related metrics in cards

Interaction States

  • Always provide visual feedback: hover, focus, active, disabled
  • Use consistent timing: 150ms for micro-interactions
  • Focus states must be visible (never remove outline without alternative)

Accessibility

  • Maintain minimum 4.5:1 contrast ratio for text
  • Use color WITH icons/text, never alone
  • All interactive elements must be keyboard accessible

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.