Generate Drupal 10+ Single Directory Components with YAML, Twig, and optional CSS/JS.
npx skills add https://github.com/AJV009/drupal-devkit --skill drupal-sdc
Please help me install this Agent Skill. Skill: drupal-sdc Source: https://github.com/AJV009/drupal-devkit/tree/main/plugins/drupal-core/skills/drupal-sdc Command: npx skills add https://github.com/AJV009/drupal-devkit --skill drupal-sdc
Single Directory Components (SDC) provide a standardized, reusable UI component model for Drupal themes, reducing duplication and improving maintainability.
Create a new SDC component directory under your theme’s components/ following the guidelines, then implement its YAML, Twig, and optional CSS/JS and test rendering.
High-intent search queries and answers about installing and using this skill.
A Single Directory Component (SDC) in Drupal theming is a standardized UI model that stores Twig templates, YAML metadata, CSS, and JS in one folder. This reduces duplication and improves maintainability for reusable components.
Structure a Drupal SDC component folder under your theme's components/ directory. Include a {name}.component.yml file for metadata, a {name}.twig template, and optional {name}.css and {name}.js files within that single directory.
Yes, you can use Single Directory Components in Drupal 10 and above. SDC requires Drupal 10+ to standardize theming by composing atoms, molecules, and organisms into a consistent directory structure.
The required metadata for a Drupal SDC YAML file includes frontmatter properties for the component name and description. This prop-based metadata drives Twig templates and accessibility within the {name}.component.yml file.
Build reusable Drupal UI components fast by using Single Directory Components to enforce a strict folder layout. Generate self-contained directories with Twig, YAML, CSS, and JS to standardize frontend architecture across atoms, molecules, and organisms.
No, CSS and JavaScript files are optional for a Drupal SDC component. A component only requires a YAML metadata file and a Twig template, though you can add CSS, JS, scripts, and asset directories for extended functionality.
AJV009Implement Storybook documentation and testing for Drupal Single Directory Components.
zivtechAudit Drupal theme code for architectural debt and D10+ readiness.
FacturaScriptsDevelop FacturaScripts frontend features using Twig templates, JavaScript, CSS, and assets.
AJV009Standardize Drupal Twig templates with naming conventions and BEM CSS patterns.
