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.

NEVER modify copy text from copywriter output — implement exactly as provided
Follow design system tokens exactly — no ad-hoc values
TDD approach: write tests first, then implement (RED-GREEN-REFACTOR)
Accessibility is not optional — semantic HTML, ARIA labels, keyboard navigation
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)

agency-frontend-patterns