Agent Skills — Structuring Prompts for Reliable AI Web Output

What Are Agent Skills?

Agent skills are reusable instruction files that teach AI coding agents domain-specific workflows. In OpenCode, skills are defined as SKILL.md files placed in specific directories. The agent discovers them automatically and can load them on-demand via the skill tool.

Skills are discovered from these locations (searched in order):

Project:  .opencode/skills/<name>/SKILL.md
Global:   ~/.config/opencode/skills/<name>/SKILL.md
Compat:   .claude/skills/<name>/SKILL.md
Compat:   ~/.agents/skills/<name>/SKILL.md

Anatomy of a SKILL.md

Every skill file has two parts: YAML frontmatter and markdown body.

---
name: frontend-design
description: >-
  Create distinctive, production-grade frontend
  interfaces with high design quality.
metadata:
  audience: web-developers
  framework: tailwind-daisyui
---

The name must be 1–64 characters, lowercase alphanumeric with single hyphen separators. The description is what the agent sees when deciding which skill to load — make it specific and actionable.

Required Fields

Field	Required	Purpose
`name`	Yes	Unique identifier, matches directory name
`description`	Yes	What the skill does, used for agent selection
`license`	Optional	SPDX identifier (MIT, Apache-2.0, etc.)
`compatibility`	Optional	Target platform (e.g. “opencode”)
`metadata`	Optional	String-to-string map for extra context

Essential Skills for Web Development

Here are the skills that make the biggest difference when building websites with AI:

frontend-design — Design Quality Control

The most important skill for web output. Teaches the agent to:

Choose a bold aesthetic direction before writing code
Use distinctive, characterful fonts (never Inter/Roboto/Arial)
Apply daisyUI semantic colors instead of raw Tailwind color names
Design with motion: staggered reveals, scroll triggers, hover states
Break predictable layouts with asymmetry and overlap

This site was built with the frontend-design skill loaded.

daisyUI Component Reference

A skill that embeds the daisyUI component catalog. Key contents:

Every component class name, part name, and modifier
Syntax examples for each component
Semantic color rules (use primary once, base-* for backgrounds)
Component discovery protocol: match intent, not literal names

daisyUI provides this as daisyui.com/llms.txt

PageWeave Platform Reference

A skill documenting PageWeave MCP tools and conventions:

MCP tool reference for every platform operation
Liquid templating syntax and available variables
Design rules: daisyUI semantic colors, Google Fonts proxying
Editing workflow: always get_page before update_page
Version management: pin, revert, preview sessions

Prompt Engineering for Web Output

Beyond skills, how you phrase your prompts dramatically affects output quality. Here are the patterns that work:

1. Be Specific About Design

Bad: “Make a nice landing page”

Good: “Dark editorial landing page. Crimson Pro display font, JetBrains Mono body. Amber primary accent. Asymmetric hero with rotating text. Card grid with hover lift. Staggered scroll reveals.”

2. Specify daisyUI Component Names

Bad: “Add a navigation menu with dropdowns”

Good: “Use daisyUI megamenu component with horizontal layout on desktop, vertical dropdown on mobile”

3. Provide Constraints as Guardrails

Constraints:
- Use daisyUI semantic colors only (primary, base-100, etc.)
- Never use raw Tailwind color names (blue-500, gray-800)
- Never use Inter, Roboto, Arial, or system-ui fonts
- Never use purple gradients on white backgrounds
- Primary color used once per page — most important element
- Every interactive element must have hover and focus states

4. Use Plan Mode First

OpenCode Desktop’s Plan Mode (toggle in the UI) lets the agent propose changes without executing. Always plan complex changes first:

"Create a plan for adding a blog section to this site.
Include: data table schema, template page design,
navigation integration, and resource links.
Use daisyUI card components for post previews."

Skill Permissions

Control which skills agents can use via opencode.json:

{
  "permission": {
    "skill": {
      "*": "allow",
      "internal-*": "deny",
      "experimental-*": "ask"
    }
  }
}

Permission levels: allow (load immediately), deny (hidden from agent), ask (prompt user for approval). You can configure these in OpenCode Desktop’s Settings panel under Permissions.

Key insight: The quality of AI-generated web output is directly proportional to the quality of your skills and prompts. A well-crafted frontend-design skill can transform generic output into distinctive, production-grade design. The difference between “AI slop” and a beautiful site is often just a good SKILL.md.

Resources: Full skill documentation at opencode.ai/docs/skills/. See the PageWeave MCP server instructions for the platform-specific skill that ships with the MCP integration.

← Nocode + AI Deployment →