Skip to content

Add Widget-Slot Architecture Skill#308

Merged
JeremyDev87 merged 1 commit intomasterfrom
feat/307
Feb 5, 2026
Merged

Add Widget-Slot Architecture Skill#308
JeremyDev87 merged 1 commit intomasterfrom
feat/307

Conversation

@JeremyDev87
Copy link
Owner

@JeremyDev87 JeremyDev87 commented Feb 5, 2026

Add Widget-Slot Architecture Skill

Summary

This PR introduces the Widget-Slot Architecture (WSA) skill, a comprehensive guide for structuring Next.js App Router projects using Parallel Routes. The skill provides a standardized pattern for separating static layouts from dynamic widgets, enabling better fault isolation, parallel development, and component reusability.

Changes

New Files

  • packages/rules/.ai-rules/skills/widget-slot-architecture/SKILL.md (740 lines)
    • Complete architecture documentation including philosophy, definitions, and implementation guides
    • Code examples for Slots, Widgets, and Server Actions
    • Testing strategies for Server/Client components
    • Architecture diagrams (Mermaid)

Modified Files

  • packages/rules/.ai-rules/skills/README.md
    • Added widget-slot-architecture to the skill registry table
    • Updated directory tree structure

Key Features of the Skill

Feature Description
5 Core Principles Separation of Concerns, Self-Containment, Fault Isolation, Server-Centric Data Flow, Plug & Play
Folder Structure Clear app/@slot/ and Widgets/[Name]/ organization patterns
Implementation Guide Step-by-step Slot and Widget implementation with code examples
5 Key Rules One Slot One Widget, Data Self-Sufficiency, Minimize Communication, Default State, Portability
Testing Strategy MSW-based Server Component testing, UI unit testing patterns
Diagrams Mermaid architecture and data flow diagrams

Testing

  • Skill document renders correctly in markdown viewers
  • Code examples are syntactically valid TypeScript/TSX
  • README.md table entries align properly
  • Directory tree accurately reflects new structure

Related

@JeremyDev87 JeremyDev87 self-assigned this Feb 5, 2026
@JeremyDev87 JeremyDev87 marked this pull request as ready for review February 5, 2026 05:08
Add comprehensive architecture guide for structuring Next.js App Router
projects using Parallel Routes (@slot convention). The skill provides
standardized patterns for separating static layouts from dynamic widgets.

Key additions:
- 5 core philosophy principles (separation of concerns, fault isolation)
- Slot implementation guide with loading/error/default patterns
- Widget colocation structure (ui/, actions/, hooks/)
- Server-centric data flow patterns (revalidateTag, URL state)
- Testing strategies for Server/Client component boundaries
- Mermaid architecture and data flow diagrams

This skill addresses the gap in architecture-level guidance for large-scale
Next.js projects requiring multiple independent dynamic regions per page.

close #307
@JeremyDev87 JeremyDev87 merged commit 16bed6f into master Feb 5, 2026
16 checks passed
@JeremyDev87 JeremyDev87 deleted the feat/307 branch February 5, 2026 06:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add Widget-Slot Architecture Skill

1 participant