Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
npx ai-builder add skill anthropic/frontend-designCreate new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, update or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.
npx ai-builder add skill anthropic/skill-creatorUI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.
npx ai-builder add skill nextlevelbuilder/ui-ux-pro-maxStartup and life advice channeling Paul Graham's essays, YC experience, and Twitter wisdom. Use this skill when: (1) Evaluating startup ideas or finding new ones (2) Early-stage strategy and user acquisition (3) Growth and survival decisions (default alive?) (4) Fundraising and investor relations (5) Founder leadership and team building (6) Avoiding common startup mistakes (7) Career and life decisions Invoke with /paul-graham or auto-triggers for startup advice topics.
npx ai-builder add skill acossta/paul-grahamReact 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.
npx ai-builder add skill vercel/react-best-practicesAutonomous browser game agent. Analyzes game concept, implements with KAPLAY.js (2D) or Three.js (3D), playtests in headless browser, critiques gameplay/mechanics, fixes, and launches the result.
npx ai-builder add skill tolitius/gameWhen the user wants to audit, review, or diagnose SEO issues on their site. Also use when the user mentions "SEO audit," "technical SEO," "why am I not ranking," "SEO issues," "on-page SEO," "meta tags review," or "SEO health check." For building pages at scale to target keywords, see programmatic-seo. For adding structured data, see schema-markup.
npx ai-builder add skill coreyhaines31/seo-auditWhen the user wants to create or optimize an email sequence, drip campaign, automated email flow, or lifecycle email program. Also use when the user mentions "email sequence," "drip campaign," "nurture sequence," "onboarding emails," "welcome sequence," "re-engagement emails," "email automation," or "lifecycle emails." For in-app onboarding, see onboarding-cro.
npx ai-builder add skill coreyhaines31/email-sequenceWhen the user wants to create SEO-driven pages at scale using templates and data. Also use when the user mentions "programmatic SEO," "template pages," "pages at scale," "directory pages," "location pages," "[keyword] + [city] pages," "comparison pages," "integration pages," or "building many pages for SEO." For auditing existing SEO issues, see seo-audit.
npx ai-builder add skill coreyhaines31/programmatic-seoKnowledge about pyecharts chart creation, HTML report generation, and visualization best practices
npx ai-builder add skill T-Klug/visualizationWeChat Mini Program development rules. Use this skill when developing WeChat mini programs, integrating CloudBase capabilities, and deploying mini program projects.
npx ai-builder add skill binggg/miniprogram-developmentBrowser automation scripts for testing, screenshots, and web interaction. 16 scripts with persistent state.
npx ai-builder add skill VitorAndTxr/playwrightImage sourcing strategy for UI projects. Use FREE resources first - DiceBear/Boring Avatars for avatars, Unsplash/Picsum for photos, unDraw/Storyset for illustrations, Haikei for backgrounds. AI generation (DALL-E) only when custom branded assets needed and no free alternative exists.
npx ai-builder add skill petbrains/frontend-iconifyQueries local Granola meeting cache for meeting history, context, and attendee information. Use when preparing for meetings, researching past interactions with a person or company, finding past discussions on a topic, tracking engagement, or when user mentions Granola, meeting notes, meeting history, or attendees.
npx ai-builder add skill asterlabs-ai/querying-granolaUse this agent when:\n\n1. **Starting a new feature or project**: When the user describes a feature they want built or a problem they want solved that requires coordination across multiple implementation steps.\n - Example:\n - User: "I want to build a command-line tool for managing my daily standup notes"\n - Assistant: "I'm going to use the project-manager agent to break down this project into manageable tasks and coordinate the implementation."\n\n2. **Breaking down complex requirements**: When a user's request needs to be decomposed into specific, actionable tasks with clear dependencies.\n - Example:\n - User: "Add a search feature to the existing TUI application"\n - Assistant: "Let me engage the project-manager agent to analyze this requirement and create a structured task list."\n\n3. **Coordinating multi-step implementations**: When work needs to be distributed across multiple agents or phases.\n - Example:\n - User: "We need to refactor the data layer and update the UI accordingly"\n - Assistant: "I'll use the project-manager agent to coordinate this refactoring effort across the different components."\n\n4. **Tracking project progress**: When the user asks about status, what's been completed, or what remains to be done.\n - Example:\n - User: "What's the status of the authentication feature?"\n - Assistant: "Let me check with the project-manager agent to get the current status and remaining tasks."\n\n5. **Adjusting scope or priorities**: When requirements change or the user wants to reprioritize work.\n - Example:\n - User: "Actually, let's focus on the export functionality before the import feature"\n - Assistant: "I'll engage the project-manager agent to update our task priorities accordingly."\n\n6. **Proactively after completing significant work**: When a substantial task or feature has been completed and next steps need to be identified.\n - Example:\n - User: "Here's the implementation for the user authentication module"\n - Assistant: "Great work! Let me use the project-manager agent to update our task list and identify what we should tackle next.
npx ai-builder add agent nessamurmur/project-managerUse this agent when you need expertise in DevOps practices, infrastructure management, deployment strategies, system reliability, monitoring, or operational concerns. Examples include: when you need to design CI/CD pipelines, troubleshoot deployment issues, optimize infrastructure costs, implement monitoring and alerting, design disaster recovery strategies, or improve system reliability and performance. Use this agent proactively when discussing infrastructure changes, deployment planning, or when reliability concerns arise during development discussions.
npx ai-builder add agent brettinternet/devopsSuite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
npx ai-builder add skill anthropic/web-artifacts-builderAnalyzes session history to extract patterns, learnings, development insights, and productivity recommendations
npx ai-builder add agent rmurphey/session-insightsUse this skill whenever the user wants to do anything with PDF files. This includes reading or extracting text/tables from PDFs, combining or merging multiple PDFs into one, splitting PDFs apart, rotating pages, adding watermarks, creating new PDFs, filling PDF forms, encrypting/decrypting PDFs, extracting images, and OCR on scanned PDFs to make them searchable. If the user mentions a .pdf file or asks to produce one, use this skill.
npx ai-builder add skill anthropic/pdfDo you find yourself desiring information that you don't quite feel well-trained (confident) on? Information that is modern and potentially only discoverable on the web? Use the web-search-researcher subagent_type today to find any and all answers to your questions! It will research deeply to figure out and attempt to answer your questions! If you aren't immediately satisfied you can get your money back! (Not really - but you can re-run web-search-researcher with an altered prompt in the event you're not satisfied the first time)
npx ai-builder add agent shopsys/web-search-research