원클릭으로 Manus에서 모든 스킬 실행

using-unocss-with-templ

스타0

포크0

업데이트2026년 3월 8일 02:18

Integrates UnoCSS atomic CSS engine with Go templ templates for static sites. Use when setting up UnoCSS in templ projects, configuring uno.config.ts for .templ files, using utility classes in templ components, or building static sites with Go and atomic CSS.

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

mazrean

mazrean/agent-skills

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

Using UnoCSS with Templ

Integrate UnoCSS, an instant on-demand atomic CSS engine, with Go's templ templating language to build static sites with utility-first CSS.

Use this skill when setting up UnoCSS for templ projects, configuring CSS extraction from .templ files, or building static sites with Go and atomic CSS.

Quick Start

1. Install Dependencies

# Install templ
go install github.com/a-h/templ/cmd/templ@latest

# Install UnoCSS CLI
npm install -D unocss @unocss/cli

2. Create UnoCSS Config

// uno.config.ts
import { defineConfig, presetUno } from "unocss";

export default defineConfig({
  presets: [presetUno()],
  content: {
    filesystem: ["**/*.templ"],
  },
});

3. Add Package Scripts

{
  "scripts": {
    "css:build": "unocss \"**/*.templ\" -o static/uno.css",
    "css:watch": "unocss \"**/*.templ\" -o static/uno.css --watch"
  }
}

4. Use Classes in Templ

// components/button.templ
package components

templ Button(text string) {
    <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
        { text }
    </button>
}

5. Include CSS in Layout

// layouts/base.templ
package layouts

templ Base(title string) {
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8"/>
            <title>{ title }</title>
            <link rel="stylesheet" href="/static/uno.css"/>
        </head>
        <body class="min-h-screen bg-gray-100">
            { children... }
        </body>
    </html>
}

6. Build Process

# Development (parallel)
templ generate --watch &
npm run css:watch &

# Production
templ generate
npm run css:build
go build -o app .

Core Concepts

UnoCSS Overview

UnoCSS is an atomic CSS engine that:

Generates CSS on-demand from utility class usage
Has no runtime overhead (build-time only)
Supports multiple presets (Tailwind-compatible, icons, attributify)
Extracts classes from any file type via CLI

How Extraction Works

UnoCSS CLI scans files for utility class patterns and generates only the CSS needed:

# Scan specific patterns
unocss "components/**/*.templ" "pages/**/*.templ" -o static/uno.css

# With minification
unocss "**/*.templ" -o static/uno.css --minify

Templ Integration

Templ files use standard CSS class syntax:

// Static classes
<div class="flex items-center gap-4">

// Dynamic classes (extracted if static)
<div class={ "p-4", templ.KV("bg-red-500", hasError) }>

// Conditional classes
if isActive {
    <span class="text-green-500">Active</span>
} else {
    <span class="text-gray-500">Inactive</span>
}

CLI Commands

# Basic usage
unocss "**/*.templ" -o static/uno.css

# Watch mode for development
unocss "**/*.templ" -o static/uno.css --watch

# With preflights (reset styles)
unocss "**/*.templ" -o static/uno.css --preflights

# Minified output
unocss "**/*.templ" -o static/uno.css --minify

# Custom config file
unocss "**/*.templ" -o static/uno.css -c uno.config.ts

Common Patterns

Responsive Design

templ Card() {
    <div class="p-4 md:p-6 lg:p-8">
        <h2 class="text-lg md:text-xl lg:text-2xl">Title</h2>
    </div>
}

Dark Mode

templ ThemeAwareCard() {
    <div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white">
        Content
    </div>
}

State Variants

templ InteractiveButton() {
    <button class="bg-blue-500 hover:bg-blue-600 active:bg-blue-700 focus:ring-2">
        Click me
    </button>
}

Grid Layout

templ ProductGrid(products []Product) {
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        for _, p := range products {
            @ProductCard(p)
        }
    </div>
}

Safelist for Dynamic Classes

When classes are fully dynamic, use safelist:

// uno.config.ts
export default defineConfig({
  safelist: [
    // Always include these
    "bg-red-500",
    "bg-green-500",
    "bg-blue-500",
    // Generate ranges
    ...Array.from({ length: 5 }, (_, i) => `p-${i + 1}`),
  ],
});

Reference Files

Configuration: See UNO-CONFIG.md
Development workflow: See WORKFLOW.md
Presets guide: See PRESETS.md

Project Structure

