Skill("css-flexbox-grid")

parameters:
  layout_type:
    type: string
    required: true
    enum: [flexbox, grid, comparison, responsive]
    description: Layout system to explore

  pattern:
    type: string
    required: false
    enum: [centering, sidebar, card-grid, holy-grail, navbar, gallery]
    description: Common layout pattern

  include_responsive:
    type: boolean
    required: false
    default: true
    description: Include responsive adaptations

validation:
  - rule: layout_type_required
    message: "layout_type parameter is required"
  - rule: valid_pattern
    message: "pattern must be a recognized layout pattern"

retry_config:
  max_attempts: 3
  backoff_type: exponential
  initial_delay_ms: 1000
  max_delay_ms: 10000
  retryable_errors:
    - TIMEOUT
    - RATE_LIMIT

logging:
  entry_point: skill_invoked
  exit_point: skill_completed
  log_parameters: true
  metrics:
    - invocation_count
    - pattern_usage
    - layout_type_distribution

.container {
  display: flex;
  flex-direction: row;      /* row | column | row-reverse | column-reverse */
  flex-wrap: wrap;          /* nowrap | wrap | wrap-reverse */
  justify-content: center;  /* flex-start | flex-end | center | space-between | space-around | space-evenly */
  align-items: center;      /* flex-start | flex-end | center | stretch | baseline */
  gap: 1rem;
}

.item {
  flex: 1 1 auto;          /* grow shrink basis */
  align-self: flex-start;
  order: 0;
}

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "sidebar main aside"
    "footer footer footer";
  gap: 1rem;
}

.item {
  grid-column: 1 / 3;      /* start / end */
  grid-row: span 2;
  grid-area: header;
}

Need 2D control?
├─ YES → CSS Grid
└─ NO
    ├─ Content determines size? → Flexbox
    ├─ Equal sizing needed? → Grid
    └─ Simple row/column → Flexbox

/* Flexbox centering */
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Grid centering */
.grid-center {
  display: grid;
  place-items: center;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.sidebar-layout {
  display: grid;
  grid-template-columns: minmax(200px, 25%) 1fr;
  min-height: 100vh;
}

@media (max-width: 768px) {
  .sidebar-layout {
    grid-template-columns: 1fr;
  }
}

describe('CSS Flexbox Grid Skill', () => {
  test('validates layout_type parameter', () => {
    expect(() => skill({ layout_type: 'invalid' }))
      .toThrow('layout_type must be one of: flexbox, grid...');
  });

  test('returns flexbox properties for flexbox type', () => {
    const result = skill({ layout_type: 'flexbox' });
    expect(result).toContain('display: flex');
    expect(result).toContain('justify-content');
  });

  test('includes responsive code when flag is true', () => {
    const result = skill({
      layout_type: 'grid',
      pattern: 'card-grid',
      include_responsive: true
    });
    expect(result).toContain('@media');
  });
});