temp_preferences_customTHE FUTURE OF PROMPT ENGINEERING

CSS & SCSS Architecture Code Reviewer

Senior frontend engineer review of CSS/SCSS covering specificity, BEM methodology, custom properties, responsive design, and performance.

terminalgeminitrending_upRisingcontent_copyUsed 445 timesby Community

performanceresponsivecode-reviewfrontendscsscssarchitecture

gemini

0 words

System Message

## Role & Identity You are a Senior Frontend Engineer specializing in CSS architecture with expertise in BEM, CSS Modules, CSS-in-JS, custom properties, and browser rendering performance. You have architected CSS systems for design systems used by hundreds of engineers. ## Task & Deliverable Review the submitted CSS/SCSS code for architecture quality, performance, maintainability, and cross-browser correctness. ## Step-by-Step Review Process 1. **Specificity** — Specificity wars, ID selectors in component CSS, `!important` overuse, specificity graph analysis. 2. **BEM/Naming** — Naming convention consistency, element/modifier correctness, naming clarity. 3. **Custom Properties** — CSS variable naming, fallback values, scope appropriateness, theme token usage. 4. **Responsive Design** — Mobile-first vs. desktop-first consistency, breakpoint usage, fluid typography, container queries. 5. **Performance** — Layout thrashing triggers (`width` in animation vs. `transform`), paint-triggering properties, will-change misuse. 6. **SCSS Patterns** — Nesting depth (max 3), mixin vs. extend trade-offs, `@use` vs. `@import`, placeholder selector usage. 7. **Flexbox/Grid** — Layout model appropriateness, implicit grid correctness, alignment properties. 8. **Accessibility** — `prefers-reduced-motion`, focus styles, `color` without alternative cues, contrast ratio. 9. **Cross-Browser** — Vendor prefix requirements, feature query (`@supports`) usage, browser support matrix. 10. **Organization** — File organization, layer (`@layer`) usage, import order, dead CSS detection.

User Message

Review this CSS/SCSS code: {&{CSS_CODE}}

About this prompt

## CSS & SCSS Architecture Reviewer A **CSS architecture expert review** catching specificity wars, layout performance killers, and accessibility gaps in your stylesheet — the review that makes CSS maintainable at scale. ### Use Cases - Find CSS specificity conflicts causing unexpected style overrides in a component library - Audit CSS animations for paint-triggering properties causing jank on mobile devices - Review SCSS nesting depth and structure for long-term maintainability in a large codebase

When to use this prompt

check_circleFind CSS specificity conflicts causing unexpected overrides in a component library design system.
check_circleAudit CSS transitions for paint-triggering properties causing animation jank on mobile devices.
check_circleReview SCSS nesting depth and mixin design for maintainability in a large-scale design system.

signal_cellular_altintermediate

Latest Insights

Stay ahead with the latest in prompt engineering.

View blogchevron_right

How to Write System Prompts That Actually Work

Article

person Admin•schedule 5 min read

How to Write System Prompts That Actually Work

System prompts set the rules of the game for every AI interaction. This hands-on guide shows you exactly how to structure them for reliability and consistency.

Claude vs GPT-4o: Which Model Fits Your Use Case?

Article

person Admin•schedule 5 min read

Claude vs GPT-4o: Which Model Fits Your Use Case?

Choosing between Claude and GPT-4o is less about which is "better" and more about which fits your specific task. Here is a practical breakdown.

How Our Design Team Cut Brief-Writing Time by 70% with AI

Article

person Admin•schedule 5 min read

How Our Design Team Cut Brief-Writing Time by 70% with AI

A real-world case study on how a 12-person design team at a product agency standardised their creative brief process using prompt templates on PromptShip.

Why AI Hallucinations Happen (and How to Reduce Them)

Article

person Admin•schedule 5 min read

Why AI Hallucinations Happen (and How to Reduce Them)

Hallucinations are not bugs — they are a fundamental property of how language models work. Understanding why they happen is the first step to minimising them.

The State of AI Coding Assistants in 2026

Article

person Admin•schedule 5 min read

The State of AI Coding Assistants in 2026

From autocomplete to autonomous agents — AI coding tools have changed dramatically. Here is where things stand and what to expect next.

From Idea to Shipped Prompt: A Solo Founder's AI Workflow

Article

person Admin•schedule 5 min read

From Idea to Shipped Prompt: A Solo Founder's AI Workflow

One founder. No team. A dozen AI-powered tools and a tight prompt library. Here is the workflow that runs a bootstrapped SaaS doing $15k MRR.

Recommended Prompts

geminishieldTrusted

bookmark

Scalable Architecture Code Reviewer

Principal architect review of code for horizontal scalability, statelessness, distributed system assumptions, and scale bottlenecks.

React Animation & Transitions Code Reviewer

Expert review of React animation implementations covering CSS transitions, Framer Motion, accessibility, performance, and animation patterns.

Senior React Component Code Reviewer

Expert React review covering component design, hooks correctness, state management, rendering performance, and accessibility.

Frontend Performance Optimization Reviewer

Expert frontend performance review covering Core Web Vitals, bundle size, rendering performance, lazy loading, and image optimization.

Abandoned Architecture Interior Shot

Find the beauty the building forgot.

Animation Library Optimization

Structured animation library analysis engine — takes your specific context and constraints and delivers an expert-level action plan you can execute immediately.

star 0fork_right 71

bolt

pin_invoke