my-project/
├── components/
│   ├── button.templ
│   └── card.templ
├── layouts/
│   └── base.templ
├── pages/
│   └── home.templ
├── static/
│   └── uno.css          # Generated
├── uno.config.ts
├── package.json
├── go.mod
└── main.go

Troubleshooting

Classes Not Generated

Check file patterns in CLI command match your .templ files
Verify content.filesystem in config includes .templ
Use safelist for fully dynamic class names

Classes Not Applied

Ensure CSS file is linked in HTML head
Check browser dev tools for CSS loading
Verify class names match UnoCSS syntax

Watch Mode Issues

Run templ and UnoCSS watch in separate terminals or use a process manager:

# Using npm-run-all
npm install -D npm-run-all

{
  "scripts": {
    "dev": "run-p dev:*",
    "dev:templ": "templ generate --watch",
    "dev:css": "unocss \"**/*.templ\" -o static/uno.css --watch",
    "dev:go": "go run ."
  }
}

이 저장소의 다른 Skills

같은 저장소

using-grafana-mcp

mazrean/agent-skills

Operate the official grafana/mcp-grafana server from an agent. Use when the conversation has Grafana MCP tools available and you need to query Prometheus/Loki/Pyroscope, search or edit dashboards, manage alert rules, or generate Grafana deeplinks. Covers tool selection, parameter conventions (datasource UID, time ranges, limits, query types), and context-saving patterns for dashboard work.

2026-05-090

designing-isucon-architecture

mazrean/agent-skills

Analyzes an existing ISUCON-style application, designs an optimal infrastructure and architecture redesign that respects every ISUCON rule, and emits the proposal as a self-contained Agent Skill that another Claude session can read and execute. Use when starting an ISUCON contest or practice, drafting a contest-day architecture plan before touching code, or when the user asks to "design the architecture", "plan the topology", or "produce an implementation skill" for an ISUCON problem.

2026-05-090

writing-isucon-arch-subagent-tasks

mazrean/agent-skills

Decomposes the apply-skill produced by designing-isucon-architecture into atomic tasks, materializes one Claude Code subagent per task, and emits a dispatcher slash command that fires the subagents in dependency order (parallel where the graph allows). Use when an applying-isucon-arch-<slug> skill exists and the team wants the architecture rollout to run as orchestrated subagent jobs rather than a single linear human-driven session, or when the user asks to "create subagents for this ISUCON design", "wire the ISUCON apply-skill into Claude Code agents", or "split the rollout into parallel agent tasks".

2026-05-090

checking-wsh-vrt

mazrean/agent-skills

Runs Visual Regression Testing (VRT) locally to prevent disqualification in Web Speed Hackathon. Captures screenshots, compares against baselines, updates snapshots, and validates visual integrity after performance optimizations. Use when optimizing WSH apps, running VRT checks, updating VRT baselines, or investigating VRT failures.

2026-05-090

planning-wsh-improvements

mazrean/agent-skills

Analyzes a Web Speed Hackathon project, researches each improvement topic in depth, stores research as Agent Skills, and generates executable Claude Code commands for each optimization. Use when starting WSH optimization, creating an optimization roadmap, or generating executable improvement commands.

2026-05-090

porting-isucon-rust-to-go

mazrean/agent-skills

Ports an ISUCON-style Rust reference implementation to Go (Echo) using parallel subagents. Use when the contest provides a Rust reference but the team wants to compete in Go, or when the user asks to migrate a Rust web app to Go Echo endpoint by endpoint. Preserves API URI, request/response shape, frontend static files, the isuwari reboot/retest daemon, and the isuadmin account exactly as distributed (changing them = disqualification).

2026-05-090

name	using-unocss-with-templ
description	Integrates UnoCSS atomic CSS engine with Go templ templates for static sites. Use when setting up UnoCSS in templ projects, configuring uno.config.ts for .templ files, using utility classes in templ components, or building static sites with Go and atomic CSS.

Using UnoCSS with Templ

Integrate UnoCSS, an instant on-demand atomic CSS engine, with Go's templ templating language to build static sites with utility-first CSS.

Use this skill when setting up UnoCSS for templ projects, configuring CSS extraction from .templ files, or building static sites with Go and atomic CSS.

Quick Start

1. Install Dependencies

# Install templ
go install github.com/a-h/templ/cmd/templ@latest

# Install UnoCSS CLI
npm install -D unocss @unocss/cli

2. Create UnoCSS Config

