What is the 'CSS-first' approach in this skill?

It is a methodology that prioritizes using native CSS and HTML features for layout and interactivity before resorting to JavaScript, reducing code complexity and improving performance.

How does this skill improve web performance?

By minimizing JavaScript execution and leveraging GPU-accelerated CSS properties for animations, it reduces main-thread blocking and results in smoother user experiences.

When does this skill recommend using JavaScript?

JavaScript is reserved for tasks CSS cannot handle, such as API data fetching, complex multi-interaction state management, form submission, and using browser APIs like localStorage.

Does this skill help with web accessibility?

Yes, by encouraging the use of semantic HTML elements like and which provide built-in keyboard and screen reader support without extra code.

Progressive Enhancement CSS

Name: Progressive Enhancement CSS
Author: thkt

bythkt

•

Design Tools

Prioritizes lightweight CSS and HTML solutions over JavaScript to build performant, accessible, and maintainable web interfaces.

This skill guides Claude to adopt a 'CSS-first' mentality, ensuring that layout, styling, and simple interactivity are handled by the browser's native capabilities before reaching for JavaScript. By following a strict priority order—HTML semantics first, then CSS styling, and JavaScript only when necessary—it helps developers build faster, more resilient websites. It leverages modern CSS features like Grid, Flexbox, Container Queries, and the :has() selector to reduce bundle sizes and improve performance through the principle of 'the best code is no code.'

Key Features

013 GitHub stars

02GPU-accelerated animation patterns using CSS transforms and transitions

03CSS-only state management using :target, :checked, and :has() selectors

04Implementation of native HTML components like <details> and <dialog>

05Responsive design strategies using Media and Container Queries instead of JS

06CSS-first decision flow for layouts, positioning, and state changes

Use Cases

01Refactoring JavaScript-heavy UI components into lightweight CSS-only alternatives

02Optimizing web performance by replacing JS-based animations with CSS transitions

03Building accessible accordions, modals, and tooltips using native browser elements

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add thkt/claude-config enhancing-progressively

For use in Claude.ai and ChatGPT

Download Skill