asdm-cli 0.1.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/README.md +784 -0
- package/dist/index.mjs +3013 -0
- package/package.json +58 -0
- package/registry/agents/.gitkeep +0 -0
- package/registry/agents/architect.asdm.md +71 -0
- package/registry/agents/code-reviewer.asdm.md +75 -0
- package/registry/agents/data-analyst.asdm.md +69 -0
- package/registry/agents/documentation-writer.asdm.md +70 -0
- package/registry/agents/mobile-engineer.asdm.md +68 -0
- package/registry/agents/security-auditor.asdm.md +74 -0
- package/registry/agents/test-engineer.asdm.md +70 -0
- package/registry/commands/.gitkeep +0 -0
- package/registry/commands/analyze-schema.asdm.md +73 -0
- package/registry/commands/audit-deps.asdm.md +76 -0
- package/registry/commands/check-file.asdm.md +58 -0
- package/registry/commands/generate-types.asdm.md +82 -0
- package/registry/commands/scaffold-component.asdm.md +89 -0
- package/registry/commands/summarize.asdm.md +61 -0
- package/registry/latest.json +253 -0
- package/registry/policy.yaml +14 -0
- package/registry/profiles/base/.gitkeep +0 -0
- package/registry/profiles/base/profile.yaml +19 -0
- package/registry/profiles/data-analytics/.gitkeep +0 -0
- package/registry/profiles/data-analytics/profile.yaml +24 -0
- package/registry/profiles/fullstack-engineer/.gitkeep +0 -0
- package/registry/profiles/fullstack-engineer/profile.yaml +38 -0
- package/registry/profiles/mobile/ios/.gitkeep +0 -0
- package/registry/profiles/mobile/profile.yaml +24 -0
- package/registry/profiles/security/profile.yaml +24 -0
- package/registry/skills/api-design/.gitkeep +0 -0
- package/registry/skills/api-design/SKILL.asdm.md +101 -0
- package/registry/skills/code-review/SKILL.asdm.md +83 -0
- package/registry/skills/data-pipeline/SKILL.asdm.md +95 -0
- package/registry/skills/frontend-design/SKILL.asdm.md +73 -0
- package/registry/skills/mobile-patterns/SKILL.asdm.md +102 -0
- package/registry/skills/pandas/.gitkeep +0 -0
- package/registry/skills/plan-protocol/SKILL.asdm.md +66 -0
- package/registry/skills/react-best-practices/.gitkeep +0 -0
- package/registry/skills/react-native/.gitkeep +0 -0
- package/registry/skills/sql/.gitkeep +0 -0
- package/registry/skills/swift-ui/.gitkeep +0 -0
- package/registry/skills/threat-modeling/SKILL.asdm.md +87 -0
- package/registry/v0.1.0.json +253 -0
- package/registry/v1.0.0.json +153 -0
- package/schemas/.gitkeep +0 -0
- package/schemas/agent.schema.json +82 -0
- package/schemas/command.schema.json +58 -0
- package/schemas/config.schema.json +29 -0
- package/schemas/lock.schema.json +65 -0
- package/schemas/manifest.schema.json +98 -0
- package/schemas/overlay.schema.json +72 -0
- package/schemas/profile.schema.json +64 -0
- package/schemas/skill.schema.json +64 -0
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
name: fullstack-engineer
|
|
2
|
+
description: "Full-stack web development profile"
|
|
3
|
+
extends:
|
|
4
|
+
- base
|
|
5
|
+
|
|
6
|
+
agents:
|
|
7
|
+
- code-reviewer
|
|
8
|
+
- documentation-writer
|
|
9
|
+
- architect
|
|
10
|
+
- test-engineer
|
|
11
|
+
|
|
12
|
+
skills:
|
|
13
|
+
- plan-protocol
|
|
14
|
+
- code-review
|
|
15
|
+
- frontend-design
|
|
16
|
+
- api-design
|
|
17
|
+
|
|
18
|
+
commands:
|
|
19
|
+
- check-file
|
|
20
|
+
- summarize
|
|
21
|
+
- generate-types
|
|
22
|
+
- scaffold-component
|
|
23
|
+
|
|
24
|
+
providers:
|
|
25
|
+
- opencode
|
|
26
|
+
- claude-code
|
|
27
|
+
- copilot
|
|
28
|
+
|
|
29
|
+
provider_config:
|
|
30
|
+
opencode:
|
|
31
|
+
theme: dark
|
|
32
|
+
claude-code:
|
|
33
|
+
permissions:
|
|
34
|
+
allow:
|
|
35
|
+
- "Read(**)"
|
|
36
|
+
- "Write(src/**)"
|
|
37
|
+
- "Bash(npm test)"
|
|
38
|
+
- "Bash(npm run build)"
|
|
File without changes
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
name: mobile
|
|
2
|
+
description: "Mobile development profile (React Native / Flutter)"
|
|
3
|
+
extends:
|
|
4
|
+
- base
|
|
5
|
+
|
|
6
|
+
agents:
|
|
7
|
+
- code-reviewer
|
|
8
|
+
- documentation-writer
|
|
9
|
+
- mobile-engineer
|
|
10
|
+
|
|
11
|
+
skills:
|
|
12
|
+
- plan-protocol
|
|
13
|
+
- code-review
|
|
14
|
+
- mobile-patterns
|
|
15
|
+
|
|
16
|
+
commands:
|
|
17
|
+
- check-file
|
|
18
|
+
- summarize
|
|
19
|
+
- scaffold-component
|
|
20
|
+
|
|
21
|
+
providers:
|
|
22
|
+
- opencode
|
|
23
|
+
- claude-code
|
|
24
|
+
- copilot
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
name: security
|
|
2
|
+
description: "Security-focused development profile"
|
|
3
|
+
extends:
|
|
4
|
+
- base
|
|
5
|
+
|
|
6
|
+
agents:
|
|
7
|
+
- code-reviewer
|
|
8
|
+
- security-auditor
|
|
9
|
+
- documentation-writer
|
|
10
|
+
|
|
11
|
+
skills:
|
|
12
|
+
- plan-protocol
|
|
13
|
+
- code-review
|
|
14
|
+
- threat-modeling
|
|
15
|
+
|
|
16
|
+
commands:
|
|
17
|
+
- check-file
|
|
18
|
+
- summarize
|
|
19
|
+
- audit-deps
|
|
20
|
+
|
|
21
|
+
providers:
|
|
22
|
+
- opencode
|
|
23
|
+
- claude-code
|
|
24
|
+
- copilot
|
|
File without changes
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: api-design
|
|
3
|
+
type: skill
|
|
4
|
+
description: "RESTful and GraphQL API design principles for consistent, developer-friendly interfaces"
|
|
5
|
+
version: 1.0.0
|
|
6
|
+
tags: [api, rest, graphql, design, openapi]
|
|
7
|
+
trigger: "When designing or reviewing API endpoints, schemas, or contracts"
|
|
8
|
+
|
|
9
|
+
providers:
|
|
10
|
+
opencode:
|
|
11
|
+
location: skills/api-design/
|
|
12
|
+
claude-code:
|
|
13
|
+
location: skills/api-design/
|
|
14
|
+
copilot:
|
|
15
|
+
applyTo: "**/*.{ts,js,yaml,json}"
|
|
16
|
+
---
|
|
17
|
+
|
|
18
|
+
# API Design Skill
|
|
19
|
+
|
|
20
|
+
## Core Principles
|
|
21
|
+
|
|
22
|
+
A good API is a product. Its consumers are developers, and their experience — discoverability, predictability, error clarity, and ease of evolution — is the measure of quality. Design APIs for the caller, not the implementation.
|
|
23
|
+
|
|
24
|
+
## RESTful API Standards
|
|
25
|
+
|
|
26
|
+
### Resource Naming
|
|
27
|
+
- Use plural nouns for collections: `/users`, `/orders`, `/products`
|
|
28
|
+
- Nest resources only when the child cannot exist without the parent: `/users/{id}/addresses`
|
|
29
|
+
- Avoid verbs in URLs — use HTTP methods to express actions: `POST /orders` not `POST /createOrder`
|
|
30
|
+
- Use kebab-case for multi-word resources: `/shipping-addresses`
|
|
31
|
+
|
|
32
|
+
### HTTP Methods
|
|
33
|
+
| Method | Semantics | Idempotent | Safe |
|
|
34
|
+
|--------|-----------|-----------|------|
|
|
35
|
+
| GET | Retrieve resource(s) | Yes | Yes |
|
|
36
|
+
| POST | Create new resource | No | No |
|
|
37
|
+
| PUT | Replace entire resource | Yes | No |
|
|
38
|
+
| PATCH | Partial update | No | No |
|
|
39
|
+
| DELETE | Remove resource | Yes | No |
|
|
40
|
+
|
|
41
|
+
### Status Codes
|
|
42
|
+
- `200 OK` — successful retrieval or update
|
|
43
|
+
- `201 Created` — resource created; include `Location` header
|
|
44
|
+
- `204 No Content` — successful delete or no body to return
|
|
45
|
+
- `400 Bad Request` — client sent invalid input; include error details
|
|
46
|
+
- `401 Unauthorized` — authentication required
|
|
47
|
+
- `403 Forbidden` — authenticated but not authorized
|
|
48
|
+
- `404 Not Found` — resource does not exist
|
|
49
|
+
- `409 Conflict` — state conflict (duplicate, stale update)
|
|
50
|
+
- `422 Unprocessable Entity` — validation failed; include field-level errors
|
|
51
|
+
- `429 Too Many Requests` — rate limit exceeded; include `Retry-After`
|
|
52
|
+
- `500 Internal Server Error` — server fault; never expose internals
|
|
53
|
+
|
|
54
|
+
### Error Response Format
|
|
55
|
+
```json
|
|
56
|
+
{
|
|
57
|
+
"error": {
|
|
58
|
+
"code": "VALIDATION_FAILED",
|
|
59
|
+
"message": "Request validation failed",
|
|
60
|
+
"details": [
|
|
61
|
+
{ "field": "email", "message": "must be a valid email address" }
|
|
62
|
+
]
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
## Pagination
|
|
68
|
+
|
|
69
|
+
For collection endpoints returning potentially large result sets:
|
|
70
|
+
```json
|
|
71
|
+
{
|
|
72
|
+
"data": [...],
|
|
73
|
+
"pagination": {
|
|
74
|
+
"cursor": "eyJpZCI6MTAwfQ==",
|
|
75
|
+
"hasNext": true,
|
|
76
|
+
"pageSize": 20
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
```
|
|
80
|
+
Prefer cursor-based pagination over offset for large or frequently-updated datasets.
|
|
81
|
+
|
|
82
|
+
## Versioning
|
|
83
|
+
|
|
84
|
+
- Version via URL path prefix: `/v1/`, `/v2/`
|
|
85
|
+
- Never break backward compatibility within a version
|
|
86
|
+
- Deprecate with `Deprecation` and `Sunset` response headers before removing
|
|
87
|
+
|
|
88
|
+
## GraphQL Guidelines
|
|
89
|
+
|
|
90
|
+
- Queries should be colocated with their consuming component (fragment colocation)
|
|
91
|
+
- Never expose raw database IDs — use opaque global IDs
|
|
92
|
+
- Use DataLoader for all resolver-level data fetching to avoid N+1
|
|
93
|
+
- Mutations return the mutated resource — callers should not need a follow-up query
|
|
94
|
+
- Rate limit by query complexity, not just request count
|
|
95
|
+
|
|
96
|
+
## Rules
|
|
97
|
+
|
|
98
|
+
- ALWAYS document every endpoint with request schema, response schema, and error conditions
|
|
99
|
+
- NEVER change the meaning of an existing field — add a new field instead
|
|
100
|
+
- Include an `X-Request-Id` header in every response for distributed tracing
|
|
101
|
+
- Validate all inputs at the API boundary; reject before processing
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: code-review
|
|
3
|
+
type: skill
|
|
4
|
+
description: "Comprehensive code review methodology with severity classification and structured feedback"
|
|
5
|
+
version: 1.0.0
|
|
6
|
+
tags: [review, quality, methodology, feedback]
|
|
7
|
+
trigger: "When performing a code review, reviewing a PR, or auditing a file for quality issues"
|
|
8
|
+
|
|
9
|
+
providers:
|
|
10
|
+
opencode:
|
|
11
|
+
location: skills/code-review/
|
|
12
|
+
claude-code:
|
|
13
|
+
location: skills/code-review/
|
|
14
|
+
copilot:
|
|
15
|
+
applyTo: "**/*.{ts,tsx,js,jsx,py,go,java,rs}"
|
|
16
|
+
---
|
|
17
|
+
|
|
18
|
+
# Code Review Skill
|
|
19
|
+
|
|
20
|
+
## Purpose
|
|
21
|
+
|
|
22
|
+
This skill provides a systematic methodology for code review that produces consistent, actionable feedback. Apply it during PR reviews, pair sessions, or self-review before submitting work.
|
|
23
|
+
|
|
24
|
+
## Severity Levels
|
|
25
|
+
|
|
26
|
+
Every finding is classified at one of five levels:
|
|
27
|
+
|
|
28
|
+
| Level | Definition | Response Required |
|
|
29
|
+
|-------|-----------|-------------------|
|
|
30
|
+
| **CRITICAL** | Security vulnerability, data loss risk, or production outage potential | Block merge; fix before approval |
|
|
31
|
+
| **HIGH** | Logic error, missing error handling, or significant performance regression | Block merge; fix or explicitly accept risk |
|
|
32
|
+
| **MEDIUM** | Code quality issue that increases maintenance cost or reduces reliability | Fix preferred; must be tracked if deferred |
|
|
33
|
+
| **LOW** | Style inconsistency, naming issue, or minor inefficiency | Fix encouraged; not a merge blocker |
|
|
34
|
+
| **INFO** | Observation, question, or suggestion without a required action | No action required |
|
|
35
|
+
|
|
36
|
+
## Review Checklist
|
|
37
|
+
|
|
38
|
+
Work through each category systematically:
|
|
39
|
+
|
|
40
|
+
### Correctness
|
|
41
|
+
- Does the code do what the author claims?
|
|
42
|
+
- Are all edge cases handled: null/undefined, empty collections, zero/negative numbers?
|
|
43
|
+
- Are concurrency and ordering assumptions documented and enforced?
|
|
44
|
+
|
|
45
|
+
### Security
|
|
46
|
+
- Is all user input validated and sanitized before use?
|
|
47
|
+
- Are secrets managed externally — no hardcoded credentials?
|
|
48
|
+
- Are authorization checks applied at every entry point?
|
|
49
|
+
- Are dependencies pinned to known-safe versions?
|
|
50
|
+
|
|
51
|
+
### Performance
|
|
52
|
+
- Are there N+1 queries or loops that scale quadratically?
|
|
53
|
+
- Is expensive work computed lazily or cached appropriately?
|
|
54
|
+
- Are large payloads paginated or streamed?
|
|
55
|
+
|
|
56
|
+
### Maintainability
|
|
57
|
+
- Is the code readable without needing to reference the PR description?
|
|
58
|
+
- Are functions named for what they do, not how they do it?
|
|
59
|
+
- Is complexity isolated behind clean interfaces?
|
|
60
|
+
- Is test coverage adequate for the new behavior?
|
|
61
|
+
|
|
62
|
+
### Consistency
|
|
63
|
+
- Does the change follow existing project conventions?
|
|
64
|
+
- Are new abstractions consistent with existing ones?
|
|
65
|
+
- Is error handling style uniform with the rest of the codebase?
|
|
66
|
+
|
|
67
|
+
## Feedback Format
|
|
68
|
+
|
|
69
|
+
Each finding:
|
|
70
|
+
```
|
|
71
|
+
[SEVERITY] file.ts:42
|
|
72
|
+
Issue: <concise description of the problem>
|
|
73
|
+
Suggestion: <specific fix or recommendation>
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
End each review with a summary verdict:
|
|
77
|
+
- `APPROVE` — Ready to merge
|
|
78
|
+
- `REQUEST_CHANGES` — Requires changes before merge
|
|
79
|
+
- `COMMENT` — Observations only; author decides next steps
|
|
80
|
+
|
|
81
|
+
## Confidence Threshold
|
|
82
|
+
|
|
83
|
+
If you are uncertain whether something is a bug or intentional design, mark it `INFO` and ask a question. Do not block a merge on uncertainty.
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: data-pipeline
|
|
3
|
+
type: skill
|
|
4
|
+
description: "Data ingestion, transformation, and pipeline patterns for reliable data engineering"
|
|
5
|
+
version: 1.0.0
|
|
6
|
+
tags: [data, pipeline, etl, elt, airflow, dbt, streaming]
|
|
7
|
+
trigger: "When designing data pipelines, ETL/ELT jobs, transformations, or data engineering workflows"
|
|
8
|
+
|
|
9
|
+
providers:
|
|
10
|
+
opencode:
|
|
11
|
+
location: skills/data-pipeline/
|
|
12
|
+
claude-code:
|
|
13
|
+
location: skills/data-pipeline/
|
|
14
|
+
copilot:
|
|
15
|
+
applyTo: "**/*.{py,sql,yaml}"
|
|
16
|
+
---
|
|
17
|
+
|
|
18
|
+
# Data Pipeline Skill
|
|
19
|
+
|
|
20
|
+
## Core Pipeline Principles
|
|
21
|
+
|
|
22
|
+
Data pipelines fail silently more often than they fail loudly. A pipeline that produces wrong results without alerting is more dangerous than one that crashes. Build in correctness guarantees, observability, and recovery mechanisms from the start.
|
|
23
|
+
|
|
24
|
+
## Pipeline Properties
|
|
25
|
+
|
|
26
|
+
Every production data pipeline must guarantee:
|
|
27
|
+
|
|
28
|
+
### Idempotency
|
|
29
|
+
Re-running a pipeline job for the same time window must produce identical output. Achieve this by:
|
|
30
|
+
- Using `INSERT OVERWRITE` or `MERGE` instead of raw `INSERT`
|
|
31
|
+
- Partitioning output tables by the event time of the source data
|
|
32
|
+
- Making the job aware of its own run ID to detect and skip duplicate processing
|
|
33
|
+
|
|
34
|
+
### Backfill Safety
|
|
35
|
+
Historical reprocessing must not double-count, corrupt, or miss data. Design for:
|
|
36
|
+
- Explicit time range parameters: every job accepts `start_date` and `end_date`
|
|
37
|
+
- Deterministic partitioning: data for a given time range always lands in the same partition
|
|
38
|
+
- Atomicity: write to a staging table, then swap; never append-then-fail
|
|
39
|
+
|
|
40
|
+
### Observability
|
|
41
|
+
- Log row counts at every transformation stage
|
|
42
|
+
- Emit metrics: records processed, records rejected, processing duration, lag
|
|
43
|
+
- Alert on anomalies: row count drops >20%, null rate increases, schema drift
|
|
44
|
+
|
|
45
|
+
## Transformation Patterns
|
|
46
|
+
|
|
47
|
+
### Source Layer (Bronze)
|
|
48
|
+
- Ingest raw data with minimal transformation — preserve source fidelity
|
|
49
|
+
- Add ingestion metadata: `_ingested_at`, `_source_system`, `_batch_id`
|
|
50
|
+
- Schema-on-read for semi-structured sources (JSON, Avro)
|
|
51
|
+
|
|
52
|
+
### Cleansing Layer (Silver)
|
|
53
|
+
- Apply type casting, null handling, and deduplication
|
|
54
|
+
- Validate referential integrity against dimension tables
|
|
55
|
+
- Flag invalid records — route to a dead-letter table for investigation, do not silently drop
|
|
56
|
+
|
|
57
|
+
### Aggregation Layer (Gold)
|
|
58
|
+
- Build business-level aggregates designed for query patterns
|
|
59
|
+
- Optimize partition and clustering keys for consumer query shapes
|
|
60
|
+
- Document freshness SLA and update frequency
|
|
61
|
+
|
|
62
|
+
## SQL Transformation Best Practices
|
|
63
|
+
|
|
64
|
+
```sql
|
|
65
|
+
-- Always filter before aggregating
|
|
66
|
+
WITH filtered_events AS (
|
|
67
|
+
SELECT user_id, event_type, occurred_at
|
|
68
|
+
FROM raw.events
|
|
69
|
+
WHERE occurred_at >= '{{ start_date }}'
|
|
70
|
+
AND occurred_at < '{{ end_date }}'
|
|
71
|
+
AND event_type IS NOT NULL
|
|
72
|
+
),
|
|
73
|
+
-- Aggregate on already-filtered data
|
|
74
|
+
event_counts AS (
|
|
75
|
+
SELECT user_id, event_type, COUNT(*) AS event_count
|
|
76
|
+
FROM filtered_events
|
|
77
|
+
GROUP BY 1, 2
|
|
78
|
+
)
|
|
79
|
+
SELECT * FROM event_counts
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
## dbt Guidelines
|
|
83
|
+
|
|
84
|
+
- One model per transformation step — don't chain multiple heavy transformations in one model
|
|
85
|
+
- Use `ref()` for all model dependencies; never hardcode database/schema names
|
|
86
|
+
- Document every model with a YAML schema file: column descriptions and data tests
|
|
87
|
+
- Run `not_null` and `unique` tests on primary keys for every model
|
|
88
|
+
- Tag models by layer (`bronze`, `silver`, `gold`) and schedule accordingly
|
|
89
|
+
|
|
90
|
+
## Rules
|
|
91
|
+
|
|
92
|
+
- NEVER use `SELECT *` in production pipeline queries — explicit columns only
|
|
93
|
+
- ALWAYS test a pipeline on a small time slice before running against full history
|
|
94
|
+
- Log every schema change to source tables and alert downstream pipeline owners
|
|
95
|
+
- Treat schema evolution as a first-class concern: `COALESCE(new_col, default_val)` before backfill
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: frontend-design
|
|
3
|
+
type: skill
|
|
4
|
+
description: "Frontend UI design patterns and best practices for production-grade web interfaces"
|
|
5
|
+
version: 1.0.0
|
|
6
|
+
tags: [frontend, ui, design, react, css, accessibility]
|
|
7
|
+
trigger: "When building UI components, pages, layouts, or styling web interfaces"
|
|
8
|
+
|
|
9
|
+
providers:
|
|
10
|
+
opencode:
|
|
11
|
+
location: skills/frontend-design/
|
|
12
|
+
claude-code:
|
|
13
|
+
location: skills/frontend-design/
|
|
14
|
+
copilot:
|
|
15
|
+
applyTo: "**/*.{tsx,jsx,css,scss,html}"
|
|
16
|
+
---
|
|
17
|
+
|
|
18
|
+
# Frontend Design Skill
|
|
19
|
+
|
|
20
|
+
## Philosophy
|
|
21
|
+
|
|
22
|
+
Production-grade frontend is not generic. Every UI decision — typography, color, spacing, motion — should be intentional. Avoid defaults that make interfaces look AI-generated. Aim for distinctive, purposeful design that serves the user's task.
|
|
23
|
+
|
|
24
|
+
## Typography
|
|
25
|
+
|
|
26
|
+
- Use a specific, non-system font stack for branded interfaces; system fonts only for utility/admin UIs
|
|
27
|
+
- Establish a type scale with meaningful semantic names: `text-body`, `text-heading-lg`, `text-caption`
|
|
28
|
+
- Line length: 60–80 characters for body text; wider for data-dense displays
|
|
29
|
+
- Contrast ratio minimum: 4.5:1 for body text (WCAG AA), 3:1 for large text
|
|
30
|
+
|
|
31
|
+
## Color System
|
|
32
|
+
|
|
33
|
+
- Define a palette with intentional roles: `color-primary`, `color-surface`, `color-danger`, `color-success`
|
|
34
|
+
- Avoid using raw hex values in components — reference design tokens only
|
|
35
|
+
- Use color to communicate meaning, not just aesthetics: errors are always destructive red, success is green
|
|
36
|
+
- Support both light and dark mode from the start — retrofitting is expensive
|
|
37
|
+
|
|
38
|
+
## Component Patterns
|
|
39
|
+
|
|
40
|
+
### Composition over Configuration
|
|
41
|
+
Prefer small, composable primitives over large components with many props. A `Button` component should not have 20 variants — compose `Icon + Button` and `Badge + Button` instead.
|
|
42
|
+
|
|
43
|
+
### State Ownership
|
|
44
|
+
- Lift state only as high as necessary
|
|
45
|
+
- Co-locate state with the component that owns it
|
|
46
|
+
- Use server state (React Query / SWR) for remote data; local state for UI-only concerns
|
|
47
|
+
|
|
48
|
+
### Accessibility
|
|
49
|
+
- Every interactive element must be keyboard-navigable and have a visible focus indicator
|
|
50
|
+
- Use semantic HTML: `<button>` not `<div onClick>`, `<nav>` not `<div className="nav">`
|
|
51
|
+
- Every image needs descriptive `alt` text; decorative images get `alt=""`
|
|
52
|
+
- Form fields need associated labels — `aria-label` is a last resort
|
|
53
|
+
|
|
54
|
+
## Motion Guidelines
|
|
55
|
+
|
|
56
|
+
- Animate with purpose: motion should guide attention, not decorate
|
|
57
|
+
- Duration: micro-interactions 100–200ms; page transitions 250–400ms
|
|
58
|
+
- Use `prefers-reduced-motion` media query to disable animations for users who need it
|
|
59
|
+
- Prefer `transform` and `opacity` for performance; avoid animating layout properties
|
|
60
|
+
|
|
61
|
+
## Performance
|
|
62
|
+
|
|
63
|
+
- Code-split at the route level; lazy-load heavy components
|
|
64
|
+
- Optimize images: correct format (WebP/AVIF), correct size, lazy loading below the fold
|
|
65
|
+
- Avoid layout shift: reserve space for dynamic content with placeholder dimensions
|
|
66
|
+
- Measure with Core Web Vitals: LCP < 2.5s, CLS < 0.1, INP < 200ms
|
|
67
|
+
|
|
68
|
+
## Rules
|
|
69
|
+
|
|
70
|
+
- NEVER use inline styles for layout — CSS modules, utility classes, or styled components only
|
|
71
|
+
- ALWAYS define focus styles explicitly — do not rely on browser defaults
|
|
72
|
+
- Test on mobile viewport sizes before marking any UI work complete
|
|
73
|
+
- Review rendered output in both light and dark mode
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: mobile-patterns
|
|
3
|
+
type: skill
|
|
4
|
+
description: "Mobile UI/UX patterns and best practices for React Native and Flutter development"
|
|
5
|
+
version: 1.0.0
|
|
6
|
+
tags: [mobile, react-native, flutter, ux, patterns, performance]
|
|
7
|
+
trigger: "When building mobile UI components, screens, or navigation flows in React Native or Flutter"
|
|
8
|
+
|
|
9
|
+
providers:
|
|
10
|
+
opencode:
|
|
11
|
+
location: skills/mobile-patterns/
|
|
12
|
+
claude-code:
|
|
13
|
+
location: skills/mobile-patterns/
|
|
14
|
+
copilot:
|
|
15
|
+
applyTo: "**/*.{tsx,jsx,dart}"
|
|
16
|
+
---
|
|
17
|
+
|
|
18
|
+
# Mobile Patterns Skill
|
|
19
|
+
|
|
20
|
+
## Mobile-First Mindset
|
|
21
|
+
|
|
22
|
+
Mobile UI is not a smaller desktop UI. Users interact with fingers, not cursors. Network is unreliable. Battery and CPU are constrained. Memory is limited. Every pattern in this skill accounts for these realities.
|
|
23
|
+
|
|
24
|
+
## Navigation Patterns
|
|
25
|
+
|
|
26
|
+
### Stack Navigation
|
|
27
|
+
Use for linear flows with a clear back destination: onboarding, checkout, detail views.
|
|
28
|
+
- Always provide an obvious back affordance
|
|
29
|
+
- Preserve scroll position when navigating back
|
|
30
|
+
- Deep link support: every screen should be reachable by URL/route
|
|
31
|
+
|
|
32
|
+
### Tab Navigation
|
|
33
|
+
Use for top-level sections of the application. 5 tabs maximum.
|
|
34
|
+
- Active tab must be visually distinct
|
|
35
|
+
- Preserve each tab's navigation stack when switching
|
|
36
|
+
- Badge tabs for unread counts or notifications
|
|
37
|
+
|
|
38
|
+
### Modal Navigation
|
|
39
|
+
Use for tasks that interrupt the primary flow: confirmation dialogs, pickers, quick actions.
|
|
40
|
+
- Modals must always have a dismiss gesture (swipe down or tap outside)
|
|
41
|
+
- Full-screen modals for multi-step flows; sheets for single-step
|
|
42
|
+
|
|
43
|
+
## List Performance
|
|
44
|
+
|
|
45
|
+
### React Native
|
|
46
|
+
```tsx
|
|
47
|
+
// Always use FlatList for dynamic lists
|
|
48
|
+
<FlatList
|
|
49
|
+
data={items}
|
|
50
|
+
keyExtractor={(item) => item.id}
|
|
51
|
+
renderItem={({ item }) => <ItemRow item={item} />}
|
|
52
|
+
getItemLayout={(_, index) => ({
|
|
53
|
+
length: ITEM_HEIGHT,
|
|
54
|
+
offset: ITEM_HEIGHT * index,
|
|
55
|
+
index,
|
|
56
|
+
})}
|
|
57
|
+
removeClippedSubviews={true}
|
|
58
|
+
maxToRenderPerBatch={10}
|
|
59
|
+
windowSize={10}
|
|
60
|
+
/>
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
### Flutter
|
|
64
|
+
```dart
|
|
65
|
+
// Use ListView.builder for dynamic lists
|
|
66
|
+
ListView.builder(
|
|
67
|
+
itemCount: items.length,
|
|
68
|
+
itemBuilder: (context, index) {
|
|
69
|
+
return ItemTile(item: items[index]);
|
|
70
|
+
},
|
|
71
|
+
)
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
## Offline-First Pattern
|
|
75
|
+
|
|
76
|
+
1. **Optimistic updates**: Apply the change locally immediately; sync to server in background
|
|
77
|
+
2. **Conflict resolution**: Last-write-wins for simple fields; merge strategies for collaborative data
|
|
78
|
+
3. **Sync queue**: Persist pending mutations to local storage; retry on reconnect
|
|
79
|
+
4. **Connectivity awareness**: Show a subtle banner when offline; never block the UI
|
|
80
|
+
|
|
81
|
+
## Touch Interaction Standards
|
|
82
|
+
|
|
83
|
+
- Minimum touch target: 44×44 points (iOS) / 48×48dp (Android)
|
|
84
|
+
- Provide visual feedback for every tap: pressed state, loading state, success/error state
|
|
85
|
+
- Debounce rapid taps on destructive actions (delete, submit)
|
|
86
|
+
- Long press for secondary actions on list items; expose via context menu
|
|
87
|
+
|
|
88
|
+
## Platform Conventions
|
|
89
|
+
|
|
90
|
+
| Pattern | iOS | Android |
|
|
91
|
+
|---------|-----|---------|
|
|
92
|
+
| Back navigation | Swipe right, back button in nav bar | System back button / gesture |
|
|
93
|
+
| Destructive action | Red text, confirmation sheet | Snackbar with undo |
|
|
94
|
+
| Pull to refresh | `UIRefreshControl` pattern | `SwipeRefreshLayout` pattern |
|
|
95
|
+
| Loading state | Activity indicator centered | Circular progress indicator |
|
|
96
|
+
|
|
97
|
+
## Rules
|
|
98
|
+
|
|
99
|
+
- NEVER block the main thread — all I/O and heavy computation must be async
|
|
100
|
+
- ALWAYS handle the keyboard: inputs scroll into view, dismiss on tap-outside
|
|
101
|
+
- Test every screen with Dynamic Type (iOS) and Font Scale (Android) at maximum size
|
|
102
|
+
- Respect `prefers-reduced-motion` / `ANIMATOR_DURATION_SCALE = 0` in all animations
|
|
File without changes
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: plan-protocol
|
|
3
|
+
type: skill
|
|
4
|
+
description: "Structured implementation planning methodology with citations and quality gates"
|
|
5
|
+
version: 1.0.0
|
|
6
|
+
tags: [planning, methodology, implementation, documentation]
|
|
7
|
+
trigger: "When asked to plan, design, or implement a feature, task, or system change"
|
|
8
|
+
|
|
9
|
+
providers:
|
|
10
|
+
opencode:
|
|
11
|
+
location: skills/plan-protocol/
|
|
12
|
+
claude-code:
|
|
13
|
+
location: skills/plan-protocol/
|
|
14
|
+
copilot:
|
|
15
|
+
applyTo: "**/*"
|
|
16
|
+
---
|
|
17
|
+
|
|
18
|
+
# Plan Protocol
|
|
19
|
+
|
|
20
|
+
## Overview
|
|
21
|
+
|
|
22
|
+
Before implementing any non-trivial change, produce a structured plan that can be reviewed, approved, and referenced throughout execution. A plan is not a to-do list — it is a contract between what you intend to do and why, enabling collaborators to catch mistakes before they become code.
|
|
23
|
+
|
|
24
|
+
## When to Write a Plan
|
|
25
|
+
|
|
26
|
+
Apply this skill whenever:
|
|
27
|
+
- The task spans more than one file or component
|
|
28
|
+
- The approach involves a non-obvious technical choice
|
|
29
|
+
- The implementation has dependencies on external systems or contracts
|
|
30
|
+
- Another person needs to understand what you are about to do
|
|
31
|
+
|
|
32
|
+
For trivial, single-file changes that implement obvious logic, proceed without a formal plan.
|
|
33
|
+
|
|
34
|
+
## Plan Structure
|
|
35
|
+
|
|
36
|
+
A well-formed implementation plan contains the following sections:
|
|
37
|
+
|
|
38
|
+
### 1. Problem Statement
|
|
39
|
+
One paragraph describing the current state, why it is insufficient, and what success looks like. Be specific: "users cannot reset their password" is better than "improve auth."
|
|
40
|
+
|
|
41
|
+
### 2. Approach
|
|
42
|
+
A narrative description of the chosen solution. Explain the key design decisions and why this approach was selected over alternatives. Reference any research, prior art, or constraints that shaped the decision.
|
|
43
|
+
|
|
44
|
+
### 3. Implementation Steps
|
|
45
|
+
An ordered list of concrete steps. Each step should be independently verifiable and small enough to complete in a single session. Number the steps; do not use bullets.
|
|
46
|
+
|
|
47
|
+
### 4. Affected Components
|
|
48
|
+
An explicit list of files, services, schemas, or APIs that will change. This prevents scope creep and helps reviewers understand blast radius.
|
|
49
|
+
|
|
50
|
+
### 5. Risk and Rollback
|
|
51
|
+
What could go wrong, and how to undo the change if it must be reverted. Every plan should have a rollback path.
|
|
52
|
+
|
|
53
|
+
### 6. Open Questions
|
|
54
|
+
Unresolved decisions that require input before or during implementation. If a plan has no open questions, it was written too quickly.
|
|
55
|
+
|
|
56
|
+
## Citations
|
|
57
|
+
|
|
58
|
+
When a decision is informed by research, link the source inline using `(ref:<delegation-id>)` notation. This creates an audit trail from decision to evidence.
|
|
59
|
+
|
|
60
|
+
## Quality Gates
|
|
61
|
+
|
|
62
|
+
Before marking a plan as final:
|
|
63
|
+
- [ ] Every implementation step is atomic and independently reviewable
|
|
64
|
+
- [ ] Affected components list is complete
|
|
65
|
+
- [ ] Rollback procedure is defined
|
|
66
|
+
- [ ] Open questions are either answered or explicitly deferred with a reason
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|