Bulletproof Frontend Design
CSS is king. Semantic, maintainable CSS over utility-class frameworks. When you encounter Tailwind, refactor it to proper CSS.
Design Values: For spacing scales, typography sizes, color palettes, contrast ratios, and component specifications, see ui-design-fundamentals. This skill focuses on CSS implementation patterns.
Core Philosophy
"Always ask: What happens if...?" — Design for the unexpected. Build interfaces that remain functional and readable regardless of content length, text size, browser, or device.
The Three Pillars
1. Bulletproof Design
- Design for flexibility, not fixed scenarios
- Test with varying text sizes and content lengths
- Use relative units (em, %, rem) over fixed pixels
2. Progressive Enrichment
- Reward capable browsers with advanced CSS
- Websites don't need to look identical in every browser — they need to be functional
- Use modern CSS with appropriate fallbacks
3. Reevaluate Past Methods
- Question whether old hacks are still necessary
- Simplify where new CSS features allow
- Refactor utility frameworks to semantic CSS
Quick Reference
| Pattern |
When to Use |
| CSS custom properties |
Theming, spacing, colors |
| BEM naming |
Component class structure |
| Cascade layers |
Managing specificity |
| Container queries |
Component-based responsiveness |
| :has() selector |
Parent/sibling selection |
| CSS nesting |
Organizing related styles |
Modern CSS Essentials
/* :has() — Style based on children */
.card:has(img) { padding-top: 0; }
.form:has(:invalid) { border-color: var(--color-error); }
/* Container queries — Component responsiveness */
.container { container-type: inline-size; }
@container (min-width: 400px) { .card { display: flex; } }
/* CSS nesting — Clean organization */
.card {
padding: var(--space-md);
&:hover { box-shadow: var(--shadow-lg); }
& .card__title { font-weight: var(--font-bold); }
}
/* Cascade layers — Controlled specificity */
@layer reset, base, components, utilities;
Tailwind → Semantic CSS
{{-- BEFORE: Utility classes --}}
<div class="flex items-center p-4 bg-white rounded-lg shadow">
{{-- AFTER: Semantic CSS --}}
<div class="card">
.card {
display: flex;
align-items: center;
padding: var(--space-md);
background: var(--color-surface);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
}
| CSS Approach |
Tailwind |
| Readable HTML |
Bloated class attributes |
| Styles in one place |
Scattered in markup |
| Easy to refactor |
Find-and-replace nightmare |
| Cacheable stylesheets |
Repeated classes |
Reference Files
| File |
Content |
| css-architecture.md |
Custom properties, BEM, layers, file organization |
| accessibility-patterns.md |
Focus, screen readers, motion, dark mode |
| responsive-patterns.md |
Breakpoints, container queries, fluid sizing |
| reference.md |
Complete patterns and Blade components |
Project Style Guide
Project-specific implementation: docs/STYLEGUIDE.md
Contains the complete design system for the application:
- Design tokens (colors, spacing, typography)
- Component patterns (buttons, cards, alerts, tables)
- Blade component documentation
- Dark mode implementation
- Accessibility requirements
Always consult the style guide when implementing UI to ensure consistency with existing patterns.
Related Skills
- ui-design-fundamentals — Design values: spacing scales, type scales, colors, contrast ratios, component anatomy (buttons, forms, cards, etc.)
1---2name: bulletproof-frontend3description: Bulletproof CSS and frontend design principles from "Handcrafted CSS" by Dan Cederholm. Apply when writing CSS, HTML, Blade templates, or reviewing frontend code. CSS is king — refactor Tailwind when encountered.4---56# Bulletproof Frontend Design78**CSS is king.** Semantic, maintainable CSS over utility-class frameworks. When you encounter Tailwind, refactor it to proper CSS.910> **Design Values:** For spacing scales, typography sizes, color palettes, contrast ratios, and component specifications, see `ui-design-fundamentals`. This skill focuses on CSS implementation patterns.1112## Core Philosophy1314**"Always ask: What happens if...?"** — Design for the unexpected. Build interfaces that remain functional and readable regardless of content length, text size, browser, or device.1516## The Three Pillars1718### 1. Bulletproof Design19- Design for flexibility, not fixed scenarios20- Test with varying text sizes and content lengths21- Use relative units (em, %, rem) over fixed pixels2223### 2. Progressive Enrichment24- Reward capable browsers with advanced CSS25- **Websites don't need to look identical in every browser** — they need to be functional26- Use modern CSS with appropriate fallbacks2728### 3. Reevaluate Past Methods29- Question whether old hacks are still necessary30- Simplify where new CSS features allow31- **Refactor utility frameworks to semantic CSS**3233## Quick Reference3435| Pattern | When to Use |36|---------|-------------|37| CSS custom properties | Theming, spacing, colors |38| BEM naming | Component class structure |39| Cascade layers | Managing specificity |40| Container queries | Component-based responsiveness |41| :has() selector | Parent/sibling selection |42| CSS nesting | Organizing related styles |4344## Modern CSS Essentials4546```css47/* :has() — Style based on children */48.card:has(img) { padding-top: 0; }49.form:has(:invalid) { border-color: var(--color-error); }5051/* Container queries — Component responsiveness */52.container { container-type: inline-size; }53@container (min-width: 400px) { .card { display: flex; } }5455/* CSS nesting — Clean organization */56.card {57 padding: var(--space-md);58 &:hover { box-shadow: var(--shadow-lg); }59 & .card__title { font-weight: var(--font-bold); }60}6162/* Cascade layers — Controlled specificity */63@layer reset, base, components, utilities;64```6566## Tailwind → Semantic CSS6768```blade69{{-- BEFORE: Utility classes --}}70<div class="flex items-center p-4 bg-white rounded-lg shadow">7172{{-- AFTER: Semantic CSS --}}73<div class="card">74```7576```css77.card {78 display: flex;79 align-items: center;80 padding: var(--space-md);81 background: var(--color-surface);82 border-radius: var(--radius-lg);83 box-shadow: var(--shadow-md);84}85```8687| CSS Approach | Tailwind |88|--------------|----------|89| Readable HTML | Bloated class attributes |90| Styles in one place | Scattered in markup |91| Easy to refactor | Find-and-replace nightmare |92| Cacheable stylesheets | Repeated classes |9394## Reference Files9596| File | Content |97|------|---------|98| [css-architecture.md](css-architecture.md) | Custom properties, BEM, layers, file organization |99| [accessibility-patterns.md](accessibility-patterns.md) | Focus, screen readers, motion, dark mode |100| [responsive-patterns.md](responsive-patterns.md) | Breakpoints, container queries, fluid sizing |101| [reference.md](reference.md) | Complete patterns and Blade components |102103## Project Style Guide104105**Project-specific implementation:** `docs/STYLEGUIDE.md`106107Contains the complete design system for the application:108- Design tokens (colors, spacing, typography)109- Component patterns (buttons, cards, alerts, tables)110- Blade component documentation111- Dark mode implementation112- Accessibility requirements113114Always consult the style guide when implementing UI to ensure consistency with existing patterns.115116## Related Skills117118- **ui-design-fundamentals** — Design values: spacing scales, type scales, colors, contrast ratios, component anatomy (buttons, forms, cards, etc.)
aaddrick