| Understand SDC architecture and plugin system |
SDC Architecture |
Use this when you need to understand how Drupal discovers and loads components, debug component registration issues, or plan component organization across modules/themes. |
| Know component file structure and naming |
Component File Structure |
Use this when creating a new component, debugging "component not found" errors, or understanding automatic asset loading. |
| Define component YAML schema properly |
Component YAML Schema |
Use this when defining component metadata, specifying props and slots, or configuring library dependencies. |
| Write Twig templates for SDCs |
Twig Templates in SDCs |
Use this when writing component Twig templates, accessing props and slots, or working with the attributes object. |
| Add SCSS/CSS to components with proper scoping |
SCSS/CSS in SDCs |
Use this when adding styles to components, ensuring proper CSS scoping, or importing Bootstrap variables in Radix sub-themes. |
| Add JavaScript with Drupal.behaviors |
JavaScript in SDCs |
Use this when adding interactive behavior to components, implementing Drupal.behaviors pattern, or integrating with once() or other Drupal JS APIs. |
| Compose components (include/embed/render) |
Component Composition |
Use this when including one component in another, deciding between include(), embed, or render arrays, or nesting components. |
| Decide between props and slots |
Props vs Slots Decision Framework |
Use this when designing a component API, deciding if something should be a prop or slot, or debugging schema validation errors. |
| Create component variants (enum vs separate) |
Component Variants |
Use this when you need multiple visual variations of a component, deciding between prop-based variants vs separate components, or implementing the new variants API (Drupal 11.1+). |
| Replace Drupal templates with SDCs |
Replacing Templates with SDCs |
Use this when migrating existing Twig templates to SDC, overriding contrib module/theme components, or implementing field formatters with components. |
| Test SDCs (Storybook, visual regression) |
Testing SDCs |
Use this when setting up component development workflow, testing components in isolation, or implementing visual regression testing. |
| Optimize performance (libraries, caching) |
Performance |
Use this when optimizing component loading, debugging slow page loads with many components, or implementing caching strategies. |
| Prevent XSS and security issues |
Security |
Use this when handling user-generated content in components, passing data from untrusted sources, or working with attributes and HTML markup. |
| Avoid anti-patterns and code review issues |
Anti-Patterns |
Use this when code reviewing component implementations, debugging component issues, or establishing component development standards. |
| Integrate SDC with UI Patterns 2.x |
UI Patterns 2 Integration |
Use this when building SDCs that will be exposed to site builders via UI Patterns, making components available as blocks/layouts/views without custom PHP, or understanding how component.yml maps to UI Patterns discovery. |