@preapexis/pi-kit 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.github/workflows/publish.yml +30 -0
- package/.pi/settings.json +3 -0
- package/AGENTS.md +199 -0
- package/CHANGELOG.md +71 -0
- package/LICENSE +15 -0
- package/README.md +370 -0
- package/extensions/brand-ui.ts +107 -0
- package/extensions/git-guard.ts +134 -0
- package/extensions/prompts.ts +53 -0
- package/extensions/safety.ts +242 -0
- package/extensions/sound-cues.ts +88 -0
- package/extensions/status.ts +86 -0
- package/extensions/update.ts +245 -0
- package/extensions/usage-tracker.ts +154 -0
- package/package.json +41 -0
- package/prompts/commit.md +79 -0
- package/prompts/implement.md +41 -0
- package/prompts/init.md +98 -0
- package/prompts/plan.md +142 -0
- package/prompts/review-safe.md +78 -0
- package/prompts/save-plan.md +65 -0
- package/prompts/security.md +100 -0
- package/settings.json +4 -0
- package/skills/component-implementation/SKILL.md +80 -0
- package/skills/frontend-onboarding/SKILL.md +76 -0
- package/skills/frontend-quality/SKILL.md +85 -0
- package/skills/safe-coding/SKILL.md +48 -0
- package/tests/extensions.test.ts +49 -0
- package/tests/helpers.ts +104 -0
- package/tests/package.test.ts +38 -0
- package/tests/prompts.test.ts +40 -0
- package/tests/skills.test.ts +42 -0
- package/tests/themes.test.ts +49 -0
- package/themes/latte-review.json +77 -0
- package/themes/neon-guardian.json +77 -0
- package/themes/safe-dark.json +75 -0
- package/themes/tokyo-midnight.json +77 -0
- package/tsconfig.json +14 -0
- package/vitest.config.ts +8 -0
package/prompts/plan.md
ADDED
|
@@ -0,0 +1,142 @@
|
|
|
1
|
+
# Create Plan with Batch Model Guidance
|
|
2
|
+
|
|
3
|
+
This prompt is read-only. Do not edit, create, or delete any file.
|
|
4
|
+
|
|
5
|
+
## User request
|
|
6
|
+
|
|
7
|
+
Use the user's message after `/plan` as the request.
|
|
8
|
+
|
|
9
|
+
If no request is provided, ask the user what they want to plan.
|
|
10
|
+
|
|
11
|
+
## Model preference
|
|
12
|
+
|
|
13
|
+
If the user provides specific models, use those models in the recommendation.
|
|
14
|
+
|
|
15
|
+
If the project has an `AGENTS.md` file, read it and check whether it contains model preferences, available models, coding rules, or execution guidance.
|
|
16
|
+
|
|
17
|
+
If no model preference is provided, use Claude-style defaults:
|
|
18
|
+
|
|
19
|
+
- Use Haiku for simple, repetitive, low-risk, or mechanical batches.
|
|
20
|
+
- Use Sonnet for normal implementation, debugging, refactoring, and medium-complexity work.
|
|
21
|
+
- Use Opus for high-risk, architecture-heavy, security-sensitive, or difficult reasoning work.
|
|
22
|
+
|
|
23
|
+
## Effort levels
|
|
24
|
+
|
|
25
|
+
For each batch, recommend an effort level:
|
|
26
|
+
|
|
27
|
+
- Low effort: simple, obvious, low-risk changes.
|
|
28
|
+
- Medium effort: normal coding work, moderate reasoning, some project context needed.
|
|
29
|
+
- High effort: complex reasoning, architecture decisions, risky changes, security-sensitive work, or unclear requirements.
|
|
30
|
+
|
|
31
|
+
## Your task
|
|
32
|
+
|
|
33
|
+
Read the current project to understand context. Then produce a structured implementation plan based on the user request.
|
|
34
|
+
|
|
35
|
+
Break the plan into batches or sub-plans. Each batch should be small enough to run safely as a separate agent task.
|
|
36
|
+
|
|
37
|
+
For every batch, include:
|
|
38
|
+
|
|
39
|
+
- Goal
|
|
40
|
+
- Files likely involved
|
|
41
|
+
- What should be done
|
|
42
|
+
- Risk level
|
|
43
|
+
- Recommended model
|
|
44
|
+
- Recommended effort level
|
|
45
|
+
- Whether user approval is needed before implementation
|
|
46
|
+
|
|
47
|
+
## Rules
|
|
48
|
+
|
|
49
|
+
- Read only.
|
|
50
|
+
- Do not write, edit, delete, install packages, or run commands that change files.
|
|
51
|
+
- Ask questions if the request is unclear.
|
|
52
|
+
- Do not guess important missing details.
|
|
53
|
+
- Keep the plan actionable and specific.
|
|
54
|
+
- Use plain language, but include technical details where they matter.
|
|
55
|
+
- Mention risks and open questions clearly.
|
|
56
|
+
- Prefer smaller batches over one large implementation.
|
|
57
|
+
- Put risky or unclear work in a separate batch.
|
|
58
|
+
- Put tests and verification in their own batch if the work is large.
|
|
59
|
+
- Recommend cheaper/faster models for simple batches and stronger models for difficult batches.
|
|
60
|
+
|
|
61
|
+
## Output format
|
|
62
|
+
|
|
63
|
+
```markdown
|
|
64
|
+
# Plan: <short title>
|
|
65
|
+
|
|
66
|
+
## Goal
|
|
67
|
+
|
|
68
|
+
One sentence describing the outcome.
|
|
69
|
+
|
|
70
|
+
## Context
|
|
71
|
+
|
|
72
|
+
What you learned from reading the project.
|
|
73
|
+
|
|
74
|
+
## Assumptions
|
|
75
|
+
|
|
76
|
+
- <assumption 1>
|
|
77
|
+
- <assumption 2>
|
|
78
|
+
|
|
79
|
+
## Batches
|
|
80
|
+
|
|
81
|
+
### Batch 1: <name>
|
|
82
|
+
|
|
83
|
+
- **Goal:** <what this batch achieves>
|
|
84
|
+
- **Files likely involved:**
|
|
85
|
+
- `path/to/file`
|
|
86
|
+
- **Work:**
|
|
87
|
+
1. <step 1>
|
|
88
|
+
2. <step 2>
|
|
89
|
+
- **Risk:** Low / Medium / High
|
|
90
|
+
- **Recommended model:** Haiku / Sonnet / Opus / user-provided model
|
|
91
|
+
- **Recommended effort:** Low / Medium / High
|
|
92
|
+
- **Needs approval before implementation:** Yes / No
|
|
93
|
+
- **Why this model:** <short reason>
|
|
94
|
+
|
|
95
|
+
### Batch 2: <name>
|
|
96
|
+
|
|
97
|
+
- **Goal:** <what this batch achieves>
|
|
98
|
+
- **Files likely involved:**
|
|
99
|
+
- `path/to/file`
|
|
100
|
+
- **Work:**
|
|
101
|
+
1. <step 1>
|
|
102
|
+
2. <step 2>
|
|
103
|
+
- **Risk:** Low / Medium / High
|
|
104
|
+
- **Recommended model:** Haiku / Sonnet / Opus / user-provided model
|
|
105
|
+
- **Recommended effort:** Low / Medium / High
|
|
106
|
+
- **Needs approval before implementation:** Yes / No
|
|
107
|
+
- **Why this model:** <short reason>
|
|
108
|
+
|
|
109
|
+
## Files to change
|
|
110
|
+
|
|
111
|
+
- `path/to/file`
|
|
112
|
+
|
|
113
|
+
## Risks or open questions
|
|
114
|
+
|
|
115
|
+
- <risk 1>
|
|
116
|
+
- <risk 2>
|
|
117
|
+
|
|
118
|
+
## Success criteria
|
|
119
|
+
|
|
120
|
+
- <criteria 1>
|
|
121
|
+
- <criteria 2>
|
|
122
|
+
|
|
123
|
+
## Final execution summary
|
|
124
|
+
|
|
125
|
+
| Batch | Purpose | Model | Effort | Risk | Approval needed |
|
|
126
|
+
| ----- | --------- | ------ | ------ | ------ | --------------- |
|
|
127
|
+
| 1 | <purpose> | Haiku | Low | Low | No |
|
|
128
|
+
| 2 | <purpose> | Sonnet | Medium | Medium | No |
|
|
129
|
+
| 3 | <purpose> | Opus | High | High | Yes |
|
|
130
|
+
|
|
131
|
+
## Recommended run order
|
|
132
|
+
|
|
133
|
+
1. Run Batch <number> with <model> using <effort> effort.
|
|
134
|
+
2. Run Batch <number> with <model> using <effort> effort.
|
|
135
|
+
3. Run Batch <number> with <model> using <effort> effort.
|
|
136
|
+
|
|
137
|
+
## Simple recommendation
|
|
138
|
+
|
|
139
|
+
Use `<model>` with `<effort>` effort for batches `<batch numbers>`.
|
|
140
|
+
Use `<model>` with `<effort>` effort for batches `<batch numbers>`.
|
|
141
|
+
Use `<model>` with `<effort>` effort for batches `<batch numbers>`.
|
|
142
|
+
```
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
# Safe Project Review
|
|
2
|
+
|
|
3
|
+
Review the project safely. Do not edit, create, delete, or modify any files.
|
|
4
|
+
|
|
5
|
+
## Goal
|
|
6
|
+
|
|
7
|
+
Find practical issues in the current project without making changes.
|
|
8
|
+
|
|
9
|
+
## Review areas
|
|
10
|
+
|
|
11
|
+
Look for:
|
|
12
|
+
|
|
13
|
+
- Bugs
|
|
14
|
+
- Broken or suspicious logic
|
|
15
|
+
- Security risks
|
|
16
|
+
- Secrets in code
|
|
17
|
+
- Risky shell commands
|
|
18
|
+
- Risky package or dependency changes
|
|
19
|
+
- Files that should not be changed
|
|
20
|
+
- Missing tests
|
|
21
|
+
- Missing error handling
|
|
22
|
+
- Type or lint problems
|
|
23
|
+
- Confusing project structure
|
|
24
|
+
- Outdated or duplicated code
|
|
25
|
+
|
|
26
|
+
## Steps
|
|
27
|
+
|
|
28
|
+
1. First explain your review plan.
|
|
29
|
+
2. Read the most relevant project files.
|
|
30
|
+
3. Inspect tests and configuration if available.
|
|
31
|
+
4. Report findings clearly.
|
|
32
|
+
5. Do not fix anything unless the user asks.
|
|
33
|
+
|
|
34
|
+
## Rules
|
|
35
|
+
|
|
36
|
+
- Read only.
|
|
37
|
+
- Do not edit files.
|
|
38
|
+
- Do not install packages.
|
|
39
|
+
- Do not run destructive commands.
|
|
40
|
+
- Do not report guesses as facts.
|
|
41
|
+
- If you are unsure, mark it as a question.
|
|
42
|
+
- Focus on real issues with evidence.
|
|
43
|
+
- Prefer important findings over long generic advice.
|
|
44
|
+
|
|
45
|
+
## Output format
|
|
46
|
+
|
|
47
|
+
```markdown
|
|
48
|
+
# Safe Review Report
|
|
49
|
+
|
|
50
|
+
## Review Plan
|
|
51
|
+
|
|
52
|
+
Briefly explain what you checked.
|
|
53
|
+
|
|
54
|
+
## Findings
|
|
55
|
+
|
|
56
|
+
### <severity>: <title>
|
|
57
|
+
|
|
58
|
+
- **File:** `path/to/file`
|
|
59
|
+
- **Issue:** What looks wrong.
|
|
60
|
+
- **Why it matters:** Impact or risk.
|
|
61
|
+
- **Suggested fix:** What should be changed.
|
|
62
|
+
|
|
63
|
+
## Missing Tests
|
|
64
|
+
|
|
65
|
+
List important missing tests, if any.
|
|
66
|
+
|
|
67
|
+
## Files to Treat Carefully
|
|
68
|
+
|
|
69
|
+
List files or folders the agent should avoid changing casually.
|
|
70
|
+
|
|
71
|
+
## Open Questions
|
|
72
|
+
|
|
73
|
+
List anything unclear.
|
|
74
|
+
|
|
75
|
+
## Summary
|
|
76
|
+
|
|
77
|
+
Short final summary.
|
|
78
|
+
```
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
# Save Plan as Markdown
|
|
2
|
+
|
|
3
|
+
Save the plan below as a markdown file.
|
|
4
|
+
|
|
5
|
+
## Plan to save
|
|
6
|
+
|
|
7
|
+
{PLAN_CONTENT}
|
|
8
|
+
|
|
9
|
+
## Your task
|
|
10
|
+
|
|
11
|
+
1. Read the project root.
|
|
12
|
+
2. Check whether a `docs/` folder exists.
|
|
13
|
+
3. Create `docs/plans/` if needed.
|
|
14
|
+
4. Save the plan as:
|
|
15
|
+
|
|
16
|
+
```txt
|
|
17
|
+
docs/plans/YYYY-MM-DD-plan-name.md
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
5. If `AGENTS.md` exists, ask before adding a reference to it.
|
|
21
|
+
|
|
22
|
+
## File naming
|
|
23
|
+
|
|
24
|
+
Pick a short slug from the plan title.
|
|
25
|
+
|
|
26
|
+
Use today's date in the filename.
|
|
27
|
+
|
|
28
|
+
Example:
|
|
29
|
+
|
|
30
|
+
```txt
|
|
31
|
+
docs/plans/2026-06-25-add-login-flow.md
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
## Output structure for the plan file
|
|
35
|
+
|
|
36
|
+
```markdown
|
|
37
|
+
# <plan title>
|
|
38
|
+
|
|
39
|
+
## Goal
|
|
40
|
+
|
|
41
|
+
## Context
|
|
42
|
+
|
|
43
|
+
## Assumptions
|
|
44
|
+
|
|
45
|
+
## Batches
|
|
46
|
+
|
|
47
|
+
## Files to change
|
|
48
|
+
|
|
49
|
+
## Risks or open questions
|
|
50
|
+
|
|
51
|
+
## Success criteria
|
|
52
|
+
|
|
53
|
+
## Final execution summary
|
|
54
|
+
|
|
55
|
+
## Recommended run order
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
## Rules
|
|
59
|
+
|
|
60
|
+
- Do not change the meaning of the plan.
|
|
61
|
+
- Fix formatting only.
|
|
62
|
+
- Create missing folders if needed.
|
|
63
|
+
- Do not edit `AGENTS.md` unless the user approves.
|
|
64
|
+
- If a plan file with the same name already exists, ask before overwriting.
|
|
65
|
+
- At the end, report the saved file path.
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
# Security Review
|
|
2
|
+
|
|
3
|
+
Review the project for security issues. Do not edit any files.
|
|
4
|
+
|
|
5
|
+
## Goal
|
|
6
|
+
|
|
7
|
+
Find real security risks in the project with clear evidence.
|
|
8
|
+
|
|
9
|
+
## Focus areas
|
|
10
|
+
|
|
11
|
+
Check for:
|
|
12
|
+
|
|
13
|
+
- Secret leakage
|
|
14
|
+
- Hardcoded API keys or tokens
|
|
15
|
+
- Unsafe shell commands
|
|
16
|
+
- Command injection
|
|
17
|
+
- SQL injection
|
|
18
|
+
- XSS or HTML injection
|
|
19
|
+
- Auth or permission bugs
|
|
20
|
+
- Insecure dependencies
|
|
21
|
+
- Unsafe file handling
|
|
22
|
+
- Logging sensitive data
|
|
23
|
+
- Missing input validation
|
|
24
|
+
- Weak error handling
|
|
25
|
+
- Unsafe use of `eval`, dynamic imports, or script execution
|
|
26
|
+
- Dangerous deployment or CI/CD configuration
|
|
27
|
+
|
|
28
|
+
## How to review
|
|
29
|
+
|
|
30
|
+
1. Read the relevant files and changes.
|
|
31
|
+
2. Check configuration, scripts, API routes, auth code, and file handling code.
|
|
32
|
+
3. Look for hardcoded secrets, unsafe command usage, weak validation, and risky permissions.
|
|
33
|
+
4. If package/security commands are available, suggest them, but do not run install or destructive commands.
|
|
34
|
+
5. Report only issues with evidence.
|
|
35
|
+
6. If unsure, report it under **Questions**, not as a confirmed finding.
|
|
36
|
+
|
|
37
|
+
## Output format
|
|
38
|
+
|
|
39
|
+
```markdown
|
|
40
|
+
# Security Review Report
|
|
41
|
+
|
|
42
|
+
## Summary
|
|
43
|
+
|
|
44
|
+
Briefly summarize the overall security state.
|
|
45
|
+
|
|
46
|
+
## Findings
|
|
47
|
+
|
|
48
|
+
### <severity>: <title>
|
|
49
|
+
|
|
50
|
+
- **File:** `path/to/file`
|
|
51
|
+
- **Line:** `<line number or range if available>`
|
|
52
|
+
- **Issue:** Short description of the problem.
|
|
53
|
+
- **Evidence:** What code or behavior shows the issue.
|
|
54
|
+
- **Risk:** What could go wrong.
|
|
55
|
+
- **Fix:** Recommended change.
|
|
56
|
+
|
|
57
|
+
## Questions
|
|
58
|
+
|
|
59
|
+
List anything suspicious but not confirmed.
|
|
60
|
+
|
|
61
|
+
## Suggested Checks
|
|
62
|
+
|
|
63
|
+
List safe commands the user can run, for example:
|
|
64
|
+
|
|
65
|
+
- `npm audit`
|
|
66
|
+
- `npm run lint`
|
|
67
|
+
- `npm test`
|
|
68
|
+
|
|
69
|
+
Do not run risky commands without approval.
|
|
70
|
+
|
|
71
|
+
## Final Notes
|
|
72
|
+
|
|
73
|
+
Short closing summary.
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
## Severity levels
|
|
77
|
+
|
|
78
|
+
Use:
|
|
79
|
+
|
|
80
|
+
- `Critical`
|
|
81
|
+
- `High`
|
|
82
|
+
- `Medium`
|
|
83
|
+
- `Low`
|
|
84
|
+
|
|
85
|
+
If no issues are found, say:
|
|
86
|
+
|
|
87
|
+
```txt
|
|
88
|
+
No obvious security issues found.
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
## Rules
|
|
92
|
+
|
|
93
|
+
- Read only.
|
|
94
|
+
- Do not edit files.
|
|
95
|
+
- Do not install packages.
|
|
96
|
+
- Do not run destructive commands.
|
|
97
|
+
- Be specific.
|
|
98
|
+
- Include file paths and line numbers when possible.
|
|
99
|
+
- Do not report theoretical issues without evidence.
|
|
100
|
+
- Do not read `.env` or secret files.
|
package/settings.json
ADDED
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: component-implementation
|
|
3
|
+
description: Builds or modifies frontend components using the project's existing component patterns, styling system, accessibility rules, and test conventions.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
# Component Implementation
|
|
9
|
+
|
|
10
|
+
Use this skill when creating or modifying frontend UI components.
|
|
11
|
+
|
|
12
|
+
Do not use this skill for backend-only changes, database work, deployment work, or general refactors unless they directly affect frontend components.
|
|
13
|
+
|
|
14
|
+
## Before Editing
|
|
15
|
+
|
|
16
|
+
Inspect existing nearby components to understand:
|
|
17
|
+
|
|
18
|
+
- naming conventions
|
|
19
|
+
- file layout
|
|
20
|
+
- props style
|
|
21
|
+
- styling approach
|
|
22
|
+
- accessibility patterns
|
|
23
|
+
- test style
|
|
24
|
+
- story/demo pattern, if any
|
|
25
|
+
|
|
26
|
+
If the component requirements are unclear, ask questions before editing.
|
|
27
|
+
|
|
28
|
+
## Component Rules
|
|
29
|
+
|
|
30
|
+
- Prefer small, focused components.
|
|
31
|
+
- Keep props clear and typed.
|
|
32
|
+
- Avoid unnecessary state.
|
|
33
|
+
- Prefer controlled inputs when the project already uses them.
|
|
34
|
+
- Reuse existing design-system components.
|
|
35
|
+
- Reuse existing icons, spacing, colors, and typography tokens.
|
|
36
|
+
- Do not add a new UI package unless explicitly asked.
|
|
37
|
+
- Avoid large rewrites of existing components.
|
|
38
|
+
- Match the project's existing component style.
|
|
39
|
+
|
|
40
|
+
## Accessibility Rules
|
|
41
|
+
|
|
42
|
+
Check:
|
|
43
|
+
|
|
44
|
+
- semantic HTML
|
|
45
|
+
- keyboard navigation
|
|
46
|
+
- visible focus states
|
|
47
|
+
- labels for inputs
|
|
48
|
+
- button vs link usage
|
|
49
|
+
- alt text for meaningful images
|
|
50
|
+
- ARIA only when necessary
|
|
51
|
+
- color contrast risks
|
|
52
|
+
|
|
53
|
+
## State Rules
|
|
54
|
+
|
|
55
|
+
- Keep local UI state local.
|
|
56
|
+
- Do not introduce global state unless needed.
|
|
57
|
+
- Avoid duplicating server state in local state.
|
|
58
|
+
- Preserve existing loading, error, and empty states.
|
|
59
|
+
|
|
60
|
+
## After Editing
|
|
61
|
+
|
|
62
|
+
Run the narrowest relevant command if available:
|
|
63
|
+
|
|
64
|
+
- component test
|
|
65
|
+
- unit test
|
|
66
|
+
- typecheck
|
|
67
|
+
- lint
|
|
68
|
+
- storybook check
|
|
69
|
+
|
|
70
|
+
If checks are not available or cannot run, explain why.
|
|
71
|
+
|
|
72
|
+
## Output
|
|
73
|
+
|
|
74
|
+
Explain:
|
|
75
|
+
|
|
76
|
+
1. What component changed
|
|
77
|
+
2. Why the approach matches existing patterns
|
|
78
|
+
3. Accessibility considerations
|
|
79
|
+
4. Tests or checks run
|
|
80
|
+
5. Any remaining risks
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: frontend-onboarding
|
|
3
|
+
description: Understands the frontend app structure, framework, routing, build tools, styling system, and test setup. Use when starting work in an unfamiliar frontend repo or feature area.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
# Frontend Onboarding
|
|
9
|
+
|
|
10
|
+
Use this skill before making frontend changes in an unfamiliar codebase.
|
|
11
|
+
|
|
12
|
+
This skill is read-only. Do not edit files during onboarding unless explicitly asked.
|
|
13
|
+
|
|
14
|
+
## Inspect First
|
|
15
|
+
|
|
16
|
+
Read the most relevant files:
|
|
17
|
+
|
|
18
|
+
- README.md
|
|
19
|
+
- AGENTS.md
|
|
20
|
+
- package.json
|
|
21
|
+
- vite.config._ / next.config._ / webpack.config._ / astro.config._ / svelte.config.\*
|
|
22
|
+
- tsconfig.json
|
|
23
|
+
- eslint.config._ / .eslintrc._
|
|
24
|
+
- prettier config
|
|
25
|
+
- tailwind.config.\* / theme files / design-system files
|
|
26
|
+
- src/ or app/
|
|
27
|
+
- routes/pages directory
|
|
28
|
+
- components directory
|
|
29
|
+
- tests directory
|
|
30
|
+
- storybook config, if present
|
|
31
|
+
|
|
32
|
+
## Identify
|
|
33
|
+
|
|
34
|
+
Find and summarize:
|
|
35
|
+
|
|
36
|
+
1. Frontend framework
|
|
37
|
+
2. Routing approach
|
|
38
|
+
3. State management approach
|
|
39
|
+
4. Styling approach
|
|
40
|
+
5. Component organization
|
|
41
|
+
6. API/data fetching pattern
|
|
42
|
+
7. Form handling pattern
|
|
43
|
+
8. Test setup
|
|
44
|
+
9. Build/lint/typecheck commands
|
|
45
|
+
10. Important files that should be edited carefully
|
|
46
|
+
|
|
47
|
+
## Safety Rules
|
|
48
|
+
|
|
49
|
+
- Do not change global styles.
|
|
50
|
+
- Do not introduce new UI libraries.
|
|
51
|
+
- Do not change routing, auth, or data-fetching behavior casually.
|
|
52
|
+
- Do not edit generated files or build output.
|
|
53
|
+
- Prefer existing patterns over new abstractions.
|
|
54
|
+
- If the frontend structure is unclear, ask questions before suggesting changes.
|
|
55
|
+
|
|
56
|
+
## Output
|
|
57
|
+
|
|
58
|
+
Return:
|
|
59
|
+
|
|
60
|
+
# Frontend Summary
|
|
61
|
+
|
|
62
|
+
# App Structure
|
|
63
|
+
|
|
64
|
+
# Styling System
|
|
65
|
+
|
|
66
|
+
# State and Data Flow
|
|
67
|
+
|
|
68
|
+
# Forms and Validation
|
|
69
|
+
|
|
70
|
+
# Test Commands
|
|
71
|
+
|
|
72
|
+
# Risks and Careful Areas
|
|
73
|
+
|
|
74
|
+
# Suggested Frontend Agent Rules
|
|
75
|
+
|
|
76
|
+
# Open Questions
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: frontend-quality
|
|
3
|
+
description: Reviews frontend code for accessibility, responsiveness, performance, UX states, browser behavior, and maintainability.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
# Frontend Quality Review
|
|
9
|
+
|
|
10
|
+
Use this skill when reviewing or improving frontend quality.
|
|
11
|
+
|
|
12
|
+
Do not edit files unless explicitly asked.
|
|
13
|
+
|
|
14
|
+
## Review Areas
|
|
15
|
+
|
|
16
|
+
Check for:
|
|
17
|
+
|
|
18
|
+
- broken UI states
|
|
19
|
+
- missing loading states
|
|
20
|
+
- missing error states
|
|
21
|
+
- missing empty states
|
|
22
|
+
- poor responsive behavior
|
|
23
|
+
- keyboard accessibility issues
|
|
24
|
+
- focus management issues
|
|
25
|
+
- incorrect semantic HTML
|
|
26
|
+
- unnecessary re-renders
|
|
27
|
+
- expensive rendering logic
|
|
28
|
+
- unstable keys in lists
|
|
29
|
+
- hydration issues
|
|
30
|
+
- client/server boundary mistakes
|
|
31
|
+
- inconsistent styling
|
|
32
|
+
- duplicated UI logic
|
|
33
|
+
- missing tests
|
|
34
|
+
|
|
35
|
+
## Accessibility Checklist
|
|
36
|
+
|
|
37
|
+
Verify:
|
|
38
|
+
|
|
39
|
+
- interactive elements are keyboard reachable
|
|
40
|
+
- form fields have labels
|
|
41
|
+
- modals/dialogs manage focus correctly
|
|
42
|
+
- buttons are buttons and links are links
|
|
43
|
+
- images have appropriate alt text
|
|
44
|
+
- errors are announced or clearly visible
|
|
45
|
+
- focus states are not removed
|
|
46
|
+
- ARIA is not used incorrectly
|
|
47
|
+
|
|
48
|
+
## Performance Checklist
|
|
49
|
+
|
|
50
|
+
Look for:
|
|
51
|
+
|
|
52
|
+
- large unnecessary client bundles
|
|
53
|
+
- avoidable client components
|
|
54
|
+
- repeated expensive computations
|
|
55
|
+
- unnecessary effects
|
|
56
|
+
- unnecessary global state
|
|
57
|
+
- unoptimized images
|
|
58
|
+
- layout shift risks
|
|
59
|
+
- over-fetching data
|
|
60
|
+
|
|
61
|
+
## Rules
|
|
62
|
+
|
|
63
|
+
- Prefer specific findings with file paths.
|
|
64
|
+
- Do not report generic advice as a finding.
|
|
65
|
+
- If unsure, mark it as a question.
|
|
66
|
+
- Prioritize user-visible issues first.
|
|
67
|
+
- Suggest safe, small follow-up fixes.
|
|
68
|
+
|
|
69
|
+
## Output
|
|
70
|
+
|
|
71
|
+
Return:
|
|
72
|
+
|
|
73
|
+
# Critical Issues
|
|
74
|
+
|
|
75
|
+
# Recommended Fixes
|
|
76
|
+
|
|
77
|
+
# Accessibility Notes
|
|
78
|
+
|
|
79
|
+
# Performance Notes
|
|
80
|
+
|
|
81
|
+
# Tests to Add
|
|
82
|
+
|
|
83
|
+
# Safe Follow-Up Changes
|
|
84
|
+
|
|
85
|
+
# Open Questions
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: safe-coding
|
|
3
|
+
description: Applies safe, reviewable coding practices when modifying any file. Enforces small diffs, pre-read, no secrets, no lockfiles, and post-edit verification.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
# Safe Coding
|
|
9
|
+
|
|
10
|
+
Use this skill when modifying code.
|
|
11
|
+
|
|
12
|
+
## Before Editing
|
|
13
|
+
|
|
14
|
+
- Read the file or files you plan to change before making edits.
|
|
15
|
+
- Understand the existing patterns, naming conventions, and structure.
|
|
16
|
+
- Identify related files that may be affected by the change.
|
|
17
|
+
- If the task is unclear, ask questions before editing.
|
|
18
|
+
|
|
19
|
+
## Rules
|
|
20
|
+
|
|
21
|
+
- Make small, focused, reviewable changes.
|
|
22
|
+
- Preserve existing behavior unless explicitly asked to change it.
|
|
23
|
+
- Do not edit secrets, env files, lockfiles, build output, coverage reports, or `.git` internals.
|
|
24
|
+
- Prefer targeted edits over full rewrites.
|
|
25
|
+
- Do not install packages, delete files, or rewrite history without clear user approval.
|
|
26
|
+
- Prefer additive changes; avoid destructive updates.
|
|
27
|
+
- Explain risky or irreversible operations before executing them.
|
|
28
|
+
- Match the project’s existing style and conventions.
|
|
29
|
+
|
|
30
|
+
## After Editing
|
|
31
|
+
|
|
32
|
+
Run the narrowest relevant verification command if available:
|
|
33
|
+
|
|
34
|
+
- unit or component test
|
|
35
|
+
- typecheck
|
|
36
|
+
- lint
|
|
37
|
+
- integration test, if applicable
|
|
38
|
+
|
|
39
|
+
If verification cannot be run, explain why.
|
|
40
|
+
|
|
41
|
+
## Output
|
|
42
|
+
|
|
43
|
+
Explain:
|
|
44
|
+
|
|
45
|
+
1. What changed and why
|
|
46
|
+
2. How existing behavior is preserved
|
|
47
|
+
3. Any risks or follow-up actions needed
|
|
48
|
+
4. Verification command run and its result
|