Gumdrops

Sequencing Rules

When composing multiple sections into a page, follow these rules:

1. No adjacent repeats. Never place two sections with the same dominant component back-to-back. Card grid followed by Card grid = slop.

2. Density alternation. Dense section (features grid, data table) → breathing section (CTA, social proof) → dense. Never three dense in a row.

3. Container variation. Alternate between contained (max-w-6xl mx-auto) and full-bleed sections. Never all one or the other.

4. Padding rhythm. Vary section padding: py-8 → py-24 → py-16 → py-20. Never uniform padding across all sections.

5. Background variety. At least one section per page uses a contrasting background (bg-muted, bg-primary with inverted text, or subtle gradient).

Component Diversity Rules

1. Minimum 10 distinct component types per page from @wiggum/stack.

2. Maximum 2 sections can use Card as the primary container.

3. At least 2 interactive components per page: Tabs, Accordion, Dialog, Sheet, HoverCard, Collapsible, Command, Popover.

4. At least 1 navigation component per page: NavigationMenu, Breadcrumb, Pagination, DropdownMenu.

Page Type Templates

The "Unexpected" Rule

Every page with 5+ sections MUST include at least one section that breaks the expected pattern for that page type:

• Landing page with an interactive demo section (not just static marketing)
• Dashboard with a visual data story (not just tables and charts)
• Settings page with a visual onboarding checklist
• Blog with an embedded interactive component

Component Reach Map

The "you have 60+ components but use 8" problem. Three tiers:

Goal: Always aim for the "Best" column. The "Basic" column is what you do by default — push past it.

Underused Components (Your Blind Spots)

Anti-Slop Database

Layout Anti-Patterns

Component Anti-Patterns

Theme Anti-Patterns