with one click
css
WHEN authoring CSS/styles/layout for web UI; outputs production-ready, accessible, maintainable CSS.
Menu
WHEN authoring CSS/styles/layout for web UI; outputs production-ready, accessible, maintainable CSS.
WHEN scraping iOS/macOS App Store data (apps, reviews, ratings, search); NOT for installing or testing apps; retrieves structured JSON data using iTunes/App Store APIs with curl and jq formatting
Comprehensive guide for implementing on-device AI models on iOS using Foundation Models and MLX Swift frameworks. Use WHEN building iOS apps with (1) Local LLM inference, (2) Vision Language Models (VLMs), (3) Text embeddings, (4) Image generation, (5) Tool/function calling, (6) Multi-turn conversations, (7) Custom model integration, or (8) Structured generation.
WHEN building ChatGPT apps using the OpenAI Apps SDK and MCP; create conversational, composable experiences with proper UX, UI, state management, and server patterns.
WHEN building SwiftUI views, managing state, setting up shared services, or making architectural decisions; NOT for UIKit or legacy patterns; provides pure SwiftUI data flow without ViewModels using @State, @Binding, @Observable, and @Environment.
WHEN building design systems or component libraries with Tailwind CSS; covers design tokens, CVA patterns and dark mode.
WHEN building React components/pages/apps; enforces scalable architecture, state management, API layer, performance patterns.
| name | css |
| description | WHEN authoring CSS/styles/layout for web UI; outputs production-ready, accessible, maintainable CSS. |
Production-grade CSS development with architectural principles, proper specificity management, and maintainable patterns.
| Topic | Guide |
|---|---|
| Specificity hierarchy, safe techniques, !important rules | specificity.md |
| rem vs px, margins, layout algorithms | units-margins.md |
| @extend vs mixins, refactoring workflow, code smells | preprocessors-refactoring.md |
| Architectural principles and common code patterns | patterns.md |
Use specificity.md when you need:
Use units-margins.md when you need:
Use preprocessors-refactoring.md when you need:
Use patterns.md when you need:
Is this a utility class that must be immutable?
├── Yes → Use !important (proactive)
└── No → Is there a specificity conflict?
├── Yes → Try: self-chain, attribute selector, or restructure cascade
└── No → Don't use !important
Should this scale with user font preferences?
├── Yes → Use rem
│ Examples: font-size, vertical text margins, media queries
└── No → Use px
Examples: borders, box-shadows, horizontal padding
Am I intentionally setting ALL related properties?
├── Yes → Shorthand is fine
└── No → Use longhand to avoid unintentional resets
Is this a layout component (grid, stack, container)?
├── Yes → Margin/gap is appropriate
└── No → Move spacing to parent or use utility classes
Are these selectors thematically related (same component)?
├── Yes → @extend might be acceptable
└── No → Use mixin (safer, doesn't disrupt source order)
Step 1: Identify - Is this frequently used and problematic?
├── Yes → Continue
└── No → Skip refactoring, focus elsewhere
Step 2: Isolate - Build new version separately
├── Use CodePen/jsFiddle
└── Don't build on top of existing CSS
Step 3: Implement - Reintegrate carefully
├── Component fixes → component's partial
└── Legacy conflicts → shame.css
Before committing CSS, verify:
ul.nav)