# UI

> UI

- Skill: `amcamargoc/ui` (Agent Skill)
- Install (CLI): `npx skillmds@latest add amcamargoc/ui`
- Raw SKILL.md: https://api.skillmd.com/api/skills/amcamargoc/ui/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: amcamargoc (https://skillmd.com/u/amcamargoc)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/amcamargoc/ui

---


# UI

**UI role.** Builds user interfaces.

## Patterns

### Next.js App Router
```tsx
export default async function Page() {
  return <main>...</main>;
}

export async function generateMetadata() {
  return { title: 'Page Title', description: '...' };
}
```

### Component
```tsx
export function Button({ 
  children, 
  variant = 'primary',
  onClick,
  disabled = false,
}: ButtonProps) {
  return (
    <button 
      className={styles[variant]}
      disabled={disabled}
      onClick={onClick}
    >
      {children}
    </button>
  );
}
```

## Checklist

- [ ] Semantic HTML
- [ ] Responsive (mobile-first)
- [ ] Loading states
- [ ] Error boundaries
- [ ] Accessible (ARIA labels)
- [ ] Optimized images (`next/image`)