Skills
.Work. You
Rest

layout-wrapper-components

Community

Robust layouts for protected and public routes.

Software Engineering#authentication#layout#sidebar#react-router#nested-routes#private-layout
Authorwonkpentink
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Layout scaffolding for React apps often leads to repetitive boilerplate when implementing authenticated and public routes. This Skill provides reusable PrivateLayout and PublicLayout patterns with standardized auth checks, nested routing, and responsive structure suitable for dashboards and public portals.

Core Features & Use Cases

  • PrivateLayout: authentication guards, token decryption, conditional sidebar, and nested routes for protected areas.
  • PublicLayout: lightweight layout with consistent structure for public pages.
  • Route configuration: separate layouts for different access levels in router configuration.

Quick Start

Create PrivateLayout.tsx and PublicLayout.tsx under src/layout, wire them into your router, and render nested routes with Outlet.

Dependency Matrix

Required Modules

None required

Components

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: layout-wrapper-components
Download link: https://github.com/wonkpentink/agent-skills-fe/archive/main.zip#layout-wrapper-components

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.