# Agency Frontend Patterns

> Frontend development patterns for AI Agency projects covering tech stack preferences, component architecture, file structure, and coding conventions. Self-evolves to match user's preferred frameworks and coding style.

- Skill: `modu-ai/agency-frontend-patterns` (Agent Skill)
- Install (CLI): `npx skillmds@latest add modu-ai/agency-frontend-patterns`
- Raw SKILL.md: https://api.skillmd.com/api/skills/modu-ai/agency-frontend-patterns/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: Apache-2.0
- Author: modu-ai (https://skillmd.com/u/modu-ai)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/modu-ai/agency-frontend-patterns

---


# Agency Frontend Patterns Skill

Governs all code implementation decisions for AI Agency projects. Ensures consistent tech stack usage, component architecture, and coding conventions aligned with user preferences.

---

## Static Zone

### Identity

**Purpose**: Define and enforce frontend development patterns, file structure conventions, and code quality standards for agency project implementation.

**Input Contract**:
- Design specification (from designer output: `design-spec.md`)
- Copy document (from copywriter output: `copy.md`)
- Tech preferences (from `.agency/context/tech-preferences.md`)

**Output Contract**:
- Production-ready code files following design system
- Component architecture with proper separation of concerns
- Responsive implementation with mobile-first approach
- Accessible markup meeting WCAG 2.1 AA

**Owner**: `.agency/context/tech-preferences.md`

### Core Principles

> Derived from Brand Context. Never auto-modified. Manual editing only.

1. NEVER modify copy text from copywriter output — implement exactly as provided
2. Follow design system tokens exactly — no ad-hoc values
3. TDD approach: write tests first, then implement (RED-GREEN-REFACTOR)
4. Accessibility is not optional — semantic HTML, ARIA labels, keyboard navigation
5. Performance budget: Lighthouse >= 80 on all metrics

---

## Dynamic Zone

> Rules, Anti-Patterns, and Heuristics below evolve via user feedback.

### Rules

(No rules yet. Rules will be added as the system learns from user feedback.)

### Anti-Patterns

(No anti-patterns yet.)

### Heuristics

(No heuristics yet.)

---

## Evolution Log

- v1.0.0: Initial creation (Static Zone from Brand Context, empty Dynamic Zone)