القائمة
Use when writing, debugging, or reviewing Tailwind CSS utilities, generated CSS drift, theme tokens, responsive variants, dark mode variants, or Goshtoso Tailwind v4 build behavior.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Use when integrating or updating Goshtoso in an external Go/templ application, including installing github.com/araihu/goshtoso, serving bundled assets, wiring head.Dependencies, importing components, choosing a Tailwind CSS strategy, or debugging missing Goshtoso styles, Alpine.js, HTMX, combobox behavior, or component config fields.
Use when writing, debugging, or reviewing Alpine.js markup — any x-* directive (x-data, x-init, x-show, x-bind/`:`, x-on/`@`, x-text, x-html, x-model, x-modelable, x-for, x-transition, x-effect, x-ignore, x-ref, x-cloak, x-teleport, x-if, x-id), magics ($el, $refs, $store, $watch, $dispatch, $nextTick, $root, $data, $id), globals (Alpine.data, Alpine.store, Alpine.bind), the init()/destroy() lifecycle, alpine:init, Alpine plugins (persist, intersect, collapse, focus, mask, morph), extending via Alpine.directive/Alpine.magic, the CSP build, or Alpine interacting with templ attribute escaping / htmx swaps.
Use when writing, debugging, or reviewing htmx markup — any hx-* attribute (hx-get/post/put/patch/delete, hx-swap, hx-target, hx-trigger, hx-vals, hx-boost, hx-swap-oob, hx-include, hx-sync, hx-indicator), htmx request/response headers (HX-Trigger, HX-Redirect, HX-Retarget, HX-Reswap, HX-Location, HX-Push-Url), the htmx JS API (htmx.ajax/process/on/swap/trigger), htmx events, polling, infinite scroll, lazy load, inline edit, active search, out-of-band swaps, or htmx interacting with Alpine.js / templ attribute escaping. Server returns HTML fragments, not JSON.
Use when writing, generating, debugging, or reviewing templ (.templ) files — Go's typed HTML templating. Covers the templ keyword, components, expressions { }, control flow (if/else/switch/for), attributes (conditional/boolean/spread/URL/JSON/class/style), template composition and { children... }, css blocks, script templates and passing Go data to JS (templ.JSFuncCall/JSONString/JSONScript/JSExpression), templ.Raw, render-once, context, the templ CLI (generate/fmt/lsp/--watch), code generation into *_templ.go, and templ's escaping/injection security model (SafeURL/SafeCSS/SafeClass). Also covers templ + Alpine.js / htmx attribute-escaping bugs.
| name | tailwindcss |
| description | Use when writing, debugging, or reviewing Tailwind CSS utilities, generated CSS drift, theme tokens, responsive variants, dark mode variants, or Goshtoso Tailwind v4 build behavior. |
Use this skill whenever a change touches Tailwind utility classes, css/main.css,
theme tokens, responsive behavior, dark mode styles, generated CSS, or the
Tailwind build.
assets/tailwind.version.just css after editing CSS, theme sources, or introducing new utility
classes in templ/Go code.just css regenerates the theme source and assets/styles.css.assets/styles.css is generated. Never hand-edit it.bg-surface text-on-surface dark:bg-surface-dark dark:text-on-surface-dark.0 unless the existing component pattern requires
otherwise.For Tailwind-affecting changes, run:
just css
go build -o bin/server ./site/cmd/server
Use focused tests or screenshots when the change affects layout, themes, responsive behavior, or component states.