Menu
Master Flexbox and CSS Grid layouts for modern responsive design
| name | css-flexbox-grid |
| description | Master Flexbox and CSS Grid layouts for modern responsive design |
| sasmp_version | 1.3.0 |
| version | 2.0.0 |
| updated | 2025-12-30 |
| bonded_agent | 02-css-layout-master |
| bond_type | PRIMARY_BOND |
Master modern CSS layout systems: Flexbox for 1D layouts and CSS Grid for 2D layouts.
This skill provides atomic, focused guidance on CSS layout techniques with comprehensive parameter validation and practical examples.
| Property | Value |
|---|---|
| Category | Layout |
| Complexity | Intermediate to Advanced |
| Dependencies | css-fundamentals |
| Bonded Agent | 02-css-layout-master |
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');
});
});
| Error Code | Cause | Recovery |
|---|---|---|
| INVALID_LAYOUT_TYPE | Unknown layout type | Show valid options |
| INCOMPATIBLE_PATTERN | Pattern doesn't fit layout type | Suggest alternative |
| MISSING_DEPENDENCY | Fundamentals not understood | Link to css-fundamentals |
Writes, edits, and creates dbt models following best practices. Use when user needs to create new dbt SQL models, update existing models, or convert raw SQL to dbt format. Handles staging, intermediate, and mart models with proper config blocks, CTEs, and documentation.
Apply Domain-Driven Design, Clean Architecture, CQRS, and command/query patterns to code reviews and feature design. Use when analyzing or designing code in Application, Service, Infrastructure, DataAccess, Validation, Domain, or Functions projects, or when addressing architectural concerns, layering, mapping, entities, value objects, repositories, or validators in the Rome Repair Order Service.
Analyzes and refactors code using Domain-Driven Design principles. Use when refactoring domain models, identifying DDD anti-patterns, improving domain clarity, or applying tactical/strategic DDD patterns.
Guide for DDD strategic design - analyzing domains through structured questioning, conducting stakeholder interviews (PM/domain experts/users), and producing Bounded Context analysis, Context Maps, and Ubiquitous Language. Use when user needs help understanding domain boundaries, planning domain interviews, or structuring DDD strategic artifacts.
Win competitive rounds: run a clean process, deliver value previews before asking, coordinate partners, and manage timelines. Use when you're trying to close a 'must win' deal against other funds.
End-to-end associate workflow with time-boxed gates: thesis -> sourcing -> meetings -> diligence -> memo, ending with either IC-ready memo or explicit kill decision. Use when you need to run the full pipeline for a sector or a specific deal.