web-design-guidelines
Web Interface Guidelines
Review files for compliance with Web Interface Guidelines.
How It Works
- Fetch the latest guidelines from the source URL below
- Read the specified files (or prompt user for files/pattern)
- Check against all rules in the fetched guidelines
- Output findings in the terse
file:lineformat
Guidelines Source
Fetch fresh guidelines before each review:
https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md
Use WebFetch to retrieve the latest rules. The fetched content contains all the rules and output format instructions.
Usage
When a user provides a file or pattern argument:
- Fetch guidelines from the source URL above
- Read the specified files
- Apply all rules from the fetched guidelines
- Output findings using the format specified in the guidelines
If no files specified, ask the user which files to review.
More from horace4444/extend-my-claude-code
google-image-creator
Generate images using Google AI models (Imagen 4 and Gemini). Presents top 3 model options with pricing, generates images via API, tracks token usage and costs. Use when user needs to: (1) Generate images with Google AI, (2) Choose between Google image models, (3) See pricing for Google image generation, (4) Track image generation costs, or (5) Compare Imagen vs Gemini image models. Self-updating with current pricing from https://ai.google.dev/pricing
4vercel-react-best-practices
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
4claude-agent-builder-typescript
Comprehensive guide for building production-ready Claude Agent SDK agents in TypeScript. Use when working with the @anthropic-ai/claude-agent-sdk npm package to create, test, deploy, or optimize AI agents for business workflows, automation, data processing, API integration, or multi-agent orchestration. Covers custom tool development with SDK MCP servers, testing & evaluation frameworks, production monitoring & observability, multi-agent coordination patterns, and enterprise-grade agent architectures. Essential for building agents that need custom tools, production deployment, systematic testing, performance monitoring, or coordination between multiple specialized agents.
4project-genome
Run FIRST when starting work on any codebase. Creates PROJECT-GENOME.yaml with complete project map: architecture, file structure, key file paths, and authoritative documentation locations. One 4K token read replaces hours of exploratory searching. Refresh with /project-genome after major changes.
3frontend-slides
Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.
1