skills.rest
AJV009
AJV009COMMUNITY
Explore all skills by this author →
Website𝕏@alphons009GitHub

drupal-frontend-expert

Automate Drupal frontend theming tasks for Twig templates and SDC components.

1|Updated Mar 22, 2026
Search Tags:#theming#accessibility#frontend#components#drupal#twig#sdc
One-click install
npx skills add https://github.com/AJV009/drupal-devkit --skill drupal-frontend-expert
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: drupal-frontend-expert
Source: https://github.com/AJV009/drupal-devkit/tree/main/plugins/drupal-core/skills/drupal-frontend-expert
Command: npx skills add https://github.com/AJV009/drupal-devkit --skill drupal-frontend-expert

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Drupal frontend theming and UI development often requires coordinating Twig templates, SDC components, and accessibility patterns across themes and modules; this Skill consolidates best practices and tooling to streamline frontend Drupal work.

Core Features & Use Cases

  • Twig template architecture, preprocess patterns, and library management for consistent theming.
  • SDC (Single Directory Components) workflow, enabling self-contained components with templates, CSS, and JS.
  • Accessibility-first theming, responsive design, and admin-theme considerations across Olivero/Claro-like patterns.

Quick Start

Enable the SDC workflow and begin by adding a component under components/ with its template, styles, and script.

Frequently Asked Questions about drupal-frontend-expert

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build Single Directory Components in Drupal 10 and 11?▼

You can implement Drupal theming patterns by writing Twig templates, using preprocess hooks to manipulate variables, and managing libraries to ensure consistent frontend architecture and component rendering across your site.

How do I implement Twig template architecture and preprocess patterns for Drupal theming?▼

You can implement Drupal theming patterns by writing Twig templates, using preprocess hooks to manipulate variables, and managing libraries to ensure consistent frontend architecture and component rendering across your site.

What is the best way to improve accessibility in Drupal Twig templates and SDC components?▼

Yes, you can apply component-driven UI builds and accessibility improvements to Drupal admin themes by utilizing responsive design practices and theming patterns similar to the core Olivero and Claro theme architectures.

Can I use SDC component workflows with Drupal admin themes like Claro?▼

Yes, you can apply component-driven UI builds and accessibility improvements to Drupal admin themes by utilizing responsive design practices and theming patterns similar to the core Olivero and Claro theme architectures.

What is the SDC component schema and how do I manage libraries for Drupal components?▼

The SDC component schema defines the structure for self-contained Drupal components, while library management coordinates the CSS and JavaScript assets attached to Twig templates and preprocess patterns for rendering.

Related Skills

Explore More Software Engineering Skills→
AJV009AJV009
1

twig-templating

Standardize Drupal Twig templates with naming conventions and BEM CSS patterns.

Community
Intermediate
schalkneethlingschalkneethling
7

component-scaffolding

Scaffold Drupal/Twig component skeletons with web components and Miyagi validation.

Community
Basic
proofoftomproofoftom
1

drupal-theming

Create Drupal front-end output with render arrays, Twig templates, and the Libraries API.

Community
Intermediate
monch1962monch1962
3

frontend-patterns

Provides reusable React and Next.js frontend patterns for UI architecture.

Community
Intermediate