@defai.digital/automatosx 5.0.13 → 5.1.2
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/CHANGELOG.md +110 -0
- package/README.md +310 -92
- package/dist/index.js +7784 -6097
- package/dist/index.js.map +1 -1
- package/dist/version.json +3 -3
- package/examples/AGENTS_INFO.md +495 -0
- package/examples/README.md +434 -0
- package/examples/abilities/accessibility.md +115 -0
- package/examples/abilities/api-design.md +159 -0
- package/examples/abilities/best-practices.md +102 -0
- package/examples/abilities/caching-strategy.md +165 -0
- package/examples/abilities/ci-cd.md +61 -0
- package/examples/abilities/code-generation.md +95 -0
- package/examples/abilities/code-review.md +42 -0
- package/examples/abilities/component-architecture.md +112 -0
- package/examples/abilities/content-creation.md +97 -0
- package/examples/abilities/data-modeling.md +171 -0
- package/examples/abilities/data-validation.md +50 -0
- package/examples/abilities/db-modeling.md +158 -0
- package/examples/abilities/debugging.md +43 -0
- package/examples/abilities/dependency-audit.md +60 -0
- package/examples/abilities/design-system-implementation.md +126 -0
- package/examples/abilities/documentation.md +54 -0
- package/examples/abilities/error-analysis.md +107 -0
- package/examples/abilities/etl-pipelines.md +44 -0
- package/examples/abilities/feasibility-study.md +20 -0
- package/examples/abilities/general-assistance.md +26 -0
- package/examples/abilities/idea-evaluation.md +21 -0
- package/examples/abilities/infra-as-code.md +57 -0
- package/examples/abilities/job-orchestration.md +44 -0
- package/examples/abilities/literature-review.md +19 -0
- package/examples/abilities/logical-analysis.md +21 -0
- package/examples/abilities/longform-report.md +25 -0
- package/examples/abilities/observability.md +61 -0
- package/examples/abilities/our-architecture-decisions.md +180 -0
- package/examples/abilities/our-code-review-checklist.md +149 -0
- package/examples/abilities/our-coding-standards.md +270 -0
- package/examples/abilities/our-project-structure.md +175 -0
- package/examples/abilities/performance-analysis.md +56 -0
- package/examples/abilities/performance.md +80 -0
- package/examples/abilities/problem-solving.md +50 -0
- package/examples/abilities/refactoring.md +49 -0
- package/examples/abilities/release-strategy.md +58 -0
- package/examples/abilities/risk-assessment.md +19 -0
- package/examples/abilities/secrets-policy.md +61 -0
- package/examples/abilities/secure-coding-review.md +51 -0
- package/examples/abilities/security-audit.md +65 -0
- package/examples/abilities/sql-optimization.md +84 -0
- package/examples/abilities/state-management.md +96 -0
- package/examples/abilities/task-planning.md +65 -0
- package/examples/abilities/technical-writing.md +77 -0
- package/examples/abilities/testing.md +47 -0
- package/examples/abilities/threat-modeling.md +49 -0
- package/examples/abilities/troubleshooting.md +80 -0
- package/examples/agents/.tmp +0 -0
- package/examples/agents/backend.yaml +69 -0
- package/examples/agents/ceo.yaml +60 -0
- package/examples/agents/cto.yaml +59 -0
- package/examples/agents/data.yaml +77 -0
- package/examples/agents/design.yaml +73 -0
- package/examples/agents/devops.yaml +82 -0
- package/examples/agents/frontend.yaml +74 -0
- package/examples/agents/product.yaml +69 -0
- package/examples/agents/quality.yaml +70 -0
- package/examples/agents/researcher.yaml +71 -0
- package/examples/agents/security.yaml +84 -0
- package/examples/agents/writer.yaml +77 -0
- package/examples/claude/commands/ax:agent.md +37 -0
- package/examples/claude/commands/ax:clear.md +22 -0
- package/examples/claude/commands/ax:init.md +25 -0
- package/examples/claude/commands/ax:list.md +19 -0
- package/examples/claude/commands/ax:memory.md +25 -0
- package/examples/claude/commands/ax:status.md +24 -0
- package/examples/claude/commands/ax:update.md +28 -0
- package/examples/claude/mcp/automatosx.json +244 -0
- package/examples/teams/business.yaml +56 -0
- package/examples/teams/core.yaml +59 -0
- package/examples/teams/design.yaml +58 -0
- package/examples/teams/engineering.yaml +69 -0
- package/examples/teams/research.yaml +56 -0
- package/examples/templates/analyst.yaml +60 -0
- package/examples/templates/assistant.yaml +48 -0
- package/examples/templates/basic-agent.yaml +28 -0
- package/examples/templates/code-reviewer.yaml +52 -0
- package/examples/templates/debugger.yaml +63 -0
- package/examples/templates/designer.yaml +69 -0
- package/examples/templates/developer.yaml +60 -0
- package/examples/templates/fullstack-developer.yaml +395 -0
- package/examples/templates/qa-specialist.yaml +71 -0
- package/examples/use-cases/01-web-app-development.md +374 -0
- package/package.json +2 -1
- package/version.json +3 -3
|
@@ -0,0 +1,434 @@
|
|
|
1
|
+
# AutomatosX Examples
|
|
2
|
+
|
|
3
|
+
This directory contains example agents, abilities, and usage patterns to help you get started with AutomatosX.
|
|
4
|
+
|
|
5
|
+
## Directory Structure
|
|
6
|
+
|
|
7
|
+
```
|
|
8
|
+
examples/
|
|
9
|
+
├── agents/ # Example agent profiles (YAML)
|
|
10
|
+
├── abilities/ # Example ability definitions (Markdown)
|
|
11
|
+
├── use-cases/ # Complete usage scenarios
|
|
12
|
+
└── README.md # This file
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Quick Start
|
|
16
|
+
|
|
17
|
+
### 1. Using Example Agents
|
|
18
|
+
|
|
19
|
+
Copy an example agent to your project:
|
|
20
|
+
|
|
21
|
+
```bash
|
|
22
|
+
# Copy all example agents
|
|
23
|
+
cp -r examples/agents/* .automatosx/agents/
|
|
24
|
+
|
|
25
|
+
# Or copy a specific agent
|
|
26
|
+
cp examples/agents/backend.yaml .automatosx/agents/
|
|
27
|
+
|
|
28
|
+
# Test the agent
|
|
29
|
+
automatosx run backend "Hello, introduce yourself"
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
### 2. Using Example Abilities
|
|
33
|
+
|
|
34
|
+
Copy example abilities to your project:
|
|
35
|
+
|
|
36
|
+
```bash
|
|
37
|
+
# Copy all abilities
|
|
38
|
+
cp -r examples/abilities/* .automatosx/abilities/
|
|
39
|
+
|
|
40
|
+
# Or copy specific abilities
|
|
41
|
+
cp examples/abilities/code-review.md .automatosx/abilities/
|
|
42
|
+
cp examples/abilities/debugging.md .automatosx/abilities/
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
### 3. Customizing Agents
|
|
46
|
+
|
|
47
|
+
Edit agent profiles to customize behavior:
|
|
48
|
+
|
|
49
|
+
```bash
|
|
50
|
+
# Edit agent profile
|
|
51
|
+
vim .automatosx/agents/backend.yaml
|
|
52
|
+
|
|
53
|
+
# Customize:
|
|
54
|
+
# - name: Unique identifier
|
|
55
|
+
# - description: Agent's purpose
|
|
56
|
+
# - model: AI model to use
|
|
57
|
+
# - temperature: Creativity level (0.0-1.0)
|
|
58
|
+
# - abilities: List of abilities to enable
|
|
59
|
+
# - systemPrompt: Detailed instructions
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
## Agent Names
|
|
63
|
+
|
|
64
|
+
**AutomatosX agents have human-friendly names!** 🎉
|
|
65
|
+
|
|
66
|
+
Instead of remembering technical roles, you can use memorable names:
|
|
67
|
+
|
|
68
|
+
- 👨💻 **Bob** - Backend Engineer
|
|
69
|
+
- 👨💻 **Frank** - Frontend Developer
|
|
70
|
+
- 🔒 **Steve** - Security Engineer
|
|
71
|
+
- 🎨 **Debbee** - UX/UI Designer
|
|
72
|
+
- 📊 **Daisy** - Data Scientist
|
|
73
|
+
|
|
74
|
+
See [AGENTS_INFO.md](./AGENTS_INFO.md) for the complete directory.
|
|
75
|
+
|
|
76
|
+
## Available Agents
|
|
77
|
+
|
|
78
|
+
### backend.yaml - Bob
|
|
79
|
+
|
|
80
|
+
**Purpose**: Backend development specialist for API and server-side tasks
|
|
81
|
+
|
|
82
|
+
**Best for**:
|
|
83
|
+
|
|
84
|
+
- API design and implementation
|
|
85
|
+
- Database modeling
|
|
86
|
+
- Server-side logic
|
|
87
|
+
|
|
88
|
+
**Example**:
|
|
89
|
+
|
|
90
|
+
```bash
|
|
91
|
+
# Using role name
|
|
92
|
+
automatosx run backend "Create a REST API endpoint for user management"
|
|
93
|
+
|
|
94
|
+
# Using display name (easier to remember!)
|
|
95
|
+
automatosx run Bob "Create a REST API endpoint for user management"
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
### quality.yaml - Queenie
|
|
99
|
+
|
|
100
|
+
**Purpose**: Quality assurance and code review
|
|
101
|
+
|
|
102
|
+
**Best for**:
|
|
103
|
+
|
|
104
|
+
- Code review and analysis
|
|
105
|
+
- Debugging and testing
|
|
106
|
+
- Quality assurance
|
|
107
|
+
|
|
108
|
+
**Example**:
|
|
109
|
+
|
|
110
|
+
```bash
|
|
111
|
+
automatosx run backend "Create a React component for user authentication"
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
### quality.yaml
|
|
115
|
+
|
|
116
|
+
**Purpose**: Code review and quality analysis
|
|
117
|
+
|
|
118
|
+
**Best for**:
|
|
119
|
+
|
|
120
|
+
- Reviewing pull requests
|
|
121
|
+
- Finding bugs and issues
|
|
122
|
+
- Suggesting improvements
|
|
123
|
+
|
|
124
|
+
**Example**:
|
|
125
|
+
|
|
126
|
+
```bash
|
|
127
|
+
automatosx run quality "Review the code in src/components/Auth.tsx"
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
### debugger.yaml
|
|
131
|
+
|
|
132
|
+
**Purpose**: Debugging and troubleshooting
|
|
133
|
+
|
|
134
|
+
**Best for**:
|
|
135
|
+
|
|
136
|
+
- Analyzing error messages
|
|
137
|
+
- Finding root causes
|
|
138
|
+
- Suggesting fixes
|
|
139
|
+
|
|
140
|
+
**Example**:
|
|
141
|
+
|
|
142
|
+
```bash
|
|
143
|
+
automatosx run debugger "Help me debug this error: TypeError: Cannot read property 'name' of undefined"
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
### writer.yaml
|
|
147
|
+
|
|
148
|
+
**Purpose**: Technical writing and documentation
|
|
149
|
+
|
|
150
|
+
**Best for**:
|
|
151
|
+
|
|
152
|
+
- Writing documentation
|
|
153
|
+
- Creating tutorials
|
|
154
|
+
- Explaining concepts
|
|
155
|
+
|
|
156
|
+
**Example**:
|
|
157
|
+
|
|
158
|
+
```bash
|
|
159
|
+
automatosx run writer "Write API documentation for the User authentication module"
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
## Available Abilities
|
|
163
|
+
|
|
164
|
+
### Code-Related
|
|
165
|
+
|
|
166
|
+
- **code-generation.md**: Generate new code from requirements
|
|
167
|
+
- **code-review.md**: Review code for quality and issues
|
|
168
|
+
- **refactoring.md**: Improve existing code structure
|
|
169
|
+
- **debugging.md**: Debug and fix code issues
|
|
170
|
+
- **testing.md**: Write and improve tests
|
|
171
|
+
|
|
172
|
+
### Analysis
|
|
173
|
+
|
|
174
|
+
- **error-analysis.md**: Analyze error messages and logs
|
|
175
|
+
- **performance-analysis.md**: Identify performance bottlenecks
|
|
176
|
+
- **security-audit.md**: Check for security vulnerabilities
|
|
177
|
+
|
|
178
|
+
### Documentation
|
|
179
|
+
|
|
180
|
+
- **documentation.md**: Write technical documentation
|
|
181
|
+
- **technical-writing.md**: Create technical content
|
|
182
|
+
- **content-creation.md**: Generate articles and guides
|
|
183
|
+
|
|
184
|
+
### Problem Solving
|
|
185
|
+
|
|
186
|
+
- **problem-solving.md**: Break down and solve problems
|
|
187
|
+
- **task-planning.md**: Plan and organize tasks
|
|
188
|
+
- **troubleshooting.md**: Diagnose and fix issues
|
|
189
|
+
- **best-practices.md**: Apply industry best practices
|
|
190
|
+
|
|
191
|
+
## Usage Patterns
|
|
192
|
+
|
|
193
|
+
### Pattern 1: Interactive Development
|
|
194
|
+
|
|
195
|
+
```bash
|
|
196
|
+
# Start with planning
|
|
197
|
+
automatosx chat backend
|
|
198
|
+
> "I need to build a REST API for user management"
|
|
199
|
+
|
|
200
|
+
# Generate code
|
|
201
|
+
automatosx run backend "Create Express.js routes for user CRUD operations"
|
|
202
|
+
|
|
203
|
+
# Review code
|
|
204
|
+
automatosx run quality "Review the user routes I just created"
|
|
205
|
+
|
|
206
|
+
# Debug issues
|
|
207
|
+
automatosx run debugger "The POST /users endpoint returns 500 error"
|
|
208
|
+
```
|
|
209
|
+
|
|
210
|
+
### Pattern 2: Code Review Workflow
|
|
211
|
+
|
|
212
|
+
```bash
|
|
213
|
+
# Review specific file
|
|
214
|
+
automatosx run quality "Review src/api/users.ts"
|
|
215
|
+
|
|
216
|
+
# Review entire directory
|
|
217
|
+
automatosx run quality "Review all files in src/api/"
|
|
218
|
+
|
|
219
|
+
# Security audit
|
|
220
|
+
automatosx run quality "Check src/api/auth.ts for security issues" \
|
|
221
|
+
--abilities security-audit
|
|
222
|
+
```
|
|
223
|
+
|
|
224
|
+
### Pattern 3: Documentation Generation
|
|
225
|
+
|
|
226
|
+
```bash
|
|
227
|
+
# Generate README
|
|
228
|
+
automatosx run writer "Create a README.md for this project"
|
|
229
|
+
|
|
230
|
+
# API documentation
|
|
231
|
+
automatosx run writer "Document all API endpoints in src/routes/"
|
|
232
|
+
|
|
233
|
+
# Code comments
|
|
234
|
+
automatosx run backend "Add JSDoc comments to src/utils/helpers.ts"
|
|
235
|
+
```
|
|
236
|
+
|
|
237
|
+
### Pattern 4: Learning and Exploration
|
|
238
|
+
|
|
239
|
+
```bash
|
|
240
|
+
# Understand codebase
|
|
241
|
+
automatosx chat backend
|
|
242
|
+
> "Explain the architecture of this project"
|
|
243
|
+
|
|
244
|
+
# Learn specific concepts
|
|
245
|
+
automatosx run backend "How does the authentication flow work?"
|
|
246
|
+
|
|
247
|
+
# Get examples
|
|
248
|
+
automatosx run backend "Show me examples of using the memory system"
|
|
249
|
+
```
|
|
250
|
+
|
|
251
|
+
## Creating Custom Agents
|
|
252
|
+
|
|
253
|
+
### Step 1: Create Profile
|
|
254
|
+
|
|
255
|
+
```yaml
|
|
256
|
+
# .automatosx/agents/my-agent.yaml
|
|
257
|
+
name: my-agent
|
|
258
|
+
description: Custom agent for specific tasks
|
|
259
|
+
model: claude-3-sonnet-20240229
|
|
260
|
+
temperature: 0.7
|
|
261
|
+
maxTokens: 4096
|
|
262
|
+
timeout: 60000
|
|
263
|
+
|
|
264
|
+
abilities:
|
|
265
|
+
- code-generation
|
|
266
|
+
- debugging
|
|
267
|
+
- best-practices
|
|
268
|
+
|
|
269
|
+
systemPrompt: |
|
|
270
|
+
You are a specialized assistant for [your specific domain].
|
|
271
|
+
|
|
272
|
+
Your key responsibilities:
|
|
273
|
+
1. [Responsibility 1]
|
|
274
|
+
2. [Responsibility 2]
|
|
275
|
+
3. [Responsibility 3]
|
|
276
|
+
|
|
277
|
+
Guidelines:
|
|
278
|
+
- Follow [specific style guide]
|
|
279
|
+
- Prioritize [specific aspect]
|
|
280
|
+
- Always [specific behavior]
|
|
281
|
+
```
|
|
282
|
+
|
|
283
|
+
### Step 2: Test Agent
|
|
284
|
+
|
|
285
|
+
```bash
|
|
286
|
+
automatosx run my-agent "Test prompt"
|
|
287
|
+
```
|
|
288
|
+
|
|
289
|
+
### Step 3: Iterate
|
|
290
|
+
|
|
291
|
+
- Test with various prompts
|
|
292
|
+
- Adjust temperature for creativity
|
|
293
|
+
- Add/remove abilities as needed
|
|
294
|
+
- Refine systemPrompt for better results
|
|
295
|
+
|
|
296
|
+
## Creating Custom Abilities
|
|
297
|
+
|
|
298
|
+
### Step 1: Create Ability File
|
|
299
|
+
|
|
300
|
+
```markdown
|
|
301
|
+
<!-- .automatosx/abilities/my-ability.md -->
|
|
302
|
+
# My Custom Ability
|
|
303
|
+
|
|
304
|
+
Brief description of what this ability does.
|
|
305
|
+
|
|
306
|
+
## Purpose
|
|
307
|
+
|
|
308
|
+
Detailed explanation of when and why to use this ability.
|
|
309
|
+
|
|
310
|
+
## Usage Guidelines
|
|
311
|
+
|
|
312
|
+
1. First step
|
|
313
|
+
2. Second step
|
|
314
|
+
3. Third step
|
|
315
|
+
|
|
316
|
+
## Best Practices
|
|
317
|
+
|
|
318
|
+
- Best practice 1
|
|
319
|
+
- Best practice 2
|
|
320
|
+
|
|
321
|
+
## Examples
|
|
322
|
+
|
|
323
|
+
### Example 1: [Scenario]
|
|
324
|
+
[Detailed example with input and expected output]
|
|
325
|
+
|
|
326
|
+
### Example 2: [Scenario]
|
|
327
|
+
[Another example]
|
|
328
|
+
|
|
329
|
+
## Common Pitfalls
|
|
330
|
+
|
|
331
|
+
- Pitfall 1 and how to avoid it
|
|
332
|
+
- Pitfall 2 and how to avoid it
|
|
333
|
+
```
|
|
334
|
+
|
|
335
|
+
### Step 2: Reference in Agent
|
|
336
|
+
|
|
337
|
+
```yaml
|
|
338
|
+
# my-agent.yaml
|
|
339
|
+
abilities:
|
|
340
|
+
- my-ability
|
|
341
|
+
```
|
|
342
|
+
|
|
343
|
+
### Step 3: Test
|
|
344
|
+
|
|
345
|
+
```bash
|
|
346
|
+
automatosx run my-agent "Use my custom ability to..."
|
|
347
|
+
```
|
|
348
|
+
|
|
349
|
+
## Tips and Best Practices
|
|
350
|
+
|
|
351
|
+
### Agent Design
|
|
352
|
+
|
|
353
|
+
1. **Single Responsibility**: Each agent should have a clear, focused purpose
|
|
354
|
+
2. **Descriptive Names**: Use names that clearly indicate the agent's role
|
|
355
|
+
3. **Specific System Prompts**: Provide detailed instructions for consistent behavior
|
|
356
|
+
4. **Appropriate Temperature**:
|
|
357
|
+
- 0.0-0.3: Deterministic, factual tasks
|
|
358
|
+
- 0.4-0.7: Balanced creativity and accuracy
|
|
359
|
+
- 0.8-1.0: Creative, varied outputs
|
|
360
|
+
|
|
361
|
+
### Ability Design
|
|
362
|
+
|
|
363
|
+
1. **Clear Purpose**: Each ability should solve a specific problem
|
|
364
|
+
2. **Detailed Examples**: Show concrete usage patterns
|
|
365
|
+
3. **Best Practices**: Include dos and don'ts
|
|
366
|
+
4. **Composable**: Abilities should work well together
|
|
367
|
+
|
|
368
|
+
### Usage Tips
|
|
369
|
+
|
|
370
|
+
1. **Start Simple**: Begin with example agents, customize as needed
|
|
371
|
+
2. **Iterate Quickly**: Test agents with real tasks, refine based on results
|
|
372
|
+
3. **Use Memory**: Let agents remember context across sessions
|
|
373
|
+
4. **Combine Abilities**: Mix and match abilities for complex tasks
|
|
374
|
+
5. **Debug Mode**: Use `--debug` flag to see what's happening
|
|
375
|
+
|
|
376
|
+
## Troubleshooting
|
|
377
|
+
|
|
378
|
+
### Agent Not Found
|
|
379
|
+
|
|
380
|
+
```bash
|
|
381
|
+
# List available agents
|
|
382
|
+
automatosx list agents
|
|
383
|
+
|
|
384
|
+
# Verify agent file exists
|
|
385
|
+
ls .automatosx/agents/
|
|
386
|
+
```
|
|
387
|
+
|
|
388
|
+
### Abilities Not Working
|
|
389
|
+
|
|
390
|
+
```bash
|
|
391
|
+
# List available abilities
|
|
392
|
+
automatosx list abilities
|
|
393
|
+
|
|
394
|
+
# Check agent profile includes the ability
|
|
395
|
+
cat .automatosx/agents/my-agent.yaml
|
|
396
|
+
```
|
|
397
|
+
|
|
398
|
+
### Unexpected Behavior
|
|
399
|
+
|
|
400
|
+
1. Check agent's systemPrompt for clarity
|
|
401
|
+
2. Adjust temperature (lower = more focused)
|
|
402
|
+
3. Enable debug mode: `--debug`
|
|
403
|
+
4. Review memory context: `automatosx memory list`
|
|
404
|
+
|
|
405
|
+
## Real-World Use Cases
|
|
406
|
+
|
|
407
|
+
See `examples/use-cases/` for complete scenarios:
|
|
408
|
+
|
|
409
|
+
- Web application development
|
|
410
|
+
- API design and implementation
|
|
411
|
+
- Code migration and refactoring
|
|
412
|
+
- Security audit workflow
|
|
413
|
+
- Documentation generation
|
|
414
|
+
|
|
415
|
+
## Community Examples
|
|
416
|
+
|
|
417
|
+
Share your agents and abilities:
|
|
418
|
+
|
|
419
|
+
1. Fork the repository
|
|
420
|
+
2. Add your examples to this directory
|
|
421
|
+
3. Submit a pull request
|
|
422
|
+
4. Include description and usage instructions
|
|
423
|
+
|
|
424
|
+
## Resources
|
|
425
|
+
|
|
426
|
+
- [Main Documentation](../README.md)
|
|
427
|
+
- [Configuration Guide](../docs/configuration.md)
|
|
428
|
+
- [API Reference](../docs/api.md)
|
|
429
|
+
- [FAQ](../FAQ.md)
|
|
430
|
+
- [Troubleshooting](../TROUBLESHOOTING.md)
|
|
431
|
+
|
|
432
|
+
---
|
|
433
|
+
|
|
434
|
+
**Need help?** Open an issue at [GitHub Issues](https://github.com/defai-digital/automatosx/issues) - for bugs, questions, or feature requests (use "enhancement" label for wishlist items).
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
# Accessibility (A11y)
|
|
2
|
+
|
|
3
|
+
Build inclusive web applications following WCAG guidelines.
|
|
4
|
+
|
|
5
|
+
## Core Principles (WCAG)
|
|
6
|
+
|
|
7
|
+
1. **Perceivable** - Users must be able to perceive the information
|
|
8
|
+
2. **Operable** - Users must be able to operate the interface
|
|
9
|
+
3. **Understandable** - Users must understand the information and interface
|
|
10
|
+
4. **Robust** - Content must work with current and future technologies
|
|
11
|
+
|
|
12
|
+
## Essential Practices
|
|
13
|
+
|
|
14
|
+
### 1. Semantic HTML
|
|
15
|
+
- Use proper HTML elements (button, nav, header, main, footer, article)
|
|
16
|
+
- Avoid div/span for interactive elements
|
|
17
|
+
- Use headings (h1-h6) in logical order
|
|
18
|
+
- Use lists (ul, ol) for groups of items
|
|
19
|
+
- Use form elements with proper labels
|
|
20
|
+
|
|
21
|
+
### 2. ARIA Attributes
|
|
22
|
+
- Use aria-label for icons and buttons without text
|
|
23
|
+
- Use aria-describedby for additional context
|
|
24
|
+
- Use aria-live for dynamic content updates
|
|
25
|
+
- Use aria-expanded for collapsible sections
|
|
26
|
+
- Use aria-hidden="true" for decorative elements
|
|
27
|
+
- Don't over-use ARIA (semantic HTML is better)
|
|
28
|
+
|
|
29
|
+
### 3. Keyboard Navigation
|
|
30
|
+
- All interactive elements must be keyboard accessible (Tab, Enter, Space)
|
|
31
|
+
- Provide visible focus indicators (:focus-visible)
|
|
32
|
+
- Implement skip links for main content
|
|
33
|
+
- Use tabindex="0" to add elements to tab order
|
|
34
|
+
- Use tabindex="-1" to remove from tab order (programmatically focusable)
|
|
35
|
+
- Never use positive tabindex values
|
|
36
|
+
|
|
37
|
+
### 4. Color and Contrast
|
|
38
|
+
- Minimum contrast ratio 4.5:1 for normal text
|
|
39
|
+
- Minimum contrast ratio 3:1 for large text (18pt+)
|
|
40
|
+
- Don't rely on color alone to convey information
|
|
41
|
+
- Provide text alternatives for color-coded information
|
|
42
|
+
- Test with color blindness simulators
|
|
43
|
+
|
|
44
|
+
### 5. Forms
|
|
45
|
+
- Use <label> for every form input
|
|
46
|
+
- Provide clear error messages
|
|
47
|
+
- Use aria-invalid and aria-describedby for errors
|
|
48
|
+
- Group related inputs with fieldset/legend
|
|
49
|
+
- Mark required fields clearly (aria-required="true")
|
|
50
|
+
- Provide autocomplete attributes where appropriate
|
|
51
|
+
|
|
52
|
+
### 6. Images and Media
|
|
53
|
+
- Provide alt text for all images
|
|
54
|
+
- Use empty alt="" for decorative images
|
|
55
|
+
- Provide captions for videos
|
|
56
|
+
- Provide transcripts for audio content
|
|
57
|
+
- Don't use images of text (use real text)
|
|
58
|
+
|
|
59
|
+
### 7. Focus Management
|
|
60
|
+
- Manage focus for modals (trap focus, restore on close)
|
|
61
|
+
- Focus first interactive element when opening dialogs
|
|
62
|
+
- Provide focus indicators for all interactive elements
|
|
63
|
+
- Use :focus-visible to show focus only for keyboard users
|
|
64
|
+
- Announce route changes for screen readers
|
|
65
|
+
|
|
66
|
+
### 8. Screen Reader Support
|
|
67
|
+
- Use live regions (aria-live) for dynamic updates
|
|
68
|
+
- Provide meaningful page titles
|
|
69
|
+
- Use aria-label when visual label isn't enough
|
|
70
|
+
- Test with screen readers (NVDA, JAWS, VoiceOver)
|
|
71
|
+
- Announce loading states and errors
|
|
72
|
+
|
|
73
|
+
## Common Patterns
|
|
74
|
+
|
|
75
|
+
### Modal Dialogs
|
|
76
|
+
- Trap focus within modal
|
|
77
|
+
- Close on Escape key
|
|
78
|
+
- Return focus to trigger element on close
|
|
79
|
+
- Use role="dialog" and aria-modal="true"
|
|
80
|
+
- Provide accessible close button
|
|
81
|
+
|
|
82
|
+
### Dropdown Menus
|
|
83
|
+
- Use aria-expanded to indicate state
|
|
84
|
+
- Navigate with arrow keys
|
|
85
|
+
- Close on Escape
|
|
86
|
+
- Close on click outside
|
|
87
|
+
- Focus first item when opened
|
|
88
|
+
|
|
89
|
+
### Form Validation
|
|
90
|
+
- Associate errors with fields (aria-describedby)
|
|
91
|
+
- Mark invalid fields (aria-invalid="true")
|
|
92
|
+
- Announce errors to screen readers
|
|
93
|
+
- Provide clear, specific error messages
|
|
94
|
+
- Don't rely on color alone
|
|
95
|
+
|
|
96
|
+
## Testing Tools
|
|
97
|
+
|
|
98
|
+
- axe DevTools (Chrome extension)
|
|
99
|
+
- Lighthouse accessibility audit
|
|
100
|
+
- WAVE (Web Accessibility Evaluation Tool)
|
|
101
|
+
- Keyboard navigation testing (Tab, Shift+Tab, Enter, Space, Esc, Arrow keys)
|
|
102
|
+
- Screen reader testing (VoiceOver on Mac, NVDA/JAWS on Windows)
|
|
103
|
+
|
|
104
|
+
## Quick Checklist
|
|
105
|
+
|
|
106
|
+
- [ ] All interactive elements keyboard accessible
|
|
107
|
+
- [ ] Proper semantic HTML used
|
|
108
|
+
- [ ] All images have appropriate alt text
|
|
109
|
+
- [ ] Color contrast meets WCAG AA (4.5:1)
|
|
110
|
+
- [ ] Forms have proper labels and error handling
|
|
111
|
+
- [ ] Focus management for modals/dialogs
|
|
112
|
+
- [ ] ARIA attributes used correctly (when needed)
|
|
113
|
+
- [ ] Tested with keyboard navigation
|
|
114
|
+
- [ ] Tested with screen reader
|
|
115
|
+
- [ ] No accessibility errors in axe DevTools
|
|
@@ -0,0 +1,159 @@
|
|
|
1
|
+
# API Design
|
|
2
|
+
|
|
3
|
+
## Overview
|
|
4
|
+
Design RESTful, GraphQL, and other API architectures following industry best practices, focusing on developer experience, performance, and maintainability.
|
|
5
|
+
|
|
6
|
+
## Core Principles
|
|
7
|
+
|
|
8
|
+
### 1. RESTful Design
|
|
9
|
+
- Resource-oriented URL structure
|
|
10
|
+
- Proper HTTP method usage (GET, POST, PUT, PATCH, DELETE)
|
|
11
|
+
- Stateless communication
|
|
12
|
+
- HATEOAS when appropriate
|
|
13
|
+
|
|
14
|
+
### 2. GraphQL Design
|
|
15
|
+
- Schema-first approach
|
|
16
|
+
- Efficient resolver implementation
|
|
17
|
+
- Query complexity analysis
|
|
18
|
+
- Pagination and batching strategies
|
|
19
|
+
|
|
20
|
+
### 3. API Versioning
|
|
21
|
+
- URL versioning (`/v1/`, `/v2/`)
|
|
22
|
+
- Header versioning (`Accept: application/vnd.api+json; version=1`)
|
|
23
|
+
- Deprecation policies and timelines
|
|
24
|
+
|
|
25
|
+
### 4. Error Handling
|
|
26
|
+
- Consistent error response structure
|
|
27
|
+
- Meaningful HTTP status codes
|
|
28
|
+
- Detailed error messages for debugging
|
|
29
|
+
- Error code cataloging
|
|
30
|
+
|
|
31
|
+
### 5. Authentication & Authorization
|
|
32
|
+
- Token-based authentication (JWT, OAuth 2.0)
|
|
33
|
+
- API key management
|
|
34
|
+
- Rate limiting per user/client
|
|
35
|
+
- Scope-based permissions
|
|
36
|
+
|
|
37
|
+
## Design Patterns
|
|
38
|
+
|
|
39
|
+
### Request/Response Patterns
|
|
40
|
+
```
|
|
41
|
+
GET /api/v1/resources/{id}
|
|
42
|
+
→ 200 OK with resource
|
|
43
|
+
→ 404 Not Found
|
|
44
|
+
→ 401 Unauthorized
|
|
45
|
+
|
|
46
|
+
POST /api/v1/resources
|
|
47
|
+
→ 201 Created with Location header
|
|
48
|
+
→ 400 Bad Request with validation errors
|
|
49
|
+
→ 409 Conflict for duplicates
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
### Pagination
|
|
53
|
+
- Cursor-based for large datasets
|
|
54
|
+
- Offset/limit for smaller datasets
|
|
55
|
+
- Include metadata (total count, has_next, cursors)
|
|
56
|
+
|
|
57
|
+
### Filtering & Sorting
|
|
58
|
+
- Query parameters: `?filter[status]=active&sort=-created_at`
|
|
59
|
+
- Standardized field names
|
|
60
|
+
- Documentation of supported operators
|
|
61
|
+
|
|
62
|
+
## Documentation Standards
|
|
63
|
+
|
|
64
|
+
### OpenAPI/Swagger
|
|
65
|
+
- Complete endpoint descriptions
|
|
66
|
+
- Request/response schemas
|
|
67
|
+
- Example payloads
|
|
68
|
+
- Authentication requirements
|
|
69
|
+
|
|
70
|
+
### API Documentation Must Include
|
|
71
|
+
- Quick start guide
|
|
72
|
+
- Authentication flow
|
|
73
|
+
- Rate limits
|
|
74
|
+
- Error codes reference
|
|
75
|
+
- Changelog with version history
|
|
76
|
+
|
|
77
|
+
## Performance Considerations
|
|
78
|
+
|
|
79
|
+
### 1. Response Optimization
|
|
80
|
+
- Minimal payload size
|
|
81
|
+
- Field selection (`?fields=id,name`)
|
|
82
|
+
- Compression (gzip, brotli)
|
|
83
|
+
- Caching headers (ETag, Cache-Control)
|
|
84
|
+
|
|
85
|
+
### 2. Request Optimization
|
|
86
|
+
- Batch endpoints for multiple operations
|
|
87
|
+
- Webhook support for async operations
|
|
88
|
+
- WebSocket for real-time updates
|
|
89
|
+
|
|
90
|
+
### 3. Monitoring
|
|
91
|
+
- Response time percentiles (p50, p95, p99)
|
|
92
|
+
- Error rates by endpoint
|
|
93
|
+
- Rate limit hit metrics
|
|
94
|
+
- Payload size distribution
|
|
95
|
+
|
|
96
|
+
## Security Guidelines
|
|
97
|
+
|
|
98
|
+
### Input Validation
|
|
99
|
+
- Schema validation for all requests
|
|
100
|
+
- Sanitize user input
|
|
101
|
+
- Size limits on payloads
|
|
102
|
+
- Content-type verification
|
|
103
|
+
|
|
104
|
+
### Rate Limiting
|
|
105
|
+
- Per-endpoint limits
|
|
106
|
+
- User/API key throttling
|
|
107
|
+
- Gradual backoff responses
|
|
108
|
+
- 429 Too Many Requests with Retry-After
|
|
109
|
+
|
|
110
|
+
### CORS Configuration
|
|
111
|
+
- Explicit origin whitelisting
|
|
112
|
+
- Credential handling
|
|
113
|
+
- Preflight request caching
|
|
114
|
+
|
|
115
|
+
## Contract Testing
|
|
116
|
+
|
|
117
|
+
### Schema Validation
|
|
118
|
+
- Request validation against OpenAPI spec
|
|
119
|
+
- Response validation
|
|
120
|
+
- Breaking change detection
|
|
121
|
+
|
|
122
|
+
### Backward Compatibility
|
|
123
|
+
- Additive changes only (new fields)
|
|
124
|
+
- Deprecation warnings before removal
|
|
125
|
+
- Versioning for breaking changes
|
|
126
|
+
|
|
127
|
+
## Tools & Technologies
|
|
128
|
+
|
|
129
|
+
### Design
|
|
130
|
+
- OpenAPI 3.x specification
|
|
131
|
+
- Postman/Insomnia for testing
|
|
132
|
+
- GraphQL Playground
|
|
133
|
+
- API Blueprint
|
|
134
|
+
|
|
135
|
+
### Testing
|
|
136
|
+
- Contract testing (Pact)
|
|
137
|
+
- Load testing (k6, JMeter)
|
|
138
|
+
- Security scanning (OWASP ZAP)
|
|
139
|
+
|
|
140
|
+
### Documentation
|
|
141
|
+
- Swagger UI
|
|
142
|
+
- ReDoc
|
|
143
|
+
- GraphQL Voyager
|
|
144
|
+
- Stoplight Studio
|
|
145
|
+
|
|
146
|
+
## Checklist for New API
|
|
147
|
+
|
|
148
|
+
- [ ] OpenAPI spec created and validated
|
|
149
|
+
- [ ] Authentication/authorization implemented
|
|
150
|
+
- [ ] Rate limiting configured
|
|
151
|
+
- [ ] Error responses standardized
|
|
152
|
+
- [ ] CORS properly configured
|
|
153
|
+
- [ ] Input validation on all endpoints
|
|
154
|
+
- [ ] Response caching strategy defined
|
|
155
|
+
- [ ] API documentation published
|
|
156
|
+
- [ ] Monitoring/alerting set up
|
|
157
|
+
- [ ] Contract tests written
|
|
158
|
+
- [ ] Load testing performed
|
|
159
|
+
- [ ] Security audit completed
|