تشغيل أي مهارة في Manus بنقرة واحدة

$pwd:

templ-htmx

Name: Templ Htmx
Author: Xe

// Build interactive hypermedia-driven applications with templ and HTMX. Use when creating dynamic UIs, real-time updates, AJAX interactions, mentions 'HTMX', 'dynamic content', or 'interactive templ app'.

تشغيل في Manus

$ git log --oneline --stat

stars:٥

forks:٠

updated:٢١ مارس ٢٠٢٦ في ١٦:٠٤

مستكشف الملفات

5 ملفات

SKILL.md

readonly

name	templ-htmx
description	Build interactive hypermedia-driven applications with templ and HTMX. Use when creating dynamic UIs, real-time updates, AJAX interactions, mentions 'HTMX', 'dynamic content', or 'interactive templ app'.

Templ + HTMX Integration

Use progressive disclosure: first make one interaction work, then scale to advanced behaviors.

Level 1: First Working Flow

Use this skill for server-driven interactivity without a JS framework.

Mount HTMX assets in server setup.
Include HTMX script in the layout.
Add hx-* attributes to a component.
Return a partial component from the handler.
Branch full-page vs fragment responses with HTMX request detection.

import "within.website/x/web/htmx"

func main() {
    mux := http.NewServeMux()
    htmx.Mount(mux)
}

import "within.website/x/web/htmx"

templ Layout() {
    <html>
        <head>@htmx.Use()</head>
        <body>{ children... }</body>
    </html>
}

Level 2: Core HTMX Controls

hx-get / hx-post: trigger requests.
hx-target: pick where response lands.
hx-swap: choose replacement strategy (innerHTML, outerHTML, beforeend).
hx-trigger: control event timing (click, change, every 5s, etc).
hx-indicator: show loading state.

Level 3: Advanced Server Patterns

Detect HTMX requests with htmx.Is(r) and return fragments.
Use out-of-band updates for multi-region refreshes.
Use response headers (HX-Trigger, HX-Redirect) for client behavior.
Preserve progressive enhancement: endpoints should still work without JS.

func profileHandler(w http.ResponseWriter, r *http.Request) {
    if htmx.Is(r) {
        _ = components.ProfilePanel().Render(r.Context(), w)
        return
    }
    _ = components.ProfilePage().Render(r.Context(), w)
}

Escalate to Other Skills

Need handler/routing structure: use templ-http.
Need reusable component APIs: use templ-components.
Need template syntax help: use templ-syntax.

References

Quick start: resources/quick-start.md
Interaction patterns: resources/interaction-patterns.md
Advanced responses: resources/advanced-responses.md
HTMX docs: https://htmx.org/docs/
Hypermedia Systems: https://hypermedia.systems/

related-skills.json

نفس المستودع

xe-design-system.md

from "Xe/skills"

A warm, Gruvbox-rooted design system derived from xeiaso.net. Use for personal-blog, technical-educator, or character-driven content that wants serif headlines, parchment surfaces, and chat-bubble layouts. Distinctive: magenta inverted link hovers, boxy 2px-radius sticker avatars, no gradients except the SponsorCard top rule.

2026-04-245

gorm-dao.md

from "Xe/skills"

Write GORM data access code using the DAO (Data Access Object) pattern. Use when creating database models, writing queries, setting up GORM, adding CRUD methods, or working with gorm.io in Go services. Also use when the user mentions "DAO", "data access", "ORM", "database models", "GORM", or is building a Go service that talks to a relational database.

2026-03-315

templ-components.md

from "Xe/skills"

Create reusable templ UI components with props, children, and composition patterns. Use when building UI components, creating component libraries, mentions 'button component', 'card component', or 'reusable templ components'.

2026-03-215

templ-http.md

from "Xe/skills"

Integrate templ components with Go HTTP server using net/http. Use when connecting templ to web server, creating HTTP handlers, mentions 'templ server', 'HTTP routes', or 'serve templ components'.

2026-03-215

templ-syntax.md

from "Xe/skills"

Learn and write templ component syntax including expressions, conditionals, loops, and Go integration. Use when writing .templ files, learning templ syntax, or mentions 'templ component', 'templ expressions', or '.templ file syntax'.

2026-03-215

xe-go-style.md

from "Xe/skills"

Write Go code following the conventions and patterns used in the within.website/x repository, including CLI patterns, error handling, logging with slog, HTTP handlers, and testing.

2026-03-215

package.json

"author": "Xe"

"repository": "Xe/skills"

فتح مستودع GitHub عرض مستودعات المنشئ

$ install --global

$ download --local

تشغيل في Manus

$ useful --forSOC

مطوّرو الويبمهن الحاسوب والرياضيات15-1254L4

Templ + HTMX Integration

Use progressive disclosure: first make one interaction work, then scale to advanced behaviors.

Level 1: First Working Flow

Use this skill for server-driven interactivity without a JS framework.

Mount HTMX assets in server setup.

Include HTMX script in the layout.

Add hx-* attributes to a component.

Return a partial component from the handler.

Branch full-page vs fragment responses with HTMX request detection.

import "within.website/x/web/htmx" func main() { mux := http.NewServeMux() htmx.Mount(mux) }

import "within.website/x/web/htmx" templ Layout() { <html> <head>@htmx.Use()</head> <body>{ children... }</body> </html> }

Level 2: Core HTMX Controls

hx-get / hx-post: trigger requests.

hx-target: pick where response lands.

hx-swap: choose replacement strategy (innerHTML, outerHTML, beforeend).

hx-trigger: control event timing (click, change, every 5s, etc).

hx-indicator: show loading state.

Level 3: Advanced Server Patterns

Detect HTMX requests with htmx.Is(r) and return fragments.

Use out-of-band updates for multi-region refreshes.

Use response headers (HX-Trigger, HX-Redirect) for client behavior.

Preserve progressive enhancement: endpoints should still work without JS.

func profileHandler(w http.ResponseWriter, r *http.Request) { if htmx.Is(r) { _ = components.ProfilePanel().Render(r.Context(), w) return } _ = components.ProfilePage().Render(r.Context(), w) }

Escalate to Other Skills

Need handler/routing structure: use templ-http.

Need reusable component APIs: use templ-components.

Need template syntax help: use templ-syntax.

References

Quick start: resources/quick-start.md

Interaction patterns: resources/interaction-patterns.md

Advanced responses: resources/advanced-responses.md

HTMX docs: https://htmx.org/docs/

Hypermedia Systems: https://hypermedia.systems/

templ-htmx

Templ + HTMX Integration

Level 1: First Working Flow

Level 2: Core HTMX Controls

Level 3: Advanced Server Patterns

Escalate to Other Skills

References

المزيد من هذا المستودع

المزيد من هذا المستودع

Templ + HTMX Integration

Level 1: First Working Flow

Level 2: Core HTMX Controls

Level 3: Advanced Server Patterns

Escalate to Other Skills

References