ReddRadar
Agent skill
innozverse-web-style
Follow Next.js web development patterns including App Router conventions, client/server components, API client usage, and environment variables. Use when building web features, creating pages, or working with Next.js code.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/web-style
SKILL.md
innozverse Web Development Style (Next.js)
Follow these patterns when building web features in apps/web.
Next.js App Router
Use App Router (src/app/), not Pages Router.
Page Structure
// apps/web/src/app/users/page.tsx
export default function UsersPage() {
return <div>Users</div>;
}
Layout
// apps/web/src/app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
API Client Usage
'use client';
import { useState, useEffect } from 'react';
import { ApiClient } from '@innozverse/api-client';
const apiClient = new ApiClient(
process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:8080'
);
export default function UsersPage() {
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
apiClient.getUsers()
.then(setUsers)
.catch(err => setError(err.message))
.finally(() => setLoading(false));
}, []);
if (loading) return <div>Loading...</div>;
if (error) return <div>Error: {error}</div>;
return <div>{/* render users */}</div>;
}
Client vs Server Components
- Server Component (default): No state, no effects, server-side rendering
- Client Component (
'use client'): Interactive, state, effects, API calls
Environment Variables
- Client-side:
NEXT_PUBLIC_* - Server-side: Any variable name
const apiUrl = process.env.NEXT_PUBLIC_API_BASE_URL;
Best Practices
- Prefer server components when possible
- Use client components for interactivity
- Handle loading and error states
- Type all props and state
- Use TypeScript strict mode
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?