How do I install the Agency Frontend Patterns skill?

Run npx skillmds@latest add modu-ai/agency-frontend-patterns in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Agency Frontend Patterns safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Agency Frontend Patterns?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Agency Frontend Patterns free to use?

Yes. Installing skills from SkillMD is free. This skill is licensed under Apache-2.

Who published Agency Frontend Patterns?

modu-ai (@modu-ai) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Agency Frontend Patterns by modu-ai

Name: Agency Frontend Patterns
Author: modu-ai

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.

modu-ai f7ab394 1.9 KB Updated Sep 17, 2026

File contents

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)

---name: agency-frontend-patternsdescription: 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.license: Apache-2.0---# Agency Frontend Patterns SkillGoverns 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 provided2. Follow design system tokens exactly — no ad-hoc values3. TDD approach: write tests first, then implement (RED-GREEN-REFACTOR)4. Accessibility is not optional — semantic HTML, ARIA labels, keyboard navigation5. 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)

Frequently asked questions