@su-record/vibe 2.16.4 → 3.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/CLAUDE.md +8 -8
- package/README.en.md +46 -29
- package/README.md +41 -24
- package/agents/acceptance-tester.md +56 -0
- package/agents/architect.md +25 -67
- package/agents/build-error-resolver.md +28 -97
- package/agents/code-reviewer.md +89 -0
- package/agents/diagrammer.md +34 -169
- package/agents/documenter.md +43 -0
- package/agents/e2e-tester.md +46 -281
- package/agents/event/event-ops.md +54 -77
- package/agents/event/event-planner.md +63 -0
- package/agents/figma/figma-engineer.md +76 -0
- package/agents/implementer.md +26 -41
- package/agents/security-reviewer.md +56 -0
- package/agents/tester.md +37 -33
- package/agents/ui/design-reviewer.md +62 -0
- package/agents/ui/design-system-gen.md +63 -0
- package/dist/cli/commands/remove.d.ts.map +1 -1
- package/dist/cli/commands/remove.js +8 -10
- package/dist/cli/commands/remove.js.map +1 -1
- package/dist/cli/index.d.ts +0 -4
- package/dist/cli/index.d.ts.map +1 -1
- package/dist/cli/index.js +0 -4
- package/dist/cli/index.js.map +1 -1
- package/dist/cli/llm/model-refresh.js +1 -1
- package/dist/cli/llm/model-refresh.js.map +1 -1
- package/dist/cli/postinstall/claude-agents.d.ts.map +1 -1
- package/dist/cli/postinstall/claude-agents.js +16 -77
- package/dist/cli/postinstall/claude-agents.js.map +1 -1
- package/dist/cli/postinstall/constants.d.ts.map +1 -1
- package/dist/cli/postinstall/constants.js +80 -296
- package/dist/cli/postinstall/constants.js.map +1 -1
- package/dist/cli/postinstall/cursor-agents.d.ts +5 -0
- package/dist/cli/postinstall/cursor-agents.d.ts.map +1 -1
- package/dist/cli/postinstall/cursor-agents.js +26 -68
- package/dist/cli/postinstall/cursor-agents.js.map +1 -1
- package/dist/cli/postinstall/cursor-skills.d.ts.map +1 -1
- package/dist/cli/postinstall/cursor-skills.js +26 -30
- package/dist/cli/postinstall/cursor-skills.js.map +1 -1
- package/dist/cli/postinstall/main.d.ts.map +1 -1
- package/dist/cli/postinstall/main.js +0 -2
- package/dist/cli/postinstall/main.js.map +1 -1
- package/dist/cli/setup/Provisioner.d.ts.map +1 -1
- package/dist/cli/setup/Provisioner.js +19 -21
- package/dist/cli/setup/Provisioner.js.map +1 -1
- package/dist/cli/utils.d.ts +4 -1
- package/dist/cli/utils.d.ts.map +1 -1
- package/dist/cli/utils.js +4 -1
- package/dist/cli/utils.js.map +1 -1
- package/dist/infra/lib/FrameworkDetector.js +4 -4
- package/dist/infra/lib/FrameworkDetector.js.map +1 -1
- package/dist/infra/lib/OrchestrateWorkflow.js +2 -2
- package/dist/infra/lib/OrchestrateWorkflow.js.map +1 -1
- package/dist/infra/lib/browser/launch.js +1 -1
- package/dist/infra/lib/browser/launch.js.map +1 -1
- package/dist/infra/lib/browser/types.d.ts +1 -1
- package/dist/infra/lib/browser/types.js +1 -1
- package/dist/infra/lib/constants.d.ts +1 -1
- package/dist/infra/lib/constants.d.ts.map +1 -1
- package/dist/infra/lib/constants.js +4 -5
- package/dist/infra/lib/constants.js.map +1 -1
- package/dist/infra/lib/evolution/__tests__/integration.test.js +7 -7
- package/dist/infra/lib/evolution/__tests__/integration.test.js.map +1 -1
- package/dist/infra/lib/memory/index.d.ts +0 -2
- package/dist/infra/lib/memory/index.d.ts.map +1 -1
- package/dist/infra/lib/memory/index.js +0 -2
- package/dist/infra/lib/memory/index.js.map +1 -1
- package/dist/infra/lib/telemetry/SkillTelemetry.test.js +1 -1
- package/dist/infra/lib/telemetry/SkillTelemetry.test.js.map +1 -1
- package/dist/tools/index.d.ts +0 -4
- package/dist/tools/index.d.ts.map +1 -1
- package/dist/tools/index.js +0 -4
- package/dist/tools/index.js.map +1 -1
- package/dist/tools/memory/autoSaveContext.d.ts +0 -1
- package/dist/tools/memory/autoSaveContext.d.ts.map +1 -1
- package/dist/tools/memory/autoSaveContext.js +13 -27
- package/dist/tools/memory/autoSaveContext.js.map +1 -1
- package/hooks/scripts/__tests__/code-check-detectors.test.js +2 -2
- package/hooks/scripts/__tests__/run-ledger.test.js +1 -1
- package/hooks/scripts/__tests__/scope-from-spec.test.js +12 -12
- package/hooks/scripts/__tests__/step-counter.test.js +1 -1
- package/hooks/scripts/code-check.js +16 -203
- package/hooks/scripts/context-save.js +0 -11
- package/hooks/scripts/lib/scope-from-spec.js +9 -6
- package/hooks/scripts/post-edit-dispatcher.js +1 -1
- package/hooks/scripts/prompt-dispatcher.js +7 -18
- package/hooks/scripts/session-start.js +25 -35
- package/package.json +2 -4
- package/skills/agents-md/SKILL.md +62 -15
- package/skills/arch-guard/SKILL.md +1 -1
- package/skills/brand-assets/SKILL.md +2 -2
- package/skills/capability-loop/SKILL.md +1 -1
- package/skills/chub-usage/SKILL.md +1 -1
- package/skills/commerce-patterns/SKILL.md +2 -2
- package/skills/commit-push-pr/SKILL.md +0 -1
- package/skills/context7-usage/SKILL.md +1 -1
- package/skills/design-refine/SKILL.md +140 -0
- package/skills/{design-polish → design-refine}/templates/polish-report.md +1 -1
- package/skills/{design-normalize → design-refine}/templates/token-audit.md +3 -3
- package/skills/design-review/SKILL.md +143 -0
- package/skills/{design-audit → design-review}/agents/a11y-auditor.md +1 -1
- package/skills/{design-audit → design-review}/agents/performance-auditor.md +1 -1
- package/skills/{design-audit → design-review}/agents/responsive-auditor.md +1 -1
- package/skills/{design-audit → design-review}/agents/slop-detector.md +1 -1
- package/skills/{design-audit → design-review}/frameworks/core-web-vitals.md +1 -1
- package/skills/{design-audit → design-review}/frameworks/wcag-checklist.md +1 -1
- package/skills/{design-audit → design-review}/orchestrator.md +3 -3
- package/skills/{design-critique → design-review}/templates/critique-report.md +3 -3
- package/skills/{design-audit → design-review}/templates/report.md +3 -3
- package/skills/design-teach/SKILL.md +11 -11
- package/skills/docs/SKILL.md +14 -16
- package/skills/e2e-commerce/SKILL.md +1 -1
- package/skills/event-comms/SKILL.md +1 -1
- package/skills/event-ops/SKILL.md +2 -2
- package/skills/event-planning/SKILL.md +1 -1
- package/skills/exec-plan/SKILL.md +2 -2
- package/skills/figma/SKILL.md +240 -148
- package/skills/figma/rubrics/css-mapping.md +125 -0
- package/skills/git-worktree/SKILL.md +1 -1
- package/skills/handoff/SKILL.md +1 -1
- package/skills/parallel-research/SKILL.md +14 -28
- package/skills/priority-todos/SKILL.md +1 -1
- package/skills/regress/SKILL.md +11 -0
- package/skills/restraint/SKILL.md +72 -0
- package/skills/seo-checklist/SKILL.md +2 -2
- package/skills/spec/SKILL.md +65 -836
- package/skills/test/SKILL.md +3 -3
- package/skills/tool-fallback/SKILL.md +2 -2
- package/skills/vercel-react-best-practices/SKILL.md +1 -1
- package/skills/vibe/SKILL.md +20 -35
- package/skills/vibe.analyze/SKILL.md +7 -9
- package/skills/vibe.docs/SKILL.md +1 -1
- package/skills/vibe.event/SKILL.md +27 -27
- package/skills/vibe.figma/SKILL.md +14 -18
- package/skills/vibe.harness/SKILL.md +5 -5
- package/skills/vibe.reason/SKILL.md +0 -2
- package/skills/vibe.review/SKILL.md +45 -49
- package/skills/vibe.run/SKILL.md +2 -5
- package/skills/vibe.run/references/parallel-agents.md +33 -98
- package/skills/vibe.spec/SKILL.md +38 -535
- package/skills/vibe.utils/SKILL.md +3 -3
- package/skills/vibe.verify/SKILL.md +70 -542
- package/skills/video-production/SKILL.md +1 -1
- package/vibe/rules/orchestrator-contract.md +5 -4
- package/vibe/rules/quality/performance.md +1 -1
- package/vibe/templates/claudemd-template.md +1 -1
- package/vibe/templates/spec-template.md +35 -185
- package/agents/architect-low.md +0 -41
- package/agents/architect-medium.md +0 -59
- package/agents/compounder.md +0 -265
- package/agents/docs/api-documenter.md +0 -99
- package/agents/docs/changelog-writer.md +0 -93
- package/agents/event/event-comms.md +0 -78
- package/agents/event/event-content.md +0 -68
- package/agents/event/event-image.md +0 -95
- package/agents/event/event-scheduler.md +0 -69
- package/agents/event/event-speaker.md +0 -86
- package/agents/explorer-low.md +0 -42
- package/agents/explorer-medium.md +0 -59
- package/agents/explorer.md +0 -48
- package/agents/figma/figma-analyst.md +0 -56
- package/agents/figma/figma-architect.md +0 -116
- package/agents/figma/figma-auditor.md +0 -86
- package/agents/figma/figma-builder.md +0 -104
- package/agents/implementer-low.md +0 -43
- package/agents/implementer-medium.md +0 -52
- package/agents/junior-mentor.md +0 -141
- package/agents/planning/requirements-analyst.md +0 -84
- package/agents/planning/ux-advisor.md +0 -83
- package/agents/qa/acceptance-tester.md +0 -86
- package/agents/qa/edge-case-finder.md +0 -93
- package/agents/qa/qa-coordinator.md +0 -131
- package/agents/refactor-cleaner.md +0 -143
- package/agents/research/best-practices.md +0 -199
- package/agents/research/codebase-patterns.md +0 -157
- package/agents/research/framework-docs.md +0 -188
- package/agents/research/security-advisory.md +0 -213
- package/agents/review/architecture-reviewer.md +0 -107
- package/agents/review/complexity-reviewer.md +0 -116
- package/agents/review/data-integrity-reviewer.md +0 -88
- package/agents/review/git-history-reviewer.md +0 -103
- package/agents/review/performance-reviewer.md +0 -86
- package/agents/review/python-reviewer.md +0 -150
- package/agents/review/rails-reviewer.md +0 -139
- package/agents/review/react-reviewer.md +0 -144
- package/agents/review/security-reviewer.md +0 -80
- package/agents/review/simplicity-reviewer.md +0 -140
- package/agents/review/test-coverage-reviewer.md +0 -116
- package/agents/review/typescript-reviewer.md +0 -127
- package/agents/searcher.md +0 -54
- package/agents/simplifier.md +0 -124
- package/agents/teams/debug-team.md +0 -74
- package/agents/teams/dev-team.md +0 -92
- package/agents/teams/docs-team.md +0 -84
- package/agents/teams/figma-team.md +0 -89
- package/agents/teams/fullstack-team.md +0 -87
- package/agents/teams/lite-team.md +0 -73
- package/agents/teams/migration-team.md +0 -82
- package/agents/teams/refactor-team.md +0 -98
- package/agents/teams/research-team.md +0 -90
- package/agents/teams/review-debate-team.md +0 -129
- package/agents/teams/security-team.md +0 -85
- package/agents/ui/ui-a11y-auditor.md +0 -93
- package/agents/ui/ui-antipattern-detector.md +0 -102
- package/agents/ui/ui-dataviz-advisor.md +0 -69
- package/agents/ui/ui-design-system-gen.md +0 -57
- package/agents/ui/ui-industry-analyzer.md +0 -49
- package/agents/ui/ui-layout-architect.md +0 -65
- package/agents/ui/ui-stack-implementer.md +0 -68
- package/agents/ui/ux-compliance-reviewer.md +0 -81
- package/agents/ui-previewer.md +0 -262
- package/hooks/scripts/__tests__/keyword-detector.test.js +0 -242
- package/hooks/scripts/keyword-detector.js +0 -226
- package/skills/characterization-test/SKILL.md +0 -209
- package/skills/characterization-test/agents/behavior-capturer.md +0 -50
- package/skills/characterization-test/agents/coverage-checker.md +0 -54
- package/skills/characterization-test/agents/reporter.md +0 -50
- package/skills/characterization-test/agents/test-writer.md +0 -49
- package/skills/characterization-test/rubrics/coverage-criteria.md +0 -53
- package/skills/characterization-test/templates/test-template.ts +0 -101
- package/skills/claude-md-guide/SKILL.md +0 -353
- package/skills/claude-md-guide/rubrics/anti-patterns.md +0 -88
- package/skills/design-audit/SKILL.md +0 -154
- package/skills/design-critique/SKILL.md +0 -140
- package/skills/design-distill/SKILL.md +0 -131
- package/skills/design-normalize/SKILL.md +0 -135
- package/skills/design-polish/SKILL.md +0 -132
- package/skills/figma-convert/SKILL.md +0 -236
- package/skills/figma-extract/SKILL.md +0 -242
- package/skills/interview/SKILL.md +0 -358
- package/skills/interview/checklists/api.md +0 -101
- package/skills/interview/checklists/feature.md +0 -88
- package/skills/interview/checklists/library.md +0 -95
- package/skills/interview/checklists/mobile.md +0 -89
- package/skills/interview/checklists/webapp.md +0 -97
- package/skills/interview/checklists/website.md +0 -99
- package/skills/plan/SKILL.md +0 -254
- package/skills/rob-pike/SKILL.md +0 -66
- package/skills/spec/references/askuser-examples.md +0 -57
- package/skills/spec/references/example-session.md +0 -87
- package/skills/spec/references/templates.md +0 -194
- package/skills/spec-review/SKILL.md +0 -725
- package/skills/systematic-debugging/SKILL.md +0 -142
- package/skills/techdebt/SKILL.md +0 -126
- package/skills/techdebt/agents/analyzer.md +0 -50
- package/skills/techdebt/agents/fixer.md +0 -41
- package/skills/techdebt/agents/reviewer.md +0 -47
- package/skills/techdebt/agents/scanner.md +0 -44
- package/skills/techdebt/orchestrator.md +0 -72
- package/skills/techdebt/rubrics/severity.md +0 -51
- package/skills/techdebt/scripts/scan.js +0 -90
- package/skills/techdebt/templates/report.md +0 -86
- package/skills/typescript-advanced-types/SKILL.md +0 -68
- package/skills/typescript-advanced-types/rubrics/type-patterns.md +0 -109
- package/skills/yagni-ladder/SKILL.md +0 -90
- /package/skills/{claude-md-guide → agents-md}/templates/claude-md.md +0 -0
- /package/skills/{design-polish → design-refine}/rubrics/polish-checklist.md +0 -0
- /package/skills/{design-normalize → design-refine}/rubrics/token-naming.md +0 -0
- /package/skills/{design-distill → design-refine}/templates/design-system.md +0 -0
- /package/skills/{design-audit → design-review}/agents/scorer.md +0 -0
- /package/skills/{design-audit → design-review}/rubrics/ai-slop-patterns.md +0 -0
- /package/skills/{design-audit → design-review}/rubrics/scoring.md +0 -0
- /package/skills/{design-critique → design-review}/rubrics/ux-heuristics.md +0 -0
- /package/skills/{figma-convert → figma}/rubrics/conversion-rules.md +0 -0
- /package/skills/{figma-extract → figma}/rubrics/image-rules.md +0 -0
- /package/skills/{figma-convert → figma}/templates/component.md +0 -0
|
@@ -1,101 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Characterization test template — lock existing behavior before refactoring.
|
|
3
|
-
*
|
|
4
|
-
* Instructions:
|
|
5
|
-
* 1. Replace {{MODULE_NAME}} with the module under test.
|
|
6
|
-
* 2. Replace {{IMPORT_PATH}} with the relative import path.
|
|
7
|
-
* 3. Replace {{FUNCTION_NAME}} with each public export to characterize.
|
|
8
|
-
* 4. Run once to generate snapshots: npx vitest run --update {{TEST_FILE}}
|
|
9
|
-
* 5. Verify all tests pass BEFORE making any changes to the source.
|
|
10
|
-
*
|
|
11
|
-
* IMPORTANT: Capture ACTUAL behavior, not expected/ideal behavior.
|
|
12
|
-
* If the current code has a bug, capture the buggy output — fix it separately.
|
|
13
|
-
*/
|
|
14
|
-
|
|
15
|
-
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
|
16
|
-
// import { {{FUNCTION_NAME}} } from '{{IMPORT_PATH}}';
|
|
17
|
-
|
|
18
|
-
describe('{{MODULE_NAME}} — characterization tests', () => {
|
|
19
|
-
beforeEach(() => {
|
|
20
|
-
vi.clearAllMocks();
|
|
21
|
-
});
|
|
22
|
-
|
|
23
|
-
// -------------------------------------------------------------------------
|
|
24
|
-
// Happy path — normal inputs
|
|
25
|
-
// -------------------------------------------------------------------------
|
|
26
|
-
|
|
27
|
-
it('should handle typical input', () => {
|
|
28
|
-
// const result = {{FUNCTION_NAME}}({{TYPICAL_INPUT}});
|
|
29
|
-
// expect(result).toMatchSnapshot();
|
|
30
|
-
});
|
|
31
|
-
|
|
32
|
-
it('should handle minimum valid input', () => {
|
|
33
|
-
// const result = {{FUNCTION_NAME}}({{MIN_INPUT}});
|
|
34
|
-
// expect(result).toMatchSnapshot();
|
|
35
|
-
});
|
|
36
|
-
|
|
37
|
-
it('should handle maximum valid input', () => {
|
|
38
|
-
// const result = {{FUNCTION_NAME}}({{MAX_INPUT}});
|
|
39
|
-
// expect(result).toMatchSnapshot();
|
|
40
|
-
});
|
|
41
|
-
|
|
42
|
-
// -------------------------------------------------------------------------
|
|
43
|
-
// Edge cases — boundary values
|
|
44
|
-
// -------------------------------------------------------------------------
|
|
45
|
-
|
|
46
|
-
it('should handle empty string input', () => {
|
|
47
|
-
// const result = {{FUNCTION_NAME}}('');
|
|
48
|
-
// expect(result).toMatchSnapshot();
|
|
49
|
-
});
|
|
50
|
-
|
|
51
|
-
it('should handle empty array input', () => {
|
|
52
|
-
// const result = {{FUNCTION_NAME}}([]);
|
|
53
|
-
// expect(result).toMatchSnapshot();
|
|
54
|
-
});
|
|
55
|
-
|
|
56
|
-
it('should handle zero / false / null-like values', () => {
|
|
57
|
-
// const result = {{FUNCTION_NAME}}(0);
|
|
58
|
-
// expect(result).toMatchSnapshot();
|
|
59
|
-
});
|
|
60
|
-
|
|
61
|
-
// -------------------------------------------------------------------------
|
|
62
|
-
// Error paths — failure modes
|
|
63
|
-
// -------------------------------------------------------------------------
|
|
64
|
-
|
|
65
|
-
it('should handle null input', () => {
|
|
66
|
-
// expect(() => {{FUNCTION_NAME}}(null)).toThrowErrorMatchingSnapshot();
|
|
67
|
-
});
|
|
68
|
-
|
|
69
|
-
it('should handle undefined input', () => {
|
|
70
|
-
// expect(() => {{FUNCTION_NAME}}(undefined)).toThrowErrorMatchingSnapshot();
|
|
71
|
-
});
|
|
72
|
-
|
|
73
|
-
it('should handle invalid type input', () => {
|
|
74
|
-
// expect(() => {{FUNCTION_NAME}}({{INVALID_INPUT}})).toThrowErrorMatchingSnapshot();
|
|
75
|
-
});
|
|
76
|
-
|
|
77
|
-
// -------------------------------------------------------------------------
|
|
78
|
-
// Side effects — external interactions
|
|
79
|
-
// -------------------------------------------------------------------------
|
|
80
|
-
|
|
81
|
-
it('should call external dependency with correct arguments', () => {
|
|
82
|
-
// const spy = vi.spyOn({{DEPENDENCY}}, '{{METHOD}}');
|
|
83
|
-
// {{FUNCTION_NAME}}({{TYPICAL_INPUT}});
|
|
84
|
-
// expect(spy).toHaveBeenCalledWith({{EXPECTED_ARGS}});
|
|
85
|
-
// expect(spy).toHaveBeenCalledTimes(1);
|
|
86
|
-
});
|
|
87
|
-
|
|
88
|
-
// -------------------------------------------------------------------------
|
|
89
|
-
// Branching paths — one test per major branch
|
|
90
|
-
// -------------------------------------------------------------------------
|
|
91
|
-
|
|
92
|
-
it('should take branch A when condition is true', () => {
|
|
93
|
-
// const result = {{FUNCTION_NAME}}({{BRANCH_A_INPUT}});
|
|
94
|
-
// expect(result).toMatchSnapshot();
|
|
95
|
-
});
|
|
96
|
-
|
|
97
|
-
it('should take branch B when condition is false', () => {
|
|
98
|
-
// const result = {{FUNCTION_NAME}}({{BRANCH_B_INPUT}});
|
|
99
|
-
// expect(result).toMatchSnapshot();
|
|
100
|
-
});
|
|
101
|
-
});
|
|
@@ -1,353 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
name: claude-md-guide
|
|
3
|
-
user-invocable: false
|
|
4
|
-
invocation: [auto]
|
|
5
|
-
tier: standard
|
|
6
|
-
description: "Guide for writing effective CLAUDE.md files from scratch. Evidence-based methodology from 40+ sources including research papers, official docs, and real-world examples. Covers 3-layer architecture, Curse of Instructions mitigation, progressive disclosure, and maintenance. Use when creating new CLAUDE.md, improving existing ones, or teaching team members how to write project instructions for AI agents."
|
|
7
|
-
triggers: [claude-md guide, write claude.md, create claude.md, claude.md 작성, 클로드 문서, project instructions, claude-md]
|
|
8
|
-
priority: 55
|
|
9
|
-
chain-next: [agents-md]
|
|
10
|
-
---
|
|
11
|
-
|
|
12
|
-
# claude-md-guide — CLAUDE.md Writing Guide
|
|
13
|
-
|
|
14
|
-
> **Principle**: "Would the agent make a mistake without this?" → If No, delete it. If Yes, keep it.
|
|
15
|
-
|
|
16
|
-
## Why This Matters
|
|
17
|
-
|
|
18
|
-
Research shows that LLM compliance drops **exponentially** as the number of instructions increases (Curse of Instructions):
|
|
19
|
-
|
|
20
|
-
| Instructions | GPT-4o Compliance | Claude Sonnet Compliance |
|
|
21
|
-
|-------------|------------------|--------------------------|
|
|
22
|
-
| 1 | ~85% | ~90% |
|
|
23
|
-
| 5 | ~44% | ~59% |
|
|
24
|
-
| 10 | ~15% | ~44% |
|
|
25
|
-
| 15+ | ~5% | ~15% |
|
|
26
|
-
|
|
27
|
-
**Conclusion**: Every line has a cost. A short, precise CLAUDE.md is better than a long, comprehensive one.
|
|
28
|
-
|
|
29
|
-
---
|
|
30
|
-
|
|
31
|
-
## Step 1: Project Exploration — Auto-Collect
|
|
32
|
-
|
|
33
|
-
Explore the project before writing CLAUDE.md:
|
|
34
|
-
|
|
35
|
-
```
|
|
36
|
-
Glob: pattern="package.json" → Check stack and scripts
|
|
37
|
-
Glob: pattern="*.config.*" → Build/lint configuration
|
|
38
|
-
Glob: pattern="tsconfig.json" → TypeScript configuration
|
|
39
|
-
Glob: pattern=".env.example" → Environment variable structure
|
|
40
|
-
Glob: pattern="Makefile" → Build system
|
|
41
|
-
Glob: pattern="docker-compose.*" → Infrastructure structure
|
|
42
|
-
Glob: pattern="CLAUDE.md" → Check for existing file
|
|
43
|
-
Glob: pattern="AGENTS.md" → Check for compatible file
|
|
44
|
-
```
|
|
45
|
-
|
|
46
|
-
Summarize the collected information for the user, then ask about any missing context.
|
|
47
|
-
|
|
48
|
-
## Step 2: Interview — Extract Non-Discoverable Information
|
|
49
|
-
|
|
50
|
-
Only ask about information that cannot be found through auto-exploration. **One question at a time, multiple-choice when possible:**
|
|
51
|
-
|
|
52
|
-
### Question Categories
|
|
53
|
-
|
|
54
|
-
**1. Runtime Traps**
|
|
55
|
-
- Are there runtime differences not visible in the code? (e.g., Bun vs Node, ESM vs CJS)
|
|
56
|
-
- Are there bugs that only occur in certain environments?
|
|
57
|
-
|
|
58
|
-
**2. Forbidden Patterns**
|
|
59
|
-
- Are there libraries/patterns that must never be used?
|
|
60
|
-
- Are there approaches that caused problems in the past?
|
|
61
|
-
|
|
62
|
-
**3. Non-standard Conventions**
|
|
63
|
-
- Are there naming/structure rules that differ from standards?
|
|
64
|
-
- Are there special workflows agreed upon by the team?
|
|
65
|
-
|
|
66
|
-
**4. Architecture Decisions**
|
|
67
|
-
- Are there design reasons that can't be inferred from the code alone?
|
|
68
|
-
- Is there business context behind why certain patterns were chosen?
|
|
69
|
-
|
|
70
|
-
**5. Boundaries**
|
|
71
|
-
- Are there files/directories the agent must never touch?
|
|
72
|
-
- Are there areas that require approval before changes are made?
|
|
73
|
-
|
|
74
|
-
## Step 3: Structure Design — 3-Layer Architecture
|
|
75
|
-
|
|
76
|
-
Separate the collected information into 3 layers:
|
|
77
|
-
|
|
78
|
-
### Layer 1: CLAUDE.md (Project Constitution)
|
|
79
|
-
|
|
80
|
-
**Auto-loaded every session** → only universal, stable information.
|
|
81
|
-
|
|
82
|
-
```markdown
|
|
83
|
-
# {Project Name}
|
|
84
|
-
|
|
85
|
-
{1-2 sentences on what the project is. Only if the purpose isn't clear from the code.}
|
|
86
|
-
|
|
87
|
-
## Tech Stack
|
|
88
|
-
{Only what can't be inferred immediately from package.json. e.g., "Bun runtime (not Node)"}
|
|
89
|
-
|
|
90
|
-
## Commands
|
|
91
|
-
{Only what's missing from package.json scripts or non-intuitive}
|
|
92
|
-
- `npm run build && npx vitest run` — build then test (order matters)
|
|
93
|
-
|
|
94
|
-
## Conventions
|
|
95
|
-
{Only what the linter can't catch}
|
|
96
|
-
- ESM only — imports need `.js` extension
|
|
97
|
-
- {Any non-standard naming rules}
|
|
98
|
-
|
|
99
|
-
## Gotchas
|
|
100
|
-
{Things the agent will repeatedly get wrong}
|
|
101
|
-
- **{Trap title}.** {Specific do/don't explanation}
|
|
102
|
-
|
|
103
|
-
## Boundaries
|
|
104
|
-
✅ Always: {things to always do}
|
|
105
|
-
⚠️ Ask first: {things requiring approval first}
|
|
106
|
-
🚫 Never: {absolute prohibitions}
|
|
107
|
-
```
|
|
108
|
-
|
|
109
|
-
### Layer 2: SPEC.md (Per-Feature Design Document)
|
|
110
|
-
|
|
111
|
-
**Loaded only when working on a specific feature** → focus on what and why, leave how to the agent.
|
|
112
|
-
|
|
113
|
-
Storage location: `.vibe/specs/YYYY-MM-DD-{topic}.md`
|
|
114
|
-
|
|
115
|
-
```markdown
|
|
116
|
-
# {Feature Name} SPEC
|
|
117
|
-
|
|
118
|
-
## Purpose (Why)
|
|
119
|
-
## Requirements (What)
|
|
120
|
-
## Success Criteria (Acceptance Criteria)
|
|
121
|
-
## Technical Constraints (Constraints)
|
|
122
|
-
## Boundaries (Out of Scope)
|
|
123
|
-
```
|
|
124
|
-
|
|
125
|
-
### Layer 3: plan.md (Execution Plan)
|
|
126
|
-
|
|
127
|
-
**Per-session task list** → 2-5 minute units, with file paths specified.
|
|
128
|
-
|
|
129
|
-
Storage location: `.vibe/specs/{name}-execplan.md`
|
|
130
|
-
|
|
131
|
-
```markdown
|
|
132
|
-
# Execution Plan
|
|
133
|
-
|
|
134
|
-
## Task 1: {Title}
|
|
135
|
-
- Files: `src/foo.ts`, `src/foo.test.ts`
|
|
136
|
-
- Action: {Specific change}
|
|
137
|
-
- Verify: `npm test src/foo.test.ts`
|
|
138
|
-
|
|
139
|
-
## Task 2: ...
|
|
140
|
-
```
|
|
141
|
-
|
|
142
|
-
## Step 4: Writing — Apply Evidence-Based Principles
|
|
143
|
-
|
|
144
|
-
### Size Limits
|
|
145
|
-
|
|
146
|
-
| Grade | Lines | When Appropriate |
|
|
147
|
-
|-------|-------|-----------------|
|
|
148
|
-
| Optimal | 60-150 | Most projects |
|
|
149
|
-
| Acceptable | 150-200 | Complex monorepos |
|
|
150
|
-
| Warning | 200-300 | Separation needed |
|
|
151
|
-
| Danger | 300+ | Agent ignores half of it |
|
|
152
|
-
|
|
153
|
-
### Attention Distribution by Position (Lost in the Middle Effect)
|
|
154
|
-
|
|
155
|
-
LLMs focus on the **beginning and end** of a document and **ignore the middle**:
|
|
156
|
-
|
|
157
|
-
```
|
|
158
|
-
Attention: ████████░░░░░░░░████████
|
|
159
|
-
^start ^middle(↓20-40%) ^end
|
|
160
|
-
```
|
|
161
|
-
|
|
162
|
-
**Countermeasures**:
|
|
163
|
-
- **Most important rules** → place at the top of the document
|
|
164
|
-
- **Frequently violated rules** → place at the bottom (end) of the document
|
|
165
|
-
- **Background information** → place in the middle (OK if ignored)
|
|
166
|
-
|
|
167
|
-
### Include vs Exclude Checklist
|
|
168
|
-
|
|
169
|
-
**✅ Include (non-discoverable, operationally important)**
|
|
170
|
-
|
|
171
|
-
| Type | Example |
|
|
172
|
-
|------|---------|
|
|
173
|
-
| Runtime traps | "Bun runtime, not Node" |
|
|
174
|
-
| Forbidden patterns | "Never use `any`, use `unknown` + type guards" |
|
|
175
|
-
| SSOT location | "Only edit `constants.ts` for stack mapping" |
|
|
176
|
-
| Order invariants | "Build before test, always" |
|
|
177
|
-
| Non-standard commands | Compound commands, special flags |
|
|
178
|
-
| Security rules | Auth, path traversal prevention, etc. |
|
|
179
|
-
|
|
180
|
-
**❌ Exclude (discoverable or delegate to other tools)**
|
|
181
|
-
|
|
182
|
-
| Type | Reason | Alternative |
|
|
183
|
-
|------|--------|-------------|
|
|
184
|
-
| Directory structure | Discoverable via `ls` | The code itself |
|
|
185
|
-
| Tech stack list | In `package.json` | The code itself |
|
|
186
|
-
| Code style (indentation, semicolons) | Linter catches it | ESLint, Prettier |
|
|
187
|
-
| API documentation | Readable from code | Swagger, JSDoc |
|
|
188
|
-
| General best practices | LLM already knows | Unnecessary |
|
|
189
|
-
| API keys, secrets | Goes stale quickly | `.env`, vault |
|
|
190
|
-
| Per-feature detailed instructions | Move to Layer 2 | SPEC.md |
|
|
191
|
-
|
|
192
|
-
### Emphasis Techniques
|
|
193
|
-
|
|
194
|
-
Use these when important rules keep getting ignored:
|
|
195
|
-
|
|
196
|
-
```markdown
|
|
197
|
-
**IMPORTANT**: {critical rule}
|
|
198
|
-
**MUST**: {mandatory action}
|
|
199
|
-
**NEVER**: {absolute prohibition}
|
|
200
|
-
```
|
|
201
|
-
|
|
202
|
-
However, adding emphasis to every line **nullifies the emphasis**. Use only for P1 rules.
|
|
203
|
-
|
|
204
|
-
### Progressive Disclosure
|
|
205
|
-
|
|
206
|
-
Don't put everything in CLAUDE.md — reference it:
|
|
207
|
-
|
|
208
|
-
```markdown
|
|
209
|
-
# Architecture
|
|
210
|
-
See @docs/ARCHITECTURE.md for design decisions.
|
|
211
|
-
|
|
212
|
-
# Security
|
|
213
|
-
@.claude/rules/security.md
|
|
214
|
-
```
|
|
215
|
-
|
|
216
|
-
Claude Code follows `@` references and loads them only when needed.
|
|
217
|
-
|
|
218
|
-
## Step 5: Validation — Writing Quality Check
|
|
219
|
-
|
|
220
|
-
Validate the written CLAUDE.md:
|
|
221
|
-
|
|
222
|
-
### Line-by-Line Validation
|
|
223
|
-
|
|
224
|
-
4 questions for every line:
|
|
225
|
-
|
|
226
|
-
1. **Would the agent make a mistake without this?** → If No, delete
|
|
227
|
-
2. **Is it needed in every session?** → If No, move to Layer 2/3
|
|
228
|
-
3. **Can a linter/hook replace it?** → If Yes, move to linter/hook
|
|
229
|
-
4. **Is it discoverable from code?** → If Yes, delete
|
|
230
|
-
|
|
231
|
-
### Anchoring Warning
|
|
232
|
-
|
|
233
|
-
Mentioning a technology name biases the agent toward it:
|
|
234
|
-
- ❌ "We use React" → unnecessary (it's in package.json)
|
|
235
|
-
- ✅ "Never use jQuery, even for legacy code" → useful (prevents a trap)
|
|
236
|
-
|
|
237
|
-
### Token Efficiency
|
|
238
|
-
|
|
239
|
-
| Problem | Example | Improvement |
|
|
240
|
-
|---------|---------|-------------|
|
|
241
|
-
| Verbose explanation | "Please always make sure to..." | "Always:" |
|
|
242
|
-
| Duplication | Same rule repeated in different wording | State it once |
|
|
243
|
-
| Unnecessary context | "As we discussed..." | Delete |
|
|
244
|
-
|
|
245
|
-
## Step 6: Maintenance — A Living Document
|
|
246
|
-
|
|
247
|
-
### Incremental Addition Pattern
|
|
248
|
-
|
|
249
|
-
Don't try to write it perfectly from the start:
|
|
250
|
-
|
|
251
|
-
```
|
|
252
|
-
1. Start with a minimal CLAUDE.md (30-50 lines)
|
|
253
|
-
2. Observe where the agent makes mistakes
|
|
254
|
-
3. Only add rules for recurring mistakes
|
|
255
|
-
4. Clean up unnecessary lines every 2-3 weeks
|
|
256
|
-
```
|
|
257
|
-
|
|
258
|
-
### Reflection Loop (Addy Osmani Pattern)
|
|
259
|
-
|
|
260
|
-
```
|
|
261
|
-
Agent task complete
|
|
262
|
-
→ Ask "What was different from expectations?"
|
|
263
|
-
→ When a recurring pattern is found, add 1 line to CLAUDE.md
|
|
264
|
-
→ If the root cause is code structure, fix the code and don't add a rule
|
|
265
|
-
```
|
|
266
|
-
|
|
267
|
-
### Warning Signs
|
|
268
|
-
|
|
269
|
-
| Signal | Meaning | Response |
|
|
270
|
-
|--------|---------|----------|
|
|
271
|
-
| Over 300 lines | Information overload | Split or trim |
|
|
272
|
-
| Same mistake repeats | Rule is lost in noise | Emphasize or consolidate |
|
|
273
|
-
| Adding rules has no effect | File is too long | Fix root cause |
|
|
274
|
-
| Team ignores rules | Discoverable information | Delete |
|
|
275
|
-
|
|
276
|
-
---
|
|
277
|
-
|
|
278
|
-
## Quick Reference: Guide by Project Scale
|
|
279
|
-
|
|
280
|
-
### Small (fewer than 10 files)
|
|
281
|
-
|
|
282
|
-
```markdown
|
|
283
|
-
# {Project Name}
|
|
284
|
-
|
|
285
|
-
## Commands
|
|
286
|
-
- `{build}` — {description}
|
|
287
|
-
- `{test}` — {description}
|
|
288
|
-
|
|
289
|
-
## Gotchas
|
|
290
|
-
- **{Trap 1}.** {description}
|
|
291
|
-
- **{Trap 2}.** {description}
|
|
292
|
-
|
|
293
|
-
## Never
|
|
294
|
-
- 🚫 {prohibited item}
|
|
295
|
-
```
|
|
296
|
-
|
|
297
|
-
**Target: 20-30 lines**
|
|
298
|
-
|
|
299
|
-
### Medium (10-50 files)
|
|
300
|
-
|
|
301
|
-
Above + add Conventions and Boundaries sections.
|
|
302
|
-
|
|
303
|
-
**Target: 60-150 lines**
|
|
304
|
-
|
|
305
|
-
### Large (50+ files, monorepo)
|
|
306
|
-
|
|
307
|
-
Root CLAUDE.md (shared rules) + CLAUDE.md per subdirectory.
|
|
308
|
-
|
|
309
|
-
```
|
|
310
|
-
project/
|
|
311
|
-
├── CLAUDE.md ← shared (60 lines)
|
|
312
|
-
├── packages/api/CLAUDE.md ← API-specific (30 lines)
|
|
313
|
-
├── packages/web/CLAUDE.md ← web-specific (30 lines)
|
|
314
|
-
└── .claude/rules/ ← path-specific rules
|
|
315
|
-
├── security.md
|
|
316
|
-
└── testing.md
|
|
317
|
-
```
|
|
318
|
-
|
|
319
|
-
**Target: root 100 lines + each subdirectory 30 lines**
|
|
320
|
-
|
|
321
|
-
---
|
|
322
|
-
|
|
323
|
-
## Session Separation Principle
|
|
324
|
-
|
|
325
|
-
Splitting CLAUDE.md writing into separate sessions improves quality:
|
|
326
|
-
|
|
327
|
-
| Session | Goal | Output |
|
|
328
|
-
|---------|------|--------|
|
|
329
|
-
| Session 1 | Project exploration + interview | Draft |
|
|
330
|
-
| Session 2 | Validation + optimization | Final version |
|
|
331
|
-
| Ongoing | Incremental maintenance | Continuous improvement |
|
|
332
|
-
|
|
333
|
-
After writing: run `→ /agents-md` skill for optimization validation.
|
|
334
|
-
|
|
335
|
-
---
|
|
336
|
-
|
|
337
|
-
## References
|
|
338
|
-
|
|
339
|
-
### Research
|
|
340
|
-
- [Curse of Instructions: LLMs Cannot Follow Multiple Instructions at Once](https://openreview.net/forum?id=R6q67CDBCH)
|
|
341
|
-
- [Lost in the Middle: How Language Models Use Long Contexts](https://arxiv.org/abs/2307.03172)
|
|
342
|
-
- [The Instruction Hierarchy: Training LLMs to Prioritize Privileged Instructions](https://arxiv.org/html/2404.13208v1)
|
|
343
|
-
- [Context Length Alone Hurts LLM Performance Despite Perfect Retrieval](https://arxiv.org/html/2510.05381v1)
|
|
344
|
-
|
|
345
|
-
### Official Docs
|
|
346
|
-
- [Claude Code Best Practices](https://code.claude.com/docs/en/best-practices)
|
|
347
|
-
- [Using CLAUDE.md Files](https://claude.com/blog/using-claude-md-files)
|
|
348
|
-
|
|
349
|
-
### Community
|
|
350
|
-
- [Addy Osmani: AGENTS.md](https://addyosmani.com/blog/agents-md/)
|
|
351
|
-
- [HumanLayer: Writing a good CLAUDE.md](https://www.humanlayer.dev/blog/writing-a-good-claude-md)
|
|
352
|
-
- [Builder.io: CLAUDE.md Guide](https://www.builder.io/blog/claude-md-guide)
|
|
353
|
-
- [GitHub Blog: How to Write a Great agents.md](https://github.blog/ai-and-ml/github-copilot/how-to-write-a-great-agents-md-lessons-from-over-2500-repositories/)
|
|
@@ -1,88 +0,0 @@
|
|
|
1
|
-
# CLAUDE.md Anti-Patterns
|
|
2
|
-
|
|
3
|
-
## Anti-pattern 1: Discoverable Content
|
|
4
|
-
|
|
5
|
-
**Symptom**: Listing things the agent can find by reading the repo.
|
|
6
|
-
|
|
7
|
-
```markdown
|
|
8
|
-
# Bad
|
|
9
|
-
- Components are in src/components/
|
|
10
|
-
- Uses React 18 with TypeScript
|
|
11
|
-
- Run tests with npm test
|
|
12
|
-
```
|
|
13
|
-
|
|
14
|
-
```markdown
|
|
15
|
-
# Good
|
|
16
|
-
(delete these — they're in package.json and the repo structure)
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
## Anti-pattern 2: Instruction Overload
|
|
20
|
-
|
|
21
|
-
**Symptom**: 300+ line CLAUDE.md full of best practices.
|
|
22
|
-
|
|
23
|
-
LLM compliance drops to ~5% after 15+ instructions. Every line competes for attention.
|
|
24
|
-
|
|
25
|
-
Fix: Keep under 150 lines. Move feature-specific rules to SPEC files.
|
|
26
|
-
|
|
27
|
-
## Anti-pattern 3: Emphasis Inflation
|
|
28
|
-
|
|
29
|
-
**Symptom**: IMPORTANT, CRITICAL, MUST on every other line.
|
|
30
|
-
|
|
31
|
-
When everything is critical, nothing is. Reserve emphasis words for P1 rules only.
|
|
32
|
-
|
|
33
|
-
## Anti-pattern 4: Past-Tense History
|
|
34
|
-
|
|
35
|
-
**Symptom**: Phase tables, progress logs, "we decided to..." narratives.
|
|
36
|
-
|
|
37
|
-
```markdown
|
|
38
|
-
# Bad
|
|
39
|
-
## Progress
|
|
40
|
-
- Phase 1 ✅ Auth
|
|
41
|
-
- Phase 2 ✅ Dashboard
|
|
42
|
-
- Phase 3 🚧 Payments
|
|
43
|
-
```
|
|
44
|
-
|
|
45
|
-
This is context noise, not guidance. Delete it.
|
|
46
|
-
|
|
47
|
-
## Anti-pattern 5: Technology Anchoring
|
|
48
|
-
|
|
49
|
-
**Symptom**: Listing what you use instead of what to avoid.
|
|
50
|
-
|
|
51
|
-
```markdown
|
|
52
|
-
# Bad
|
|
53
|
-
We use Zod for validation, Prisma for ORM, Tailwind for styling.
|
|
54
|
-
```
|
|
55
|
-
|
|
56
|
-
```markdown
|
|
57
|
-
# Good
|
|
58
|
-
Never use joi or yup — Zod is the only validation library.
|
|
59
|
-
```
|
|
60
|
-
|
|
61
|
-
Naming a technology biases the agent toward it. Only name tech in prohibitions.
|
|
62
|
-
|
|
63
|
-
## Anti-pattern 6: Vague Prohibitions
|
|
64
|
-
|
|
65
|
-
**Symptom**: Rules without specific triggers.
|
|
66
|
-
|
|
67
|
-
```markdown
|
|
68
|
-
# Bad
|
|
69
|
-
- Write clean, readable code
|
|
70
|
-
- Follow best practices
|
|
71
|
-
- Keep functions small
|
|
72
|
-
```
|
|
73
|
-
|
|
74
|
-
The agent already knows these. They consume tokens and provide no new signal.
|
|
75
|
-
|
|
76
|
-
## Anti-pattern 7: Missing Boundaries
|
|
77
|
-
|
|
78
|
-
**Symptom**: No section on what the agent should never touch.
|
|
79
|
-
|
|
80
|
-
Without explicit boundaries, agents will "helpfully" refactor generated files, edit lock files, or push to main.
|
|
81
|
-
|
|
82
|
-
Always include: what's off-limits, what requires human approval first.
|
|
83
|
-
|
|
84
|
-
## Anti-pattern 8: Stale Secrets/Keys
|
|
85
|
-
|
|
86
|
-
**Symptom**: API keys or connection strings in CLAUDE.md.
|
|
87
|
-
|
|
88
|
-
These belong in `.env` only. CLAUDE.md is committed to version control.
|
|
@@ -1,154 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
name: design-audit
|
|
3
|
-
user-invocable: true
|
|
4
|
-
invocation: [command, auto]
|
|
5
|
-
tier: standard
|
|
6
|
-
description: "Design technical quality audit — a11y, performance, responsive, theming, AI slop detection with 5-dimension scoring. Use when design-audit, ui-audit, a11y-check, design-check."
|
|
7
|
-
triggers: [design-audit, ui-audit, a11y-check, design-check]
|
|
8
|
-
priority: 50
|
|
9
|
-
---
|
|
10
|
-
|
|
11
|
-
# Design Audit — Technical Quality Inspection
|
|
12
|
-
|
|
13
|
-
Perform a read-only technical quality audit across 5 dimensions. No code modifications — report only.
|
|
14
|
-
|
|
15
|
-
## Usage
|
|
16
|
-
|
|
17
|
-
```
|
|
18
|
-
/design-audit <target> # Audit specific component/page
|
|
19
|
-
/design-audit . # Audit all changed UI files
|
|
20
|
-
```
|
|
21
|
-
|
|
22
|
-
## 5-Dimension Scoring
|
|
23
|
-
|
|
24
|
-
Each dimension scored 0–4:
|
|
25
|
-
|
|
26
|
-
| Score | Meaning |
|
|
27
|
-
|-------|---------|
|
|
28
|
-
| 0 | Critical failures — unusable |
|
|
29
|
-
| 1 | Major issues — degraded experience |
|
|
30
|
-
| 2 | Moderate issues — functional but rough |
|
|
31
|
-
| 3 | Minor issues — good with polish needed |
|
|
32
|
-
| 4 | Excellent — production ready |
|
|
33
|
-
|
|
34
|
-
### 1. Accessibility (a11y)
|
|
35
|
-
|
|
36
|
-
- [ ] All interactive elements keyboard-reachable (`tabIndex`, focus order)
|
|
37
|
-
- [ ] ARIA roles and labels on custom widgets
|
|
38
|
-
- [ ] Color contrast ≥ 4.5:1 (text), ≥ 3:1 (large text, UI components)
|
|
39
|
-
- [ ] Images have meaningful `alt` text (not "image" or filename)
|
|
40
|
-
- [ ] Form inputs linked to `<label>` or `aria-label`
|
|
41
|
-
- [ ] Focus indicator visible on all interactive elements
|
|
42
|
-
- [ ] Screen reader announcements for dynamic content (`aria-live`)
|
|
43
|
-
- [ ] Skip-to-content link present on pages with navigation
|
|
44
|
-
|
|
45
|
-
### 2. Performance
|
|
46
|
-
|
|
47
|
-
- [ ] Images: `loading="lazy"` on below-fold, `srcset` for responsive, WebP/AVIF formats
|
|
48
|
-
- [ ] Fonts: `font-display: swap`, subset if possible, ≤3 font files
|
|
49
|
-
- [ ] CSS: No unused large frameworks, critical CSS inlined or above-fold prioritized
|
|
50
|
-
- [ ] JS: Code-split at route level, no blocking scripts in `<head>`
|
|
51
|
-
- [ ] Layout shifts: Explicit `width`/`height` on media, skeleton placeholders
|
|
52
|
-
- [ ] Bundle: No duplicate dependencies, tree-shaking enabled
|
|
53
|
-
|
|
54
|
-
### 3. Responsive
|
|
55
|
-
|
|
56
|
-
- [ ] Breakpoints use `min-width` (mobile-first) or consistent direction
|
|
57
|
-
- [ ] Touch targets ≥ 44×44px on mobile
|
|
58
|
-
- [ ] No horizontal scroll at any breakpoint
|
|
59
|
-
- [ ] Typography scales appropriately (clamp or breakpoint-based)
|
|
60
|
-
- [ ] `@container` queries where component-level responsiveness needed
|
|
61
|
-
- [ ] Navigation adapts (hamburger, drawer, or tab bar on mobile)
|
|
62
|
-
|
|
63
|
-
### 4. Theming
|
|
64
|
-
|
|
65
|
-
- [ ] Colors use CSS custom properties (not hardcoded hex/rgb)
|
|
66
|
-
- [ ] Dark mode support or explicit opt-out documented
|
|
67
|
-
- [ ] Spacing uses design tokens (not arbitrary pixel values)
|
|
68
|
-
- [ ] Border radius, shadows consistent via tokens
|
|
69
|
-
- [ ] Component variants use data attributes or CSS classes, not inline styles
|
|
70
|
-
|
|
71
|
-
### 5. AI Slop Detection
|
|
72
|
-
|
|
73
|
-
- [ ] No cyan-on-dark or neon accent color schemes without brand justification
|
|
74
|
-
- [ ] No purple-to-blue gradient backgrounds as default aesthetic
|
|
75
|
-
- [ ] No hero metric template (oversized number + tiny label) without data purpose
|
|
76
|
-
- [ ] No identical card grids (3-up with icon + title + description)
|
|
77
|
-
- [ ] No glassmorphism applied as default surface treatment
|
|
78
|
-
- [ ] No bounce/elastic easing on functional animations
|
|
79
|
-
- [ ] No Inter/Roboto as lazy font choice (match brand personality instead)
|
|
80
|
-
- [ ] No gradient text on metrics or statistics
|
|
81
|
-
|
|
82
|
-
## Severity Tagging
|
|
83
|
-
|
|
84
|
-
| Severity | Meaning | Example |
|
|
85
|
-
|----------|---------|---------|
|
|
86
|
-
| P0 | Blocker — breaks functionality | Missing focus trap on modal |
|
|
87
|
-
| P1 | Critical — significant UX impact | No keyboard navigation |
|
|
88
|
-
| P2 | Important — noticeable quality gap | Touch targets too small |
|
|
89
|
-
| P3 | Minor — polish opportunity | Inconsistent border radius |
|
|
90
|
-
|
|
91
|
-
## Platform Adaptation
|
|
92
|
-
|
|
93
|
-
When running on mobile stacks (React Native, Flutter, iOS, Android):
|
|
94
|
-
- Skip web-specific items: CSS variables, `@container`, `srcset`, `font-display`
|
|
95
|
-
- Focus on: visual hierarchy, cognitive load, accessibility, AI slop detection
|
|
96
|
-
- Adapt responsive checks to platform conventions (safe areas, orientation)
|
|
97
|
-
|
|
98
|
-
## Output Format
|
|
99
|
-
|
|
100
|
-
```markdown
|
|
101
|
-
## Design Audit Report: {target}
|
|
102
|
-
|
|
103
|
-
### Scores
|
|
104
|
-
| Dimension | Score | Grade |
|
|
105
|
-
|-----------|-------|-------|
|
|
106
|
-
| Accessibility | 3/4 | Good |
|
|
107
|
-
| Performance | 2/4 | Moderate |
|
|
108
|
-
| Responsive | 4/4 | Excellent |
|
|
109
|
-
| Theming | 1/4 | Major Issues |
|
|
110
|
-
| AI Slop | 3/4 | Good |
|
|
111
|
-
| **Overall** | **13/20** | **65%** |
|
|
112
|
-
|
|
113
|
-
### Findings
|
|
114
|
-
|
|
115
|
-
#### P0 (Blocker)
|
|
116
|
-
- None
|
|
117
|
-
|
|
118
|
-
#### P1 (Critical)
|
|
119
|
-
- [A11Y] Modal missing focus trap — {file}:{line}
|
|
120
|
-
- [THEME] 12 hardcoded color values — should use CSS variables
|
|
121
|
-
|
|
122
|
-
#### P2 (Important)
|
|
123
|
-
- [PERF] Images without lazy loading — {file}:{line}
|
|
124
|
-
|
|
125
|
-
#### P3 (Minor)
|
|
126
|
-
- [SLOP] Purple-to-blue gradient matches AI template aesthetic
|
|
127
|
-
|
|
128
|
-
### Recommendations
|
|
129
|
-
1. {Priority-ordered actionable items}
|
|
130
|
-
```
|
|
131
|
-
|
|
132
|
-
## Preparation
|
|
133
|
-
|
|
134
|
-
Before running the audit:
|
|
135
|
-
|
|
136
|
-
1. **Read** `.vibe/design-context.json`
|
|
137
|
-
- If missing → display: "Run `/design-teach` first for better results" → proceed with defaults
|
|
138
|
-
- If parse error → display warning → proceed with defaults → recommend `/design-teach`
|
|
139
|
-
- If present → weight findings by `audience.context`, `constraints.accessibility`, `brand.personality`
|
|
140
|
-
2. **Read** `.vibe/design-system/*/MASTER.md` (if exists) for token reference
|
|
141
|
-
|
|
142
|
-
## Next Steps
|
|
143
|
-
|
|
144
|
-
| If Result Shows | Recommended Next |
|
|
145
|
-
|----------------|-----------------|
|
|
146
|
-
| Design system inconsistencies | `/design-normalize` — align tokens |
|
|
147
|
-
| UX/usability concerns | `/design-critique` — deeper UX review |
|
|
148
|
-
| Ship-ready (score ≥ 16/20) | `/design-polish` — final micro-details |
|
|
149
|
-
|
|
150
|
-
## Important
|
|
151
|
-
|
|
152
|
-
- **Read-only**: This skill produces a report. It does NOT modify code.
|
|
153
|
-
- **Context-aware**: If `.vibe/design-context.json` exists, findings are weighted by project brand and audience.
|
|
154
|
-
- **Incremental**: When run on `.` (changed files), only audits files in current diff.
|