add-protected-page
Creates a protected page with Suspense loading pattern. Use when adding new pages that require authentication, creating dashboard pages, or setting up new routes.
Best use case
add-protected-page is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Creates a protected page with Suspense loading pattern. Use when adding new pages that require authentication, creating dashboard pages, or setting up new routes.
Teams using add-protected-page should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/add-protected-page/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How add-protected-page Compares
| Feature / Agent | add-protected-page | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Creates a protected page with Suspense loading pattern. Use when adding new pages that require authentication, creating dashboard pages, or setting up new routes.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Add Protected Page
Creates a protected page following the Suspense loading pattern with Clerk authentication.
## Structure
For a new route `/my-feature`:
```
front/
├── app/my-feature/
│ ├── page.tsx # Auth only - wraps content in Suspense
│ └── loading.tsx # Automatic Suspense fallback
└── components/my-feature/
└── MyFeatureContent.tsx # Data fetching + UI
```
## Workflow
### 1. Create Page Component
```typescript
// app/my-feature/page.tsx
'use client';
import { Suspense } from 'react';
import { useUser } from '@clerk/nextjs';
import { MyFeatureContent } from '@/components/my-feature/MyFeatureContent';
export default function MyFeaturePage() {
const { user } = useUser();
if (!user) return null; // REQUIRED for SSG
return (
<Suspense>
<MyFeatureContent userId={user.id} />
</Suspense>
);
}
```
**Key Points**:
- `'use client'` directive required
- `if (!user) return null` is **MANDATORY** - prevents build errors
- Page only handles auth, wraps content in Suspense
- No data fetching here
### 2. Create Loading Fallback
```typescript
// app/my-feature/loading.tsx
import { LoadingSpinner } from '@/components/_shared/loading-spinner';
export default function Loading() {
return <LoadingSpinner message="Loading..." />;
}
```
### 3. Create Content Component
```typescript
// components/my-feature/MyFeatureContent.tsx
'use client';
import { useMyFeatureSuspense } from '@/lib/hooks/use-my-feature';
interface MyFeatureContentProps {
userId: string;
}
export function MyFeatureContent({ userId }: MyFeatureContentProps) {
const { data } = useMyFeatureSuspense(userId);
return (
<div className="container mx-auto p-4">
{/* Render data - no isLoading check needed! */}
{data.map((item) => (
<div key={item.id}>{item.name}</div>
))}
</div>
);
}
```
**Key Points**:
- Uses `useSuspenseQuery` - no loading states needed
- Receives `userId` as prop from page
- Pure UI rendering
### 4. Update Middleware (if new route pattern)
```typescript
// middleware.ts
const isProtectedRoute = createRouteMatcher([
'/dashboard(.*)',
'/items(.*)',
'/paid-feature(.*)',
'/my-feature(.*)', // Add new route
]);
```
## Important Rules
**DO**:
- Add `if (!user) return null` in page components
- Use Suspense to wrap content
- Put data fetching in content component
- Use `useSuspenseQuery` for automatic loading states
**DO NOT**:
- Fetch data in page component
- Add manual loading states (`isLoading`)
- Forget the null check (causes build errors)
- Use `dynamic = 'force-dynamic'` (middleware handles auth)
## Creating the Feature Hook
See the `add-feature-hook` skill for creating the hook used in the content component.Related Skills
activate-lightning-page
Activates a newly deployed Lightning App Page so it appears in the App Launcher. Use when you've deployed a new flexipage and need to make it accessible to users.
academic-homepage-generator
When the user requests to create or customize an academic personal website from a GitHub template repository. This skill handles the complete workflow of forking academic template repositories (like academicpages.github.io), extracting structured personal information from memory or provided data, and systematically updating configuration files (_config.yml), navigation menus (_data/navigation.yml), content pages (_pages/about.md), and publication listings (_publications/). It specifically handles academic profiles including personal details, education background, research experience, publications, skills, and contact information. Triggers include requests to 'fork and customize academic homepage', 'build personal academic website', 'create research portfolio', or 'set up GitHub pages with academic template'.
whisper-transcribe
Transcribes audio and video files to text using OpenAI's Whisper CLI, enhanced with contextual grounding from local markdown files for improved accuracy.
modal-deployment
Run Python code in the cloud with serverless containers, GPUs, and autoscaling using Modal. This skill enables agents to generate code for deploying ML models, running batch jobs, serving APIs, and scaling compute-intensive workloads.
chrome-debug
This skill empowers AI agents to debug web applications and inspect browser behavior using the Chrome DevTools Protocol (CDP), offering both collaborative (headful) and automated (headless) modes.
astro
This skill provides essential Astro framework patterns, focusing on server-side rendering (SSR), static site generation (SSG), middleware, and TypeScript best practices. It helps AI agents implement secure authentication, manage API routes, and debug rendering behaviors within Astro projects.
grail-miner
This skill assists in setting up, managing, and optimizing Grail miners on Bittensor Subnet 81, handling tasks like environment configuration, R2 storage, model checkpoint management, and performance tuning.
vly-money
Generate crypto payment links for supported tokens and networks, manage access to X402 payment-protected content, and provide direct access to the vly.money wallet interface.
lets-go-rss
A lightweight, full-platform RSS subscription manager that aggregates content from YouTube, Vimeo, Behance, Twitter/X, and Chinese platforms like Bilibili, Weibo, and Douyin, featuring deduplication and AI smart classification.
ux
This AI agent skill provides comprehensive guidance for creating professional and insightful User Experience (UX) designs, covering user research, information architecture, interaction design, visual guidance, and usability evaluation. It aims to produce actionable, user-centered solutions that avoid generic AI aesthetics.
thor-skills
An entry point and router for AI agents to manage various THOR-related cybersecurity tasks, including running scans, analyzing logs, troubleshooting, and maintenance.
tech-blog
Generates comprehensive technical blog posts, offering detailed explanations of system internals, architecture, and implementation, either through source code analysis or document-driven research.