@ranimontagna/agent-toolkit 0.1.7 → 0.1.10
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/README.md +83 -14
- package/dist/src/args.js +10 -0
- package/dist/src/args.js.map +1 -1
- package/dist/src/menu.js +43 -2
- package/dist/src/menu.js.map +1 -1
- package/dist/src/skills.js +9 -2
- package/dist/src/skills.js.map +1 -1
- package/dist/src/state.d.ts +2 -0
- package/dist/src/state.js +7 -0
- package/dist/src/state.js.map +1 -1
- package/dist/src/status.js +3 -1
- package/dist/src/status.js.map +1 -1
- package/dist/src/ui.js +4 -1
- package/dist/src/ui.js.map +1 -1
- package/dist/src/usage.js +2 -0
- package/dist/src/usage.js.map +1 -1
- package/docs/assets/install-plan.svg +2 -2
- package/docs/assets/install-skill-packages.svg +14 -14
- package/package.json +1 -1
- package/skills/backend/database/postgres-patterns/LICENSE.ANTIGRAVITY +21 -0
- package/skills/backend/database/postgres-patterns/LICENSE.ECC +21 -0
- package/skills/backend/database/postgres-patterns/NOTICE.md +11 -0
- package/skills/backend/database/postgres-patterns/SKILL.md +180 -0
- package/skills/backend/kotlin/kotlin-patterns/LICENSE +21 -0
- package/skills/backend/kotlin/kotlin-patterns/NOTICE.md +7 -0
- package/skills/backend/kotlin/kotlin-patterns/SKILL.md +711 -0
- package/skills/backend/kotlin/kotlin-testing/LICENSE +21 -0
- package/skills/backend/kotlin/kotlin-testing/NOTICE.md +7 -0
- package/skills/backend/kotlin/kotlin-testing/SKILL.md +824 -0
- package/skills/backend/python/python-patterns/LICENSE +21 -0
- package/skills/backend/python/python-patterns/NOTICE.md +7 -0
- package/skills/backend/python/python-patterns/SKILL.md +424 -0
- package/skills/backend/python/python-testing/LICENSE +21 -0
- package/skills/backend/python/python-testing/NOTICE.md +7 -0
- package/skills/backend/python/python-testing/SKILL.md +494 -0
- package/skills/devops/docker-patterns/LICENSE.ANTIGRAVITY +21 -0
- package/skills/devops/docker-patterns/LICENSE.ECC +21 -0
- package/skills/devops/docker-patterns/NOTICE.md +11 -0
- package/skills/devops/docker-patterns/SKILL.md +397 -0
- package/skills/frontend/accessibility/LICENSE +21 -0
- package/skills/frontend/accessibility/NOTICE.md +10 -0
- package/skills/frontend/accessibility/SKILL.md +145 -0
- package/skills/frontend/design/ui-ux-pro-max/LICENSE +21 -0
- package/skills/frontend/design/ui-ux-pro-max/NOTICE.md +12 -0
- package/skills/frontend/design/ui-ux-pro-max/SKILL.md +672 -0
- package/skills/frontend/design/ui-ux-pro-max/data/_sync_all.py +414 -0
- package/skills/frontend/design/ui-ux-pro-max/data/app-interface.csv +31 -0
- package/skills/frontend/design/ui-ux-pro-max/data/charts.csv +26 -0
- package/skills/frontend/design/ui-ux-pro-max/data/colors.csv +162 -0
- package/skills/frontend/design/ui-ux-pro-max/data/design.csv +1776 -0
- package/skills/frontend/design/ui-ux-pro-max/data/draft.csv +1779 -0
- package/skills/frontend/design/ui-ux-pro-max/data/google-fonts.csv +1924 -0
- package/skills/frontend/design/ui-ux-pro-max/data/icons.csv +106 -0
- package/skills/frontend/design/ui-ux-pro-max/data/landing.csv +35 -0
- package/skills/frontend/design/ui-ux-pro-max/data/products.csv +162 -0
- package/skills/frontend/design/ui-ux-pro-max/data/react-performance.csv +45 -0
- package/skills/frontend/design/ui-ux-pro-max/data/stacks/angular.csv +51 -0
- package/skills/frontend/design/ui-ux-pro-max/data/stacks/astro.csv +54 -0
- package/skills/frontend/design/ui-ux-pro-max/data/stacks/flutter.csv +53 -0
- package/skills/frontend/design/ui-ux-pro-max/data/stacks/html-tailwind.csv +56 -0
- package/skills/frontend/design/ui-ux-pro-max/data/stacks/jetpack-compose.csv +53 -0
- package/skills/frontend/design/ui-ux-pro-max/data/stacks/laravel.csv +51 -0
- package/skills/frontend/design/ui-ux-pro-max/data/stacks/nextjs.csv +53 -0
- package/skills/frontend/design/ui-ux-pro-max/data/stacks/nuxt-ui.csv +51 -0
- package/skills/frontend/design/ui-ux-pro-max/data/stacks/nuxtjs.csv +59 -0
- package/skills/frontend/design/ui-ux-pro-max/data/stacks/react-native.csv +52 -0
- package/skills/frontend/design/ui-ux-pro-max/data/stacks/react.csv +54 -0
- package/skills/frontend/design/ui-ux-pro-max/data/stacks/shadcn.csv +61 -0
- package/skills/frontend/design/ui-ux-pro-max/data/stacks/svelte.csv +54 -0
- package/skills/frontend/design/ui-ux-pro-max/data/stacks/swiftui.csv +51 -0
- package/skills/frontend/design/ui-ux-pro-max/data/stacks/threejs.csv +54 -0
- package/skills/frontend/design/ui-ux-pro-max/data/stacks/vue.csv +50 -0
- package/skills/frontend/design/ui-ux-pro-max/data/styles.csv +85 -0
- package/skills/frontend/design/ui-ux-pro-max/data/typography.csv +74 -0
- package/skills/frontend/design/ui-ux-pro-max/data/ui-reasoning.csv +162 -0
- package/skills/frontend/design/ui-ux-pro-max/data/ux-guidelines.csv +100 -0
- package/skills/frontend/design/ui-ux-pro-max/scripts/core.py +262 -0
- package/skills/frontend/design/ui-ux-pro-max/scripts/design_system.py +1148 -0
- package/skills/frontend/design/ui-ux-pro-max/scripts/search.py +114 -0
- package/skills/general/code-reviewer/AGENTS.md +292 -0
- package/skills/general/code-reviewer/LICENSE +201 -0
- package/skills/general/code-reviewer/NOTICE.md +10 -0
- package/skills/general/code-reviewer/SKILL.md +132 -0
- package/skills/general/code-reviewer/rules/correctness-error-handling.md +279 -0
- package/skills/general/code-reviewer/rules/maintainability-naming.md +149 -0
- package/skills/general/code-reviewer/rules/maintainability-type-hints.md +93 -0
- package/skills/general/code-reviewer/rules/performance-n-plus-one.md +250 -0
- package/skills/general/code-reviewer/rules/security-sql-injection.md +142 -0
- package/skills/general/code-reviewer/rules/security-xss-prevention.md +225 -0
|
@@ -0,0 +1,397 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: docker-patterns
|
|
3
|
+
description: Use when creating, reviewing, or debugging Dockerfiles, Docker Compose stacks, local development containers, image size, security hardening, networking, volumes, healthchecks, or production container readiness.
|
|
4
|
+
metadata:
|
|
5
|
+
origin: ECC and antigravity-awesome-skills
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
# Docker Patterns
|
|
9
|
+
|
|
10
|
+
Docker and Docker Compose best practices for containerized development.
|
|
11
|
+
|
|
12
|
+
## When to Activate
|
|
13
|
+
|
|
14
|
+
- Setting up Docker Compose for local development
|
|
15
|
+
- Designing multi-container architectures
|
|
16
|
+
- Troubleshooting container networking or volume issues
|
|
17
|
+
- Reviewing Dockerfiles for security and size
|
|
18
|
+
- Migrating from local dev to containerized workflow
|
|
19
|
+
|
|
20
|
+
## Review Pass
|
|
21
|
+
|
|
22
|
+
When reviewing an existing project, inspect the container surface first:
|
|
23
|
+
|
|
24
|
+
```bash
|
|
25
|
+
docker --version
|
|
26
|
+
docker info | grep -E "Server Version|Storage Driver|Container Runtime" || true
|
|
27
|
+
find . -name "Dockerfile*" -type f
|
|
28
|
+
find . \( -name "*compose*.yml" -o -name "*compose*.yaml" \) -type f
|
|
29
|
+
find . -name ".dockerignore" -type f
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
Check these before suggesting larger changes:
|
|
33
|
+
|
|
34
|
+
- Does each image have a clear build context and a small `.dockerignore`?
|
|
35
|
+
- Are dependencies installed in a cache-friendly layer before app source copy?
|
|
36
|
+
- Does production run as a non-root user?
|
|
37
|
+
- Are secrets injected at runtime rather than baked into images?
|
|
38
|
+
- Are mutable app files separated from persistent volumes?
|
|
39
|
+
- Are healthchecks present for app and dependency services?
|
|
40
|
+
- Are Compose service names used for internal networking instead of
|
|
41
|
+
`localhost`?
|
|
42
|
+
- Are dev and production targets separated by multi-stage builds?
|
|
43
|
+
|
|
44
|
+
## Docker Compose for Local Development
|
|
45
|
+
|
|
46
|
+
### Standard Web App Stack
|
|
47
|
+
|
|
48
|
+
```yaml
|
|
49
|
+
# docker-compose.yml
|
|
50
|
+
services:
|
|
51
|
+
app:
|
|
52
|
+
build:
|
|
53
|
+
context: .
|
|
54
|
+
target: dev # Use dev stage of multi-stage Dockerfile
|
|
55
|
+
ports:
|
|
56
|
+
- "3000:3000"
|
|
57
|
+
volumes:
|
|
58
|
+
- .:/app # Bind mount for hot reload
|
|
59
|
+
- /app/node_modules # Anonymous volume -- preserves container deps
|
|
60
|
+
environment:
|
|
61
|
+
- DATABASE_URL=postgres://postgres:postgres@db:5432/app_dev
|
|
62
|
+
- REDIS_URL=redis://redis:6379/0
|
|
63
|
+
- NODE_ENV=development
|
|
64
|
+
depends_on:
|
|
65
|
+
db:
|
|
66
|
+
condition: service_healthy
|
|
67
|
+
redis:
|
|
68
|
+
condition: service_started
|
|
69
|
+
command: npm run dev
|
|
70
|
+
|
|
71
|
+
db:
|
|
72
|
+
image: postgres:16-alpine
|
|
73
|
+
ports:
|
|
74
|
+
- "5432:5432"
|
|
75
|
+
environment:
|
|
76
|
+
POSTGRES_USER: postgres
|
|
77
|
+
POSTGRES_PASSWORD: postgres
|
|
78
|
+
POSTGRES_DB: app_dev
|
|
79
|
+
volumes:
|
|
80
|
+
- pgdata:/var/lib/postgresql/data
|
|
81
|
+
- ./scripts/init-db.sql:/docker-entrypoint-initdb.d/init.sql
|
|
82
|
+
healthcheck:
|
|
83
|
+
test: ["CMD-SHELL", "pg_isready -U postgres"]
|
|
84
|
+
interval: 5s
|
|
85
|
+
timeout: 3s
|
|
86
|
+
retries: 5
|
|
87
|
+
|
|
88
|
+
redis:
|
|
89
|
+
image: redis:7-alpine
|
|
90
|
+
ports:
|
|
91
|
+
- "6379:6379"
|
|
92
|
+
volumes:
|
|
93
|
+
- redisdata:/data
|
|
94
|
+
|
|
95
|
+
mailpit: # Local email testing
|
|
96
|
+
image: axllent/mailpit
|
|
97
|
+
ports:
|
|
98
|
+
- "8025:8025" # Web UI
|
|
99
|
+
- "1025:1025" # SMTP
|
|
100
|
+
|
|
101
|
+
volumes:
|
|
102
|
+
pgdata:
|
|
103
|
+
redisdata:
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
### Development vs Production Dockerfile
|
|
107
|
+
|
|
108
|
+
```dockerfile
|
|
109
|
+
# Stage: dependencies
|
|
110
|
+
FROM node:22-alpine AS deps
|
|
111
|
+
WORKDIR /app
|
|
112
|
+
COPY package.json package-lock.json ./
|
|
113
|
+
RUN npm ci
|
|
114
|
+
|
|
115
|
+
# Stage: dev (hot reload, debug tools)
|
|
116
|
+
FROM node:22-alpine AS dev
|
|
117
|
+
WORKDIR /app
|
|
118
|
+
COPY --from=deps /app/node_modules ./node_modules
|
|
119
|
+
COPY . .
|
|
120
|
+
EXPOSE 3000
|
|
121
|
+
CMD ["npm", "run", "dev"]
|
|
122
|
+
|
|
123
|
+
# Stage: build
|
|
124
|
+
FROM node:22-alpine AS build
|
|
125
|
+
WORKDIR /app
|
|
126
|
+
COPY --from=deps /app/node_modules ./node_modules
|
|
127
|
+
COPY . .
|
|
128
|
+
RUN npm run build && npm prune --production
|
|
129
|
+
|
|
130
|
+
# Stage: production (minimal image)
|
|
131
|
+
FROM node:22-alpine AS production
|
|
132
|
+
WORKDIR /app
|
|
133
|
+
RUN addgroup -g 1001 -S appgroup && adduser -S appuser -u 1001
|
|
134
|
+
USER appuser
|
|
135
|
+
COPY --from=build --chown=appuser:appgroup /app/dist ./dist
|
|
136
|
+
COPY --from=build --chown=appuser:appgroup /app/node_modules ./node_modules
|
|
137
|
+
COPY --from=build --chown=appuser:appgroup /app/package.json ./
|
|
138
|
+
ENV NODE_ENV=production
|
|
139
|
+
EXPOSE 3000
|
|
140
|
+
HEALTHCHECK --interval=30s --timeout=3s CMD wget -qO- http://localhost:3000/health || exit 1
|
|
141
|
+
CMD ["node", "dist/server.js"]
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
### Override Files
|
|
145
|
+
|
|
146
|
+
```yaml
|
|
147
|
+
# docker-compose.override.yml (auto-loaded, dev-only settings)
|
|
148
|
+
services:
|
|
149
|
+
app:
|
|
150
|
+
environment:
|
|
151
|
+
- DEBUG=app:*
|
|
152
|
+
- LOG_LEVEL=debug
|
|
153
|
+
ports:
|
|
154
|
+
- "9229:9229" # Node.js debugger
|
|
155
|
+
|
|
156
|
+
# docker-compose.prod.yml (explicit for production)
|
|
157
|
+
services:
|
|
158
|
+
app:
|
|
159
|
+
build:
|
|
160
|
+
target: production
|
|
161
|
+
restart: always
|
|
162
|
+
deploy:
|
|
163
|
+
resources:
|
|
164
|
+
limits:
|
|
165
|
+
cpus: "1.0"
|
|
166
|
+
memory: 512M
|
|
167
|
+
```
|
|
168
|
+
|
|
169
|
+
```bash
|
|
170
|
+
# Development (auto-loads override)
|
|
171
|
+
docker compose up
|
|
172
|
+
|
|
173
|
+
# Production
|
|
174
|
+
docker compose -f docker-compose.yml -f docker-compose.prod.yml up -d
|
|
175
|
+
```
|
|
176
|
+
|
|
177
|
+
## Networking
|
|
178
|
+
|
|
179
|
+
### Service Discovery
|
|
180
|
+
|
|
181
|
+
Services in the same Compose network resolve by service name:
|
|
182
|
+
```
|
|
183
|
+
# From "app" container:
|
|
184
|
+
postgres://postgres:postgres@db:5432/app_dev # "db" resolves to the db container
|
|
185
|
+
redis://redis:6379/0 # "redis" resolves to the redis container
|
|
186
|
+
```
|
|
187
|
+
|
|
188
|
+
### Custom Networks
|
|
189
|
+
|
|
190
|
+
```yaml
|
|
191
|
+
services:
|
|
192
|
+
frontend:
|
|
193
|
+
networks:
|
|
194
|
+
- frontend-net
|
|
195
|
+
|
|
196
|
+
api:
|
|
197
|
+
networks:
|
|
198
|
+
- frontend-net
|
|
199
|
+
- backend-net
|
|
200
|
+
|
|
201
|
+
db:
|
|
202
|
+
networks:
|
|
203
|
+
- backend-net # Only reachable from api, not frontend
|
|
204
|
+
|
|
205
|
+
networks:
|
|
206
|
+
frontend-net:
|
|
207
|
+
backend-net:
|
|
208
|
+
```
|
|
209
|
+
|
|
210
|
+
### Exposing Only What's Needed
|
|
211
|
+
|
|
212
|
+
```yaml
|
|
213
|
+
services:
|
|
214
|
+
db:
|
|
215
|
+
ports:
|
|
216
|
+
- "127.0.0.1:5432:5432" # Only accessible from host, not network
|
|
217
|
+
# Omit ports entirely in production -- accessible only within Docker network
|
|
218
|
+
```
|
|
219
|
+
|
|
220
|
+
## Volume Strategies
|
|
221
|
+
|
|
222
|
+
```yaml
|
|
223
|
+
volumes:
|
|
224
|
+
# Named volume: persists across container restarts, managed by Docker
|
|
225
|
+
pgdata:
|
|
226
|
+
|
|
227
|
+
# Bind mount: maps host directory into container (for development)
|
|
228
|
+
# - ./src:/app/src
|
|
229
|
+
|
|
230
|
+
# Anonymous volume: preserves container-generated content from bind mount override
|
|
231
|
+
# - /app/node_modules
|
|
232
|
+
```
|
|
233
|
+
|
|
234
|
+
### Common Patterns
|
|
235
|
+
|
|
236
|
+
```yaml
|
|
237
|
+
services:
|
|
238
|
+
app:
|
|
239
|
+
volumes:
|
|
240
|
+
- .:/app # Source code (bind mount for hot reload)
|
|
241
|
+
- /app/node_modules # Protect container's node_modules from host
|
|
242
|
+
- /app/.next # Protect build cache
|
|
243
|
+
|
|
244
|
+
db:
|
|
245
|
+
volumes:
|
|
246
|
+
- pgdata:/var/lib/postgresql/data # Persistent data
|
|
247
|
+
- ./scripts/init.sql:/docker-entrypoint-initdb.d/init.sql # Init scripts
|
|
248
|
+
```
|
|
249
|
+
|
|
250
|
+
## Container Security
|
|
251
|
+
|
|
252
|
+
### Dockerfile Hardening
|
|
253
|
+
|
|
254
|
+
```dockerfile
|
|
255
|
+
# 1. Use specific tags (never :latest)
|
|
256
|
+
FROM node:22.12-alpine3.20
|
|
257
|
+
|
|
258
|
+
# 2. Run as non-root
|
|
259
|
+
RUN addgroup -g 1001 -S app && adduser -S app -u 1001
|
|
260
|
+
USER app
|
|
261
|
+
|
|
262
|
+
# 3. Drop capabilities (in compose)
|
|
263
|
+
# 4. Read-only root filesystem where possible
|
|
264
|
+
# 5. No secrets in image layers
|
|
265
|
+
```
|
|
266
|
+
|
|
267
|
+
### Compose Security
|
|
268
|
+
|
|
269
|
+
```yaml
|
|
270
|
+
services:
|
|
271
|
+
app:
|
|
272
|
+
security_opt:
|
|
273
|
+
- no-new-privileges:true
|
|
274
|
+
read_only: true
|
|
275
|
+
tmpfs:
|
|
276
|
+
- /tmp
|
|
277
|
+
- /app/.cache
|
|
278
|
+
cap_drop:
|
|
279
|
+
- ALL
|
|
280
|
+
cap_add:
|
|
281
|
+
- NET_BIND_SERVICE # Only if binding to ports < 1024
|
|
282
|
+
```
|
|
283
|
+
|
|
284
|
+
### Secret Management
|
|
285
|
+
|
|
286
|
+
```yaml
|
|
287
|
+
# GOOD: Use environment variables (injected at runtime)
|
|
288
|
+
services:
|
|
289
|
+
app:
|
|
290
|
+
env_file:
|
|
291
|
+
- .env # Never commit .env to git
|
|
292
|
+
environment:
|
|
293
|
+
- API_KEY # Inherits from host environment
|
|
294
|
+
|
|
295
|
+
# GOOD: Docker secrets (Swarm mode)
|
|
296
|
+
secrets:
|
|
297
|
+
db_password:
|
|
298
|
+
file: ./secrets/db_password.txt
|
|
299
|
+
|
|
300
|
+
services:
|
|
301
|
+
db:
|
|
302
|
+
secrets:
|
|
303
|
+
- db_password
|
|
304
|
+
|
|
305
|
+
# BAD: Hardcoded in image
|
|
306
|
+
# ENV API_KEY=sk-proj-xxxxx # NEVER DO THIS
|
|
307
|
+
```
|
|
308
|
+
|
|
309
|
+
## .dockerignore
|
|
310
|
+
|
|
311
|
+
```
|
|
312
|
+
node_modules
|
|
313
|
+
.git
|
|
314
|
+
.env
|
|
315
|
+
.env.*
|
|
316
|
+
dist
|
|
317
|
+
coverage
|
|
318
|
+
*.log
|
|
319
|
+
.next
|
|
320
|
+
.cache
|
|
321
|
+
docker-compose*.yml
|
|
322
|
+
Dockerfile*
|
|
323
|
+
README.md
|
|
324
|
+
tests/
|
|
325
|
+
```
|
|
326
|
+
|
|
327
|
+
## Debugging
|
|
328
|
+
|
|
329
|
+
### Common Commands
|
|
330
|
+
|
|
331
|
+
```bash
|
|
332
|
+
# View logs
|
|
333
|
+
docker compose logs -f app # Follow app logs
|
|
334
|
+
docker compose logs --tail=50 db # Last 50 lines from db
|
|
335
|
+
|
|
336
|
+
# Execute commands in running container
|
|
337
|
+
docker compose exec app sh # Shell into app
|
|
338
|
+
docker compose exec db psql -U postgres # Connect to postgres
|
|
339
|
+
|
|
340
|
+
# Inspect
|
|
341
|
+
docker compose ps # Running services
|
|
342
|
+
docker compose top # Processes in each container
|
|
343
|
+
docker stats # Resource usage
|
|
344
|
+
|
|
345
|
+
# Rebuild
|
|
346
|
+
docker compose up --build # Rebuild images
|
|
347
|
+
docker compose build --no-cache app # Force full rebuild
|
|
348
|
+
|
|
349
|
+
# Clean up
|
|
350
|
+
docker compose down # Stop and remove containers
|
|
351
|
+
docker compose down -v # Also remove volumes (DESTRUCTIVE)
|
|
352
|
+
docker system prune # Remove unused images/containers
|
|
353
|
+
```
|
|
354
|
+
|
|
355
|
+
### Debugging Network Issues
|
|
356
|
+
|
|
357
|
+
```bash
|
|
358
|
+
# Check DNS resolution inside container
|
|
359
|
+
docker compose exec app nslookup db
|
|
360
|
+
|
|
361
|
+
# Check connectivity
|
|
362
|
+
docker compose exec app wget -qO- http://api:3000/health
|
|
363
|
+
|
|
364
|
+
# Inspect network
|
|
365
|
+
docker network ls
|
|
366
|
+
docker network inspect <project>_default
|
|
367
|
+
```
|
|
368
|
+
|
|
369
|
+
## Anti-Patterns
|
|
370
|
+
|
|
371
|
+
```
|
|
372
|
+
# BAD: Using docker compose in production without orchestration
|
|
373
|
+
# Use Kubernetes, ECS, or Docker Swarm for production multi-container workloads
|
|
374
|
+
|
|
375
|
+
# BAD: Storing data in containers without volumes
|
|
376
|
+
# Containers are ephemeral -- all data lost on restart without volumes
|
|
377
|
+
|
|
378
|
+
# BAD: Running as root
|
|
379
|
+
# Always create and use a non-root user
|
|
380
|
+
|
|
381
|
+
# BAD: Using :latest tag
|
|
382
|
+
# Pin to specific versions for reproducible builds
|
|
383
|
+
|
|
384
|
+
# BAD: One giant container with all services
|
|
385
|
+
# Separate concerns: one process per container
|
|
386
|
+
|
|
387
|
+
# BAD: Putting secrets in docker-compose.yml
|
|
388
|
+
# Use .env files (gitignored) or Docker secrets
|
|
389
|
+
```
|
|
390
|
+
|
|
391
|
+
## When to Use This Skill
|
|
392
|
+
|
|
393
|
+
- Setting up Docker Compose for local development
|
|
394
|
+
- Designing multi-container architectures
|
|
395
|
+
- Troubleshooting container issues
|
|
396
|
+
- Reviewing Dockerfiles for security
|
|
397
|
+
- Implementing container best practices
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Affaan Mustafa
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
# Third-party notice
|
|
2
|
+
|
|
3
|
+
This skill was copied from Affaan Mustafa's ECC repository.
|
|
4
|
+
|
|
5
|
+
- Source: https://github.com/affaan-m/ECC/tree/main/skills/accessibility
|
|
6
|
+
- Source commit: 0f84c0e2796703fbda87d577b2636351418c7442
|
|
7
|
+
- License: MIT
|
|
8
|
+
- Copyright: Copyright (c) 2026 Affaan Mustafa
|
|
9
|
+
|
|
10
|
+
The upstream MIT license is included in `LICENSE`.
|
|
@@ -0,0 +1,145 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: accessibility
|
|
3
|
+
description: Use when designing, implementing, or auditing accessible web, iOS, or Android interfaces against WCAG 2.2 Level AA, semantic HTML, ARIA, keyboard navigation, focus management, and native accessibility traits.
|
|
4
|
+
origin: ECC
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
# Accessibility (WCAG 2.2)
|
|
8
|
+
|
|
9
|
+
This skill ensures that digital interfaces are Perceivable, Operable, Understandable, and Robust (POUR) for all users, including those using screen readers, switch controls, or keyboard navigation. It focuses on the technical implementation of WCAG 2.2 success criteria.
|
|
10
|
+
|
|
11
|
+
## When to Use
|
|
12
|
+
|
|
13
|
+
- Defining UI component specifications for Web, iOS, or Android.
|
|
14
|
+
- Auditing existing code for accessibility barriers or compliance gaps.
|
|
15
|
+
- Implementing new WCAG 2.2 standards like Target Size (Minimum) and Focus Appearance.
|
|
16
|
+
- Mapping high-level design requirements to technical attributes (ARIA roles, traits, hints).
|
|
17
|
+
|
|
18
|
+
## Core Concepts
|
|
19
|
+
|
|
20
|
+
- **POUR Principles**: The foundation of WCAG (Perceivable, Operable, Understandable, Robust).
|
|
21
|
+
- **Semantic Mapping**: Using native elements over generic containers to provide built-in accessibility.
|
|
22
|
+
- **Accessibility Tree**: The representation of the UI that assistive technologies actually "read."
|
|
23
|
+
- **Focus Management**: Controlling the order and visibility of the keyboard/screen reader cursor.
|
|
24
|
+
- **Labeling & Hints**: Providing context through `aria-label`, `accessibilityLabel`, and `contentDescription`.
|
|
25
|
+
|
|
26
|
+
## How It Works
|
|
27
|
+
|
|
28
|
+
### Step 1: Identify the Component Role
|
|
29
|
+
|
|
30
|
+
Determine the functional purpose (e.g., Is this a button, a link, or a tab?). Use the most semantic native element available before resorting to custom roles.
|
|
31
|
+
|
|
32
|
+
### Step 2: Define Perceivable Attributes
|
|
33
|
+
|
|
34
|
+
- Ensure text contrast meets **4.5:1** (normal) or **3:1** (large/UI).
|
|
35
|
+
- Add text alternatives for non-text content (images, icons).
|
|
36
|
+
- Implement responsive reflow (up to 400% zoom without loss of function).
|
|
37
|
+
|
|
38
|
+
### Step 3: Implement Operable Controls
|
|
39
|
+
|
|
40
|
+
- Ensure a minimum **24x24 CSS pixel** target size (WCAG 2.2 SC 2.5.8).
|
|
41
|
+
- Verify all interactive elements are reachable via keyboard and have a visible focus indicator (SC 2.4.11).
|
|
42
|
+
- Provide single-pointer alternatives for dragging movements.
|
|
43
|
+
|
|
44
|
+
### Step 4: Ensure Understandable Logic
|
|
45
|
+
|
|
46
|
+
- Use consistent navigation patterns.
|
|
47
|
+
- Provide descriptive error messages and suggestions for correction (SC 3.3.3).
|
|
48
|
+
- Implement "Redundant Entry" (SC 3.3.7) to prevent asking for the same data twice.
|
|
49
|
+
|
|
50
|
+
### Step 5: Verify Robust Compatibility
|
|
51
|
+
|
|
52
|
+
- Use correct `Name, Role, Value` patterns.
|
|
53
|
+
- Implement `aria-live` or live regions for dynamic status updates.
|
|
54
|
+
|
|
55
|
+
## Accessibility Architecture Diagram
|
|
56
|
+
|
|
57
|
+
```mermaid
|
|
58
|
+
flowchart TD
|
|
59
|
+
UI["UI Component"] --> Platform{Platform?}
|
|
60
|
+
Platform -->|Web| ARIA["WAI-ARIA + HTML5"]
|
|
61
|
+
Platform -->|iOS| SwiftUI["Accessibility Traits + Labels"]
|
|
62
|
+
Platform -->|Android| Compose["Semantics + ContentDesc"]
|
|
63
|
+
|
|
64
|
+
ARIA --> AT["Assistive Technology (Screen Readers, Switches)"]
|
|
65
|
+
SwiftUI --> AT
|
|
66
|
+
Compose --> AT
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
## Cross-Platform Mapping
|
|
70
|
+
|
|
71
|
+
| Feature | Web (HTML/ARIA) | iOS (SwiftUI) | Android (Compose) |
|
|
72
|
+
| :----------------- | :----------------------- | :----------------------------------- | :---------------------------------------------------------- |
|
|
73
|
+
| **Primary Label** | `aria-label` / `<label>` | `.accessibilityLabel()` | `contentDescription` |
|
|
74
|
+
| **Secondary Hint** | `aria-describedby` | `.accessibilityHint()` | `Modifier.semantics { stateDescription = ... }` |
|
|
75
|
+
| **Action Role** | `role="button"` | `.accessibilityAddTraits(.isButton)` | `Modifier.semantics { role = Role.Button }` |
|
|
76
|
+
| **Live Updates** | `aria-live="polite"` | `.accessibilityLiveRegion(.polite)` | `Modifier.semantics { liveRegion = LiveRegionMode.Polite }` |
|
|
77
|
+
|
|
78
|
+
## Examples
|
|
79
|
+
|
|
80
|
+
### Web: Accessible Search
|
|
81
|
+
|
|
82
|
+
```html
|
|
83
|
+
<form role="search">
|
|
84
|
+
<label for="search-input" class="sr-only">Search products</label>
|
|
85
|
+
<input type="search" id="search-input" placeholder="Search..." />
|
|
86
|
+
<button type="submit" aria-label="Submit Search">
|
|
87
|
+
<svg aria-hidden="true">...</svg>
|
|
88
|
+
</button>
|
|
89
|
+
</form>
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
### iOS: Accessible Action Button
|
|
93
|
+
|
|
94
|
+
```swift
|
|
95
|
+
Button(action: deleteItem) {
|
|
96
|
+
Image(systemName: "trash")
|
|
97
|
+
}
|
|
98
|
+
.accessibilityLabel("Delete item")
|
|
99
|
+
.accessibilityHint("Permanently removes this item from your list")
|
|
100
|
+
.accessibilityAddTraits(.isButton)
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
### Android: Accessible Toggle
|
|
104
|
+
|
|
105
|
+
```kotlin
|
|
106
|
+
Switch(
|
|
107
|
+
checked = isEnabled,
|
|
108
|
+
onCheckedChange = { onToggle() },
|
|
109
|
+
modifier = Modifier.semantics {
|
|
110
|
+
contentDescription = "Enable notifications"
|
|
111
|
+
}
|
|
112
|
+
)
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
## Anti-Patterns to Avoid
|
|
116
|
+
|
|
117
|
+
- **Div-Buttons**: Using a `<div>` or `<span>` for a click event without adding a role and keyboard support.
|
|
118
|
+
- **Color-Only Meaning**: Indicating an error or status _only_ with a color change (e.g., turning a border red).
|
|
119
|
+
- **Uncontained Modal Focus**: Modals that don't trap focus, allowing keyboard users to navigate background content while the modal is open. Focus must be contained _and_ escapable via the `Escape` key or an explicit close button (WCAG SC 2.1.2).
|
|
120
|
+
- **Redundant Alt Text**: Using "Image of..." or "Picture of..." in alt text (screen readers already announce the role "Image").
|
|
121
|
+
|
|
122
|
+
## Best Practices Checklist
|
|
123
|
+
|
|
124
|
+
- [ ] Interactive elements meet the **24x24px** (Web) or **44x44pt** (Native) target size.
|
|
125
|
+
- [ ] Focus indicators are clearly visible and high-contrast.
|
|
126
|
+
- [ ] Modals **contain focus** while open, and release it cleanly on close (`Escape` key or close button).
|
|
127
|
+
- [ ] Dropdowns and menus restore focus to the trigger element on close.
|
|
128
|
+
- [ ] Forms provide text-based error suggestions.
|
|
129
|
+
- [ ] All icon-only buttons have a descriptive text label.
|
|
130
|
+
- [ ] Content reflows properly when text is scaled.
|
|
131
|
+
|
|
132
|
+
## References
|
|
133
|
+
|
|
134
|
+
- [WCAG 2.2 Guidelines](https://www.w3.org/TR/WCAG22/)
|
|
135
|
+
- [WAI-ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices/)
|
|
136
|
+
- [iOS Accessibility Programming Guide](https://developer.apple.com/documentation/accessibility)
|
|
137
|
+
- [iOS Human Interface Guidelines - Accessibility](https://developer.apple.com/design/human-interface-guidelines/accessibility)
|
|
138
|
+
- [Android Accessibility Developer Guide](https://developer.android.com/guide/topics/ui/accessibility)
|
|
139
|
+
|
|
140
|
+
## Related Skills
|
|
141
|
+
|
|
142
|
+
- `frontend-patterns`
|
|
143
|
+
- `design-system`
|
|
144
|
+
- `liquid-glass-design`
|
|
145
|
+
- `swiftui-patterns`
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2024 Next Level Builder
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
# Third-party notice
|
|
2
|
+
|
|
3
|
+
This skill was copied from Next Level Builder's UI/UX Pro Max Skill repository.
|
|
4
|
+
|
|
5
|
+
- Source: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/tree/main/.claude/skills/ui-ux-pro-max
|
|
6
|
+
- Source commit: b7e3af80f6e331f6fb456667b82b12cade7c9d35
|
|
7
|
+
- License: MIT
|
|
8
|
+
- Copyright: Copyright (c) 2024 Next Level Builder
|
|
9
|
+
|
|
10
|
+
The upstream skill used symlinks for `data` and `scripts`. This vendored copy
|
|
11
|
+
stores those directories as real files so npm installs are self-contained.
|
|
12
|
+
The upstream MIT license is included in `LICENSE`.
|