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
Query your local Screenpipe instance to retrieve screen recordings, audio transcriptions, UI element accessibility trees, keyboard/mouse input logs, and productivity analytics. You can search by keywords, filter by content type (audio, OCR, accessibility, input), set time ranges, and extract structured data about your applications, meetings, and work sessions without sending data to external servers.
by az9713
You can rapidly prototype and build accessible user interfaces by combining shadcn/ui's pre-built Radix UI components with Tailwind CSS utility-first styling. This skill enables you to implement complex UI patterns, responsive layouts, dark mode themes, and design systems while maintaining full type safety and accessibility standards. Generate visual designs, posters, and branded materials alongside functional interface components.
by trungtv
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 leverage Claude to synthesize regional seismic hazard data from authoritative sources (USGS maps, published studies), interpret probabilistic versus deterministic earthquake scenarios, and analyze how site conditions modify ground motions. Claude helps you justify seismic design parameters to clients and regulators, evaluate liquefaction and earthquake-induced landslide risks, and develop defensible recommendations aligned with ASCE 7 and current guidelines—accelerating report preparation without replacing specialized geotechnical software.
by az9713
You can compare building materials across embodied carbon, water usage, recyclability, supply chain impacts, and lifecycle costs—all grounded in industry standards like EN 15804 and ISO 14040/44. This skill transforms material selection from intuition-based guessing into data-driven specification, producing analysis outputs ready for client presentations, value engineering discussions, and regulatory compliance documentation.
by az9713
You systematically evaluate your internal developer platform across dimensions like onboarding, deployment, tooling, and documentation to identify quantifiable friction points. Claude analyzes your platform's usability, creates a friction scoring matrix, and generates a prioritized improvement roadmap ranked by team impact and implementation effort. You get a data-driven strategy to reduce developer toil and accelerate delivery.
by az9713
You can audit BIM models across five critical domains: geometric accuracy and LOD consistency, information requirements and metadata, coordinate systems and project setup, element naming and classification standards, and documentation completeness. This skill generates detailed compliance reports that identify every gap and provide specific remediation guidance, enabling you to enforce consistent standards across projects, reduce rework, and ensure models are ready for handoff to downstream disciplines or coordination workflows.
by az9713
You can accelerate HVAC design workflows by inputting building parameters—envelope characteristics, occupancy data, climate conditions, and existing systems—and receiving calculated heating/cooling loads, equipment sizing recommendations, and zone-by-zone analysis. Claude organizes complex building data into actionable design parameters and specification summaries for client review, permit submission, and professional validation against ASHRAE and ACCA standards.
by az9713