UNPKG

@spark-web/design-system

Version:

--- title: Design System ---

68 lines (48 loc) • 3.39 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
# Pattern library — surface classifier When an agent receives a PRD or feature brief, it must read this file first before reading any component or pattern documentation. --- ## Step 1 — Identify the surface Determine which surface is being built by reading the PRD for these signals: | Signal in PRD | Surface | | ---------------------------------------------------------------- | --------------------------------- | | "admin", "internal", "back office", "ops", "manage", "dashboard" | Internal admin | | "customer", "portal", "my account", "self-service" | Customer portal (not yet defined) | | "website", "marketing", "landing page", "public" | Website (not yet defined) | | "mobile", "app", "iOS", "Android" | Mobile app (not yet defined) | If the surface cannot be determined from the PRD, ask for clarification before proceeding. Do not assume. --- ## Step 2 — Read the rules for that surface | Surface | Rules location | | --------------- | ------------------------------------------------------------------------- | | Internal admin | `node_modules/@spark-web/design-system/patterns/internal-admin/CLAUDE.md` | | Customer portal | Not yet defined — flag to the team | | Website | Not yet defined — flag to the team | | Mobile app | Not yet defined — flag to the team | Read the surface rules file in full before reading any component documentation. Surface rules take precedence over component rules. --- ## Step 3 — Read the pattern for the feature type After reading surface rules, identify the feature type and read the corresponding pattern file: | Feature type | Pattern file | | ---------------------------- | -------------------------------------------------------------------------------------------- | | List of records with actions | `node_modules/@spark-web/design-system/patterns/internal-admin/list-page.md` | | Create or edit a record | `node_modules/@spark-web/design-system/patterns/internal-admin/form-page.md` (coming soon) | | Record detail view | `node_modules/@spark-web/design-system/patterns/internal-admin/detail-page.md` (coming soon) | If no pattern file exists yet for the feature type, use the surface rules and component documentation to make the best decision, and flag that a pattern file should be created for this feature type. --- ## Reading order for any build task 1. `node_modules/@spark-web/design-system/patterns/CLAUDE.md` ← this file (surface classifier) 2. `node_modules/@spark-web/design-system/patterns/[surface]/CLAUDE.md` ← surface interaction rules 3. `node_modules/@spark-web/design-system/patterns/[surface]/[pattern].md` ← feature pattern (if exists) 4. `node_modules/@spark-web/[component]/CLAUDE.md` ← component rules 5. `node_modules/@spark-web/[component]/src/[component].stories.tsx` ← usage examples Never skip steps. Never read component documentation before surface rules.