Generate a CLAUDE.md file for Next.js 15 landing pages with custom cursor, animations, and component architecture. Documents dev commands, directory structure, and design patterns.
Generate a comprehensive CLAUDE.md file for Next.js 15 landing page projects with custom cursors, Framer Motion animations, and modern component architecture.
This skill analyzes a Next.js 15 landing page codebase and generates a detailed CLAUDE.md file that documents:
When the user requests a CLAUDE.md file for their Next.js landing page:
1. **Analyze the codebase structure**
- Read `package.json` to identify dependencies and scripts
- Examine `src/app/` directory structure
- Review `tailwind.config.ts` and `components.json` for styling setup
- Check `tsconfig.json` for path aliases
2. **Document the project overview**
- Identify the main purpose from the landing page content
- Note any product showcases or key features
- Describe the visual design approach
3. **List development commands**
- Extract scripts from `package.json`
- Document the dev server URL
- Include build, start, and lint commands
4. **Detail the architecture**
- List the tech stack (framework, styling, animations, UI components, fonts)
- Map out the directory structure with component categories
- Document any custom implementations (cursor, clock, etc.)
5. **Identify key design patterns**
- Custom cursor implementation and global styles
- Animation sequences with timing details
- Responsive layout strategies
- Timezone displays or other unique features
6. **Document styling conventions**
- CSS variable usage for theming
- Font family utilities
- Color schemes
- Class merging utilities
7. **List path aliases**
- Extract from `components.json` and `tsconfig.json`
- Document each alias mapping
8. **Note client-side considerations**
- Identify components using `"use client"`
- Document hydration mismatch prevention patterns
- Note cleanup requirements for browser APIs
Generate a CLAUDE.md file with these sections:
```markdown
This file provides guidance to Claude Code when working with code in this repository.
[Description of the landing page and its purpose]
[Bash code block with npm scripts and dev server URL]
[Bulleted list of framework, styling, animations, UI, fonts]
[Code block showing directory tree with comments]
[Detailed descriptions of custom implementations]
[List of theming and styling approaches]
[List of configured aliases with mappings]
[List of requirements for browser API usage]
```
User: "Generate a CLAUDE.md for my Next.js landing page"
Agent should:
User: "Add documentation for the animation sequence in CLAUDE.md"
Agent should:
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/nextjs-landing-page-template/raw