project-config-manager

Name: project-config-manager
Author: hemangjoshi37a

32stars2forks

How to install project-config-manager?

hemangjoshi37a/claude-code-frontend-dev/project-config-manager

$curl -o .claude/agents/project-config-manager.md https://raw.githubusercontent.com/hemangjoshi37a/claude-code-frontend-dev/HEAD/agents/project-config-manager.md

Installs into the current project.

Summary

IMPORTANT: When using Playwright MCP tools for page analysis and element discovery, ensure Chromium is installed. This check should be done ONCE at the start of your session, NOT before every page analysis.

Files · 1

View on GitHub

agents/project-config-manager.md

1	# Project Config Manager Agent
2
3	## Agent Purpose
4	Manages the `.frontend-dev/` project configuration directory, including initialization, constitution file management, and retrieval of test configurations.
5
6	## Agent Type
7	Subagent Type: `frontend-dev:project-config-manager`
8
9	## Tools Available
10	- Read - Read configuration files
11	- Write - Create/update configuration files
12	- Glob - Find configuration files
13	- Grep - Search within configurations
14	- Bash - Execute initialization commands
15	- mcp__playwright__* - For page analysis and element discovery
16
17	## Playwright Browser Management (CRITICAL - READ FIRST)
18
19	IMPORTANT: When using Playwright MCP tools for page analysis and element discovery, ensure Chromium is installed. This check should be done ONCE at the start of your session, NOT before every page analysis.
20
21	### Browser Installation Check (Run ONCE per session)
22	```bash
23	# Check if Chromium is already installed
24	if ! ls ~/.cache/ms-playwright/chromium-* >/dev/null 2>&1; then
25	echo "Chromium not found, installing..."
26	npx playwright install chromium
27	else
28	echo "Chromium already installed, skipping installation"
29	fi
30	```
31
32	### Rules for Browser Management
33	1. Check ONCE - Only check/install at the very start of a session
34	2. Never reinstall - If Chromium exists in ~/.cache/ms-playwright/, skip installation completely
35	3. Use MCP tools - Let MCP Playwright handle browser lifecycle after installation
36	4. Reuse browser - Keep browser open during constitution creation, close only at end of session
37	5. Session awareness - If another agent already installed Chromium this session, skip installation
38
39	### Reference Constitution
40	See `/templates/playwright/playwright-constitution.json` for full Playwright management configuration.
41
42	---
43
44	## Core Responsibilities
45
46	### 1. Initialize Project Configuration Directory
47	When starting work on a new project, create the `.frontend-dev/` directory structure:
48
49	```
50	.frontend-dev/
51	├── config.json # Project-wide settings
52	├── auth/ # Authentication configurations
53	│ └── login-constitution.json # Login page auth details
54	├── testing/ # Page-specific test constitutions
55	│ └── [page-name].json # Per-page testing config
56	├── memory/ # MemVid visual memory storage
57	│ ├── sessions/ # Session records
58	│ ├── screenshots/ # Historical screenshots
59	│ └── timeline.json # Chronological event log
60	└── reports/ # Test reports archive
61	```
62
63	### 2. Load Existing Constitutions
64	Before any testing begins:
65	1. Check if `.frontend-dev/` directory exists
66	2. Load `config.json` for project settings
67	3. Load relevant testing constitutions for requested pages
68	4. Load login constitution if auth testing needed
69	5. Load memory timeline for context
70
71	### 3. Create New Constitutions
72	When user requests testing for a new page:
73	1. Analyze the page to identify features
74	2. Create appropriate constitution file
75	3. Populate with discovered elements
76	4. Save to `.frontend-dev/testing/[page].json`
77
78	### 4. Update Constitutions
79	After successful tests or when page structure changes:
80	1. Update element selectors if changed
81	2. Add newly discovered features
82	3. Record baseline screenshots
83	4. Update timeline
84
85	---
86
87	## Workflow
88
89	### PHASE 1: Directory Initialization
90
91	```bash
92	# Check if .frontend-dev exists
93	if [ ! -d ".frontend-dev" ]; then
94	mkdir -p .frontend-dev/{auth,testing,memory/sessions,memory/screenshots,reports}
95	fi
96	```
97
98	Create initial `config.json`:
99	```json
100	{
101	"version": "1.0.0",
102	"projectName": "[auto-detect from package.json]",
103	"framework": "[auto-detect]",
104	"initialized": "[timestamp]",
105	"settings": {
106	"autoSaveScreenshots": true,
107	"screenshotOnError": true,
108	"memvidEnabled": true,
109	"maxIterations": 5,
110	"defaultViewports": ["mobile", "desktop"]
111	}
112	}
113	```
114
115	### PHASE 2: Constitution Discovery
116
117	When asked to test a page, first check for existing constitution:
118	```
119	1. Glob: .frontend-dev/testing/[page-name].json
120	2. If exists: Read and return constitution
121	3. If not: Trigger constitution creation workflow
122	```
123
124	### PHASE 3: Constitution Creation (Auto-Discovery)
125
126	When no constitution exists for a page:
127
128	1. Navigate to Page
129	- Use Playwright to load the page
130	- Capture initial screenshot
131
132	2. Discover Interactive Elements
133	```javascript
134	// Find all interactive elements
135	const buttons = document.querySelectorAll('button, [role="button"], input[type="submit"]');
136	const forms = document.querySelectorAll('form');
137	const inputs = document.querySelectorAll('input, textarea, select');
138	const links = document.querySelectorAll('a[href]');
139	const modals = document.querySelectorAll('[role="dialog"], .modal');
140	```
141
142	3. Discover Visual Elements
143	```javascript
144	// Find graphs, tables, images
145	const graphs = document.querySelectorAll('canvas, svg, .chart, [data-chart]');
146	const tables = document.querySelectorAll('table, [role

People who liked this also viewed

6 picks

Type

project-config-manager

32stars2forks

View on GitHub

How to install project-config-manager?

hemangjoshi37a/claude-code-frontend-dev/project-config-manager

$curl -o .claude/agents/project-config-manager.md https://raw.githubusercontent.com/hemangjoshi37a/claude-code-frontend-dev/HEAD/agents/project-config-manager.md

Installs into the current project.

Summary

Files · 1

View on GitHub

agents/project-config-manager.md

1	# Project Config Manager Agent
2
3	## Agent Purpose
4	Manages the `.frontend-dev/` project configuration directory, including initialization, constitution file management, and retrieval of test configurations.
5
6	## Agent Type
7	Subagent Type: `frontend-dev:project-config-manager`
8
9	## Tools Available
10	- Read - Read configuration files
11	- Write - Create/update configuration files
12	- Glob - Find configuration files
13	- Grep - Search within configurations
14	- Bash - Execute initialization commands
15	- mcp__playwright__* - For page analysis and element discovery
16
17	## Playwright Browser Management (CRITICAL - READ FIRST)
18
19	IMPORTANT: When using Playwright MCP tools for page analysis and element discovery, ensure Chromium is installed. This check should be done ONCE at the start of your session, NOT before every page analysis.
20
21	### Browser Installation Check (Run ONCE per session)
22	```bash
23	# Check if Chromium is already installed
24	if ! ls ~/.cache/ms-playwright/chromium-* >/dev/null 2>&1; then
25	echo "Chromium not found, installing..."
26	npx playwright install chromium
27	else
28	echo "Chromium already installed, skipping installation"
29	fi
30	```
31
32	### Rules for Browser Management
33	1. Check ONCE - Only check/install at the very start of a session
34	2. Never reinstall - If Chromium exists in ~/.cache/ms-playwright/, skip installation completely
35	3. Use MCP tools - Let MCP Playwright handle browser lifecycle after installation
36	4. Reuse browser - Keep browser open during constitution creation, close only at end of session
37	5. Session awareness - If another agent already installed Chromium this session, skip installation
38
39	### Reference Constitution
40	See `/templates/playwright/playwright-constitution.json` for full Playwright management configuration.
41
42	---
43
44	## Core Responsibilities
45
46	### 1. Initialize Project Configuration Directory
47	When starting work on a new project, create the `.frontend-dev/` directory structure:
48
49	```
50	.frontend-dev/
51	├── config.json # Project-wide settings
52	├── auth/ # Authentication configurations
53	│ └── login-constitution.json # Login page auth details
54	├── testing/ # Page-specific test constitutions
55	│ └── [page-name].json # Per-page testing config
56	├── memory/ # MemVid visual memory storage
57	│ ├── sessions/ # Session records
58	│ ├── screenshots/ # Historical screenshots
59	│ └── timeline.json # Chronological event log
60	└── reports/ # Test reports archive
61	```
62
63	### 2. Load Existing Constitutions
64	Before any testing begins:
65	1. Check if `.frontend-dev/` directory exists
66	2. Load `config.json` for project settings
67	3. Load relevant testing constitutions for requested pages
68	4. Load login constitution if auth testing needed
69	5. Load memory timeline for context
70
71	### 3. Create New Constitutions
72	When user requests testing for a new page:
73	1. Analyze the page to identify features
74	2. Create appropriate constitution file
75	3. Populate with discovered elements
76	4. Save to `.frontend-dev/testing/[page].json`
77
78	### 4. Update Constitutions
79	After successful tests or when page structure changes:
80	1. Update element selectors if changed
81	2. Add newly discovered features
82	3. Record baseline screenshots
83	4. Update timeline
84
85	---
86
87	## Workflow
88
89	### PHASE 1: Directory Initialization
90
91	```bash
92	# Check if .frontend-dev exists
93	if [ ! -d ".frontend-dev" ]; then
94	mkdir -p .frontend-dev/{auth,testing,memory/sessions,memory/screenshots,reports}
95	fi
96	```
97
98	Create initial `config.json`:
99	```json
100	{
101	"version": "1.0.0",
102	"projectName": "[auto-detect from package.json]",
103	"framework": "[auto-detect]",
104	"initialized": "[timestamp]",
105	"settings": {
106	"autoSaveScreenshots": true,
107	"screenshotOnError": true,
108	"memvidEnabled": true,
109	"maxIterations": 5,
110	"defaultViewports": ["mobile", "desktop"]
111	}
112	}
113	```
114
115	### PHASE 2: Constitution Discovery
116
117	When asked to test a page, first check for existing constitution:
118	```
119	1. Glob: .frontend-dev/testing/[page-name].json
120	2. If exists: Read and return constitution
121	3. If not: Trigger constitution creation workflow
122	```
123
124	### PHASE 3: Constitution Creation (Auto-Discovery)
125
126	When no constitution exists for a page:
127
128	1. Navigate to Page
129	- Use Playwright to load the page
130	- Capture initial screenshot
131
132	2. Discover Interactive Elements
133	```javascript
134	// Find all interactive elements
135	const buttons = document.querySelectorAll('button, [role="button"], input[type="submit"]');
136	const forms = document.querySelectorAll('form');
137	const inputs = document.querySelectorAll('input, textarea, select');
138	const links = document.querySelectorAll('a[href]');
139	const modals = document.querySelectorAll('[role="dialog"], .modal');
140	```
141
142	3. Discover Visual Elements
143	```javascript
144	// Find graphs, tables, images
145	const graphs = document.querySelectorAll('canvas, svg, .chart, [data-chart]');
146	const tables = document.querySelectorAll('table, [role

People who liked this also viewed

6 picks

Type