claude-code-autoconfig 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.claude/.mcp.json +3 -0
- package/.claude/commands/autoconfig.md +176 -0
- package/.claude/commands/commit-and-push.md +20 -0
- package/.claude/commands/enable-retro.md +54 -0
- package/.claude/commands/gls.md +21 -0
- package/.claude/commands/show-guide.md +52 -0
- package/.claude/commands/sync-claude-md.md +60 -0
- package/.claude/commands/test.md +11 -0
- package/.claude/feedback/FEEDBACK.md +28 -0
- package/.claude/guide/autoconfig.guide.html +1740 -0
- package/.claude/settings.json +51 -0
- package/.claude/settings.local.json +19 -0
- package/CLAUDE.md +7 -0
- package/LICENSE +21 -0
- package/README.md +122 -0
- package/bin/cli.js +64 -0
- package/package.json +35 -0
|
@@ -0,0 +1,176 @@
|
|
|
1
|
+
<!-- @description The command you just ran. Analyzes your project and populates CLAUDE.md with real context. Re-run anytime your stack changes. -->
|
|
2
|
+
|
|
3
|
+
# Autoconfig
|
|
4
|
+
|
|
5
|
+
Analyze this project and configure Claude Code with real context.
|
|
6
|
+
|
|
7
|
+
## Step 1: Detect Environment
|
|
8
|
+
|
|
9
|
+
**Operating System:**
|
|
10
|
+
Check the platform and note it for command syntax:
|
|
11
|
+
- Windows → use `del`, `rmdir`, backslashes, `.cmd`/`.ps1` scripts
|
|
12
|
+
- macOS/Linux → use `rm`, `mkdir -p`, forward slashes, `.sh` scripts
|
|
13
|
+
|
|
14
|
+
Include this in CLAUDE.md so all commands use the correct syntax.
|
|
15
|
+
|
|
16
|
+
## Step 2: Scan the Project
|
|
17
|
+
|
|
18
|
+
Look for these indicators to understand the project:
|
|
19
|
+
|
|
20
|
+
**Package/Config Files:**
|
|
21
|
+
- `package.json` → Node.js, npm scripts, dependencies
|
|
22
|
+
- `requirements.txt` / `pyproject.toml` / `setup.py` → Python
|
|
23
|
+
- `Cargo.toml` → Rust
|
|
24
|
+
- `go.mod` → Go
|
|
25
|
+
- `Gemfile` → Ruby
|
|
26
|
+
- `pom.xml` / `build.gradle` → Java
|
|
27
|
+
- `*.csproj` / `*.sln` → .NET
|
|
28
|
+
- `composer.json` → PHP
|
|
29
|
+
|
|
30
|
+
**Framework Indicators:**
|
|
31
|
+
- `next.config.*` / `app/` directory → Next.js
|
|
32
|
+
- `vite.config.*` → Vite
|
|
33
|
+
- `angular.json` → Angular
|
|
34
|
+
- `svelte.config.*` → Svelte
|
|
35
|
+
- `remix.config.*` → Remix
|
|
36
|
+
- `nuxt.config.*` → Nuxt
|
|
37
|
+
- `django` in imports → Django
|
|
38
|
+
- `flask` in imports → Flask
|
|
39
|
+
- `fastapi` in imports → FastAPI
|
|
40
|
+
- `express` in dependencies → Express
|
|
41
|
+
- `rails` / `Gemfile` with rails → Rails
|
|
42
|
+
- `laravel` → Laravel
|
|
43
|
+
|
|
44
|
+
**Testing Frameworks:**
|
|
45
|
+
- `jest.config.*` / `@jest` in deps → Jest
|
|
46
|
+
- `vitest.config.*` → Vitest
|
|
47
|
+
- `pytest.ini` / `conftest.py` → Pytest
|
|
48
|
+
- `*_test.go` files → Go testing
|
|
49
|
+
- `*_spec.rb` files → RSpec
|
|
50
|
+
- `cypress/` or `playwright/` → E2E testing
|
|
51
|
+
|
|
52
|
+
**Infrastructure:**
|
|
53
|
+
- `Dockerfile` / `docker-compose.*` → Docker
|
|
54
|
+
- `*.tf` files → Terraform
|
|
55
|
+
- `k8s/` or `kubernetes/` → Kubernetes
|
|
56
|
+
- `.github/workflows/` → GitHub Actions
|
|
57
|
+
- `serverless.yml` → Serverless Framework
|
|
58
|
+
|
|
59
|
+
## Step 3: Populate CLAUDE.md
|
|
60
|
+
|
|
61
|
+
Focus on what Claude Code actually needs to work effectively. Claude can explore the codebase itself — don't document what it can discover.
|
|
62
|
+
|
|
63
|
+
**Wrap content in markers** so `/sync-claude-md` knows what's auto-generated:
|
|
64
|
+
|
|
65
|
+
```markdown
|
|
66
|
+
<!-- AUTO-GENERATED BY /autoconfig — Do not edit. Use .claude/feedback/ for corrections. -->
|
|
67
|
+
|
|
68
|
+
# Project Name
|
|
69
|
+
...content...
|
|
70
|
+
|
|
71
|
+
<!-- END AUTO-GENERATED -->
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
**Always include:**
|
|
75
|
+
- **Project name + one-liner**: What is this thing?
|
|
76
|
+
- **Tech stack**: Runtime, framework, database, key services (so Claude uses correct patterns)
|
|
77
|
+
- **Commands**: How to run, test, build, deploy — Claude needs these to execute tasks
|
|
78
|
+
- **Non-obvious conventions**: Multi-schema databases, monorepo structure, unusual patterns Claude wouldn't infer
|
|
79
|
+
|
|
80
|
+
**Include if relevant:**
|
|
81
|
+
- **Deployment flow**: If non-standard or involves multiple steps
|
|
82
|
+
- **Key architectural decisions**: Only if Claude would make wrong assumptions without them
|
|
83
|
+
|
|
84
|
+
**Skip these — Claude can discover them:**
|
|
85
|
+
- Detailed project structure trees (Claude can run `ls` or `tree`)
|
|
86
|
+
- Exhaustive route/endpoint lists (Claude can grep)
|
|
87
|
+
- File-by-file descriptions (Claude can read files)
|
|
88
|
+
- Database model lists (Claude can read schema files)
|
|
89
|
+
|
|
90
|
+
**Keep it tight.** A 30-line CLAUDE.md that hits the essentials beats a 200-line doc Claude has to parse every session.
|
|
91
|
+
|
|
92
|
+
**Always end with:**
|
|
93
|
+
```markdown
|
|
94
|
+
## Team Feedback
|
|
95
|
+
See `.claude/feedback/` for corrections and guidance from the team.
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
This pointer persists across autoconfig runs and directs Claude to team-maintained content.
|
|
99
|
+
|
|
100
|
+
## Step 4: Create Rules Directory
|
|
101
|
+
|
|
102
|
+
Create an empty `.claude/rules/` directory. Do not create any subdirectories or rule files.
|
|
103
|
+
|
|
104
|
+
Rules are path-scoped context files that load automatically when Claude works on matching files. Effective rules require deep understanding of your codebase patterns, team conventions, and quality goals — they should be crafted intentionally, not auto-generated.
|
|
105
|
+
|
|
106
|
+
## Step 5: Configure Settings
|
|
107
|
+
|
|
108
|
+
Update `.claude/settings.json` using the official schema.
|
|
109
|
+
|
|
110
|
+
### Deny Patterns (files Claude shouldn't read/write)
|
|
111
|
+
|
|
112
|
+
Use `Read()` for blocking reads, `Edit()` for blocking writes:
|
|
113
|
+
|
|
114
|
+
**Always deny (security):**
|
|
115
|
+
```
|
|
116
|
+
Read(./.env)
|
|
117
|
+
Read(./.env.*)
|
|
118
|
+
Read(./secrets/**)
|
|
119
|
+
Edit(./.env)
|
|
120
|
+
Edit(./.env.*)
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
**Often deny (generated/vendor):**
|
|
124
|
+
```
|
|
125
|
+
Edit(./node_modules/**)
|
|
126
|
+
Edit(./dist/**)
|
|
127
|
+
Edit(./.git/**)
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
### Allow Patterns (auto-approve without prompting)
|
|
131
|
+
|
|
132
|
+
Use `Bash()` patterns with prefix matching:
|
|
133
|
+
|
|
134
|
+
```
|
|
135
|
+
Bash(npm run test:*)
|
|
136
|
+
Bash(npm run lint:*)
|
|
137
|
+
Bash(npm run build)
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
### Environment Variables
|
|
141
|
+
|
|
142
|
+
Set session-level env vars:
|
|
143
|
+
|
|
144
|
+
```json
|
|
145
|
+
{
|
|
146
|
+
"env": {
|
|
147
|
+
"NODE_ENV": "development"
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
**Keep it minimal** — only include patterns that actually exist in this project.
|
|
153
|
+
|
|
154
|
+
## Guidelines
|
|
155
|
+
|
|
156
|
+
- Replace ALL placeholder content with real values from THIS project
|
|
157
|
+
- Delete sections that don't apply — no empty stubs
|
|
158
|
+
- Optimize for Claude's efficiency, not human documentation
|
|
159
|
+
- When uncertain, leave it out — Claude can ask or explore
|
|
160
|
+
|
|
161
|
+
## Step 6: Update the Guide
|
|
162
|
+
|
|
163
|
+
After populating CLAUDE.md, update the guide's file preview to show the actual content:
|
|
164
|
+
|
|
165
|
+
1. Open `.claude/guide/autoconfig.guide.html`
|
|
166
|
+
2. Find the `fileContents` JavaScript object (search for `'claude-md':`)
|
|
167
|
+
3. Replace the `content` value with the actual CLAUDE.md content you just generated
|
|
168
|
+
4. Use template literal syntax and escape any backticks in the content
|
|
169
|
+
|
|
170
|
+
This ensures double-clicking CLAUDE.md in the guide shows the real generated content.
|
|
171
|
+
|
|
172
|
+
## After Completion
|
|
173
|
+
|
|
174
|
+
Once autoconfig is complete, prompt the user:
|
|
175
|
+
|
|
176
|
+
**Run `/show-guide` for an interactive walkthrough of your new Claude Code project setup.**
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
<!-- @description Stages all changes, generates a conventional commit message from the diff, commits, and pushes. One command, full workflow. -->
|
|
2
|
+
|
|
3
|
+
# Commit and Push
|
|
4
|
+
|
|
5
|
+
Stage all changes, create a commit with a good message, and push to the current branch.
|
|
6
|
+
|
|
7
|
+
## Steps
|
|
8
|
+
|
|
9
|
+
1. Stage all changes (`git add -A`)
|
|
10
|
+
2. Generate a conventional commit message based on the diff
|
|
11
|
+
3. Commit the changes
|
|
12
|
+
4. Push to the current branch
|
|
13
|
+
|
|
14
|
+
## Commit Message Format
|
|
15
|
+
|
|
16
|
+
Use conventional commits: `type(scope): description`
|
|
17
|
+
|
|
18
|
+
Types: feat, fix, docs, style, refactor, test, chore
|
|
19
|
+
|
|
20
|
+
Keep the subject line under 50 chars. Add body if the change needs explanation.
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
<!-- @description (Experimental) Enable Claude to log tech debt it encounters into .claude/retro. -->
|
|
2
|
+
|
|
3
|
+
# Enable Retro
|
|
4
|
+
|
|
5
|
+
Enable the experimental Retro feature, which lets Claude log tech debt and improvement opportunities as structured story files.
|
|
6
|
+
|
|
7
|
+
## What This Does
|
|
8
|
+
|
|
9
|
+
1. Creates `.claude/retro/` directory with a README
|
|
10
|
+
2. Creates `.claude/agents/create-retro-item.md` agent
|
|
11
|
+
3. Adds Retro instructions to CLAUDE.md
|
|
12
|
+
|
|
13
|
+
## Step 1: Create Retro Directory
|
|
14
|
+
|
|
15
|
+
Create `.claude/retro/README.md` with:
|
|
16
|
+
|
|
17
|
+
```markdown
|
|
18
|
+
# Retro Items
|
|
19
|
+
|
|
20
|
+
Tech debt and improvement opportunities identified during development.
|
|
21
|
+
|
|
22
|
+
Each item is a structured story file with:
|
|
23
|
+
- Problem description
|
|
24
|
+
- Acceptance criteria
|
|
25
|
+
- Suggested approach
|
|
26
|
+
- Priority & effort sizing
|
|
27
|
+
- Files involved
|
|
28
|
+
|
|
29
|
+
## Working with Retro Items
|
|
30
|
+
|
|
31
|
+
- "Fix retro #001" — Work on a specific item
|
|
32
|
+
- "What's in the retro backlog?" — List pending items
|
|
33
|
+
- Items are numbered sequentially (001, 002, etc.)
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
## Step 2: Create Retro Agent
|
|
37
|
+
|
|
38
|
+
Create `.claude/agents/create-retro-item.md` with the standard retro item agent that:
|
|
39
|
+
- Scans for highest existing ID
|
|
40
|
+
- Creates numbered story files (001-title.md, 002-title.md)
|
|
41
|
+
- Uses structured format: Problem, Acceptance Criteria, Approach, Priority, Effort, Files
|
|
42
|
+
|
|
43
|
+
## Step 3: Update CLAUDE.md
|
|
44
|
+
|
|
45
|
+
Add the following section to CLAUDE.md (before Team Feedback if present):
|
|
46
|
+
|
|
47
|
+
```markdown
|
|
48
|
+
## Retro
|
|
49
|
+
After completing tasks, if you encountered friction, tech debt, or improvement opportunities worth revisiting, use the create-retro-item agent to log it in `.claude/retro/`. Use your judgment on what's worth capturing — not everything needs a retro item.
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
## Step 4: Confirm
|
|
53
|
+
|
|
54
|
+
Output: "Retro enabled. Claude will now log tech debt to .claude/retro/ when appropriate."
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
Get the latest screenshot(s) from the Screenshots folder and display them.
|
|
2
|
+
|
|
3
|
+
Usage:
|
|
4
|
+
- `/gls` - Get and display the most recent screenshot
|
|
5
|
+
- `/gls-2` - Get and display the 2 most recent screenshots
|
|
6
|
+
- `/gls-3` - Get and display the 3 most recent screenshots
|
|
7
|
+
- `/gls-N` - Get and display the N most recent screenshots
|
|
8
|
+
|
|
9
|
+
Screenshot directory: `C:\Users\andre\OneDrive\Pictures\Screenshots 1`
|
|
10
|
+
|
|
11
|
+
Workflow:
|
|
12
|
+
1. List all files in the screenshots directory sorted by modification time (newest first)
|
|
13
|
+
2. If command is `/gls`, get the most recent screenshot (1 file)
|
|
14
|
+
3. If command is `/gls-N` (e.g., `/gls-2`), get the N most recent screenshots
|
|
15
|
+
4. Use the Read tool to display each screenshot
|
|
16
|
+
5. Wait for the user to tell you what to do with the screenshot(s)
|
|
17
|
+
|
|
18
|
+
Important:
|
|
19
|
+
- Always use the Read tool to display screenshots (not Bash cat/echo)
|
|
20
|
+
- Display screenshots in order from newest to oldest
|
|
21
|
+
- After displaying, wait for user instructions - don't make assumptions about what they want done with the screenshots
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
<!-- @description Opens the interactive guide in your browser. -->
|
|
2
|
+
|
|
3
|
+
# Show Guide
|
|
4
|
+
|
|
5
|
+
Open the interactive guide for Claude Code Autoconfig.
|
|
6
|
+
|
|
7
|
+
## Step 1: Check for Changes
|
|
8
|
+
|
|
9
|
+
Compare modification times of files in `.claude/` against `.claude/guide/autoconfig.guide.html`.
|
|
10
|
+
|
|
11
|
+
If any files or folders in `.claude/` have a newer modification time than the guide HTML:
|
|
12
|
+
1. Output: "Syncing guide with latest changes..."
|
|
13
|
+
2. Proceed to Step 2
|
|
14
|
+
|
|
15
|
+
If the guide is already current, skip to Step 3.
|
|
16
|
+
|
|
17
|
+
## Step 2: Delta Sync
|
|
18
|
+
|
|
19
|
+
For each file in `.claude/` that is newer than the guide HTML:
|
|
20
|
+
|
|
21
|
+
1. Map the file to its `fileContents` key in the guide HTML:
|
|
22
|
+
- `CLAUDE.md` → `claude-md`
|
|
23
|
+
- `settings.json` → `settings`
|
|
24
|
+
- `commands/autoconfig.md` → `autoconfig`
|
|
25
|
+
- `commands/show-guide.md` → `guide-cmd`
|
|
26
|
+
- `commands/sync-claude-md.md` → `sync-claude-md`
|
|
27
|
+
- `commands/commit-and-push.md` → `commit-and-push`
|
|
28
|
+
- `commands/enable-retro.md` → `enable-retro`
|
|
29
|
+
- `commands/test.md` → `test`
|
|
30
|
+
- `feedback/FEEDBACK.md` → `feedback-template`
|
|
31
|
+
- `agents/create-retro-item.md` → `create-retro-item` (only if `.claude/retro/` exists)
|
|
32
|
+
|
|
33
|
+
2. Read the current content of the changed file
|
|
34
|
+
|
|
35
|
+
3. Update only that entry's `content` value in the `fileContents` object in the guide HTML
|
|
36
|
+
|
|
37
|
+
4. After all deltas are applied, the guide HTML's modification time will naturally update
|
|
38
|
+
|
|
39
|
+
## Step 3: Open Guide
|
|
40
|
+
|
|
41
|
+
Open the guide in the default browser using the appropriate command for the OS:
|
|
42
|
+
|
|
43
|
+
```bash
|
|
44
|
+
# macOS
|
|
45
|
+
open .claude/guide/autoconfig.guide.html
|
|
46
|
+
|
|
47
|
+
# Linux
|
|
48
|
+
xdg-open .claude/guide/autoconfig.guide.html
|
|
49
|
+
|
|
50
|
+
# Windows
|
|
51
|
+
start .claude/guide/autoconfig.guide.html
|
|
52
|
+
```
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
<!-- @description Re-analyzes your project and updates CLAUDE.md to reflect current state. -->
|
|
2
|
+
|
|
3
|
+
# Sync CLAUDE.md
|
|
4
|
+
|
|
5
|
+
Re-analyze the project and update CLAUDE.md to reflect current state.
|
|
6
|
+
|
|
7
|
+
Run this when your project has changed significantly:
|
|
8
|
+
- Added a major framework or dependency
|
|
9
|
+
- Changed npm scripts or build commands
|
|
10
|
+
- Restructured the project
|
|
11
|
+
- Switched databases or services
|
|
12
|
+
|
|
13
|
+
## Step 1: Re-analyze the Project
|
|
14
|
+
|
|
15
|
+
Scan for current project indicators:
|
|
16
|
+
|
|
17
|
+
**Package/Config Files:**
|
|
18
|
+
- `package.json` → dependencies, scripts
|
|
19
|
+
- `requirements.txt` / `pyproject.toml` → Python deps
|
|
20
|
+
- `Cargo.toml`, `go.mod`, `Gemfile`, etc.
|
|
21
|
+
|
|
22
|
+
**Framework Indicators:**
|
|
23
|
+
- Config files (next.config.*, vite.config.*, etc.)
|
|
24
|
+
- Directory structure (app/, src/, etc.)
|
|
25
|
+
|
|
26
|
+
**Infrastructure:**
|
|
27
|
+
- Docker, Terraform, CI/CD configs
|
|
28
|
+
|
|
29
|
+
## Step 2: Update CLAUDE.md
|
|
30
|
+
|
|
31
|
+
CLAUDE.md uses markers to identify auto-generated content:
|
|
32
|
+
|
|
33
|
+
```markdown
|
|
34
|
+
<!-- AUTO-GENERATED BY /autoconfig — Do not edit. Use .claude/feedback/ for corrections. -->
|
|
35
|
+
...content...
|
|
36
|
+
<!-- END AUTO-GENERATED -->
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
**Only regenerate content between these markers.** If content exists outside the markers (user added it despite the warning), preserve it.
|
|
40
|
+
|
|
41
|
+
Compare detected state with current CLAUDE.md and update:
|
|
42
|
+
|
|
43
|
+
1. **Project name** — if changed
|
|
44
|
+
2. **Tech stack** — new frameworks, languages, databases
|
|
45
|
+
3. **Commands** — new/changed npm scripts, build commands
|
|
46
|
+
4. **Conventions** — if project structure changed
|
|
47
|
+
|
|
48
|
+
**Always include within markers:**
|
|
49
|
+
- The `## Retro` section pointer
|
|
50
|
+
- The `## Team Feedback` section pointer
|
|
51
|
+
|
|
52
|
+
## Step 3: Confirm Changes
|
|
53
|
+
|
|
54
|
+
Show the user what changed in CLAUDE.md before finishing.
|
|
55
|
+
|
|
56
|
+
## Guidelines
|
|
57
|
+
|
|
58
|
+
- **Respect markers**: Only regenerate content between AUTO-GENERATED markers
|
|
59
|
+
- **Be conservative**: Only update sections that actually changed
|
|
60
|
+
- **Keep it tight**: CLAUDE.md should stay concise
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
<!-- @description Runs your test suite. Auto-detects Jest, Vitest, Pytest, Go, RSpec, or falls back to npm test. -->
|
|
2
|
+
|
|
3
|
+
# Run Tests
|
|
4
|
+
|
|
5
|
+
Run tests for this project.
|
|
6
|
+
|
|
7
|
+
**Scope:** $ARGUMENTS
|
|
8
|
+
|
|
9
|
+
If no scope provided, run the full test suite. Otherwise run tests matching the scope (file, directory, or pattern).
|
|
10
|
+
|
|
11
|
+
Detect the test command from project config (package.json scripts, pytest, go test, etc.) and execute it.
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
<!-- @description Team-maintained corrections and guidance for Claude. Add notes here when Claude does something wrong — it learns for next time. This directory persists across /autoconfig runs. -->
|
|
2
|
+
|
|
3
|
+
# Team Feedback
|
|
4
|
+
|
|
5
|
+
Add corrections and guidance here when Claude does something wrong.
|
|
6
|
+
Claude reads this directory and learns for next time.
|
|
7
|
+
|
|
8
|
+
<!-- ╔══════════════════════════════════════════════════════════════════╗
|
|
9
|
+
║ ║
|
|
10
|
+
║ TEMPLATE BELOW — DELETE THIS BLOCK WHEN ADDING REAL FEEDBACK ║
|
|
11
|
+
║ ║
|
|
12
|
+
╠══════════════════════════════════════════════════════════════════╣
|
|
13
|
+
║ ║
|
|
14
|
+
║ ## YYYY-MM-DD: Brief title ║
|
|
15
|
+
║ ║
|
|
16
|
+
║ Describe what Claude did wrong and what to do instead. ║
|
|
17
|
+
║ Keep entries brief and actionable. ║
|
|
18
|
+
║ ║
|
|
19
|
+
║ Example: ║
|
|
20
|
+
║ ║
|
|
21
|
+
║ ## 2026-01-06: Don't use deprecated API ║
|
|
22
|
+
║ Claude used `oldFunction()` instead of `newFunction()`. ║
|
|
23
|
+
║ Always use the v2 API for user endpoints. ║
|
|
24
|
+
║ ║
|
|
25
|
+
║ ## 2026-01-07: Test database naming ║
|
|
26
|
+
║ Use `test_` prefix for test databases, not `dev_`. ║
|
|
27
|
+
║ ║
|
|
28
|
+
╚══════════════════════════════════════════════════════════════════╝ -->
|