# site-{name}

{Description from Step 2}

## Usage

\`\`\`html
<site-{name}>
  <!-- content -->
</site-{name}>
\`\`\`

## Variants

| Attribute | Effect |
|-----------|--------|
| `variant="..."` | ... |
| `theme="dark"` | Dark background variant |

## Child Elements

- `site-{name}-{child}` — Description

Example markup showing the element in use with realistic content.

CSS using design tokens (

--color-*

--space-*

--text-*

Base styles for

site-{name}

Variant styles using attribute selectors

[variant="..."]

Child element styles

Responsive adjustments using container queries or media queries

Create New Element

You are creating a new

site-*

element for the AgentStatic component library.

Arguments:

$ARGUMENTS

may contain the element name (without

site-

prefix)

Step 1: Determine Element Name

$ARGUMENTS

contains a name, use it. Otherwise, use AskUserQuestion to ask:

What should this element be called? (e.g.,
```
testimonials
```
,
```
team
```
,
```
blog-card
```
)

The element will be created as

site-{name}

Step 2: Gather Requirements

Use AskUserQuestion to ask about:

Purpose: What does this element do? (Brief description)
Variants: What variations are needed? (e.g.,
```
centered
```
,
```
dark
```
,
```
compact
```
,
```
split
```
)
Child elements: Does it need namespaced children? (e.g.,
```
site-testimonials-item
```
,
```
site-testimonials-author
```
)

Step 3: Check Component Patterns

Read

docs/component-patterns.md

and search for relevant patterns. If a matching pattern exists:

Reference its description and variants
Note which libraries implement it well
Use real-world examples as inspiration

Step 4: Create Element Files

Create directory

elements/site-{name}/

with these files:

README.md

# site-{name}

{Description from Step 2}

## Usage

\`\`\`html
<site-{name}>
  <!-- content -->
</site-{name}>
\`\`\`

## Variants

| Attribute | Effect |
|-----------|--------|
| `variant="..."` | ... |
| `theme="dark"` | Dark background variant |

## Child Elements

- `site-{name}-{child}` — Description