// uno.config.ts
import { defineConfig, presetUno } from "unocss";

export default defineConfig({
  presets: [presetUno()],
  content: {
    filesystem: ["**/*.templ"],
  },
});

3. Add Package Scripts

{
  "scripts": {
    "css:build": "unocss \"**/*.templ\" -o static/uno.css",
    "css:watch": "unocss \"**/*.templ\" -o static/uno.css --watch"
  }
}

4. Use Classes in Templ

// components/button.templ
package components

templ Button(text string) {
    <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
        { text }
    </button>
}

5. Include CSS in Layout

// layouts/base.templ
package layouts

templ Base(title string) {
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8"/>
            <title>{ title }</title>
            <link rel="stylesheet" href="/static/uno.css"/>
        </head>
        <body class="min-h-screen bg-gray-100">
            { children... }
        </body>
    </html>
}

6. Build Process

# Development (parallel)
templ generate --watch &
npm run css:watch &

# Production
templ generate
npm run css:build
go build -o app .

Core Concepts

UnoCSS Overview

UnoCSS is an atomic CSS engine that:

Generates CSS on-demand from utility class usage
Has no runtime overhead (build-time only)
Supports multiple presets (Tailwind-compatible, icons, attributify)
Extracts classes from any file type via CLI

How Extraction Works

UnoCSS CLI scans files for utility class patterns and generates only the CSS needed:

# Scan specific patterns
unocss "components/**/*.templ" "pages/**/*.templ" -o static/uno.css

# With minification
unocss "**/*.templ" -o static/uno.css --minify

Templ Integration

Templ files use standard CSS class syntax:

// Static classes
<div class="flex items-center gap-4">

// Dynamic classes (extracted if static)
<div class={ "p-4", templ.KV("bg-red-500", hasError) }>

// Conditional classes
if isActive {
    <span class="text-green-500">Active</span>
} else {
    <span class="text-gray-500">Inactive</span>
}

CLI Commands

# Basic usage
unocss "**/*.templ" -o static/uno.css

# Watch mode for development
unocss "**/*.templ" -o static/uno.css --watch

# With preflights (reset styles)
unocss "**/*.templ" -o static/uno.css --preflights

# Minified output
unocss "**/*.templ" -o static/uno.css --minify

# Custom config file
unocss "**/*.templ" -o static/uno.css -c uno.config.ts

Common Patterns

Responsive Design

templ Card() {
    <div class="p-4 md:p-6 lg:p-8">
        <h2 class="text-lg md:text-xl lg:text-2xl">Title</h2>
    </div>
}

Dark Mode

templ ThemeAwareCard() {
    <div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white">
        Content
    </div>
}

State Variants

templ InteractiveButton() {
    <button class="bg-blue-500 hover:bg-blue-600 active:bg-blue-700 focus:ring-2">
        Click me
    </button>
}

Grid Layout

templ ProductGrid(products []Product) {
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        for _, p := range products {
            @ProductCard(p)
        }
    </div>
}

Safelist for Dynamic Classes

When classes are fully dynamic, use safelist:

// uno.config.ts
export default defineConfig({
  safelist: [
    // Always include these
    "bg-red-500",
    "bg-green-500",
    "bg-blue-500",
    // Generate ranges
    ...Array.from({ length: 5 }, (_, i) => `p-${i + 1}`),
  ],
});

Reference Files

Configuration: See UNO-CONFIG.md
Development workflow: See WORKFLOW.md
Presets guide: See PRESETS.md

Project Structure

my-project/
├── components/
│   ├── button.templ
│   └── card.templ
├── layouts/
│   └── base.templ
├── pages/
│   └── home.templ
├── static/
│   └── uno.css          # Generated
├── uno.config.ts
├── package.json
├── go.mod
└── main.go

Troubleshooting

Classes Not Generated

Check file patterns in CLI command match your .templ files
Verify content.filesystem in config includes .templ
Use safelist for fully dynamic class names

Classes Not Applied

Ensure CSS file is linked in HTML head
Check browser dev tools for CSS loading
Verify class names match UnoCSS syntax

Watch Mode Issues

Run templ and UnoCSS watch in separate terminals or use a process manager:

# Using npm-run-all
npm install -D npm-run-all

{
  "scripts": {
    "dev": "run-p dev:*",
    "dev:templ": "templ generate --watch",
    "dev:css": "unocss \"**/*.templ\" -o static/uno.css --watch",
    "dev:go": "go run ."
  }
}