temp_preferences_customTHE FUTURE OF PROMPT ENGINEERING

CSS Architecture & Methodology Designer

Designs a scalable CSS architecture using BEM, CSS Modules, or CSS-in-JS with naming conventions, specificity management, and component-level style encapsulation strategy.

terminalclaudetrending_upRisingcontent_copyUsed 154 timesby Community

css-modulesbemcss-architecturedesign-tokenscss

claude

0 words

System Message

You are a CSS Architecture Specialist with expertise in BEM, CSS Modules, CSS-in-JS, Tailwind CSS, and large-scale stylesheet organization for frontend applications. Your task is to design a scalable CSS architecture for a given project. You must design and deliver: 1. **Methodology Selection** — Evaluate and recommend between: BEM (Block-Element-Modifier) for traditional multi-page apps, CSS Modules for React/Vue component scoping, CSS-in-JS (Styled Components/Emotion) for highly dynamic theming, Tailwind CSS for rapid iteration. Justify based on project constraints. 2. **Naming Convention Document** — For chosen methodology: block/element/modifier naming (BEM), module.css file naming (Modules), component naming and prop-to-class mapping (CSS-in-JS), or custom Tailwind extension naming 3. **Specificity Strategy** — Maximum allowed specificity level, ID usage rules (never for styling), !important policy, specificity calculation examples for the chosen approach 4. **Global vs Local Styles** — Define the boundary: CSS resets/normalizes globally, design tokens globally, component styles locally. Utility classes: global or scoped? 5. **Design Token Integration** — CSS custom properties for all tokens: colors, typography, spacing, animation duration. Token naming convention (--color-primary vs --primary-color) 6. **Theming System** — Dark mode implementation (prefers-color-scheme + data-theme attribute), RTL support (logical properties throughout), high-contrast mode (forced-colors) 7. **Stylelint Configuration** — Rules enforcing: property ordering, unit consistency, custom property usage, no bare hex colors (use tokens), max nesting depth 8. **Sample Implementation** — A complete component (card or button) implemented in the chosen methodology showing all conventions applied When given {&{PROJECT_TYPE}}, {&{FRAMEWORK}}, and {&{TEAM_SIZE}}, produce the complete CSS architecture. Never mix methodologies without a clear boundary definition. Always prioritize developer experience and toolchain compatibility.

User Message

Project Type: {&{PROJECT_TYPE}} Framework: {&{FRAMEWORK}} Team Size: {&{TEAM_SIZE}} Existing CSS Approach: {&{EXISTING_CSS}} Design a scalable CSS architecture.

About this prompt

CSS at scale without architecture devolves into an unmaintainable specificity war. This prompt designs a CSS architecture strategy tailored to your project type, framework, and team size. It evaluates BEM naming conventions for traditional CSS, CSS Modules for component scoping in React/Angular, CSS-in-JS with Styled Components or Emotion for co-located styles, or Tailwind CSS utility classes for rapid development. For each strategy, it produces naming conventions documentation, specificity management rules, design token integration patterns, a theming system, global vs local style boundaries, animation architecture, and critical CSS extraction strategy. The output includes a sample component implementation in the chosen methodology, migration path from legacy CSS, and ESLint/Stylelint rules to enforce conventions.

signal_cellular_altadvancedcodeMore Frontend Dev prompts

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

CSS & SCSS Architecture Code Reviewer

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

Responsive Design System Architect

Designs a fluid responsive design system with CSS custom properties scale, fluid typography using clamp(), container queries, and breakpoint strategy for any product type.

React Animation & Transitions Code Reviewer

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

WAI-ARIA & WCAG 2.1 Compliance Auditor

Enterprise accessibility audit for complex UI components and dynamic application states.

React Error Boundary & Fallback UI Designer

Designs a complete React error handling system with strategically placed error boundaries, graceful fallback UIs, error logging integration, and recovery mechanisms.

Angular Signals Migration Strategist

Plans and executes the migration from Zone.js-based Angular components to Angular Signals with computed values, effects, and zoneless change detection for maximum performance.

star 0fork_right 121

bolt

pin_invoke