@ranimontagna/agent-toolkit 0.1.6 → 0.1.9

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.
Files changed (108) hide show
  1. package/README.md +83 -10
  2. package/package.json +1 -1
  3. package/skills/backend/database/postgres-patterns/LICENSE.ANTIGRAVITY +21 -0
  4. package/skills/backend/database/postgres-patterns/LICENSE.ECC +21 -0
  5. package/skills/backend/database/postgres-patterns/NOTICE.md +11 -0
  6. package/skills/backend/database/postgres-patterns/SKILL.md +180 -0
  7. package/skills/backend/go/golang-patterns/LICENSE +21 -0
  8. package/skills/backend/go/golang-patterns/NOTICE.md +10 -0
  9. package/skills/backend/go/golang-patterns/SKILL.md +674 -0
  10. package/skills/backend/go/golang-testing/LICENSE +21 -0
  11. package/skills/backend/go/golang-testing/NOTICE.md +10 -0
  12. package/skills/backend/go/golang-testing/SKILL.md +329 -0
  13. package/skills/backend/java/java-coding-standards/LICENSE +21 -0
  14. package/skills/backend/java/java-coding-standards/NOTICE.md +10 -0
  15. package/skills/backend/java/java-coding-standards/SKILL.md +383 -0
  16. package/skills/backend/java/java-junit/LICENSE +21 -0
  17. package/skills/backend/java/java-junit/NOTICE.md +10 -0
  18. package/skills/backend/java/java-junit/SKILL.md +64 -0
  19. package/skills/backend/kotlin/kotlin-patterns/LICENSE +21 -0
  20. package/skills/backend/kotlin/kotlin-patterns/NOTICE.md +7 -0
  21. package/skills/backend/kotlin/kotlin-patterns/SKILL.md +711 -0
  22. package/skills/backend/kotlin/kotlin-testing/LICENSE +21 -0
  23. package/skills/backend/kotlin/kotlin-testing/NOTICE.md +7 -0
  24. package/skills/backend/kotlin/kotlin-testing/SKILL.md +824 -0
  25. package/skills/backend/python/python-patterns/LICENSE +21 -0
  26. package/skills/backend/python/python-patterns/NOTICE.md +7 -0
  27. package/skills/backend/python/python-patterns/SKILL.md +424 -0
  28. package/skills/backend/python/python-testing/LICENSE +21 -0
  29. package/skills/backend/python/python-testing/NOTICE.md +7 -0
  30. package/skills/backend/python/python-testing/SKILL.md +494 -0
  31. package/skills/devops/docker-patterns/LICENSE.ANTIGRAVITY +21 -0
  32. package/skills/devops/docker-patterns/LICENSE.ECC +21 -0
  33. package/skills/devops/docker-patterns/NOTICE.md +11 -0
  34. package/skills/devops/docker-patterns/SKILL.md +397 -0
  35. package/skills/frontend/accessibility/LICENSE +21 -0
  36. package/skills/frontend/accessibility/NOTICE.md +10 -0
  37. package/skills/frontend/accessibility/SKILL.md +145 -0
  38. package/skills/frontend/design/ui-ux-pro-max/LICENSE +21 -0
  39. package/skills/frontend/design/ui-ux-pro-max/NOTICE.md +12 -0
  40. package/skills/frontend/design/ui-ux-pro-max/SKILL.md +672 -0
  41. package/skills/frontend/design/ui-ux-pro-max/data/_sync_all.py +414 -0
  42. package/skills/frontend/design/ui-ux-pro-max/data/app-interface.csv +31 -0
  43. package/skills/frontend/design/ui-ux-pro-max/data/charts.csv +26 -0
  44. package/skills/frontend/design/ui-ux-pro-max/data/colors.csv +162 -0
  45. package/skills/frontend/design/ui-ux-pro-max/data/design.csv +1776 -0
  46. package/skills/frontend/design/ui-ux-pro-max/data/draft.csv +1779 -0
  47. package/skills/frontend/design/ui-ux-pro-max/data/google-fonts.csv +1924 -0
  48. package/skills/frontend/design/ui-ux-pro-max/data/icons.csv +106 -0
  49. package/skills/frontend/design/ui-ux-pro-max/data/landing.csv +35 -0
  50. package/skills/frontend/design/ui-ux-pro-max/data/products.csv +162 -0
  51. package/skills/frontend/design/ui-ux-pro-max/data/react-performance.csv +45 -0
  52. package/skills/frontend/design/ui-ux-pro-max/data/stacks/angular.csv +51 -0
  53. package/skills/frontend/design/ui-ux-pro-max/data/stacks/astro.csv +54 -0
  54. package/skills/frontend/design/ui-ux-pro-max/data/stacks/flutter.csv +53 -0
  55. package/skills/frontend/design/ui-ux-pro-max/data/stacks/html-tailwind.csv +56 -0
  56. package/skills/frontend/design/ui-ux-pro-max/data/stacks/jetpack-compose.csv +53 -0
  57. package/skills/frontend/design/ui-ux-pro-max/data/stacks/laravel.csv +51 -0
  58. package/skills/frontend/design/ui-ux-pro-max/data/stacks/nextjs.csv +53 -0
  59. package/skills/frontend/design/ui-ux-pro-max/data/stacks/nuxt-ui.csv +51 -0
  60. package/skills/frontend/design/ui-ux-pro-max/data/stacks/nuxtjs.csv +59 -0
  61. package/skills/frontend/design/ui-ux-pro-max/data/stacks/react-native.csv +52 -0
  62. package/skills/frontend/design/ui-ux-pro-max/data/stacks/react.csv +54 -0
  63. package/skills/frontend/design/ui-ux-pro-max/data/stacks/shadcn.csv +61 -0
  64. package/skills/frontend/design/ui-ux-pro-max/data/stacks/svelte.csv +54 -0
  65. package/skills/frontend/design/ui-ux-pro-max/data/stacks/swiftui.csv +51 -0
  66. package/skills/frontend/design/ui-ux-pro-max/data/stacks/threejs.csv +54 -0
  67. package/skills/frontend/design/ui-ux-pro-max/data/stacks/vue.csv +50 -0
  68. package/skills/frontend/design/ui-ux-pro-max/data/styles.csv +85 -0
  69. package/skills/frontend/design/ui-ux-pro-max/data/typography.csv +74 -0
  70. package/skills/frontend/design/ui-ux-pro-max/data/ui-reasoning.csv +162 -0
  71. package/skills/frontend/design/ui-ux-pro-max/data/ux-guidelines.csv +100 -0
  72. package/skills/frontend/design/ui-ux-pro-max/scripts/core.py +262 -0
  73. package/skills/frontend/design/ui-ux-pro-max/scripts/design_system.py +1148 -0
  74. package/skills/frontend/design/ui-ux-pro-max/scripts/search.py +114 -0
  75. package/skills/frontend/react/react-patterns/SKILL.md +4 -4
  76. package/skills/frontend/react/react-patterns/rules/react/LICENSE +21 -0
  77. package/skills/frontend/react/react-patterns/rules/react/NOTICE.md +11 -0
  78. package/skills/frontend/react/react-patterns/rules/react/coding-style.md +109 -0
  79. package/skills/frontend/react/react-patterns/rules/react/hooks.md +187 -0
  80. package/skills/frontend/react/react-patterns/rules/react/patterns.md +194 -0
  81. package/skills/frontend/react/react-patterns/rules/react/security.md +180 -0
  82. package/skills/frontend/react/react-patterns/rules/react/testing.md +208 -0
  83. package/skills/frontend/react/react-performance/SKILL.md +2 -2
  84. package/skills/frontend/react/react-performance/rules/react/LICENSE +21 -0
  85. package/skills/frontend/react/react-performance/rules/react/NOTICE.md +11 -0
  86. package/skills/frontend/react/react-performance/rules/react/coding-style.md +109 -0
  87. package/skills/frontend/react/react-performance/rules/react/hooks.md +187 -0
  88. package/skills/frontend/react/react-performance/rules/react/patterns.md +194 -0
  89. package/skills/frontend/react/react-performance/rules/react/security.md +180 -0
  90. package/skills/frontend/react/react-performance/rules/react/testing.md +208 -0
  91. package/skills/frontend/react/react-testing/SKILL.md +4 -4
  92. package/skills/frontend/react/react-testing/rules/react/LICENSE +21 -0
  93. package/skills/frontend/react/react-testing/rules/react/NOTICE.md +11 -0
  94. package/skills/frontend/react/react-testing/rules/react/coding-style.md +109 -0
  95. package/skills/frontend/react/react-testing/rules/react/hooks.md +187 -0
  96. package/skills/frontend/react/react-testing/rules/react/patterns.md +194 -0
  97. package/skills/frontend/react/react-testing/rules/react/security.md +180 -0
  98. package/skills/frontend/react/react-testing/rules/react/testing.md +208 -0
  99. package/skills/general/code-reviewer/AGENTS.md +292 -0
  100. package/skills/general/code-reviewer/LICENSE +201 -0
  101. package/skills/general/code-reviewer/NOTICE.md +10 -0
  102. package/skills/general/code-reviewer/SKILL.md +132 -0
  103. package/skills/general/code-reviewer/rules/correctness-error-handling.md +279 -0
  104. package/skills/general/code-reviewer/rules/maintainability-naming.md +149 -0
  105. package/skills/general/code-reviewer/rules/maintainability-type-hints.md +93 -0
  106. package/skills/general/code-reviewer/rules/performance-n-plus-one.md +250 -0
  107. package/skills/general/code-reviewer/rules/security-sql-injection.md +142 -0
  108. 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`.