{
  "markdown": "# Angular Best Practices\n\n> **Archived:** Angular now provides an official skills resource at [github.com/angular/skills](https://github.com/angular/skills). This project is no longer maintained. Use the official resource instead.\n\nConcise, actionable Angular best practices optimized for AI agents and LLMs.\n\n**Web app:** [angular-best-practices-web.vercel.app](https://angular-best-practices-web.vercel.app/)\n\n## Installation\n\nInstall into your AI coding agent:\n\n```bash\nnpx skills add alfredoperez/angular-best-practices\n```\n\nSupports: Claude Code, Cursor, Codex, OpenCode, VS Code Copilot, and 30+ more agents.\n\n### Available Skills\n\n| Skill | Description |\n|-------|-------------|\n| `angular-best-practices` | Core Angular rules (~45KB) |\n| `angular-best-practices-ngrx` | NgRx state management |\n| `angular-best-practices-signalstore` | SignalStore patterns |\n| `angular-best-practices-tanstack` | TanStack Query patterns |\n\nInstall optional library skills alongside the core:\n\n```bash\nnpx skills add alfredoperez/angular-best-practices-ngrx\nnpx skills add alfredoperez/angular-best-practices-signalstore\nnpx skills add alfredoperez/angular-best-practices-tanstack\n```\n\n### Manual Installation\n\nOr copy `AGENTS.md` directly to your project:\n\n| Agent | Location |\n|-------|----------|\n| Claude Code | `.claude/AGENTS.md` |\n| Cursor | `.cursor/rules/angular.md` |\n| VS Code Copilot | `.github/copilot-instructions.md` |\n\n## Purpose\n\nThis repository provides **curated rules** for building performant, maintainable Angular applications. Every rule is **human-reviewed for accuracy and token efficiency**. Each rule is designed to be:\n\n- **Concise**: Under 50 lines with 1-3 line code examples\n- **Actionable**: Clear \"incorrect\" vs \"correct\" patterns\n- **AI-optimized**: Efficient token usage for LLM context windows\n\n## How It Works\n\n```\n┌─────────────────────────────────────────────────────────────────┐\n│                         rules/                                  │\n│  ┌──────────┐  ┌──────────┐  ┌──────────┐  ┌──────────┐        │\n│  │ angular/ │  │  core/   │  │optimize/ │  │   ts/    │  ...   │\n│  │          │  │          │  │          │  │          │        │\n│  └────┬─────┘  └────┬─────┘  └────┬─────┘  └────┬─────┘        │\n│       │             │             │             │               │\n│       └─────────────┴─────────────┴─────────────┘               │\n│                             │                                   │\n│                             ▼                                   │\n│                    ┌─────────────────┐                          │\n│                    │   build.ts      │                          │\n│                    │ (TypeScript)    │                          │\n│                    └────────┬────────┘                          │\n│                             │                                   │\n│                             ▼                                   │\n│                    ┌─────────────────┐                          │\n│                    │   AGENTS.md     │                          │\n│                    │  (generated)    │                          │\n│                    │                 │                          │\n│                    └─────────────────┘                          │\n└─────────────────────────────────────────────────────────────────┘\n```\n\nAI agents load `AGENTS.md` to get all best practices in a single, structured document with:\n- Numbered sections and subsections (1.1, 1.2, etc.)\n- Table of contents with anchors\n- Impact levels (CRITICAL, HIGH, MEDIUM, LOW)\n- Code examples for each rule\n\n## Rule Categories\n\n| # | Category | Prefix | Impact |\n|---|----------|--------|--------|\n| 1 | Eliminating Waterfalls | `async-`, `opt-async-` | CRITICAL |\n| 2 | Bundle Optimization | `bundle-` | CRITICAL |\n| 3 | JavaScript Performance | `opt-` | HIGH |\n| 4 | TypeScript Best Practices | `ts-` | MEDIUM |\n| 5 | Signals & Reactivity | `signal-` | HIGH |\n| 6 | Component Patterns | `component-` | HIGH |\n| 7 | RxJS Patterns | `rxjs-` | HIGH |\n| 8 | Change Detection | `cd-` | HIGH |\n| 9 | Template Optimization | `template-` | HIGH |\n| 10 | SSR & Hydration | `ssr-` | HIGH |\n| 11 | Forms | `form-` | MEDIUM |\n| 12 | NgRx State Management | `ngrx-` | HIGH |\n| 13 | SignalStore | `signalstore-` | HIGH |\n| 14 | TanStack Query | `tanstack-` | HIGH |\n| 15 | Architecture | `arch-` | HIGH |\n| 16 | Testing | `test-` | HIGH |\n| 17 | Infrastructure | `core/`, `di-` | MEDIUM |\n| 18 | UI & Accessibility | `ui/`, `a11y-` | MEDIUM |\n| 19 | Data Handling | `http-`, `mapper-` | MEDIUM |\n\n## Folder Structure\n\n```\nangular-best-practices/\n├── AGENTS.md                    # Generated output for AI agents\n├── rules/\n│   ├── _sections.md             # Category definitions & ordering\n│   ├── _template.md             # Template for new rules\n│   ├── angular/                 # Angular-specific rules\n│   │   ├── signal-*.md          # Signals & reactivity\n│   │   ├── component-*.md       # Component patterns\n│   │   ├── rxjs-*.md            # RxJS patterns\n│   │   ├── cd-*.md              # Change detection\n│   │   ├── ngrx-*.md            # NgRx state\n│   │   ├── signalstore-*.md     # SignalStore\n│   │   ├── tanstack-*.md        # TanStack Query\n│   │   ├── form-*.md            # Forms\n│   │   ├── ssr-*.md             # Server-side rendering\n│   │   ├── arch-*.md            # Architecture\n│   │   └── template-*.md        # Template patterns\n│   ├── core/                    # Infrastructure\n│   │   ├── routing-*.md         # Routing patterns\n│   │   ├── pattern-*.md         # Design patterns\n│   │   ├── error-handling.md\n│   │   ├── security.md\n│   │   └── observability.md\n│   ├── optimization/            # Performance\n│   │   ├── bundle-*.md          # Bundle optimization\n│   │   └── opt-*.md             # Runtime optimization\n│   ├── typescript/              # TypeScript\n│   │   └── ts-*.md\n│   ├── testing/                 # Testing\n│   │   └── test-*.md\n│   ├── ui/                      # UI & Accessibility\n│   │   ├── a11y.md\n│   │   ├── dialogs.md\n│   │   ├── loading.md\n│   │   └── theming.md\n│   └── data/                    # Data handling\n│       ├── http.md\n│       └── mapper-*.md\n├── packages/\n│   └── angular-best-practices-build/\n│       └── src/\n│           ├── build.ts         # Generates AGENTS.md\n│           ├── parser.ts        # Parses rule files\n│           ├── config.ts        # Section mapping\n│           └── types.ts         # TypeScript interfaces\n└── metadata.json                # Version, org, abstract\n```\n\n## Rule File Format\n\nEach rule file follows this structure:\n\n```markdown\n---\ntitle: Rule Title\nimpact: HIGH\nimpactDescription: Brief impact description\ntags: tag1, tag2, tag3\n---\n\n## Rule Title\n\nOne sentence description of the rule.\n\n**Incorrect:**\n\n\\`\\`\\`typescript\n// 1-3 lines showing the anti-pattern\n\\`\\`\\`\n\n**Correct:**\n\n\\`\\`\\`typescript\n// 1-3 lines showing the correct pattern\n\\`\\`\\`\n```\n\n**Constraints:**\n- Description: 1 sentence max\n- Code examples: 3 lines max each\n- Code blocks: 2 max (incorrect + correct)\n- Total file length: Under 50 lines\n\n## Usage\n\n### For AI Agents\n\nPoint your AI agent to `AGENTS.md`:\n\n```\n# In your agent's context\nRead: https://raw.githubusercontent.com/.../AGENTS.md\n```\n\nOr include in your project's `.claude/` or similar config.\n\n### Building AGENTS.md\n\n```bash\nnpm install\nnpm run build\n```\n\nThis parses all rule files and generates a structured `AGENTS.md`.\n\n## Creating New Rules\n\n1. Copy `rules/_template.md` to appropriate folder\n2. Use correct prefix for the category (e.g., `signal-` for signals)\n3. Keep code examples to 1-3 lines\n4. Run `npm run build` to regenerate AGENTS.md\n\n## Design Philosophy\n\n### Why Concise Rules?\n\nAI agents have limited context windows. Verbose documentation wastes tokens. Each rule is optimized for:\n\n- **Quick comprehension**: One glance to understand\n- **Copy-paste ready**: Code examples work as-is\n- **Impact clarity**: Know the priority immediately\n\n### Why Granular Files?\n\n- **Focused changes**: Edit one rule without touching others\n- **Easy discovery**: Find rules by prefix (`signal-*`, `rxjs-*`)\n- **Selective loading**: Future support for loading only needed categories\n\n### Why Not Guides?\n\nLong-form tutorials are better served by official Angular docs. This repo focuses on **actionable rules** that AI agents can apply immediately.\n\n## Customization\n\n### Excluding Library-Specific Rules\n\nNot using NgRx, SignalStore, or TanStack Query? Fork and build a custom AGENTS.md:\n\n```bash\n# Clone your fork\ngit clone https://github.com/YOUR_USERNAME/angular-best-practices\ncd angular-best-practices\n\n# Install dependencies\nnpm install\n\n# Build without NgRx rules\nnpm run build -- --exclude ngrx\n\n# Build without multiple libraries\nnpm run build -- --exclude ngrx,signalstore,tanstack\n```\n\n### Library Tags\n\n| Tag | Exclude If... |\n|-----|---------------|\n| `ngrx` | Not using NgRx for state |\n| `signalstore` | Not using SignalStore |\n| `tanstack` | Not using TanStack Query |\n\n### Beta Rules (Excluded by Default)\n\nSome rules are experimental and excluded from the default build:\n\n| Tag | Description |\n|-----|-------------|\n| `patterns` | Design patterns (Facade, Repository, Strategy) |\n\nThese rules are still being refined. To include them:\n\n```bash\n# Include all rules (no exclusions)\nnpm run build -- --include-all\n\n# Or explicitly exclude only what you don't want\nnpm run build -- --exclude ngrx\n```\n\n### Validation\n\nThe build process validates all rules against formatting standards:\n- Max 50 lines per rule file\n- Max 2 code blocks\n- Max 10 lines per code block\n- Required frontmatter: title, impact, tags\n\nTo skip validation during development:\n\n```bash\nnpm run build:skip-validation\n```\n\n## Inspired By\n\n- [Vercel's react-best-practices](https://github.com/vercel-labs/agent-skills) - 62 rules, all concise\n- [Agent Skills specification](https://agentskills.io/)\n\n## Contributing\n\n1. Check existing rules to avoid duplicates\n2. Follow the template format exactly\n3. Keep examples minimal and focused\n4. Run the build to verify formatting\n\n## License\n\nMIT\n",
  "bytes": 10097,
  "sha": "33c0decbb7a585b5b78c1dfa469b74c7c4cbc0482715825779e6ee49567adcb0",
  "repo_slug": "alfredoperez/angular-best-practices",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/skl_alfredoperez_angular_best_practices_angu_ca962895/readme"
}