agentsclimarketplace
Sign in

Design system

Skill lexicalninja/my-little-scrum-team/skills/design-system

Design specification guide — layout, components, color, typography, spacing, interactions, responsive, accessibility.From its SKILL.md

Install
npx -y skills add lexicalninja/my-little-scrum-team --skill design-system

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

  • 2 stars2 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.

SKILL.md

1.6 KB, as published. Nobody here has run it

Design Specification Guide

When creating design specs, cover each applicable section with exact values.

Layout

  • Grid system (columns, gutters, max-width)
  • Visual hierarchy (primary → secondary → tertiary content)
  • Semantic HTML structure (header, main, aside, footer)

Components

  • States: default, hover, focus, active, disabled, loading, error
  • Variations: size (sm/md/lg), style (primary/secondary/ghost)
  • Composition: how components nest and combine

Color

  • Palette with hex values: primary, secondary, neutral, semantic (success/error/warning/info)
  • Contrast ratios: WCAG AA minimum (4.5:1 normal text, 3:1 large text)

Typography

  • Font family, fallback stack
  • Scale: heading sizes (h1-h6), body, small, caption
  • Weight, line-height, letter-spacing per level

Spacing

  • Scale: 4px base unit (4, 8, 12, 16, 24, 32, 48, 64)
  • Component padding, margins, gaps — exact values

Interactions

  • Hover: color shift, scale, shadow changes
  • Focus: visible outline (2px solid, offset 2px)
  • Transitions: property, duration (150-300ms), easing
  • Loading: skeleton, spinner, or progress indicator

Responsive

  • Breakpoints: mobile (320px+), tablet (768px+), desktop (1024px+)
  • Layout changes at each breakpoint
  • Touch targets: minimum 44x44px on mobile

Accessibility

  • Keyboard navigation order matches visual order
  • Screen reader: semantic elements, ARIA labels where needed
  • Works at 200% zoom
  • No information conveyed by color alone

Keep looking

Skills are one crate of 627,801. 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.