drupal-frontend

Q: How to install drupal-frontend?

Create the skills directory: mkdir -p .claude/skills. Then run: mkdir -p .claude/skills && curl -o .claude/skills/drupal-frontend.md https://raw.githubusercontent.com/Omedia/drupal-skill/main/SKILL.md. Finally, /drupal-frontend in Claude Code.

Q: What is drupal-frontend best for?

drupal-frontend is categorized under Development. It covers: frontend, drupal, theming, twig, css, javascript, templates, preprocessing.

New

Community RegistryDevelopmentby Drupal Skills Team · MIT

Drupal Front End Specialist skill for theme development, Twig templates, and rendering system (Drupal 8-11+). Use when working with Drupal themes, Twig syntax, preprocessing, CSS/JS libraries, or template suggestions.

First seen 5/22/2026

Summary

This skill provides expert guidance on Drupal front-end development, covering theme creation, Twig template customization, preprocessing functions, and asset management.

It helps developers build maintainable, performant Drupal themes by leveraging best practices for the rendering system and template suggestions.

Install & Usage

Create the skills directory

mkdir -p .claude/skills

Download the skill file

mkdir -p .claude/skills && curl -o .claude/skills/drupal-frontend.md https://raw.githubusercontent.com/Omedia/drupal-skill/main/SKILL.md

Invoke in Claude Code

/drupal-frontend

Use Cases

Creating a custom Drupal theme from scratch with proper info.yml and libraries.yml files.

Writing and overriding Twig templates for nodes, blocks, fields, and other entities.

Implementing preprocessing functions in .theme or .module files to alter template variables.

Adding and managing CSS/JS libraries with dependencies and conditional loading.

Working with template suggestions to create page-specific or view-mode-specific templates.

Debugging rendering issues using Twig debug mode and Kint output.

Usage Examples

/drupal-frontend Create a new theme called 'my_custom_theme' with Bootstrap 5 as a base and add a libraries.yml file for global CSS and JS.

/drupal-frontend Override the node.html.twig template to add a custom class to the article tag based on the node type.

/drupal-frontend Write a preprocess function in mytheme.theme that adds a variable 'is_promoted' to all node templates.

View source on GitHub

frontenddrupalthemingtwigcssjavascripttemplatespreprocessing

Security Audits

LicensePassSourceWarnRepositoryPass

Frequently Asked Questions

What is drupal-frontend?

This skill provides expert guidance on Drupal front-end development, covering theme creation, Twig template customization, preprocessing functions, and asset management. It helps developers build maintainable, performant Drupal themes by leveraging best practices for the rendering system and template suggestions.

How to install drupal-frontend?

To install drupal-frontend: create the skills directory (mkdir -p .claude/skills), then run: mkdir -p .claude/skills && curl -o .claude/skills/drupal-frontend.md https://raw.githubusercontent.com/Omedia/drupal-skill/main/SKILL.md. Finally, /drupal-frontend in Claude Code.

What is drupal-frontend best for?

drupal-frontend is a skill categorized under Development. It is designed for: frontend, drupal, theming, twig, css, javascript, templates, preprocessing. Created by Drupal Skills Team.

What can I use drupal-frontend for?

drupal-frontend is useful for: Creating a custom Drupal theme from scratch with proper info.yml and libraries.yml files.; Writing and overriding Twig templates for nodes, blocks, fields, and other entities.; Implementing preprocessing functions in .theme or .module files to alter template variables.; Adding and managing CSS/JS libraries with dependencies and conditional loading.; Working with template suggestions to create page-specific or view-mode-specific templates.; Debugging rendering issues using Twig debug mode and Kint output..