Skip to main content
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.

terminalclaude-opus-4-6trending_upRisingcontent_copyUsed 154 timesby Community
cssbemcss-modulescss-architecturedesign-tokens
claude-opus-4-6
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_altadvancedfolderMore Frontend Dev prompts

Latest Insights

Stay ahead with the latest in prompt engineering.

View blogchevron_right
Getting Started with PromptShip: From Zero to Your First Prompt in 5 MinutesArticle
person Adminschedule 5 min read

Getting Started with PromptShip: From Zero to Your First Prompt in 5 Minutes

A quick-start guide to PromptShip. Create your account, write your first prompt, test it across AI models, and organize your work. All in under 5 minutes.

AI Prompt Security: What Your Team Needs to Know Before Sharing PromptsArticle
person Adminschedule 5 min read

AI Prompt Security: What Your Team Needs to Know Before Sharing Prompts

Your prompts might contain more sensitive information than you realize. Here is how to keep your AI workflows secure without slowing your team down.

Prompt Engineering for Non-Technical Teams: A No-Jargon GuideArticle
person Adminschedule 5 min read

Prompt Engineering for Non-Technical Teams: A No-Jargon Guide

You do not need to know how to code to write great AI prompts. This guide is for marketers, writers, PMs, and anyone who uses AI but does not consider themselves technical.

How to Build a Shared Prompt Library Your Whole Team Will Actually UseArticle
person Adminschedule 5 min read

How to Build a Shared Prompt Library Your Whole Team Will Actually Use

Most team prompt libraries fail within a month. Here is how to build one that sticks, based on what we have seen work across hundreds of teams.

GPT vs Claude vs Gemini: Which AI Model Is Best for Your Prompts?Article
person Adminschedule 5 min read

GPT vs Claude vs Gemini: Which AI Model Is Best for Your Prompts?

We tested the same prompts across GPT-4o, Claude 4, and Gemini 2.5 Pro. The results surprised us. Here is what we found.

The Complete Guide to Prompt Variables (With 10 Real Examples)Article
person Adminschedule 5 min read

The Complete Guide to Prompt Variables (With 10 Real Examples)

Stop rewriting the same prompt over and over. Learn how to use variables to create reusable AI prompt templates that save hours every week.

pin_invoke

Token Counter

Real-time tokenizer for GPT & Claude.

monitoring

Cost Tracking

Analytics for model expenditure.

api

API Endpoints

Deploy prompts as managed endpoints.

rule

Auto-Eval

Quality scoring using similarity benchmarks.