django-components

Create reusable Django UI components with slots and Alpine.js or HTMX integration.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/felipe3dfx/dotfiles --skill django-components-felipe3dfx
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: django-components
Source: https://github.com/felipe3dfx/dotfiles/tree/main/skills/django-components
Command: npx skills add https://github.com/felipe3dfx/dotfiles --skill django-components-felipe3dfx

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill streamlines the creation and management of reusable UI components within Django projects, promoting code organization and maintainability.

Core Features & Use Cases

  • Component Structure: Enforces a consistent directory structure for components (components/{name}/{name}.py, components/{name}/{name}.html).
  • Python Class Registration: Guides the registration of components using @component.register and context data management.
  • Template Composition: Demonstrates how to use slots ({% slot %}, {% fill %}) for dynamic content and composition.
  • Integration: Shows integration with Alpine.js and HTMX for enhanced interactivity and dynamic content loading.
  • Use Case: Develop a reusable "card" component that can display different content and actions, easily integrated across multiple Django templates.

Quick Start

Create a new reusable UI component by defining its Python class and HTML template within the components/ directory.

Frequently Asked Questions about django-components

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

FAQPage Schema
How do I build reusable UI components in Django?

You can build reusable UI components in Django by defining a Python class with the @component.register decorator and an associated HTML template inside a structured components directory. This approach enforces consistent organization for maintainable template composition.

How do you use slots for dynamic template composition in Django components?

Slots in Django components allow dynamic template composition by using {% slot %} tags in the component template and {% fill %} tags to inject content. This mechanism enables flexible content distribution and reusable UI structures across multiple views.

Can I integrate Alpine.js and HTMX with Django UI components?

Yes, Django UI components can integrate with Alpine.js and HTMX to add enhanced interactivity and dynamic content loading. This combination allows you to build reactive front-end features directly within your reusable Django template structures.

What is the standard directory structure for Django components?

The standard directory structure for Django components organizes files under a components folder, placing the Python class and HTML template inside a named subdirectory such as components/{name}/{name}.py and components/{name}/{name}.html to maintain project standards.

Why use Python class registration for Django template composition?

Python class registration for Django template composition uses the @component.register decorator to manage context data and component logic. This method keeps your UI code organized, making it easier to maintain and reuse complex display elements across different templates.