skills.rest
trudyan141
trudyan141COMMUNITY
Explore all skills by this author →
GitHub

css-styling-expert

Diagnose and fix CSS layout, performance, accessibility, and design system issues.

3|Updated Jan 15, 2026
Search Tags:#performance#accessibility#responsive design#css#design systems#styled-components#css-in-js
One-click install
npx skills add https://github.com/trudyan141/my-antigravity-agents-kit --skill css-styling-expert-trudyan141
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: css-styling-expert
Source: https://github.com/trudyan141/my-antigravity-agents-kit/tree/main/templates/.agent/skills/css-expert
Command: npx skills add https://github.com/trudyan141/my-antigravity-agents-kit --skill css-styling-expert-trudyan141

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Modern CSS spans layout systems, CSS-in-JS runtimes, theming, accessibility, and cross-browser quirks, making styling bugs hard to diagnose and fix consistently. This Skill provides a systematic diagnostic workflow that detects your CSS setup, classifies the problem, and applies targeted fixes with validation. ## Core Features & Use Cases - Environment Detection: Identifies your CSS methodology (BEM, OOCSS), frameworks (Tailwind, styled-components, Emotion), preprocessing tools, and browser support targets before proposing solutions. - Problem Playbooks: Step-by-step diagnosis and fixes for flexbox/grid layout bugs, specificity conflicts, CSS-in-JS re-render performance, FOUC, dark mode contrast failures, and responsive breakpoint issues. - Review Checklists: Covers layout, architecture, animation performance (transform/opacity only), theming tokens, WCAG contrast ratios, and responsive design. - Use Case: Your styled-components app re-renders excessively and flashes unstyled content on load. The Skill detects the CSS-in-JS setup, moves dynamic values to CSS custom properties, extracts static styles, and validates with Lighthouse. ## Quick Start Use the css-styling-expert skill to diagnose why my flexbox layout overflows on mobile and fix it.

Frequently Asked Questions about css-styling-expert

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix flexbox items not wrapping on mobile?▼

Flexbox overflow on mobile is fixed by adding flex-wrap: wrap, switching to CSS Grid with auto-fit, or using container queries. Diagnose by searching for display: flex rules missing wrap behavior, then validate with browser DevTools device emulation.

How to optimize styled-components performance and avoid re-renders?▼

Move dynamic values out of template literals into CSS custom properties, use styled.attrs() for dynamic props, and extract static styles outside component definitions. Profile re-renders with React DevTools to confirm the fix.

Why does my site show a flash of unstyled content (FOUC)?▼

FOUC happens when styles load after content renders, common with CSS-in-JS runtime injection or theme switching. Fix it with SSR style extraction, critical CSS inlining, preload hints, and CSS custom properties with fallback values.

Does this approach work with Tailwind or Bootstrap projects?▼

Yes, the detection step identifies utility frameworks like Tailwind and Bootstrap from package.json and adapts recommendations to respect their constraints. Solutions align with the existing framework rather than replacing it.

How do I fix dark mode color contrast failing WCAG standards?▼

Audit contrast ratios against WCAG AA requirements (4.5:1 for text, 3:1 for large text) using axe-core or contrast analyzers. Implement semantic color tokens with CSS custom properties and test with prefers-color-scheme across themes.

When should I use a different expert instead of a CSS specialist?▼

Switch to a performance expert for bundler-level CSS optimization, an accessibility expert for deep screen reader testing, or a build-tools expert for PostCSS and Sass compilation issues. The Skill recommends switching when the problem exceeds CSS styling scope.

Related Skills

Explore More Software Engineering Skills→
json-choijson-choi

expo-tailwind-setup

Configure Tailwind CSS v4 in Expo projects with NativeWind and Metro setup.

Community
Intermediate
FoundationForgeFoundationForge

design-system

Audit design systems for naming inconsistencies, hardcoded values, and accessibility gaps.

Official
Intermediate
pnewsampnewsam
1

compliance-accessibility

Review web interfaces against WCAG 2.2 accessibility requirements.

Community
Intermediate
Software-Design-ClubSoftware-Design-Club
1

Frontend CSS

Enforce consistent CSS methodologies and design tokens across stylesheets.

Official
Basic