@appsforgood/next-supabase-kit 0.3.0 → 0.4.1
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 +19 -0
- package/README.md +22 -555
- package/UPGRADE.md +18 -73
- package/USER_GUIDE.html +808 -0
- package/USER_GUIDE.md +183 -0
- package/agents/app-engineer/agent.md +34 -0
- package/agents/copy/agent.md +40 -0
- package/agents/design/agent.md +33 -0
- package/agents/optional/deploy/agent.md +18 -0
- package/agents/optional/docs/agent.md +16 -0
- package/agents/optional/lead-architect/agent.md +20 -0
- package/agents/optional/research/agent.md +16 -0
- package/agents/planner/agent.md +37 -0
- package/agents/qa/agent.md +37 -0
- package/agents/security/agent.md +30 -0
- package/assistant-adapters/cursor-agent-kit.mdc +5 -26
- package/catalog.json +21 -0
- package/dist/index.js +931 -8227
- package/dist/index.js.map +1 -1
- package/examples/next-supabase-installed/.agent-kit/config.json +23 -26
- package/examples/next-supabase-installed/.agent-kit/manifest.json +83 -222
- package/examples/next-supabase-installed/.antigravity/agent-kit/commands/browser-qa.toml +6 -0
- package/examples/next-supabase-installed/.antigravity/agent-kit/commands/copy.toml +6 -0
- package/examples/next-supabase-installed/.antigravity/agent-kit/commands/frontend.toml +6 -0
- package/examples/next-supabase-installed/.antigravity/agent-kit/commands/plan.toml +6 -0
- package/examples/next-supabase-installed/.antigravity/agent-kit/commands/security.toml +6 -0
- package/examples/next-supabase-installed/.antigravity/agent-kit/commands/ship.toml +6 -0
- package/examples/next-supabase-installed/.antigravity/agent-kit/commands/test.toml +6 -0
- package/examples/next-supabase-installed/.antigravity/agent-kit/plugin.json +12 -0
- package/examples/next-supabase-installed/.antigravity/runtime-skills/accessibility-wcag/SKILL.md +26 -0
- package/examples/next-supabase-installed/.antigravity/runtime-skills/browser-qa/SKILL.md +67 -0
- package/examples/next-supabase-installed/.antigravity/runtime-skills/deslop/SKILL.md +62 -0
- package/examples/next-supabase-installed/.antigravity/runtime-skills/frontend-design/SKILL.md +107 -0
- package/examples/next-supabase-installed/.antigravity/runtime-skills/nextjs-app-router/SKILL.md +23 -0
- package/examples/next-supabase-installed/.antigravity/runtime-skills/owasp-security-review/SKILL.md +23 -0
- package/examples/next-supabase-installed/.antigravity/runtime-skills/planning/SKILL.md +25 -0
- package/examples/next-supabase-installed/.antigravity/runtime-skills/postgres-migrations/SKILL.md +21 -0
- package/examples/next-supabase-installed/.antigravity/runtime-skills/product-copy/SKILL.md +54 -0
- package/examples/next-supabase-installed/.antigravity/runtime-skills/ship/SKILL.md +22 -0
- package/examples/next-supabase-installed/.antigravity/runtime-skills/supabase-auth-rls/SKILL.md +23 -0
- package/examples/next-supabase-installed/.antigravity/runtime-skills/testing-qa/SKILL.md +27 -0
- package/examples/next-supabase-installed/.claude/agents/app-engineer.md +34 -0
- package/examples/next-supabase-installed/.claude/agents/copy.md +40 -0
- package/examples/next-supabase-installed/.claude/agents/design.md +33 -0
- package/examples/next-supabase-installed/.claude/agents/planner.md +37 -0
- package/examples/next-supabase-installed/.claude/agents/qa.md +37 -0
- package/examples/next-supabase-installed/.claude/agents/security.md +30 -0
- package/examples/next-supabase-installed/.codex/agents/app-engineer.toml +41 -0
- package/examples/next-supabase-installed/.codex/agents/copy.toml +47 -0
- package/examples/next-supabase-installed/.codex/agents/design.toml +40 -0
- package/examples/next-supabase-installed/.codex/agents/planner.toml +44 -0
- package/examples/next-supabase-installed/.codex/agents/qa.toml +44 -0
- package/examples/next-supabase-installed/.codex/agents/security.toml +37 -0
- package/examples/next-supabase-installed/.cursor/agents/app-engineer.md +34 -0
- package/examples/next-supabase-installed/.cursor/agents/copy.md +40 -0
- package/examples/next-supabase-installed/.cursor/agents/design.md +33 -0
- package/examples/next-supabase-installed/.cursor/agents/planner.md +37 -0
- package/examples/next-supabase-installed/.cursor/agents/qa.md +37 -0
- package/examples/next-supabase-installed/.cursor/agents/security.md +30 -0
- package/examples/next-supabase-installed/.cursor/rules/cursor-agent-kit.mdc +12 -0
- package/examples/next-supabase-installed/.cursor/skills/accessibility-wcag/SKILL.md +26 -0
- package/examples/next-supabase-installed/.cursor/skills/browser-qa/SKILL.md +67 -0
- package/examples/next-supabase-installed/.cursor/skills/deslop/SKILL.md +62 -0
- package/examples/next-supabase-installed/.cursor/skills/frontend-design/SKILL.md +107 -0
- package/examples/next-supabase-installed/.cursor/skills/nextjs-app-router/SKILL.md +23 -0
- package/examples/next-supabase-installed/.cursor/skills/owasp-security-review/SKILL.md +23 -0
- package/examples/next-supabase-installed/.cursor/skills/planning/SKILL.md +25 -0
- package/examples/next-supabase-installed/.cursor/skills/postgres-migrations/SKILL.md +21 -0
- package/examples/next-supabase-installed/.cursor/skills/product-copy/SKILL.md +54 -0
- package/examples/next-supabase-installed/.cursor/skills/ship/SKILL.md +22 -0
- package/examples/next-supabase-installed/.cursor/skills/supabase-auth-rls/SKILL.md +23 -0
- package/examples/next-supabase-installed/.cursor/skills/testing-qa/SKILL.md +27 -0
- package/examples/next-supabase-installed/.github/copilot-instructions.md +23 -0
- package/examples/next-supabase-installed/AGENTS.md +30 -0
- package/examples/next-supabase-installed/CLAUDE.md +7 -0
- package/examples/next-supabase-installed/README.md +2 -14
- package/examples/next-supabase-installed/USER_GUIDE.html +808 -0
- package/examples/next-supabase-installed/USER_GUIDE.md +183 -0
- package/examples/next-supabase-installed/skills/accessibility-wcag/SKILL.md +26 -0
- package/examples/next-supabase-installed/skills/browser-qa/SKILL.md +67 -0
- package/examples/next-supabase-installed/skills/deslop/SKILL.md +62 -0
- package/examples/next-supabase-installed/skills/frontend-design/SKILL.md +107 -0
- package/examples/next-supabase-installed/skills/nextjs-app-router/SKILL.md +23 -0
- package/examples/next-supabase-installed/skills/owasp-security-review/SKILL.md +23 -0
- package/examples/next-supabase-installed/skills/planning/SKILL.md +25 -0
- package/examples/next-supabase-installed/skills/postgres-migrations/SKILL.md +21 -0
- package/examples/next-supabase-installed/skills/product-copy/SKILL.md +54 -0
- package/examples/next-supabase-installed/skills/ship/SKILL.md +22 -0
- package/examples/next-supabase-installed/skills/supabase-auth-rls/SKILL.md +23 -0
- package/examples/next-supabase-installed/skills/testing-qa/SKILL.md +27 -0
- package/examples/next-supabase-installed/tree.txt +60 -42
- package/package.json +20 -46
- package/research/agent-skill-gap-report.md +133 -0
- package/skills/accessibility-wcag/SKILL.md +26 -0
- package/skills/browser-qa/SKILL.md +67 -0
- package/skills/deslop/SKILL.md +62 -0
- package/skills/frontend-design/SKILL.md +107 -0
- package/skills/nextjs-app-router/SKILL.md +23 -0
- package/skills/optional/debug/SKILL.md +11 -0
- package/skills/optional/docs/SKILL.md +10 -0
- package/skills/optional/ui-polish/SKILL.md +10 -0
- package/skills/optional/upgrade/SKILL.md +10 -0
- package/skills/owasp-security-review/SKILL.md +23 -0
- package/skills/planning/SKILL.md +25 -0
- package/skills/postgres-migrations/SKILL.md +21 -0
- package/skills/product-copy/SKILL.md +54 -0
- package/skills/ship/SKILL.md +22 -0
- package/skills/supabase-auth-rls/SKILL.md +23 -0
- package/skills/testing-qa/SKILL.md +27 -0
- package/templates/next-supabase/AGENTS.md +19 -129
- package/templates/next-supabase/CLAUDE.md +4 -36
- package/BEST_PRACTICE_EVIDENCE.md +0 -45
- package/DOGFOOD.md +0 -201
- package/GOVERNANCE.md +0 -45
- package/LOOP_CODING.md +0 -107
- package/MAINTAINER_RELEASE.md +0 -100
- package/REPOSITORY_SETTINGS.md +0 -83
- package/RESEARCH_CITATION_POLICY.md +0 -26
- package/SUPPLY_CHAIN.md +0 -57
- package/agents/deployment-observability-engineer.md +0 -13
- package/agents/docs-maintainer.md +0 -17
- package/agents/frontend-design-lead.md +0 -22
- package/agents/lead-architect.md +0 -25
- package/agents/marketing-copy-lead.md +0 -20
- package/agents/nextjs-engineer.md +0 -20
- package/agents/planner.md +0 -20
- package/agents/qa-engineer.md +0 -19
- package/agents/research-analyst.md +0 -13
- package/agents/security-reviewer.md +0 -16
- package/agents/supabase-postgres-engineer.md +0 -19
- package/antigravity/commands/accessibility-pass.toml +0 -16
- package/antigravity/commands/audit.toml +0 -16
- package/antigravity/commands/browser-qa.toml +0 -18
- package/antigravity/commands/copy.toml +0 -16
- package/antigravity/commands/distinctiveness-pass.toml +0 -16
- package/antigravity/commands/frontend.toml +0 -18
- package/antigravity/commands/handoff.toml +0 -16
- package/antigravity/commands/layout-cleanup.toml +0 -16
- package/antigravity/commands/plan.toml +0 -18
- package/antigravity/commands/responsive-cleanup.toml +0 -16
- package/antigravity/commands/review.toml +0 -16
- package/antigravity/commands/screenshot-critique.toml +0 -16
- package/antigravity/commands/security.toml +0 -16
- package/antigravity/commands/setup.toml +0 -16
- package/antigravity/commands/ship.toml +0 -17
- package/antigravity/commands/spec.toml +0 -17
- package/antigravity/commands/test.toml +0 -17
- package/antigravity/commands/ui-audit.toml +0 -17
- package/antigravity/commands/ui-polish.toml +0 -17
- package/antigravity/commands/upgrade.toml +0 -17
- package/antigravity/plugin.json +0 -70
- package/assistant-adapters/antigravity.md +0 -65
- package/assistant-adapters/claude-code-subagents.md +0 -38
- package/assistant-adapters/codex-agents.md +0 -53
- package/assistant-adapters/cursor-frontend.mdc +0 -16
- package/assistant-adapters/cursor-planner.mdc +0 -14
- package/assistant-adapters/cursor-security.mdc +0 -18
- package/assistant-adapters/github-copilot-instructions.md +0 -35
- package/assistant-adapters/github-next-supabase.instructions.md +0 -28
- package/assistant-adapters/model-selection/claude-code-subagents-with-models.md +0 -32
- package/assistant-adapters/model-selection/codex-config.example.toml +0 -32
- package/assistant-adapters/model-selection/cursor-model-selection.mdc +0 -24
- package/assistant-adapters/model-selection/github-copilot-model-selection.md +0 -20
- package/assistant-adapters/orchestrator-runtime.md +0 -39
- package/checklists/accessibility.md +0 -12
- package/checklists/agent-council.md +0 -13
- package/checklists/brand-content.md +0 -15
- package/checklists/deployment.md +0 -10
- package/checklists/design-critique.md +0 -13
- package/checklists/frontend-distinctiveness.md +0 -12
- package/checklists/frontend-product-quality.md +0 -13
- package/checklists/frontend-quality.md +0 -21
- package/checklists/marketing-copy.md +0 -11
- package/checklists/owasp.md +0 -12
- package/checklists/rls.md +0 -10
- package/checklists/testing.md +0 -12
- package/checklists/ui-acceptance-rubric.md +0 -58
- package/checklists/ui-detectors.md +0 -81
- package/checklists/upgrade.md +0 -13
- package/checklists/visual-regression.md +0 -11
- package/design-adapters/claude-design.prompt.md +0 -27
- package/design-adapters/figma.prompt.md +0 -18
- package/design-adapters/google-stitch.prompt.md +0 -36
- package/design-adapters/human-designer-brief.prompt.md +0 -36
- package/design-briefs/admin-dashboard.md +0 -21
- package/design-briefs/ai-workflow-product.md +0 -25
- package/design-briefs/community-social.md +0 -26
- package/design-briefs/content-app.md +0 -21
- package/design-briefs/ecommerce.md +0 -25
- package/design-briefs/education-course.md +0 -25
- package/design-briefs/marketplace.md +0 -21
- package/design-briefs/portfolio-venue.md +0 -25
- package/design-briefs/saas.md +0 -21
- package/design-briefs/tool.md +0 -21
- package/examples/next-supabase-installed/.agent-kit/agent-roster.json +0 -267
- package/examples/next-supabase-installed/.agent-kit/model-routing.json +0 -171
- package/examples/next-supabase-installed/.agent-kit/overrides.json +0 -3
- package/examples/next-supabase-installed/audit-output.json +0 -405
- package/model-routing/default-model-routing.json +0 -171
- package/profiles/admin-app.md +0 -17
- package/profiles/content-app.md +0 -17
- package/profiles/marketplace.md +0 -17
- package/profiles/saas.md +0 -17
- package/profiles/stack-next-firebase.md +0 -25
- package/profiles/stack-next-postgres.md +0 -24
- package/profiles/stack-remix-supabase.md +0 -24
- package/prompts/audit-project-setup.md +0 -28
- package/prompts/brand-content-intake.md +0 -17
- package/prompts/copy-review.md +0 -15
- package/prompts/council-session-review.md +0 -17
- package/prompts/creative-direction-matrix.md +0 -22
- package/prompts/design-critique-gate.md +0 -28
- package/prompts/docs-update.md +0 -16
- package/prompts/frontend-design-review.md +0 -35
- package/prompts/frontend-distinctiveness-benchmark.md +0 -32
- package/prompts/frontend-product-quality-scorecard.md +0 -35
- package/prompts/implement-feature.md +0 -14
- package/prompts/lifecycle-command-index.md +0 -180
- package/prompts/migration-review.md +0 -14
- package/prompts/screenshot-review.md +0 -28
- package/prompts/security-review.md +0 -17
- package/prompts/ui-command-index.md +0 -124
- package/prompts/upgrade-review.md +0 -18
- package/prompts/visual-qa-plan.md +0 -16
- package/research/proposed-updates.md +0 -70
- package/research/scan-config.json +0 -261
- package/research/scan-plan.md +0 -24
- package/research/summaries/.gitkeep +0 -1
- package/research/summaries/agent-workflow-patterns.md +0 -37
- package/research/summaries/agentic-engineering-maturity-levels.md +0 -54
- package/research/summaries/creative-design-patterns.md +0 -38
- package/research/summaries/design-critique-patterns.md +0 -34
- package/research/summaries/docs-and-agent-patterns.md +0 -64
- package/research/summaries/dogfood-adoption-patterns.md +0 -33
- package/research/summaries/frontend-design-patterns.md +0 -64
- package/research/summaries/frontend-distinctiveness-benchmark-patterns.md +0 -38
- package/research/summaries/frontend-product-quality-rubric-patterns.md +0 -37
- package/research/summaries/maturity-model-patterns.md +0 -29
- package/research/summaries/nextjs-patterns.md +0 -65
- package/research/summaries/repo-health-patterns.md +0 -41
- package/research/summaries/scan-overview.md +0 -46
- package/research/summaries/security-patterns.md +0 -64
- package/research/summaries/supabase-rls-patterns.md +0 -54
- package/research/summaries/supply-chain-patterns.md +0 -38
- package/research/summaries/testing-patterns.md +0 -63
- package/research/summaries/upgrade-lifecycle-patterns.md +0 -26
- package/research/summaries/visual-qa-patterns.md +0 -39
- package/rosters/next-supabase-default-council.json +0 -267
- package/runtime-skills/README.md +0 -7
- package/runtime-skills/accessibility-wcag/SKILL.md +0 -8
- package/runtime-skills/agent-handoff-tracing/SKILL.md +0 -8
- package/runtime-skills/best-practice-maturity-review/SKILL.md +0 -8
- package/runtime-skills/content-first-design/SKILL.md +0 -8
- package/runtime-skills/conversion-copywriting/SKILL.md +0 -8
- package/runtime-skills/deployment-observability/SKILL.md +0 -8
- package/runtime-skills/docs-maintainer/SKILL.md +0 -8
- package/runtime-skills/frontend-design-system/SKILL.md +0 -8
- package/runtime-skills/frontend-distinctiveness-benchmark/SKILL.md +0 -8
- package/runtime-skills/frontend-product-quality-rubric/SKILL.md +0 -8
- package/runtime-skills/landing-page-copy/SKILL.md +0 -8
- package/runtime-skills/nextjs-app-router/SKILL.md +0 -8
- package/runtime-skills/onboarding-empty-state-copy/SKILL.md +0 -8
- package/runtime-skills/owasp-security-review/SKILL.md +0 -8
- package/runtime-skills/planning-council/SKILL.md +0 -8
- package/runtime-skills/positioning-messaging/SKILL.md +0 -8
- package/runtime-skills/postgres-migrations/SKILL.md +0 -8
- package/runtime-skills/product-voice-tone/SKILL.md +0 -8
- package/runtime-skills/reference-led-design-critique/SKILL.md +0 -8
- package/runtime-skills/supabase-auth-rls/SKILL.md +0 -8
- package/runtime-skills/testing-qa/SKILL.md +0 -8
- package/runtime-skills/ui-improvement-harness/SKILL.md +0 -12
- package/runtime-skills/upgrade-maintenance/SKILL.md +0 -8
- package/runtime-skills/visual-regression-qa/SKILL.md +0 -8
- package/schemas/agent-roster.schema.json +0 -54
- package/schemas/agentic-level.schema.json +0 -47
- package/schemas/audit-report-v2.schema.json +0 -71
- package/schemas/audit-report.schema.json +0 -50
- package/schemas/correction-rules.schema.json +0 -32
- package/schemas/council-session.schema.json +0 -65
- package/schemas/model-routing.schema.json +0 -72
- package/schemas/onboarding-state.schema.json +0 -36
- package/schemas/orchestrator.schema.json +0 -167
- package/schemas/project-context.schema.json +0 -94
- package/schemas/runtime-event.schema.json +0 -66
- package/schemas/runtime-run.schema.json +0 -58
- package/schemas/session-event.schema.json +0 -48
- package/schemas/studio-session.schema.json +0 -48
- package/skills/accessibility-wcag.md +0 -15
- package/skills/agent-handoff-tracing.md +0 -44
- package/skills/best-practice-maturity-review.md +0 -26
- package/skills/content-first-design.md +0 -50
- package/skills/conversion-copywriting.md +0 -38
- package/skills/deployment-observability.md +0 -14
- package/skills/docs-maintainer.md +0 -19
- package/skills/frontend-design-system.md +0 -68
- package/skills/frontend-distinctiveness-benchmark.md +0 -40
- package/skills/frontend-product-quality-rubric.md +0 -59
- package/skills/landing-page-copy.md +0 -29
- package/skills/nextjs-app-router.md +0 -18
- package/skills/onboarding-empty-state-copy.md +0 -37
- package/skills/owasp-security-review.md +0 -19
- package/skills/planning-council.md +0 -21
- package/skills/positioning-messaging.md +0 -42
- package/skills/postgres-migrations.md +0 -14
- package/skills/product-voice-tone.md +0 -35
- package/skills/reference-led-design-critique.md +0 -48
- package/skills/supabase-auth-rls.md +0 -20
- package/skills/testing-qa.md +0 -15
- package/skills/ui-improvement-harness.md +0 -96
- package/skills/upgrade-maintenance.md +0 -32
- package/skills/visual-regression-qa.md +0 -42
- package/templates/next-supabase/.agent-kit/orchestrator.json +0 -48
- package/templates/next-supabase/.agent-kit/runtime/gitignore.template +0 -2
- package/templates/next-supabase/.github/workflows/agent-kit-audit.yml +0 -34
- package/templates/next-supabase/AGENT_ROSTER.md +0 -101
- package/templates/next-supabase/ASSISTANT_ADAPTERS.md +0 -146
- package/templates/next-supabase/COUNCIL.md +0 -54
- package/templates/next-supabase/DECISIONS.md +0 -87
- package/templates/next-supabase/DEPLOYMENT.md +0 -51
- package/templates/next-supabase/DESIGN.md +0 -180
- package/templates/next-supabase/DOCS.md +0 -80
- package/templates/next-supabase/LOOP_CODING.md +0 -98
- package/templates/next-supabase/MESSAGING.md +0 -81
- package/templates/next-supabase/MODEL_ROUTING.md +0 -130
- package/templates/next-supabase/QUALITY_GATES.md +0 -98
- package/templates/next-supabase/SKILLS.md +0 -235
- package/templates/next-supabase/SPEC.md +0 -122
- package/templates/next-supabase/STYLE_GUIDE.md +0 -121
- package/templates/next-supabase/TESTING.md +0 -107
package/USER_GUIDE.html
ADDED
|
@@ -0,0 +1,808 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
6
|
+
<title>User guide — name the specialist, then prove the screen</title>
|
|
7
|
+
<meta
|
|
8
|
+
name="description"
|
|
9
|
+
content="How to ask Planner, App engineer, Security, Design, QA, and Copy in Cursor, Claude, Codex, Copilot, and Antigravity. QA is two screenshots, not a file diff."
|
|
10
|
+
/>
|
|
11
|
+
<style>
|
|
12
|
+
:root {
|
|
13
|
+
color-scheme: dark;
|
|
14
|
+
--paper: #10100e;
|
|
15
|
+
--ink: #eceae4;
|
|
16
|
+
--muted: #9b968c;
|
|
17
|
+
--frame: #070706;
|
|
18
|
+
--safelight: #ff5a2a;
|
|
19
|
+
--pass: #5ea37a;
|
|
20
|
+
--line: #2a2823;
|
|
21
|
+
--ticket: #181714;
|
|
22
|
+
--display: "Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, sans-serif;
|
|
23
|
+
--mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
* {
|
|
27
|
+
box-sizing: border-box;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
html {
|
|
31
|
+
scroll-behavior: smooth;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
body {
|
|
35
|
+
margin: 0;
|
|
36
|
+
background: var(--paper);
|
|
37
|
+
color: var(--ink);
|
|
38
|
+
font-family: var(--display);
|
|
39
|
+
font-size: 1.05rem;
|
|
40
|
+
line-height: 1.5;
|
|
41
|
+
letter-spacing: -0.011em;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
code {
|
|
45
|
+
font-family: var(--mono);
|
|
46
|
+
font-size: 0.88em;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
a {
|
|
50
|
+
color: inherit;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
a:focus-visible,
|
|
54
|
+
button:focus-visible {
|
|
55
|
+
outline: 3px solid var(--safelight);
|
|
56
|
+
outline-offset: 3px;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.skip {
|
|
60
|
+
position: absolute;
|
|
61
|
+
left: 0.75rem;
|
|
62
|
+
top: 0.75rem;
|
|
63
|
+
padding: 0.4rem 0.7rem;
|
|
64
|
+
background: var(--ink);
|
|
65
|
+
color: var(--paper);
|
|
66
|
+
text-decoration: none;
|
|
67
|
+
transform: translateY(-140%);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.skip:focus {
|
|
71
|
+
transform: none;
|
|
72
|
+
z-index: 20;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.mast {
|
|
76
|
+
background: var(--frame);
|
|
77
|
+
color: var(--ink);
|
|
78
|
+
padding: 0.85rem 1.25rem;
|
|
79
|
+
display: flex;
|
|
80
|
+
flex-wrap: wrap;
|
|
81
|
+
gap: 0.75rem 1.5rem;
|
|
82
|
+
align-items: baseline;
|
|
83
|
+
justify-content: space-between;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.wordmark {
|
|
87
|
+
font-family: var(--mono);
|
|
88
|
+
font-size: 0.78rem;
|
|
89
|
+
letter-spacing: 0.08em;
|
|
90
|
+
text-transform: uppercase;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.mast nav {
|
|
94
|
+
display: flex;
|
|
95
|
+
flex-wrap: wrap;
|
|
96
|
+
gap: 0.75rem 1rem;
|
|
97
|
+
font-family: var(--mono);
|
|
98
|
+
font-size: 0.78rem;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.mast a {
|
|
102
|
+
color: var(--ink);
|
|
103
|
+
text-decoration: none;
|
|
104
|
+
border-bottom: 1px solid transparent;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.mast a:hover {
|
|
108
|
+
border-bottom-color: var(--safelight);
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
main {
|
|
112
|
+
max-width: 68rem;
|
|
113
|
+
margin: 0 auto;
|
|
114
|
+
padding: 1.5rem 1.25rem 4rem;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.top {
|
|
118
|
+
display: grid;
|
|
119
|
+
gap: 1.15rem;
|
|
120
|
+
margin-bottom: 2.5rem;
|
|
121
|
+
grid-template-areas:
|
|
122
|
+
"intro"
|
|
123
|
+
"rule"
|
|
124
|
+
"start"
|
|
125
|
+
"frames";
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.intro {
|
|
129
|
+
grid-area: intro;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.frames {
|
|
133
|
+
grid-area: frames;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.top > .rule {
|
|
137
|
+
grid-area: rule;
|
|
138
|
+
margin-bottom: 0;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.top > #start {
|
|
142
|
+
grid-area: start;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
@media (min-width: 880px) {
|
|
146
|
+
.top {
|
|
147
|
+
grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
|
|
148
|
+
grid-template-areas:
|
|
149
|
+
"intro frames"
|
|
150
|
+
"rule frames"
|
|
151
|
+
"start start";
|
|
152
|
+
align-items: start;
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.kicker {
|
|
157
|
+
font-family: var(--mono);
|
|
158
|
+
font-size: 0.75rem;
|
|
159
|
+
letter-spacing: 0.08em;
|
|
160
|
+
text-transform: uppercase;
|
|
161
|
+
color: var(--safelight);
|
|
162
|
+
margin: 0 0 0.6rem;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
h1 {
|
|
166
|
+
font-size: clamp(2.15rem, 5vw, 3.35rem);
|
|
167
|
+
line-height: 1.02;
|
|
168
|
+
font-weight: 700;
|
|
169
|
+
letter-spacing: -0.038em;
|
|
170
|
+
margin: 0 0 0.85rem;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.standfirst {
|
|
174
|
+
margin: 0;
|
|
175
|
+
max-width: 38rem;
|
|
176
|
+
font-size: 1.15rem;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
.frames {
|
|
180
|
+
display: grid;
|
|
181
|
+
grid-template-columns: 1fr 1fr;
|
|
182
|
+
gap: 0.65rem;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
.frame {
|
|
186
|
+
background: var(--frame);
|
|
187
|
+
color: var(--ink);
|
|
188
|
+
padding: 0.55rem 0.55rem 0.75rem;
|
|
189
|
+
min-height: 9.5rem;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.frame span {
|
|
193
|
+
display: block;
|
|
194
|
+
font-family: var(--mono);
|
|
195
|
+
font-size: 0.68rem;
|
|
196
|
+
letter-spacing: 0.08em;
|
|
197
|
+
margin-bottom: 0.55rem;
|
|
198
|
+
color: #b8b2a6;
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
.frame p {
|
|
202
|
+
margin: 0;
|
|
203
|
+
font-size: 0.92rem;
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
h2 {
|
|
207
|
+
font-size: 1.55rem;
|
|
208
|
+
letter-spacing: -0.03em;
|
|
209
|
+
font-weight: 700;
|
|
210
|
+
margin: 2.4rem 0 0.85rem;
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
h3 {
|
|
214
|
+
font-size: 1.15rem;
|
|
215
|
+
margin: 1.6rem 0 0.5rem;
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
p {
|
|
219
|
+
margin: 0 0 0.85rem;
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
.rule {
|
|
223
|
+
border-left: 4px solid var(--safelight);
|
|
224
|
+
padding: 0.7rem 0.9rem;
|
|
225
|
+
background: #1a1814;
|
|
226
|
+
margin: 0 0 1.4rem;
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
.steps {
|
|
230
|
+
display: grid;
|
|
231
|
+
gap: 0.85rem;
|
|
232
|
+
counter-reset: ticket;
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
.ticket {
|
|
236
|
+
background: var(--ticket);
|
|
237
|
+
border: 1px solid var(--line);
|
|
238
|
+
padding: 0.85rem 0.95rem;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
.ticket header {
|
|
242
|
+
display: flex;
|
|
243
|
+
justify-content: space-between;
|
|
244
|
+
gap: 1rem;
|
|
245
|
+
font-family: var(--mono);
|
|
246
|
+
font-size: 0.75rem;
|
|
247
|
+
letter-spacing: 0.05em;
|
|
248
|
+
text-transform: uppercase;
|
|
249
|
+
margin-bottom: 0.45rem;
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
.ticket header::before {
|
|
253
|
+
counter-increment: ticket;
|
|
254
|
+
content: "Ticket " counter(ticket, decimal-leading-zero);
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
pre,
|
|
258
|
+
.prompt {
|
|
259
|
+
margin: 0;
|
|
260
|
+
padding: 0.75rem;
|
|
261
|
+
background: var(--frame);
|
|
262
|
+
color: var(--ink);
|
|
263
|
+
font-family: var(--mono);
|
|
264
|
+
font-size: 0.82rem;
|
|
265
|
+
line-height: 1.45;
|
|
266
|
+
overflow-x: auto;
|
|
267
|
+
white-space: pre-wrap;
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
.copy-row {
|
|
271
|
+
display: flex;
|
|
272
|
+
justify-content: flex-end;
|
|
273
|
+
margin-top: 0.45rem;
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
button.copy {
|
|
277
|
+
font-family: var(--mono);
|
|
278
|
+
font-size: 0.75rem;
|
|
279
|
+
background: transparent;
|
|
280
|
+
color: var(--ink);
|
|
281
|
+
border: 1px solid var(--ink);
|
|
282
|
+
padding: 0.4rem 0.65rem;
|
|
283
|
+
min-height: 2.25rem;
|
|
284
|
+
cursor: pointer;
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
button.copy[data-copied="true"] {
|
|
288
|
+
background: var(--pass);
|
|
289
|
+
color: #08140d;
|
|
290
|
+
border-color: var(--pass);
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
table {
|
|
294
|
+
width: 100%;
|
|
295
|
+
border-collapse: collapse;
|
|
296
|
+
font-size: 0.98rem;
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
th,
|
|
300
|
+
td {
|
|
301
|
+
text-align: left;
|
|
302
|
+
vertical-align: top;
|
|
303
|
+
padding: 0.55rem 0.5rem 0.55rem 0;
|
|
304
|
+
border-top: 1px solid var(--line);
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
th {
|
|
308
|
+
font-family: var(--mono);
|
|
309
|
+
font-size: 0.72rem;
|
|
310
|
+
letter-spacing: 0.06em;
|
|
311
|
+
text-transform: uppercase;
|
|
312
|
+
color: var(--muted);
|
|
313
|
+
}
|
|
314
|
+
|
|
315
|
+
.ides {
|
|
316
|
+
display: grid;
|
|
317
|
+
gap: 0.85rem;
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
@media (min-width: 800px) {
|
|
321
|
+
.ides {
|
|
322
|
+
grid-template-columns: 1fr 1fr;
|
|
323
|
+
}
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
.ide {
|
|
327
|
+
border-top: 2px solid var(--line);
|
|
328
|
+
padding-top: 0.55rem;
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
.ide h3 {
|
|
332
|
+
margin-top: 0;
|
|
333
|
+
}
|
|
334
|
+
|
|
335
|
+
.ide p,
|
|
336
|
+
.ide ul {
|
|
337
|
+
font-size: 0.98rem;
|
|
338
|
+
}
|
|
339
|
+
|
|
340
|
+
ul {
|
|
341
|
+
margin: 0 0 0.85rem;
|
|
342
|
+
padding-left: 1.15rem;
|
|
343
|
+
}
|
|
344
|
+
|
|
345
|
+
.pair {
|
|
346
|
+
display: grid;
|
|
347
|
+
gap: 0.85rem;
|
|
348
|
+
}
|
|
349
|
+
|
|
350
|
+
@media (min-width: 800px) {
|
|
351
|
+
.pair {
|
|
352
|
+
grid-template-columns: 1fr 1fr;
|
|
353
|
+
}
|
|
354
|
+
}
|
|
355
|
+
|
|
356
|
+
.verdict {
|
|
357
|
+
border: 1px solid var(--line);
|
|
358
|
+
padding: 0.8rem;
|
|
359
|
+
}
|
|
360
|
+
|
|
361
|
+
.verdict.reject {
|
|
362
|
+
border-color: var(--safelight);
|
|
363
|
+
}
|
|
364
|
+
|
|
365
|
+
.verdict.accept {
|
|
366
|
+
border-color: var(--pass);
|
|
367
|
+
}
|
|
368
|
+
|
|
369
|
+
.verdict strong {
|
|
370
|
+
display: block;
|
|
371
|
+
font-family: var(--mono);
|
|
372
|
+
font-size: 0.72rem;
|
|
373
|
+
letter-spacing: 0.07em;
|
|
374
|
+
text-transform: uppercase;
|
|
375
|
+
margin-bottom: 0.4rem;
|
|
376
|
+
}
|
|
377
|
+
|
|
378
|
+
.verdict.reject strong {
|
|
379
|
+
color: var(--safelight);
|
|
380
|
+
}
|
|
381
|
+
|
|
382
|
+
.verdict.accept strong {
|
|
383
|
+
color: var(--pass);
|
|
384
|
+
}
|
|
385
|
+
|
|
386
|
+
footer {
|
|
387
|
+
max-width: 68rem;
|
|
388
|
+
margin: 0 auto;
|
|
389
|
+
padding: 0 1.25rem 2.5rem;
|
|
390
|
+
font-family: var(--mono);
|
|
391
|
+
font-size: 0.78rem;
|
|
392
|
+
color: var(--muted);
|
|
393
|
+
}
|
|
394
|
+
|
|
395
|
+
@media (max-width: 520px) {
|
|
396
|
+
h1 {
|
|
397
|
+
font-size: 1.7rem;
|
|
398
|
+
}
|
|
399
|
+
|
|
400
|
+
.standfirst {
|
|
401
|
+
font-size: 1rem;
|
|
402
|
+
}
|
|
403
|
+
|
|
404
|
+
.frames {
|
|
405
|
+
grid-template-columns: 1fr 1fr;
|
|
406
|
+
gap: 0.4rem;
|
|
407
|
+
}
|
|
408
|
+
|
|
409
|
+
.frame {
|
|
410
|
+
min-height: 0;
|
|
411
|
+
}
|
|
412
|
+
|
|
413
|
+
.frame p {
|
|
414
|
+
font-size: 0.72rem;
|
|
415
|
+
line-height: 1.35;
|
|
416
|
+
}
|
|
417
|
+
|
|
418
|
+
table,
|
|
419
|
+
thead,
|
|
420
|
+
tbody,
|
|
421
|
+
th,
|
|
422
|
+
td,
|
|
423
|
+
tr {
|
|
424
|
+
display: block;
|
|
425
|
+
}
|
|
426
|
+
|
|
427
|
+
thead {
|
|
428
|
+
display: none;
|
|
429
|
+
}
|
|
430
|
+
|
|
431
|
+
td {
|
|
432
|
+
border-top: none;
|
|
433
|
+
padding: 0.15rem 0;
|
|
434
|
+
}
|
|
435
|
+
|
|
436
|
+
td:first-child {
|
|
437
|
+
padding-top: 0.7rem;
|
|
438
|
+
font-weight: 650;
|
|
439
|
+
}
|
|
440
|
+
|
|
441
|
+
tr {
|
|
442
|
+
border-top: 1px solid var(--line);
|
|
443
|
+
padding-bottom: 0.55rem;
|
|
444
|
+
}
|
|
445
|
+
}
|
|
446
|
+
</style>
|
|
447
|
+
</head>
|
|
448
|
+
<body data-view="user-guide">
|
|
449
|
+
<a class="skip" href="#start">Skip to 5-minute start</a>
|
|
450
|
+
<header class="mast">
|
|
451
|
+
<p class="wordmark">Agents and skills · field guide</p>
|
|
452
|
+
<nav aria-label="On this page">
|
|
453
|
+
<a href="#start">Start</a>
|
|
454
|
+
<a href="#ask">Ask</a>
|
|
455
|
+
<a href="#invoke">Five IDEs</a>
|
|
456
|
+
<a href="#qa">Screenshot QA</a>
|
|
457
|
+
</nav>
|
|
458
|
+
</header>
|
|
459
|
+
|
|
460
|
+
<main>
|
|
461
|
+
<div class="top">
|
|
462
|
+
<section class="intro" aria-labelledby="title">
|
|
463
|
+
<p class="kicker">Next.js + Supabase · six specialists</p>
|
|
464
|
+
<h1 id="title">Ask one specialist. Then open the running UI.</h1>
|
|
465
|
+
<p class="standfirst">
|
|
466
|
+
Planner names the owner. App engineer ships the route. Security owns RLS. Design and Copy read pixels. QA does not review <code>page.tsx</code>.
|
|
467
|
+
</p>
|
|
468
|
+
</section>
|
|
469
|
+
<div class="frames" aria-label="Required QA frames">
|
|
470
|
+
<figure class="frame">
|
|
471
|
+
<span>Desktop ~1280 · required</span>
|
|
472
|
+
<p>A user-visible change is not done until someone opened the running UI, captured desktop and mobile screenshots, and reviewed those images.</p>
|
|
473
|
+
</figure>
|
|
474
|
+
<figure class="frame">
|
|
475
|
+
<span>Mobile ~390 · required</span>
|
|
476
|
+
<p>Do not review code alone. One happy-path desktop shot is a fail. Attach both frames or reject the work.</p>
|
|
477
|
+
</figure>
|
|
478
|
+
</div>
|
|
479
|
+
|
|
480
|
+
<p class="rule">
|
|
481
|
+
<strong>Fail-closed.</strong> Do not review code alone. If the work is on a screen, the evidence is
|
|
482
|
+
<code>qa-evidence/<date>-<slug>/desktop.png</code> and <code>mobile.png</code>.
|
|
483
|
+
</p>
|
|
484
|
+
|
|
485
|
+
<section id="start">
|
|
486
|
+
<h2>Five-minute start</h2>
|
|
487
|
+
<div class="steps">
|
|
488
|
+
<article class="ticket">
|
|
489
|
+
<header><span>Install every IDE this team uses</span></header>
|
|
490
|
+
<pre id="init-cmd">npx --yes @appsforgood/next-supabase-kit init --activate all</pre>
|
|
491
|
+
<div class="copy-row">
|
|
492
|
+
<button class="copy" type="button" data-copy-from="init-cmd">Copy init command</button>
|
|
493
|
+
</div>
|
|
494
|
+
</article>
|
|
495
|
+
<article class="ticket">
|
|
496
|
+
<header><span>Open the repo in your IDE</span></header>
|
|
497
|
+
<p>
|
|
498
|
+
You should see <code>AGENTS.md</code>, this guide, and native files under <code>.cursor/</code>, <code>.claude/</code>, <code>.codex/</code>,
|
|
499
|
+
<code>.github/</code>, or <code>.antigravity/</code>.
|
|
500
|
+
</p>
|
|
501
|
+
</article>
|
|
502
|
+
<article class="ticket">
|
|
503
|
+
<header><span>Paste this to Planner — do not ask it to write code</span></header>
|
|
504
|
+
<pre id="plan-prompt">Plan this change. Name the owning agent, extra reviewers, and which screenshots QA must capture. Do not write code.</pre>
|
|
505
|
+
<div class="copy-row">
|
|
506
|
+
<button class="copy" type="button" data-copy-from="plan-prompt">Copy Planner prompt</button>
|
|
507
|
+
</div>
|
|
508
|
+
</article>
|
|
509
|
+
</div>
|
|
510
|
+
<p>
|
|
511
|
+
You should get a named owner (<code>app-engineer</code>, <code>security</code>, <code>design</code>, <code>qa</code>, or <code>copy</code>) and, if
|
|
512
|
+
the work is user-visible, a desktop + mobile shot list.
|
|
513
|
+
</p>
|
|
514
|
+
</section>
|
|
515
|
+
</div>
|
|
516
|
+
|
|
517
|
+
<section id="ask">
|
|
518
|
+
<h2>Which agent do I ask?</h2>
|
|
519
|
+
<p>Do not ask one chat to be all six. Planner names the next specialist. It does not run the other agents.</p>
|
|
520
|
+
<table>
|
|
521
|
+
<thead>
|
|
522
|
+
<tr>
|
|
523
|
+
<th scope="col">You need</th>
|
|
524
|
+
<th scope="col">Ask</th>
|
|
525
|
+
</tr>
|
|
526
|
+
</thead>
|
|
527
|
+
<tbody>
|
|
528
|
+
<tr>
|
|
529
|
+
<td>A plan and an owner</td>
|
|
530
|
+
<td>Planner</td>
|
|
531
|
+
</tr>
|
|
532
|
+
<tr>
|
|
533
|
+
<td>Routes, actions, data loading</td>
|
|
534
|
+
<td>App engineer</td>
|
|
535
|
+
</tr>
|
|
536
|
+
<tr>
|
|
537
|
+
<td>Auth, RLS, secrets</td>
|
|
538
|
+
<td>Security</td>
|
|
539
|
+
</tr>
|
|
540
|
+
<tr>
|
|
541
|
+
<td>It looks wrong</td>
|
|
542
|
+
<td>Design</td>
|
|
543
|
+
</tr>
|
|
544
|
+
<tr>
|
|
545
|
+
<td>Is this done?</td>
|
|
546
|
+
<td>QA</td>
|
|
547
|
+
</tr>
|
|
548
|
+
<tr>
|
|
549
|
+
<td>Landing / CTA words</td>
|
|
550
|
+
<td>Copy</td>
|
|
551
|
+
</tr>
|
|
552
|
+
</tbody>
|
|
553
|
+
</table>
|
|
554
|
+
|
|
555
|
+
<h3>Which skill?</h3>
|
|
556
|
+
<table>
|
|
557
|
+
<thead>
|
|
558
|
+
<tr>
|
|
559
|
+
<th scope="col">Skill</th>
|
|
560
|
+
<th scope="col">Use when</th>
|
|
561
|
+
</tr>
|
|
562
|
+
</thead>
|
|
563
|
+
<tbody>
|
|
564
|
+
<tr>
|
|
565
|
+
<td><code>planning</code></td>
|
|
566
|
+
<td>Ambiguous work; pick an owner</td>
|
|
567
|
+
</tr>
|
|
568
|
+
<tr>
|
|
569
|
+
<td><code>nextjs-app-router</code></td>
|
|
570
|
+
<td>Routes, Server Components, actions</td>
|
|
571
|
+
</tr>
|
|
572
|
+
<tr>
|
|
573
|
+
<td><code>supabase-auth-rls</code></td>
|
|
574
|
+
<td>Auth, RLS, service role</td>
|
|
575
|
+
</tr>
|
|
576
|
+
<tr>
|
|
577
|
+
<td><code>postgres-migrations</code></td>
|
|
578
|
+
<td>Schema and migrations</td>
|
|
579
|
+
</tr>
|
|
580
|
+
<tr>
|
|
581
|
+
<td><code>owasp-security-review</code></td>
|
|
582
|
+
<td>Mutations, uploads, secrets</td>
|
|
583
|
+
</tr>
|
|
584
|
+
<tr>
|
|
585
|
+
<td><code>frontend-design</code></td>
|
|
586
|
+
<td>Layout, simple palette, anti-generic UI</td>
|
|
587
|
+
</tr>
|
|
588
|
+
<tr>
|
|
589
|
+
<td><code>accessibility-wcag</code></td>
|
|
590
|
+
<td>Keyboard, contrast, labels</td>
|
|
591
|
+
</tr>
|
|
592
|
+
<tr>
|
|
593
|
+
<td><code>browser-qa</code></td>
|
|
594
|
+
<td>Any screen. Required for QA of UI</td>
|
|
595
|
+
</tr>
|
|
596
|
+
<tr>
|
|
597
|
+
<td><code>testing-qa</code></td>
|
|
598
|
+
<td>Unit / regression / smoke only</td>
|
|
599
|
+
</tr>
|
|
600
|
+
<tr>
|
|
601
|
+
<td><code>product-copy</code></td>
|
|
602
|
+
<td>Headlines and CTAs</td>
|
|
603
|
+
</tr>
|
|
604
|
+
<tr>
|
|
605
|
+
<td><code>deslop</code></td>
|
|
606
|
+
<td>Last copy pass. Copy always runs this</td>
|
|
607
|
+
</tr>
|
|
608
|
+
<tr>
|
|
609
|
+
<td><code>ship</code></td>
|
|
610
|
+
<td>Release, env, rollback</td>
|
|
611
|
+
</tr>
|
|
612
|
+
</tbody>
|
|
613
|
+
</table>
|
|
614
|
+
<p>
|
|
615
|
+
QA of a screen always uses <code>browser-qa</code>, not <code>testing-qa</code> alone. Each agent file names the skills it must run, then points at
|
|
616
|
+
<code>catalog.json</code> for the rest.
|
|
617
|
+
</p>
|
|
618
|
+
</section>
|
|
619
|
+
|
|
620
|
+
<section id="invoke">
|
|
621
|
+
<h2>How to invoke in each IDE</h2>
|
|
622
|
+
<div class="ides">
|
|
623
|
+
<article class="ide">
|
|
624
|
+
<h3>Cursor</h3>
|
|
625
|
+
<p><code>.cursor/agents/*.md</code>, <code>.cursor/skills/*/SKILL.md</code></p>
|
|
626
|
+
<ul>
|
|
627
|
+
<li>
|
|
628
|
+
Mention <code>@planner</code>, <code>@app-engineer</code>, <code>@security</code>, <code>@design</code>, <code>@qa</code>, or
|
|
629
|
+
<code>@copy</code>.
|
|
630
|
+
</li>
|
|
631
|
+
<li>Force a skill with <code>@browser-qa</code>.</li>
|
|
632
|
+
<li>Use the built-in browser first. Playwright is backup.</li>
|
|
633
|
+
</ul>
|
|
634
|
+
</article>
|
|
635
|
+
<article class="ide">
|
|
636
|
+
<h3>Claude Code</h3>
|
|
637
|
+
<p><code>.claude/agents/*.md</code>, <code>CLAUDE.md</code></p>
|
|
638
|
+
<ul>
|
|
639
|
+
<li>Use the matching subagent instead of one generic thread.</li>
|
|
640
|
+
<li>Mention <code>browser-qa</code> for any screen. If there is no browser, use the Playwright commands in that skill.</li>
|
|
641
|
+
</ul>
|
|
642
|
+
</article>
|
|
643
|
+
<article class="ide">
|
|
644
|
+
<h3>Codex</h3>
|
|
645
|
+
<p><code>.codex/agents/*.toml</code>, <code>AGENTS.md</code></p>
|
|
646
|
+
<ul>
|
|
647
|
+
<li>Spawn the named custom agent from <code>.codex/agents/</code>.</li>
|
|
648
|
+
<li>Paste the good QA prompt below. Use Playwright if Codex cannot see the page.</li>
|
|
649
|
+
</ul>
|
|
650
|
+
</article>
|
|
651
|
+
<article class="ide">
|
|
652
|
+
<h3>GitHub Copilot</h3>
|
|
653
|
+
<p><code>.github/copilot-instructions.md</code></p>
|
|
654
|
+
<p>No <code>@agent</code> picker. Paste a role prompt:</p>
|
|
655
|
+
<pre id="copilot-prompt">
|
|
656
|
+
Act as the QA agent. Use the browser-qa skill. Do not review code alone. Open the app, capture desktop and mobile screenshots, read the images, then give accept / accept-with-nits / reject.</pre>
|
|
657
|
+
<div class="copy-row">
|
|
658
|
+
<button class="copy" type="button" data-copy-from="copilot-prompt">Copy Copilot prompt</button>
|
|
659
|
+
</div>
|
|
660
|
+
</article>
|
|
661
|
+
<article class="ide">
|
|
662
|
+
<h3>Antigravity</h3>
|
|
663
|
+
<p><code>.antigravity/agent-kit/commands/*.toml</code></p>
|
|
664
|
+
<ul>
|
|
665
|
+
<li><code>/plan</code> — Planner</li>
|
|
666
|
+
<li><code>/browser-qa</code> — screenshot loop</li>
|
|
667
|
+
<li><code>/security</code>, <code>/frontend</code>, <code>/copy</code>, <code>/test</code>, <code>/ship</code></li>
|
|
668
|
+
</ul>
|
|
669
|
+
</article>
|
|
670
|
+
</div>
|
|
671
|
+
</section>
|
|
672
|
+
|
|
673
|
+
<section id="flows">
|
|
674
|
+
<h2>Standard workflows</h2>
|
|
675
|
+
<h3>New feature</h3>
|
|
676
|
+
<ol>
|
|
677
|
+
<li>Planner — paste the prompt on ticket 03.</li>
|
|
678
|
+
<li>App engineer — <code>Implement the plan. Smoke the changed route in the browser before you hand off.</code></li>
|
|
679
|
+
<li>Security if data, auth, or secrets changed.</li>
|
|
680
|
+
<li>Design if the UI changed — <code>Review the running UI from screenshots first. Desktop and mobile. Reject generic AI-looking layout.</code></li>
|
|
681
|
+
<li>QA — paste the good prompt below.</li>
|
|
682
|
+
</ol>
|
|
683
|
+
<p>Done when QA attaches both frames plus a verdict.</p>
|
|
684
|
+
<h3>Auth / RLS</h3>
|
|
685
|
+
<p>
|
|
686
|
+
Planner → App engineer → Security → QA. QA must open login, logout, and denied in the browser. Screenshots still required when the finding is
|
|
687
|
+
user-visible.
|
|
688
|
+
</p>
|
|
689
|
+
<h3>UI polish</h3>
|
|
690
|
+
<p>Design + <code>frontend-design</code> + <code>browser-qa</code>. Desktop and mobile. One happy-path shot is a fail.</p>
|
|
691
|
+
<h3>Copy pass</h3>
|
|
692
|
+
<p>Copy reviews the <em>rendered</em> words in screenshots, not strings in TSX. Run <code>product-copy</code>, then <code>deslop</code> last.</p>
|
|
693
|
+
</section>
|
|
694
|
+
|
|
695
|
+
<section id="qa">
|
|
696
|
+
<h2>QA screenshot loop</h2>
|
|
697
|
+
<div class="pair">
|
|
698
|
+
<article class="verdict reject">
|
|
699
|
+
<strong>Reject this</strong>
|
|
700
|
+
<pre>Review the new settings page in page.tsx and tell me if the layout looks right.</pre>
|
|
701
|
+
</article>
|
|
702
|
+
<article class="verdict accept">
|
|
703
|
+
<strong>Ask this</strong>
|
|
704
|
+
<pre id="qa-prompt">
|
|
705
|
+
Do not review code alone. Open the app, capture desktop and mobile screenshots, read the images, then give accept / accept-with-nits / reject.</pre>
|
|
706
|
+
<div class="copy-row">
|
|
707
|
+
<button class="copy" type="button" data-copy-from="qa-prompt">Copy QA prompt</button>
|
|
708
|
+
</div>
|
|
709
|
+
</article>
|
|
710
|
+
</div>
|
|
711
|
+
<ol>
|
|
712
|
+
<li>Start or find the app (<code>next dev</code> or preview).</li>
|
|
713
|
+
<li>Open the changed route with the real auth, role, and data.</li>
|
|
714
|
+
<li>Capture desktop (~1280) and mobile (~390) into <code>qa-evidence/<yyyy-mm-dd>-<slug>/</code>.</li>
|
|
715
|
+
<li><strong>Read the images.</strong> List blockers from what is on screen.</li>
|
|
716
|
+
<li>Run applicable tests. <code>toBeVisible</code> is not a screenshot.</li>
|
|
717
|
+
<li>Write <code>notes.md</code> with route, viewports, auth state, verdict.</li>
|
|
718
|
+
</ol>
|
|
719
|
+
<p>Cursor: built-in browser first. Claude, Codex, Copilot, Antigravity: host browser if present, otherwise:</p>
|
|
720
|
+
<pre id="pw-cmd">
|
|
721
|
+
npx playwright screenshot --viewport-size=1280,720 "$URL" qa-evidence/<slug>/desktop.png
|
|
722
|
+
npx playwright screenshot --viewport-size=390,844 "$URL" qa-evidence/<slug>/mobile.png</pre>
|
|
723
|
+
<div class="copy-row">
|
|
724
|
+
<button class="copy" type="button" data-copy-from="pw-cmd">Copy Playwright commands</button>
|
|
725
|
+
</div>
|
|
726
|
+
</section>
|
|
727
|
+
|
|
728
|
+
<section id="more">
|
|
729
|
+
<h2>Adding more, updating, unblocking</h2>
|
|
730
|
+
<pre id="add-cmd">
|
|
731
|
+
npx agent-kit add agent lead-architect
|
|
732
|
+
npx agent-kit add skill debug
|
|
733
|
+
npx agent-kit update</pre>
|
|
734
|
+
<div class="copy-row">
|
|
735
|
+
<button class="copy" type="button" data-copy-from="add-cmd">Copy add / update commands</button>
|
|
736
|
+
</div>
|
|
737
|
+
<p>
|
|
738
|
+
Optional agents: <code>lead-architect</code>, <code>docs</code>, <code>deploy</code>, <code>research</code>. Optional skills: <code>ui-polish</code>,
|
|
739
|
+
<code>docs</code>, <code>upgrade</code>, <code>debug</code>. Do not add them unless that specialist has a repeating job.
|
|
740
|
+
</p>
|
|
741
|
+
<p><code>update</code> refreshes pristine files. Local edits win or land in <code>.agent-kit/conflicts/</code>. It never deletes your old docs.</p>
|
|
742
|
+
<table>
|
|
743
|
+
<thead>
|
|
744
|
+
<tr>
|
|
745
|
+
<th scope="col">Problem</th>
|
|
746
|
+
<th scope="col">Fix</th>
|
|
747
|
+
</tr>
|
|
748
|
+
</thead>
|
|
749
|
+
<tbody>
|
|
750
|
+
<tr>
|
|
751
|
+
<td>Agent missing in Cursor / Claude</td>
|
|
752
|
+
<td>Re-run <code>init --activate cursor</code> or <code>claude</code>.</td>
|
|
753
|
+
</tr>
|
|
754
|
+
<tr>
|
|
755
|
+
<td>Skill not triggering</td>
|
|
756
|
+
<td>Mention <code>browser-qa</code> or <code>@</code> it in Cursor.</td>
|
|
757
|
+
</tr>
|
|
758
|
+
<tr>
|
|
759
|
+
<td>No browser in Copilot / Codex</td>
|
|
760
|
+
<td>Use the Playwright commands above.</td>
|
|
761
|
+
</tr>
|
|
762
|
+
<tr>
|
|
763
|
+
<td>QA finished from the diff</td>
|
|
764
|
+
<td>Reject it. Re-run with the good QA prompt.</td>
|
|
765
|
+
</tr>
|
|
766
|
+
<tr>
|
|
767
|
+
<td><code>doctor</code> fails the guide</td>
|
|
768
|
+
<td>The screenshot fail-closed sentence must stay in <code>USER_GUIDE.md</code> and this page.</td>
|
|
769
|
+
</tr>
|
|
770
|
+
<tr>
|
|
771
|
+
<td>Still have <code>QUALITY_GATES.md</code> / <code>COUNCIL.md</code></td>
|
|
772
|
+
<td>Expected. <code>update</code> does not delete them. <code>doctor</code> lists leftovers.</td>
|
|
773
|
+
</tr>
|
|
774
|
+
</tbody>
|
|
775
|
+
</table>
|
|
776
|
+
</section>
|
|
777
|
+
</main>
|
|
778
|
+
|
|
779
|
+
<footer>
|
|
780
|
+
<p>Markdown twin: <a href="USER_GUIDE.md">USER_GUIDE.md</a>. Same rules. This page is how you judge the copy and the layout.</p>
|
|
781
|
+
</footer>
|
|
782
|
+
|
|
783
|
+
<script>
|
|
784
|
+
document.querySelectorAll("button.copy").forEach((button) => {
|
|
785
|
+
const label = button.textContent;
|
|
786
|
+
button.addEventListener("click", async () => {
|
|
787
|
+
const id = button.getAttribute("data-copy-from");
|
|
788
|
+
const source = id ? document.getElementById(id) : null;
|
|
789
|
+
if (!source) return;
|
|
790
|
+
try {
|
|
791
|
+
await navigator.clipboard.writeText(source.textContent ?? "");
|
|
792
|
+
button.dataset.copied = "true";
|
|
793
|
+
button.textContent = "Copied";
|
|
794
|
+
window.setTimeout(() => {
|
|
795
|
+
button.dataset.copied = "false";
|
|
796
|
+
button.textContent = label;
|
|
797
|
+
}, 1600);
|
|
798
|
+
} catch {
|
|
799
|
+
button.textContent = "Copy failed — select the text";
|
|
800
|
+
window.setTimeout(() => {
|
|
801
|
+
button.textContent = label;
|
|
802
|
+
}, 2400);
|
|
803
|
+
}
|
|
804
|
+
});
|
|
805
|
+
});
|
|
806
|
+
</script>
|
|
807
|
+
</body>
|
|
808
|
+
</html>
|