Page & Component Structure
CommunityOrganize React pages and components with clarity.
Software Engineering#react#nextjs#code-organization#frontend-patterns#component-architecture#page-tsx
AuthorA-Hazzard
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Page and component structure inconsistencies lead to maintenance pain and onboarding friction. This Skill defines a standard for thin wrapper page.tsx patterns, explicit section comments, and consistent JSX formatting to improve readability and reusability.
Core Features & Use Cases
- Thin wrapper pattern for page.tsx to separate page composition from content.
- Mandatory section comments and clear component organization to aid navigation and code reviews.
- Guidelines for extracting logic into helpers, hooks, and smaller sub-components to keep pages focused.
- Consistent JSX spacing and structure across page and component files to improve readability.
Quick Start
Refactor a page.tsx to follow the thin wrapper pattern with explicit section comments and a separate PageContent component for state and rendering.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: Page & Component Structure Download link: https://github.com/A-Hazzard/Casino-Manangement-System/archive/main.zip#page-component-structure Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.