# ecomfe/spec architecture

> Architecture diagram of the GitHub repository ecomfe/spec, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-30). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/ecomfe/spec
- Repository: https://github.com/ecomfe/spec

## Overview

This repository is a collection of front-end development specifications, not an executable application. Its principal workflow is for an engineer to use the README as a catalog, then consult the relevant language, framework, project-structure, data-transfer, or chart standard. The README also names FECS as a lint-and-fix tool. The tree and README support these documented links; no implementation source was provided, so runtime behavior is not represented.

Main entry points: [`README.md`](https://github.com/ecomfe/spec/blob/master/README.md) (Standards Catalog), [`javascript-style-guide.md`](https://github.com/ecomfe/spec/blob/master/javascript-style-guide.md) (JavaScript Standard), [`es-next-style-guide.md`](https://github.com/ecomfe/spec/blob/master/es-next-style-guide.md) (ESNext Supplement), [`html-style-guide.md`](https://github.com/ecomfe/spec/blob/master/html-style-guide.md) (HTML Standard)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_catalog["Catalog"]
  node_readme["Standards Catalog<br/>[README.md]"]
end

subgraph group_languages["Language Standards"]
  node_javascript["JavaScript Standard"]
  node_esnext["ESNext Supplement"]
  node_html["HTML Standard"]
  node_css["CSS Standard<br/>[css-style-guide.md]"]
  node_less["Less Standard<br/>[less-code-style.md]"]
end

subgraph group_architecture["Project Standards"]
  node_modules["Module Standard<br/>[module.md]"]
  node_packages["Package Standard<br/>[package.md]"]
  node_directories["Directory Standard<br/>[directory.md]"]
end

subgraph group_specialized["Specialized Standards"]
  node_ejson["E-JSON Standard<br/>[e-json.md]"]
  node_charts["Chart Standard<br/>[chart.md]"]
  node_react["React Standard"]
end

node_engineer(("Engineer"))
node_fecs["FECS Tool"]

node_engineer -->|"opens catalog"| node_readme
node_readme -->|"lists standard"| node_javascript
node_readme -->|"lists supplement"| node_esnext
node_readme -->|"lists standard"| node_html
node_readme -->|"lists standard"| node_css
node_readme -->|"lists standard"| node_less
node_readme -->|"lists standard"| node_modules
node_readme -->|"lists standard"| node_packages
node_readme -->|"lists standard"| node_directories
node_readme -->|"lists standard"| node_ejson
node_readme -->|"lists standard"| node_charts
node_readme -->|"lists standard"| node_react
node_readme -->|"names tool"| node_fecs

click node_readme "https://github.com/ecomfe/spec/blob/master/README.md"
click node_javascript "https://github.com/ecomfe/spec/blob/master/javascript-style-guide.md"
click node_esnext "https://github.com/ecomfe/spec/blob/master/es-next-style-guide.md"
click node_html "https://github.com/ecomfe/spec/blob/master/html-style-guide.md"
click node_css "https://github.com/ecomfe/spec/blob/master/css-style-guide.md"
click node_less "https://github.com/ecomfe/spec/blob/master/less-code-style.md"
click node_modules "https://github.com/ecomfe/spec/blob/master/module.md"
click node_packages "https://github.com/ecomfe/spec/blob/master/package.md"
click node_directories "https://github.com/ecomfe/spec/blob/master/directory.md"
click node_ejson "https://github.com/ecomfe/spec/blob/master/e-json.md"
click node_charts "https://github.com/ecomfe/spec/blob/master/chart.md"
click node_react "https://github.com/ecomfe/spec/blob/master/react-style-guide.md"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_readme toneBlue
class node_javascript,node_esnext,node_html,node_css,node_less toneAmber
class node_modules,node_packages,node_directories toneMint
class node_ejson,node_charts,node_react toneRose
class node_engineer,node_fecs toneIndigo
```

## Components

### Catalog

- [Standards Catalog](https://github.com/ecomfe/spec/blob/master/README.md): `README.md`

### Language Standards

- [JavaScript Standard](https://github.com/ecomfe/spec/blob/master/javascript-style-guide.md): `javascript-style-guide.md`
- [ESNext Supplement](https://github.com/ecomfe/spec/blob/master/es-next-style-guide.md): `es-next-style-guide.md`
- [HTML Standard](https://github.com/ecomfe/spec/blob/master/html-style-guide.md): `html-style-guide.md`
- [CSS Standard](https://github.com/ecomfe/spec/blob/master/css-style-guide.md): `css-style-guide.md`
- [Less Standard](https://github.com/ecomfe/spec/blob/master/less-code-style.md): `less-code-style.md`

### Project Standards

- [Module Standard](https://github.com/ecomfe/spec/blob/master/module.md): `module.md`
- [Package Standard](https://github.com/ecomfe/spec/blob/master/package.md): `package.md`
- [Directory Standard](https://github.com/ecomfe/spec/blob/master/directory.md): `directory.md`

### Specialized Standards

- [E-JSON Standard](https://github.com/ecomfe/spec/blob/master/e-json.md): `e-json.md`
- [Chart Standard](https://github.com/ecomfe/spec/blob/master/chart.md): `chart.md`
- [React Standard](https://github.com/ecomfe/spec/blob/master/react-style-guide.md): `react-style-guide.md`

### Other components

- **Engineer**
- **FECS Tool**

## Connections

- Engineer → Standards Catalog: opens catalog (evidence: `README.md`)
- Standards Catalog → JavaScript Standard: lists standard (evidence: `README.md`)
- Standards Catalog → ESNext Supplement: lists supplement (evidence: `README.md`)
- Standards Catalog → HTML Standard: lists standard (evidence: `README.md`)
- Standards Catalog → CSS Standard: lists standard (evidence: `README.md`)
- Standards Catalog → Less Standard: lists standard (evidence: `README.md`)
- Standards Catalog → Module Standard: lists standard (evidence: `README.md`)
- Standards Catalog → Package Standard: lists standard (evidence: `README.md`)
- Standards Catalog → Directory Standard: lists standard (evidence: `README.md`)
- Standards Catalog → E-JSON Standard: lists standard (evidence: `README.md`)
- Standards Catalog → Chart Standard: lists standard (evidence: `README.md`)
- Standards Catalog → React Standard: lists standard (evidence: `README.md`)
- Standards Catalog → FECS Tool: names tool (evidence: `README.md`)