Western Friend Django/Wagtail Copilot
Provides GitHub Copilot with project-specific coding standards for the Western Friend Quaker publication website (westernfriend.org). Built with Django/Wagtail CMS, this skill enforces modern Python tooling (uv), accessibility compliance (WCAG 2.1), semantic markup, and Tailwind CSS/daisyUI component architecture.
Project Context
Western Friend is a Quaker publication providing resources and support for Religious Society of Friends communities. The website is built with:
**Framework**: Django with Wagtail CMS**Package Manager**: `uv` (not pip)**CSS Framework**: Tailwind CSS 4.x + daisyUI 5.x (migrating away from Bootstrap)**Testing**: Django test framework (not pytest/unittest)Instructions
When working on the Western Friend codebase, follow these guidelines:
1. Package Management
**Always use `uv` for Python package operations**, never `pip`Install packages: `uv add <package-name>`Sync dependencies: `uv sync`Update packages: `uv lock --upgrade`2. Testing
Use Django's built-in test framework exclusivelyRun tests via Django management command: `python manage.py test <path-to-test>`Example: `python manage.py test articles.tests.test_models`Do NOT suggest pytest or unittest alternatives3. Accessibility (WCAG 2.1 Compliance)
Follow [W3C WCAG 2.1](https://www.w3.org/TR/WCAG21/) and [ARIA 1.1](https://www.w3.org/TR/wai-aria-1.1/) specifications:
Use semantic HTML elements (see section 4)Add ARIA roles and attributes where semantic HTML is insufficientEnsure all interactive elements are keyboard-accessible (Tab, Enter, Space)Provide text alternatives for images (`alt` attributes)Maintain sufficient color contrast ratios (4.5:1 for normal text)Test with screen readers when implementing complex interactions4. Semantic HTML Markup
Use proper HTML5 semantic elements instead of generic divs:
**Structural Elements:**
`<header>` for page/section headers (not `<div class="header">`)`<nav>` for navigation menus`<main>` for primary page content (one per page)`<footer>` for page/section footers`<section>` for thematic groupings of content`<article>` for self-contained content (blog posts, articles)`<aside>` for sidebars or tangentially related content**Content Elements:**
`<h1>` through `<h6>` for hierarchical headings (never skip levels)`<figure>` and `<figcaption>` for images with captions`<time datetime="...">` for dates and times`<address>` for contact information`<blockquote>` for quotations**Interactive Elements:**
Use `<button>` for actions, `<a>` for navigationEnsure keyboard navigation works for all custom controls5. CSS Styling with Tailwind + daisyUI
**Modern Approach (Preferred):**
Use **Tailwind CSS 4.x** utility classes for stylingUse **daisyUI 5.x** components for UI elements (buttons, cards, modals, etc.)Fetch latest Tailwind/daisyUI documentation using Context7 tool when needed**Legacy Code:**
Some Bootstrap CSS may remain in the codebaseGradually migrate Bootstrap classes to Tailwind equivalents when touching old codeDo NOT add new Bootstrap classes**Global Styles:**
Centralized in `/theme/static_src/src/styles.css`Add new global styles here (body, headings, links, site-wide resets)Prefer global styles over component-specific duplicatesImport additional CSS files into `styles.css` as the main entry point**Rich Text Content:**
Wrap Wagtail `richtext` filter output in Tailwind's `prose` class: ```django
<div class="prose">
{{ page.body|richtext }}
</div>
```
The `prose` class auto-styles generated HTML (headings, links, lists, etc.)**Icons:**
Use Bootstrap Icons package (already installed)Icon classes follow pattern: `<i class="bi bi-<icon-name>"></i>`Examples: `bi-search`, `bi-house`, `bi-person`Maintain consistent icon usage across the project6. File Organization
Global CSS: `/theme/static_src/src/styles.css`Templates: Standard Django/Wagtail template structureTests: Colocated with Django apps (e.g., `articles/tests/`)7. Code Quality Checks
Before suggesting code changes, verify:
1. Package management uses `uv` commands
2. Tests use Django's test framework
3. HTML uses semantic elements appropriately
4. Accessibility requirements are met (keyboard nav, ARIA, alt text)
5. Tailwind/daisyUI classes are used (not Bootstrap)
6. Global styles are reused when available
7. Rich text content has `prose` class wrapper
8. Icons use `bi bi-*` pattern consistently
Example Usage
**Installing a New Package:**
```bash
Correct
uv add django-allauth
Incorrect
pip install django-allauth
```
**Running Tests:**
```bash
Correct
python manage.py test articles.tests.test_views
Incorrect
pytest articles/tests/test_views.py
```
**Semantic HTML:**
```html
<!-- Correct -->
<header class="navbar">
<nav>...</nav>
</header>
<main class="container">
<article class="prose">...</article>
</main>
<!-- Incorrect -->
<div class="header navbar">
<div class="nav">...</div>
</div>
<div class="container">
<div class="article">...</div>
</div>
```
**Styling with Tailwind + daisyUI:**
```html
<!-- Correct -->
<button class="btn btn-primary">Submit</button>
<div class="card bg-base-100 shadow-xl">...</div>
<!-- Incorrect (Bootstrap) -->
<button class="btn btn-primary">Submit</button> <!-- Same class name but Bootstrap version -->
<div class="card shadow">...</div>
```
Constraints
This skill is specific to the Western Friend Quaker publication website projectAssumes Django + Wagtail CMS environmentRequires `uv` package manager to be installedBootstrap CSS is deprecated but may exist in legacy codeAll new code must meet WCAG 2.1 Level AA accessibility standards