Bulletproof Frontend
Apply semantic CSS principles to build maintainable, flexible stylesheets
What You Can Do
You'll apply proven CSS design principles to create flexible, maintainable stylesheets that work across devices and content variations. This skill guides you through semantic CSS architecture, progressive enhancement, and modern CSS features—helping you refactor utility frameworks like Tailwind into robust, future-proof code that handles the unexpected.
Features
Build component-based styles using BEM naming, CSS custom properties, and cascade layers for maintainability
Design for flexibility with relative units, content-agnostic layouts, and layouts that adapt to varying text sizes
Leverage modern CSS features (:has(), container queries, nesting) with appropriate fallbacks for broader browser support
Convert Tailwind-based or framework-dependent code to semantic, self-documenting CSS
Use container queries and :has() selectors for component-driven responsiveness instead of viewport-only breakpoints
Centralize theming, spacing, and color systems using CSS variables for scalability
Build interfaces that remain readable and functional regardless of content length, text size, or browser capabilities
Example Output
Example 1: Refactoring Utility Classes
Input: <div class="flex gap-4 p-6 bg-white rounded-lg shadow-md">...</div>
Output:
.card {
display: flex;
gap: var(--spacing-md);
padding: var(--spacing-lg);
background-color: var(--color-surface);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
}
Example 2: Progressive Enhancement with :has()
/* Style card differently when it contains an image */
.card:has(img) {
padding-top: 0;
display: grid;
grid-template-rows: auto 1fr;
}
/* Show error state when form contains invalid input */
.form:has(:invalid) {
border-color: var(--color-error);
}
Example 3: Container Query Pattern
.card-container {
container-type: inline-size;
}
@container (min-width: 400px) {
.card { display: grid; grid-template-columns: 1fr 1fr; }
}
What's Included
- SKILL.md: Complete bulletproof CSS philosophy and modern CSS essentials reference
- BEM naming convention guide: Component class structure patterns
- CSS custom properties template: Theming and spacing scale framework
- Progressive enhancement checklist: Modern CSS features with fallback patterns
- Utility-to-semantic refactoring examples: Real-world Tailwind-to-CSS conversions
Who It's For
- Frontend engineers — Building semantic, maintainable CSS architectures at scale
- Full-stack developers — Refactoring legacy utility-framework code to modern CSS
- CSS architects — Designing component systems and design token strategies
- Web accessibility specialists — Ensuring flexible layouts work across assistive technologies and text zoom levels
- Design system leads — Creating reusable, content-agnostic component patterns
Best For
- CSS architecture reviews and refactoring projects
- Converting Tailwind or utility-framework code to semantic CSS
- Building responsive component libraries with container queries
- Designing flexible layouts that handle unpredictable content
- Implementing modern CSS features (:has(), nesting, cascade layers) with fallbacks
You might also like
Design earth retention systems by inputting soil properties, site geometry, and regulatory requirements. Claude calculates lateral earth pressures using Coulomb, Rankine, and Mononobe-Okabe methods, verifies factors of safety for internal and external stability, compares competing retention concepts (gravity walls, cantilever, anchored, sheet-pile, soil-nail), and generates cost-benefit analysis and regulatory documentation packages ready for permit submission.
by az9713
You can rapidly synthesize disparate urban site information—demographics, infrastructure, ecology, regulations, and spatial typologies—into explicit design frameworks. Claude helps you extract actionable insights that directly inform concept development, phasing strategies, and design interventions, bridging the gap between site investigation and design synthesis by creating clear connections between existing conditions and design opportunities.
by az9713
You can write clean, maintainable Tailwind CSS directly in React JSX using utility-first principles. This skill helps you compose responsive layouts, implement dark mode themes, extract reusable component patterns, convert existing CSS to Tailwind, and troubleshoot Tailwind configuration issues. It's optimized for dashboards, forms, cards, modals, and other typical application interfaces.
by calesthio
You can rapidly build responsive, production-ready UI designs using Tailwind's utility-first approach. Apply low-level utility classes directly to HTML elements to create custom designs without writing CSS, implement mobile-first responsive layouts, add dark mode and theme customization, and generate optimized CSS bundles through build-time processing that includes only the classes you actually use.
by calesthio
You can input earth retention system parameters—wall type, soil properties, loading conditions, and geometry—and Claude will perform comprehensive stability analysis including bearing capacity, sliding resistance, and overturning checks. The skill generates professional engineering reports with calculated factors of safety, design narratives, and permit-ready documentation that aligns with ASCE 7, ACI 318, and local building code requirements across gravity walls, cantilever walls, soldier pile systems, sheet pile walls, and MSE walls.
by az9713
You can systematically analyze raw XYZ survey coordinates to identify meaningful patterns, validate data quality, and detect surveying errors before they impact design phases. This skill helps you interpret slope gradients, drainage patterns, and terrain complexity while generating constraint reports that communicate site limitations to design teams. You'll produce professional topographic analyses that reveal drainage zones, stability issues, and access constraints invisible in raw measurements.
by az9713
You can submit architectural design documents, floor plans, and project parameters to receive a comprehensive compliance analysis that cross-references IBC, local amendments, zoning ordinances, and ADA accessibility requirements. Claude identifies specific gaps, cites applicable code sections, explains why each gap matters, and provides concrete remediation strategies—all before formal design review submission when corrections are costly and schedule-impacting.
by az9713
You can diagnose why layouts break at specific breakpoints and receive precise CSS fixes to resolve them. The skill identifies root causes of overflow problems, flex/grid misalignment, and mobile usability failures, then provides responsive design patterns to prevent similar issues from recurring across your entire project.
by calesthio