一键导入
bulletproof-frontend
// 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.
// 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.
Batch process GitHub issues via batch-orchestrator.sh with rate limit handling and session resumption
Use when given a GitHub issue number and base branch to implement end-to-end
Use when creating new skills, editing existing skills, or verifying skills work before deployment
Process PR based on code review - if approved, create follow-up issues, merge, close; if changes requested, re-run implement-issue
Use when adapting the generic .claude pipeline folder to a specific codebase - adjusting skills, agents, hooks, scripts, prompts, and settings for the target project's tech stack and workflows
Use when you have a written implementation plan to execute in a separate session with review checkpoints
| name | bulletproof-frontend |
| description | 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. |
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.
"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.
| 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 |
/* :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;
{{-- 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 |
| 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-specific implementation: docs/STYLEGUIDE.md
Contains the complete design system for the application:
Always consult the style guide when implementing UI to ensure consistency with existing patterns.