### Vercel CLI Setup and Build Troubleshooting
Source: https://github.com/littleben/awesomeagentskills/blob/main/deploying-to-production/TROUBLESHOOTING.md
Instructions for installing the Vercel CLI, checking build logs, and validating local build integrity.
```bash
npm install -g vercel
vercel --version
vercel login
vercel logs
npm run build
npx tsc --noEmit
```
--------------------------------
### Video Sitemap Example
Source: https://github.com/littleben/awesomeagentskills/blob/main/google-official-seo-guide/references/appearance.md
An example of how to structure a video sitemap using the Google Sitemaps Video extension. This helps Google discover and index your video content by providing essential metadata.
```xml
https://example.com/videos/some_video_landing_page.html
...
```
--------------------------------
### Video Sitemap Example
Source: https://github.com/littleben/awesomeagentskills/blob/main/google-official-seo-guide/references/appearance.md
This XML snippet demonstrates how to structure a video sitemap according to Google's specifications. It includes the URL of the video landing page and the video namespace for Google.
```xml
https://example.com/videos/some_video_landing_page.html
...
```
--------------------------------
### JSON-LD Recipe and Video Structured Data Example
Source: https://github.com/littleben/awesomeagentskills/blob/main/google-official-seo-guide/references/guides.md
This example demonstrates how to mark up a recipe and an associated video using JSON-LD. It includes details like name, description, aggregate rating, and video object.
```json
How To Make Banana Bread
```
--------------------------------
### Authenticate and Configure GitHub CLI
Source: https://github.com/littleben/awesomeagentskills/blob/main/deploying-to-production/TROUBLESHOOTING.md
Commands to install and authenticate the GitHub CLI to enable repository management from the terminal.
```bash
brew install gh
gh auth login
```
--------------------------------
### Handle Common Setup Errors
Source: https://github.com/littleben/awesomeagentskills/blob/main/internationalizing-websites/WORKFLOW.md
Troubleshooting commands to resolve common issues like missing directories, missing source files, or incorrect execution paths.
```bash
mkdir -p i18n/messages
mkdir -p i18n/pages/landing
echo '{}' > i18n/messages/en.json
cd ..
node scripts/i18n-add-languages.mjs
```
--------------------------------
### Shipany Framework Documentation Structure
Source: https://context7.com/littleben/awesomeagentskills/llms.txt
Provides an overview of the reference file structure for the Shipany framework, which assists in building SaaS applications. This structure organizes documentation for various aspects of the framework, including API, authentication, components, configuration, database, deployment, features, getting started, internationalization, and payments.
```markdown
# Reference Files Structure
references/
├── api.md # API documentation
├── authentication.md # Auth system (Google/GitHub OAuth)
├── components.md # UI components
├── configuration.md # Project configuration
├── database.md # Drizzle ORM setup
├── deployment.md # Deployment guides
├── features.md # Feature documentation
├── getting_started.md # Quick start guide
├── internationalization.md # i18n with next-intl
├── other.md # Additional docs
└── payment.md # Stripe/Creem integration
# Usage in Claude Code
# Reference specific files when detailed information is needed:
# "Check the authentication.md reference for NextAuth configuration"
# "Look at payment.md for Stripe webhook setup"
```
--------------------------------
### Configure Next.js Framework and Dependencies
Source: https://github.com/littleben/awesomeagentskills/blob/main/deploying-to-production/TROUBLESHOOTING.md
Verifies package.json scripts and dependency installation to ensure Vercel correctly detects and builds the project.
```json
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
}
}
```
```bash
npm list next
npm install
npm install --save
npm uninstall --save-dev
```
--------------------------------
### Localized Meta Tags Example (JSON)
Source: https://github.com/littleben/awesomeagentskills/blob/main/internationalizing-websites/SKILL.md
Illustrates how to structure localized metadata for SEO purposes within a JSON translation file. It shows example keys for 'title' and 'description' that should be translated for each language to optimize international search engine visibility.
```json
{
"metadata": {
"title": "Your Site Title",
"description": "Your SEO description"
}
}
```
--------------------------------
### Video Sitemap Example
Source: https://github.com/littleben/awesomeagentskills/blob/main/google-official-seo-guide/references/appearance.md
This XML snippet demonstrates how to include video information in a sitemap using the Google Video Sitemap schema. It specifies the video's landing page and includes a placeholder for detailed video metadata.
```xml
https://example.com/videos/some_video_landing_page.html
...
```
--------------------------------
### Video Sitemap Example
Source: https://github.com/littleben/awesomeagentskills/blob/main/google-official-seo-guide/references/appearance.md
This XML snippet demonstrates how to include video information in a sitemap using the Google Sitemaps Video extension. It specifies the video's landing page and includes a placeholder for detailed video metadata.
```xml
https://example.com/videos/some_video_landing_page.html
...
```
--------------------------------
### Implement Video Sitemap XML
Source: https://github.com/littleben/awesomeagentskills/blob/main/google-official-seo-guide/references/indexing.md
An example of a video sitemap entry using the Google video namespace to provide metadata for search crawlers.
```xml
https://example.com/videos/some_video_landing_page.html
...
```
--------------------------------
### Internationalizing Websites Workflow
Source: https://context7.com/littleben/awesomeagentskills/llms.txt
A step-by-step guide for internationalizing a Next.js website using next-intl. It covers adding language files, updating locale configurations, and validating hreflang tags for SEO.
```bash
# i18n Workflow
# Step 1: Ensure base English files exist
ls i18n/messages/en.json
ls i18n/pages/landing/en.json
# Step 2: Add new language files
node scripts/i18n-add-languages.mjs
# The script will:
# - Copy en.json to all target language files
# - Update i18n/locale.ts with new locales
# - Update i18n/request.ts with language mappings
# - Update public/sitemap.xml with new language URLs
# Step 3: Verify configuration in locale.ts
# export const locales = ["en", "ja", "zh", "ko", ...];
# export const localeNames = {
# en: "English",
# ja: "日本語",
# zh: "中文",
# ko: "한국어"
# };
# Step 4: Add translations to language files
code i18n/messages/ja.json
# Step 5: Build and test
npm run build
# Step 6: Validate hreflang tags
curl https://your-site.com/sitemap.xml | grep hreflang
```
--------------------------------
### VideoObject with BroadcastEvent for Livestream (JSON-LD)
Source: https://github.com/littleben/awesomeagentskills/blob/main/google-official-seo-guide/references/appearance.md
This example demonstrates marking up a livestream video using VideoObject and BroadcastEvent in JSON-LD. It includes properties for contentURL, description, duration, embedUrl, and interactionStatistic to provide details about the live broadcast.
```json
Bald Eagle at the Park - Livestream
```
--------------------------------
### VideoObject Structured Data Example (Microdata)
Source: https://github.com/littleben/awesomeagentskills/blob/main/google-official-seo-guide/references/appearance.md
This snippet shows how to implement VideoObject structured data using Microdata attributes within HTML. It includes properties like name, description, uploadDate, and duration.
```html
Introducing the self-driving bicycle in the Netherlands
This spring, Google is introducing the self-driving bicycle in Amsterdam, the world's premier cycling city. The Dutch cycle more than any other nation in the world, almost 900 kilometres per year per person, amounting to over 15 billion kilometres annually.
...
```
--------------------------------
### Regional Variant Hreflang Implementation Examples (HTML)
Source: https://github.com/littleben/awesomeagentskills/blob/main/internationalizing-websites/reference/hreflang-guide.md
Provides examples of hreflang tags using language and region codes (e.g., 'zh-CN', 'pt-BR') to target specific regional audiences. This is useful when content differs significantly by region.
```html
```
--------------------------------
### Run Lighthouse CLI Accessibility Audit
Source: https://github.com/littleben/awesomeagentskills/blob/main/web-performance-seo/README.md
Commands to install the Lighthouse CLI globally and execute an accessibility-focused audit against a target URL.
```bash
npm install -g lighthouse
lighthouse https://your-site.com --only-categories=accessibility
```
--------------------------------
### Next.js hreflang Metadata Generation with next-intl
Source: https://github.com/littleben/awesomeagentskills/blob/main/internationalizing-websites/reference/hreflang-guide.md
This TypeScript code example shows how to manually configure hreflang tags within a Next.js layout component using the `next-intl` library. It defines language-specific URLs and generates canonical and alternate language links for SEO.
```typescript
export async function generateMetadata({ params: { locale } }: Props) {
const languages = {
en: 'https://example.com/',
ja: 'https://example.com/ja',
zh: 'https://example.com/zh'
};
return {
alternates: {
canonical: languages[locale],
languages: languages
}
};
}
```
--------------------------------
### Video Sitemap Example
Source: https://github.com/littleben/awesomeagentskills/blob/main/google-official-seo-guide/references/appearance.md
This XML snippet demonstrates how to structure a video sitemap according to Google's specifications. It includes essential tags like for the video landing page and for video-specific metadata, helping Google discover and index your video content.
```xml
https://example.com/videos/some_video_landing_page.html
...
```
--------------------------------
### Build Project
Source: https://github.com/littleben/awesomeagentskills/blob/main/internationalizing-websites/SKILL.md
Builds the project using npm. This command should be run before proceeding to testing and validation steps.
```bash
npm run build
```
--------------------------------
### Browser Accept-Language Header Example
Source: https://github.com/littleben/awesomeagentskills/blob/main/internationalizing-websites/reference/locale-codes.md
Shows an example of the `Accept-Language` header sent by browsers, indicating user language preferences with quality values (q-factor).
```text
Accept-Language: en-US,en;q=0.9,ja;q=0.8
```
--------------------------------
### JSON-LD Recipe and Video Structured Data Example
Source: https://github.com/littleben/awesomeagentskills/blob/main/google-official-seo-guide/references/appearance.md
This snippet demonstrates how to mark up a recipe and an associated video using JSON-LD format. It includes details like the recipe name, description, aggregate rating, and video object. This helps Google understand the content and potentially display it as a rich result.
```json
How To Make Banana Bread
```
--------------------------------
### Database Connection String Format Example
Source: https://github.com/littleben/awesomeagentskills/blob/main/deploying-to-production/TROUBLESHOOTING.md
This snippet shows the expected format for a PostgreSQL database connection string, including user, password, host, port, database name, and SSL mode.
```sql
postgres://user:password@host:port/database?sslmode=require
```
--------------------------------
### Implement Responsive Images with HTML
Source: https://github.com/littleben/awesomeagentskills/blob/main/google-official-seo-guide/references/appearance.md
Demonstrates how to use the srcset and sizes attributes to provide responsive image versions, and the element for format-specific fallbacks. These methods ensure browsers and crawlers can select the most appropriate image based on device capabilities.
```html
```
```html
```
--------------------------------
### Fixing CSS Filter Issues (React/JSX)
Source: https://context7.com/littleben/awesomeagentskills/llms.txt
Example code demonstrating how to fix CSS filter issues that cause accessibility audit failures in PageSpeed Insights. It shows a 'before' and 'after' example of removing `backdrop-blur` and adjusting opacity.
```tsx
// BEFORE: Triggers getImageData error
Content
// AFTER: Use solid background instead
Content
// Search and replace patterns:
// backdrop-blur-sm → (remove)
// bg-card/50 → bg-card/80
// /10 → /40
// /20 → /40
// /30 → /60
```
--------------------------------
### Handle Non-existent Products with Redirect (JavaScript)
Source: https://github.com/littleben/awesomeagentskills/blob/main/google-official-seo-guide/references/fundamentals.md
This JavaScript snippet demonstrates how to fetch product data and redirect the user to a 'not-found' page if the product does not exist. It uses the Fetch API to make the request and `window.location.href` for redirection.
```javascript
fetch(`/api/products/${productId}`)
.then(response => response.json())
.then(product => {
if(product.exists) {
showProductDetails(product); // shows the product information on the page
} else {
// this product does not exist, so this is an error page.
window.location.href = '/not-found'; // redirect to 404 page on the server.
}
})
```
--------------------------------
### HTML lang Attribute Examples
Source: https://github.com/littleben/awesomeagentskills/blob/main/internationalizing-websites/reference/seo-checklist.md
These examples show the correct usage of the `lang` attribute within the `` tag for different languages. Setting the `lang` attribute accurately helps browsers and search engines understand the primary language of the page content, improving accessibility and SEO.
```html
```
--------------------------------
### Automate GitHub Repo Creation
Source: https://context7.com/littleben/awesomeagentskills/llms.txt
A bash script to automate the creation of private GitHub repositories. It initializes Git, makes an initial commit, and uses the GitHub CLI (`gh`) to create and push the repository.
```bash
#!/bin/bash
# Usage: bash create-github-repo.sh
set -e # Exit on error
PROJECT_NAME=$1
if [ -z "$PROJECT_NAME" ]; then
echo "Error: Please provide project name"
echo "Usage: bash create-github-repo.sh "
exit 1
fi
PROJECT_DIR="/path/to/websites/${PROJECT_NAME}"
# Check project directory exists
if [ ! -d "$PROJECT_DIR" ]; then
echo "Error: Project directory does not exist: $PROJECT_DIR"
exit 1
fi
cd "$PROJECT_DIR"
# Initialize Git if needed
if [ ! -d ".git" ]; then
git init
git add .
git commit -m "Initial commit"
fi
# Create private GitHub repository
gh repo create "$PROJECT_NAME" \
--private \
--source=. \
--remote=origin \
--push
echo "Repository created: https://github.com/$(gh api user --jq .login)/${PROJECT_NAME}"
```
--------------------------------
### Build and Analyze JavaScript Bundle Size
Source: https://github.com/littleben/awesomeagentskills/blob/main/deploying-to-production/TROUBLESHOOTING.md
These commands are used to build the project for production and then analyze the size of the generated JavaScript bundles. This helps identify large dependencies or code that can be optimized.
```bash
npm run build
# Check .next/analyze (if configured)
```
--------------------------------
### CI/CD Accessibility Integration
Source: https://github.com/littleben/awesomeagentskills/blob/main/web-performance-seo/README.md
Automated accessibility checks using Lighthouse CLI in development environments and GitHub Actions workflows.
```bash
npm run build && lighthouse http://localhost:3000 --only-categories=accessibility
```
```yaml
name: Accessibility Check
on: [push, pull_request]
jobs:
lighthouse:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Run Lighthouse CI
uses: treosh/lighthouse-ci-action@v9
with:
urls: |
http://localhost:3000
uploadArtifacts: true
temporaryPublicStorage: true
budgetPath: ./budget.json
```
--------------------------------
### Implement Client-Side Routing with Hash Fragments (JavaScript)
Source: https://github.com/littleben/awesomeagentskills/blob/main/google-official-seo-guide/references/fundamentals.md
This JavaScript example illustrates client-side routing using URL hash fragments. An event listener for 'hashchange' updates the page content dynamically based on the URL's hash, simulating navigation without full page reloads.
```javascript
```
--------------------------------
### Localize Special Content Types
Source: https://github.com/littleben/awesomeagentskills/blob/main/internationalizing-websites/WORKFLOW.md
Examples of how to format dates and currency values across different locales within JSON configuration files.
```json
{
"date": {
"en": "January 1, 2025",
"ja": "2025年1月1日",
"zh": "2025年1月1日"
},
"currency": {
"en": "$99.99",
"ja": "¥12,000",
"zh": "¥699"
}
}
```
--------------------------------
### Responsive Images using srcset and sizes Attributes
Source: https://github.com/littleben/awesomeagentskills/blob/main/google-official-seo-guide/references/appearance.md
This example demonstrates how to implement responsive images using the `srcset` and `sizes` attributes on an `` tag. The `srcset` attribute provides a list of image sources with their widths, while `sizes` defines how the browser should interpret these widths based on the viewport. This allows the browser to select the most appropriate image size for the user's device, improving performance and user experience. A fallback `src` attribute is included for browsers that do not support `srcset`.
```html
```
--------------------------------
### Verify Sitemap hreflang Tags
Source: https://github.com/littleben/awesomeagentskills/blob/main/internationalizing-websites/WORKFLOW.md
Example of the expected XML structure in sitemap.xml, ensuring correct hreflang attributes for SEO and multi-language indexing.
```xml
https://example.com/2025-06-15T10:00:00+00:00
```
```
```html
```
--------------------------------
### Verify Sitemap hreflang Tags
Source: https://github.com/littleben/awesomeagentskills/blob/main/internationalizing-websites/WORKFLOW.md
Example of the expected XML structure in sitemap.xml, ensuring correct hreflang attributes for SEO and multi-language indexing.
```xml