06-build-and-slice-loop

Name: 06-build-and-slice-loop
Author: heymegabyte

18stars4forks

How to install 06-build-and-slice-loop?

heymegabyte/claude-skills/06-build-and-slice-loop

$npx -y skills add heymegabyte/claude-skills --skill 06-build-and-slice-loop

Installs into the current project.

Summary

Implements features in vertical slices, always starting with homepage. Enforces anti-placeholder rules — no lorem ipsum, no TODO stubs, no gray boxes. Real content, real images, real interactions. TypeScript strict mode, Zod validation, and structured file organization.

Files · 1

View on GitHub

SKILL.md

1	# 06 — Build and Slice Loop
2
3	Implement features in real vertical slices (UI→API→DB→tests→deploy) starting with the homepage; no placeholders, no stubs.
4
5	## Vertical-slice principle
6
7	Every iteration ships ONE feature end-to-end through every layer (UI → API → DB → tests → deploy). Never half a feature across two passes.
8
9	## Homepage FIRST (every project, no exceptions)
10
11	- First slice is always the homepage hero + nav + footer
12	- Real H1, real meta tags, real OG card, real JSON-LD
13	- Deploy before adding any other route — establishes design system, auth layer, analytics tier, deploy pipeline
14	- Per `rules/website-build-doctrine.md` Phase 0 / Phase 1
15
16	## Anti-placeholder (NON-NEGOTIABLE)
17
18	- ❌ Lorem ipsum
19	- ❌ TODO / FIXME / TBD in shipped user-visible strings (source-comment TODOs OK per `rules/todos-are-roadmap.md`)
20	- ❌ Gray placeholder boxes / silhouettes
21	- ❌ "Coming soon" without firm date
22	- ❌ Stub images / generic SVGs
23	- ❌ "John Doe" / "Jane Doe" / "company.com" / "example.com"
24	- ❌ Bracket placeholders `[Insert Name]` / `[Your Title]`
25	- ❌ Single-character "x" / "?" labels
26
27	Per `rules/copy-writing.md` § Production-review copy gate. Build validator greps `dist/` for these patterns.
28
29	## Slice contract (every slice ships ALL of these)
30
31	1. Types + Zod schemas at boundaries (`rules/zod-everywhere.md`)
32	2. Contract-first API (typed request/response)
33	3. Loading + empty + error + success states (4-state system per `10-experience-and-design-system`)
34	4. Accessibility (axe 0 violations + WCAG 2.2 AA per `_kernel/standards.md#wcag22`)
35	5. 6-breakpoint responsive (per `_kernel/standards.md#breakpoints`)
36	6. Observability (Sentry breadcrumb + PostHog event + Workers Trace span)
37	7. Tests (Vitest unit + Playwright E2E from homepage outward per `rules/e2e-tdd-organization.md`)
38	8. Feature flag where rollout risk exists (`rules/feature-flags.md`)
39	9. Tenant isolation (`org_id` on every row + every query, 404 on mismatch)
40	10. Docs (JSDoc on exports + module README)
41
42	## File organization
43
44	### Worker (Hono)
45
46	```
47	src/worker/
48	├── index.ts # entry — Sentry wrapper, route mounts, onError, notFound
49	├── db/
50	│ ├── schema.ts # Drizzle source of truth
51	│ └── index.ts # getDb helper
52	├── routes/<feature>.ts # Hono sub-app per feature
53	├── lib/<feature>.ts # business logic
54	├── middleware/ # auth, tenant, rate-limit
55	└── types.ts # Env + Variables
56	```
57
58	### Frontend (React + Vite)
59
60	```
61	src/web/
62	├── main.tsx # entry — router, providers
63	├── pages/<Page>.tsx # one per route
64	├── components/
65	│ ├── ui/ # shadcn primitives
66	│ ├── <feature>/ # feature-specific components
67	│ └── shared/ # Header, Footer, ErrorBoundary
68	├── lib/ # api client, auth context, hooks
69	└── styles.css # Tailwind + design tokens
70	```
71
72	### Shared
73
74	```
75	src/shared/
76	├── plans.ts # pricing tiers
77	├── design-styles.ts # design tokens shared web + worker
78	└── pageLayout.ts # shared layout helpers
79	```
80
81	### Tests
82
83	```
84	e2e/
85	├── FEATURES.md # row-per-feature matrix (CI gate)
86	├── _fixtures/ # page objects
87	├── _helpers/ # snapshot, axe, breadcrumbs, visual
88	├── <feature>/
89	│ ├── happy-path.spec.ts
90	│ ├── edge-cases.spec.ts
91	│ ├── a11y.spec.ts
92	│ └── visual.spec.ts
93	└── _smoke/ # cross-feature smoke
94	```
95
96	## Build loop (per slice)
97
98	1. Write failing test (Playwright TDD-RED first per `rules/e2e-tdd-organization.md`)
99	2. Author migration (`drizzle/0NNN_<feature>.sql`) + update `db/schema.ts`
100	3. Apply locally (`n

People who liked this also viewed

6 picks

Type

06-build-and-slice-loop

18stars4forks

View on GitHub

How to install 06-build-and-slice-loop?

heymegabyte/claude-skills/06-build-and-slice-loop

$npx -y skills add heymegabyte/claude-skills --skill 06-build-and-slice-loop

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# 06 — Build and Slice Loop
2
3	Implement features in real vertical slices (UI→API→DB→tests→deploy) starting with the homepage; no placeholders, no stubs.
4
5	## Vertical-slice principle
6
7	Every iteration ships ONE feature end-to-end through every layer (UI → API → DB → tests → deploy). Never half a feature across two passes.
8
9	## Homepage FIRST (every project, no exceptions)
10
11	- First slice is always the homepage hero + nav + footer
12	- Real H1, real meta tags, real OG card, real JSON-LD
13	- Deploy before adding any other route — establishes design system, auth layer, analytics tier, deploy pipeline
14	- Per `rules/website-build-doctrine.md` Phase 0 / Phase 1
15
16	## Anti-placeholder (NON-NEGOTIABLE)
17
18	- ❌ Lorem ipsum
19	- ❌ TODO / FIXME / TBD in shipped user-visible strings (source-comment TODOs OK per `rules/todos-are-roadmap.md`)
20	- ❌ Gray placeholder boxes / silhouettes
21	- ❌ "Coming soon" without firm date
22	- ❌ Stub images / generic SVGs
23	- ❌ "John Doe" / "Jane Doe" / "company.com" / "example.com"
24	- ❌ Bracket placeholders `[Insert Name]` / `[Your Title]`
25	- ❌ Single-character "x" / "?" labels
26
27	Per `rules/copy-writing.md` § Production-review copy gate. Build validator greps `dist/` for these patterns.
28
29	## Slice contract (every slice ships ALL of these)
30
31	1. Types + Zod schemas at boundaries (`rules/zod-everywhere.md`)
32	2. Contract-first API (typed request/response)
33	3. Loading + empty + error + success states (4-state system per `10-experience-and-design-system`)
34	4. Accessibility (axe 0 violations + WCAG 2.2 AA per `_kernel/standards.md#wcag22`)
35	5. 6-breakpoint responsive (per `_kernel/standards.md#breakpoints`)
36	6. Observability (Sentry breadcrumb + PostHog event + Workers Trace span)
37	7. Tests (Vitest unit + Playwright E2E from homepage outward per `rules/e2e-tdd-organization.md`)
38	8. Feature flag where rollout risk exists (`rules/feature-flags.md`)
39	9. Tenant isolation (`org_id` on every row + every query, 404 on mismatch)
40	10. Docs (JSDoc on exports + module README)
41
42	## File organization
43
44	### Worker (Hono)
45
46	```
47	src/worker/
48	├── index.ts # entry — Sentry wrapper, route mounts, onError, notFound
49	├── db/
50	│ ├── schema.ts # Drizzle source of truth
51	│ └── index.ts # getDb helper
52	├── routes/<feature>.ts # Hono sub-app per feature
53	├── lib/<feature>.ts # business logic
54	├── middleware/ # auth, tenant, rate-limit
55	└── types.ts # Env + Variables
56	```
57
58	### Frontend (React + Vite)
59
60	```
61	src/web/
62	├── main.tsx # entry — router, providers
63	├── pages/<Page>.tsx # one per route
64	├── components/
65	│ ├── ui/ # shadcn primitives
66	│ ├── <feature>/ # feature-specific components
67	│ └── shared/ # Header, Footer, ErrorBoundary
68	├── lib/ # api client, auth context, hooks
69	└── styles.css # Tailwind + design tokens
70	```
71
72	### Shared
73
74	```
75	src/shared/
76	├── plans.ts # pricing tiers
77	├── design-styles.ts # design tokens shared web + worker
78	└── pageLayout.ts # shared layout helpers
79	```
80
81	### Tests
82
83	```
84	e2e/
85	├── FEATURES.md # row-per-feature matrix (CI gate)
86	├── _fixtures/ # page objects
87	├── _helpers/ # snapshot, axe, breadcrumbs, visual
88	├── <feature>/
89	│ ├── happy-path.spec.ts
90	│ ├── edge-cases.spec.ts
91	│ ├── a11y.spec.ts
92	│ └── visual.spec.ts
93	└── _smoke/ # cross-feature smoke
94	```
95
96	## Build loop (per slice)
97
98	1. Write failing test (Playwright TDD-RED first per `rules/e2e-tdd-organization.md`)
99	2. Author migration (`drizzle/0NNN_<feature>.sql`) + update `db/schema.ts`
100	3. Apply locally (`n

People who liked this also viewed

6 picks

Type