Frontend Development Skill

Автоматизация создания frontend компонентов с HTMX, Tailwind CSS, DaisyUI и WebSocket интеграцией.

When to Use

• Создать новый modal dialog
• Добавить HTMX trigger для API endpoint
• Создать новый JavaScript модуль
• Интегрировать WebSocket события
• Добавить Tailwind/DaisyUI компонент

Architecture Context

References:

• Templates: $ref
• HTMX Triggers: $ref
• JS Modules: $ref
• Performance: $ref

Key Patterns:

• HTMX partial rendering - NO full page reload
• Tailwind utility-first CSS - NO custom CSS
• DaisyUI components - Pre-built UI components
• WebSocket real-time updates - Live data sync
• Offline-first - IndexedDB for offline support

Commands

Command: create-modal

Usage:

Создай modal dialog для создания/редактирования <ResourceName> с HTMX и WebSocket интеграцией.

What It Does:

1. Creates Jinja2 template extending base.html
2. Adds HTMX attributes (hx-post, hx-target, hx-swap)
3. Adds DaisyUI modal structure
4. Integrates WebSocket broadcast listener
5. Adds loading states (hx-indicator)

Template Reference:

• templates/htmx-template.html - Base Jinja2 + HTMX template
• templates/tailwind-component.html - Tailwind/DaisyUI modal

Example:

• examples/modal-implementation.md - Real Article modal

Command: add-htmx-trigger

Usage:

Добавь HTMX trigger для endpoint POST /api/v1/<resource> с WebSocket broadcast.

What It Does:

1. Add hx-post/hx-get attribute to HTML element
2. Configure hx-target for partial update
3. Add hx-swap strategy (innerHTML/outerHTML/beforeend)
4. Integrate WebSocket listener for real-time updates
5. Add loading states

Template Reference:

• templates/htmx-trigger-example.html

Command: add-ws-integration

Usage:

Интегрируй WebSocket события для <event-name> в frontend.

What It Does:

1. Add event handler to budgetWSClient.js
2. Update UI elements on event receive
3. Handle offline queue if needed

Template Reference:

• templates/ws-client-integration.js

Validation Checklist

• Template extends base.html
• HTMX attributes configured (hx-*, hx-target, hx-swap)
• Tailwind classes used (NO custom CSS)
• DaisyUI components used correctly
• WebSocket integration added if needed
• Responsive design (mobile-first)
• Accessibility (ARIA labels, keyboard nav)
• Minified JS built (npm run minify:js)
• Built CSS (npm run build:css)
• HTMX trigger registered in htmx-triggers.yaml

Common Mistakes

Forgot to minify JS:

• Symptom: Production bundle huge, unoptimized
• Fix: npm run minify:js
• Reference: $ref

HTMX trigger without target:

• Symptom: Full page reload instead of partial update
• Fix: Add hx-target="#element-id"

Custom CSS instead of Tailwind:

• Symptom: Inconsistent styling, CSS bloat
• Fix: Use Tailwind utility classes

Related Skills

• api-development: Create API endpoints first
• websocket-realtime: Add real-time updates
• testing: Create e2e tests with Playwright

Quick Links

• Modal Performance Optimization: $ref
• HTMX Triggers Mapping: $ref
• JS Modules: $ref