AgentX Frontend

简体中文 | English

AgentX Frontend is a production-oriented AGENTS.md template for modern frontend repositories.

Project Info

• Name: AgentX Frontend
• Type: Frontend AGENTS.md engineering template
• Status: Public template, initial release
• License: MIT
• Primary audience: Frontend teams using AI coding agents
• Keywords: agents.md, ai-coding, frontend, react, vite, typescript, security, figma, accessibility, testing

This project defines how AI coding agents should work in frontend codebases:

• protect environment variables and secrets
• inspect existing architecture before changing code
• follow TypeScript, React, Vite, and package-manager conventions
• preserve frontend system architecture and project configuration
• keep UI consistent with the existing design system
• centralize API and error handling behavior
• apply testing and accessibility expectations
• avoid unsafe filesystem and Git operations

Who This Is For

Use this template if your frontend project needs clear instructions for AI coding agents, especially in teams that care about security, maintainability, and consistent implementation style.

The default template is framework-aware but not framework-locked. It works best for React, Vite, TypeScript, pnpm, Ant Design, Zustand, React Router, CSS Modules, or similar stacks.

Highlights

• Ready-to-copy full AGENTS.md for frontend repositories
• Ready-to-copy Simplified Chinese full template in AGENTS.zh-CN.md
• Modular rule files for teams that already maintain agent instructions
• Frontend secret and environment variable protection rules
• System architecture, configuration, testing, accessibility, and Figma guidance
• Production-derived guardrails for file size, effect ownership, API error toasts, form keyboard behavior, targeted verification, and design restoration
• Angular-inspired engineering guardrails for feature boundaries, component responsibilities, state ownership, naming, form validation, and final self-checks
• English and Simplified Chinese README files
• No runtime dependency, build step, frontend starter, scaffolding CLI, backend service, or framework lock-in

Files

.
├── AGENTS.md
├── AGENTS.zh-CN.md
├── CHANGELOG.md
├── CONTRIBUTING.md
├── examples/
│   └── react-vite-antd.md
├── SECURITY.md
├── templates/
│   ├── AGENTS.accessibility.md
│   ├── AGENTS.architecture.md
│   ├── AGENTS.config.md
│   ├── AGENTS.frontend.md
│   ├── AGENTS.figma.md
│   ├── AGENTS.security.md
│   └── AGENTS.testing.md
├── .gitignore
├── LICENSE
├── README.md
└── README.zh-CN.md

Usage Modes

1. Copy The Full Template

Copy AGENTS.md into the root of your frontend repository.

For Chinese-speaking teams, copy AGENTS.zh-CN.md instead, or merge the relevant sections into your existing AGENTS.md.

This is recommended for new projects or teams without an existing agent policy. After copying, adjust:

• framework and package manager
• project structure
• UI library
• API client conventions
• test commands
• local development commands

Do not add private paths, production secrets, internal hostnames, or credentials to public agent instructions.

2. Compose From Modules

Use files in templates/ when your project already has an AGENTS.md.

Pick only the rules you need and merge them into your existing instructions:

• AGENTS.security.md: secrets and environment protection
• AGENTS.frontend.md: general frontend implementation rules
• AGENTS.architecture.md: frontend system architecture boundaries
• AGENTS.config.md: TypeScript, bundler, lint, env, and dependency rules
• AGENTS.testing.md: frontend testing strategy and verification
• AGENTS.accessibility.md: accessible UI implementation rules
• AGENTS.figma.md: design-to-code asset workflow

The full template also includes production workflow rules for repeated-error diagnosis, complexity budgets, feature boundaries, component responsibilities, state ownership, targeted verification, documentation updates, and safe Git behavior.

3. Adapt From Examples

Use examples/ for stack-specific conventions, such as React + Vite + Ant Design.

Recommended Structure

The template assumes a project similar to:

frontend/
├── src/
│   ├── apis/
│   ├── assets/
│   ├── components/
│   ├── hooks/
│   ├── layouts/
│   ├── pages/
│   ├── router/
│   ├── stores/
│   ├── styles/
│   ├── types/
│   └── utils/
├── public/
├── package.json
├── pnpm-lock.yaml
├── vite.config.ts
└── tsconfig.json

If your actual project differs, keep the rule but adapt the paths. Agents must follow the repository that exists, not force this reference structure.

Scope

This repository provides agent instructions and reusable rule modules only. It does not provide a frontend starter, scaffolding CLI, runtime template, or production application boilerplate.

Open Source Checklist

Before publishing your adapted version, check that it contains no:

• local absolute paths
• real project names or internal business names
• production domains, internal domains, or private hostnames
• tokens, cookies, API keys, private keys, or credentials
• internal scripts, private tools, or non-public workflows

License

MIT