bulletproof-frontend

Name: bulletproof-frontend
Author: aaddrick

120stars16forks

How to install bulletproof-frontend?

aaddrick/claude-pipeline/bulletproof-frontend

$npx -y skills add aaddrick/claude-pipeline --skill bulletproof-frontend

Installs into the current project.

Summary

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.

Files · 1

View on GitHub

SKILL.md

1	# Bulletproof Frontend Design
2
3	CSS is king. Semantic, maintainable CSS over utility-class frameworks. When you encounter Tailwind, refactor it to proper CSS.
4
5	> 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.
6
7	## Core Philosophy
8
9	"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.
10
11	## The Three Pillars
12
13	### 1. Bulletproof Design
14	- Design for flexibility, not fixed scenarios
15	- Test with varying text sizes and content lengths
16	- Use relative units (em, %, rem) over fixed pixels
17
18	### 2. Progressive Enrichment
19	- Reward capable browsers with advanced CSS
20	- Websites don't need to look identical in every browser — they need to be functional
21	- Use modern CSS with appropriate fallbacks
22
23	### 3. Reevaluate Past Methods
24	- Question whether old hacks are still necessary
25	- Simplify where new CSS features allow
26	- Refactor utility frameworks to semantic CSS
27
28	## Quick Reference
29
30	\| Pattern \| When to Use \|
31	\|---------\|-------------\|
32	\| CSS custom properties \| Theming, spacing, colors \|
33	\| BEM naming \| Component class structure \|
34	\| Cascade layers \| Managing specificity \|
35	\| Container queries \| Component-based responsiveness \|
36	\| :has() selector \| Parent/sibling selection \|
37	\| CSS nesting \| Organizing related styles \|
38
39	## Modern CSS Essentials
40
41	```css
42	/* :has() — Style based on children */
43	.card:has(img) { padding-top: 0; }
44	.form:has(:invalid) { border-color: var(--color-error); }
45
46	/* Container queries — Component responsiveness */
47	.container { container-type: inline-size; }
48	@container (min-width: 400px) { .card { display: flex; } }
49
50	/* CSS nesting — Clean organization */
51	.card {
52	padding: var(--space-md);
53	&:hover { box-shadow: var(--shadow-lg); }
54	& .card__title { font-weight: var(--font-bold); }
55	}
56
57	/* Cascade layers — Controlled specificity */
58	@layer reset, base, components, utilities;
59	```
60
61	## Tailwind → Semantic CSS
62
63	```blade
64	{{-- BEFORE: Utility classes --}}
65	<div class="flex items-center p-4 bg-white rounded-lg shadow">
66
67	{{-- AFTER: Semantic CSS --}}
68	<div class="card">
69	```
70
71	```css
72	.card {
73	display: flex;
74	align-items: center;
75	padding: var(--space-md);
76	background: var(--color-surface);
77	border-radius: var(--radius-lg);
78	box-shadow: var(--shadow-md);
79	}
80	```
81
82	\| CSS Approach \| Tailwind \|
83	\|--------------\|----------\|
84	\| Readable HTML \| Bloated class attributes \|
85	\| Styles in one place \| Scattered in markup \|
86	\| Easy to refactor \| Find-and-replace nightmare \|
87	\| Cacheable stylesheets \| Repeated classes \|
88
89	## Reference Files
90
91	\| File \| Content \|
92	\|------\|---------\|
93	\| [css-architecture.md](css-architecture.md) \| Custom properties, BEM, layers, file organization \|
94	\| [accessibility-patterns.md](accessibility-patterns.md) \| Focus, screen readers, motion, dark mode \|
95	\| [responsive-patterns.md](responsive-patterns.md) \| Breakpoints, container queries, fluid sizing \|
96	\| [reference.md](reference.md) \| Complete patterns and Blade components \|
97
98	## Project Style Guide
99
100	Project-specific implementation: `docs/STYLEGUIDE.md`
101
102	Contains the complete design system for the application:
103	- Design tokens (colors, spacing, typography)
104	- Component patterns (buttons, cards, alerts, tables)
105	- Blade component documentation
106	- Dark mode implementation
107	- Accessibility requirements
108
109	Always consult the style guide when implementing UI to ensure consistency with existing patterns.
110
111	## Related Skills
112
113	- ui-design-fundamentals — Design values: spacing scales, type scales, colors, contrast ratios, component anatomy (buttons, forms, cards, etc.)

People who liked this also viewed

6 picks

Type

bulletproof-frontend

120stars16forks

View on GitHub

How to install bulletproof-frontend?

aaddrick/claude-pipeline/bulletproof-frontend

$npx -y skills add aaddrick/claude-pipeline --skill bulletproof-frontend

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Bulletproof Frontend Design
2
3	CSS is king. Semantic, maintainable CSS over utility-class frameworks. When you encounter Tailwind, refactor it to proper CSS.
4
5	> 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.
6
7	## Core Philosophy
8
9	"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.
10
11	## The Three Pillars
12
13	### 1. Bulletproof Design
14	- Design for flexibility, not fixed scenarios
15	- Test with varying text sizes and content lengths
16	- Use relative units (em, %, rem) over fixed pixels
17
18	### 2. Progressive Enrichment
19	- Reward capable browsers with advanced CSS
20	- Websites don't need to look identical in every browser — they need to be functional
21	- Use modern CSS with appropriate fallbacks
22
23	### 3. Reevaluate Past Methods
24	- Question whether old hacks are still necessary
25	- Simplify where new CSS features allow
26	- Refactor utility frameworks to semantic CSS
27
28	## Quick Reference
29
30	\| Pattern \| When to Use \|
31	\|---------\|-------------\|
32	\| CSS custom properties \| Theming, spacing, colors \|
33	\| BEM naming \| Component class structure \|
34	\| Cascade layers \| Managing specificity \|
35	\| Container queries \| Component-based responsiveness \|
36	\| :has() selector \| Parent/sibling selection \|
37	\| CSS nesting \| Organizing related styles \|
38
39	## Modern CSS Essentials
40
41	```css
42	/* :has() — Style based on children */
43	.card:has(img) { padding-top: 0; }
44	.form:has(:invalid) { border-color: var(--color-error); }
45
46	/* Container queries — Component responsiveness */
47	.container { container-type: inline-size; }
48	@container (min-width: 400px) { .card { display: flex; } }
49
50	/* CSS nesting — Clean organization */
51	.card {
52	padding: var(--space-md);
53	&:hover { box-shadow: var(--shadow-lg); }
54	& .card__title { font-weight: var(--font-bold); }
55	}
56
57	/* Cascade layers — Controlled specificity */
58	@layer reset, base, components, utilities;
59	```
60
61	## Tailwind → Semantic CSS
62
63	```blade
64	{{-- BEFORE: Utility classes --}}
65	<div class="flex items-center p-4 bg-white rounded-lg shadow">
66
67	{{-- AFTER: Semantic CSS --}}
68	<div class="card">
69	```
70
71	```css
72	.card {
73	display: flex;
74	align-items: center;
75	padding: var(--space-md);
76	background: var(--color-surface);
77	border-radius: var(--radius-lg);
78	box-shadow: var(--shadow-md);
79	}
80	```
81
82	\| CSS Approach \| Tailwind \|
83	\|--------------\|----------\|
84	\| Readable HTML \| Bloated class attributes \|
85	\| Styles in one place \| Scattered in markup \|
86	\| Easy to refactor \| Find-and-replace nightmare \|
87	\| Cacheable stylesheets \| Repeated classes \|
88
89	## Reference Files
90
91	\| File \| Content \|
92	\|------\|---------\|
93	\| [css-architecture.md](css-architecture.md) \| Custom properties, BEM, layers, file organization \|
94	\| [accessibility-patterns.md](accessibility-patterns.md) \| Focus, screen readers, motion, dark mode \|
95	\| [responsive-patterns.md](responsive-patterns.md) \| Breakpoints, container queries, fluid sizing \|
96	\| [reference.md](reference.md) \| Complete patterns and Blade components \|
97
98	## Project Style Guide
99
100	Project-specific implementation: `docs/STYLEGUIDE.md`
101
102	Contains the complete design system for the application:
103	- Design tokens (colors, spacing, typography)
104	- Component patterns (buttons, cards, alerts, tables)
105	- Blade component documentation
106	- Dark mode implementation
107	- Accessibility requirements
108
109	Always consult the style guide when implementing UI to ensure consistency with existing patterns.
110
111	## Related Skills
112
113	- ui-design-fundamentals — Design values: spacing scales, type scales, colors, contrast ratios, component anatomy (buttons, forms, cards, etc.)

People who liked this also viewed

6 picks

Type