category · frontend
Expert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL, and interactive 3D scenes. Covers product configurators, 3D portfolios, immersive websites, and bringing ...
/3d-web-experienceTools are how AI agents interact with the world. A well-designed tool is the difference between an agent that works and one that hallucinates, fails silently, or costs 10x more tokens than necessar...
/agent-tool-builderModern Angular (v20+) expert with deep knowledge of Signals, Standalone Components, Zoneless applications, SSR/Hydration, and reactive patterns. Use PROACTIVELY for Angular development, component architecture, state management, performance optimization, and migration to modern patterns.
/angularAngular performance optimization and best practices guide. Use when writing, reviewing, or refactoring Angular code for optimal performance, bundle size, and rendering efficiency.
/angular-best-practicesMigrate from AngularJS to Angular using hybrid mode, incremental component rewriting, and dependency injection updates. Use when upgrading AngularJS applications, planning framework migrations, or ...
/angular-migrationMaster modern Angular state management with Signals, NgRx, and RxJS. Use when setting up global state, managing component stores, choosing between state solutions, or migrating from legacy patterns.
/angular-state-managementModern Angular UI patterns for loading states, error handling, and data display. Use when building UI components, handling async data, or managing component states.
/angular-ui-patternsMain application building orchestrator. Creates full-stack applications from natural language requests. Determines project type, selects tech stack, coordinates agents.
/app-builderBuild real-time messaging applications using Azure Web PubSub SDKs for JavaScript (@azure/web-pubsub, @azure/web-pubsub-client). Use when implementing WebSocket-based real-time features, pub/sub me...
/azure-web-pubsub-tsOpinionated backend development standards for Node.js + Express + TypeScript microservices. Covers layered architecture, BaseController pattern, dependency injection, Prisma repositories, Zod valid...
/backend-dev-guidelinesOptimize Bazel builds for large-scale monorepos. Use when configuring Bazel, implementing remote execution, or optimizing build performance for enterprise codebases.
/bazel-build-optimizationApplies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatt...
/brand-guidelines-anthropicApplies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatt...
/brand-guidelines-communityExpert in building browser extensions that solve real problems - Chrome, Firefox, and cross-browser extensions. Covers extension architecture, manifest v3, content scripts, popup UIs, monetization ...
/browser-extension-builderThis skill should be used when the user asks to "intercept HTTP traffic", "modify web requests", "use Burp Suite for testing", "perform web vulnerability scanning", "test with Burp ...
/burp-suite-testingFrontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.
/cc-skill-frontend-patternsProject Guidelines Skill (Example)
/cc-skill-project-guidelines-exampleMaster guide for using Claude Code effectively. Includes configuration templates, prompting strategies \\"Thinking\\" keywords, debugging techniques, and best practices for interacting wit...
/claude-code-guideGuide developers through setting up development environments with proper tools, dependencies, and configurations
/environment-setup-guidePractical patterns for using fp-ts with React - hooks, state, forms, data fetching. Use when building React apps with functional programming patterns. Works with React 18/19, Next.js 14/15.
/fp-ts-reactOpinionated frontend development standards for modern React + TypeScript applications. Covers Suspense-first data fetching, lazy loading, feature-based architecture, MUI v7 styling, TanStack Router...
/frontend-dev-guidelinesBuild React components, implement responsive layouts, and handle
/frontend-developerYou are a React component architecture expert specializing in scaffolding production-ready, accessible, and performant components. Generate complete component implementations with TypeScript, tests, s
/frontend-mobile-development-component-scaffoldYou are a frontend security specialist focusing on Cross-Site Scripting (XSS) vulnerability detection and prevention. Analyze React, Vue, Angular, and vanilla JavaScript code to identify injection poi
/frontend-mobile-security-xss-scanExpert in secure frontend coding practices specializing in XSS
/frontend-security-coderCreate 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...
/frontend-slidesBuild dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations. Use when creating dashboards, admin panels, or data-rich interfaces...
/frontend-ui-dark-tsApple Human Interface Guidelines for content display components. Use this skill when the user asks about "charts component", "collection view", "image view", "web view", "color well", "image well", "activity view", "lockup", "data visualization", "content display", displaying images, rendering web content, color pickers, or presenting collections of items in Apple apps. Also use when the user says "how should I display charts", "what's the best way to show images", "should I use a web view", "how do I build a grid of items", "what component shows media", or "how do I present a share sheet". Cross-references: hig-foundations for color/typography/accessibility, hig-patterns for data visualization patterns, hig-components-layout for structural containers, hig-platforms for platform-specific component behavior.
/hig-components-contentApple HIG guidance for selection and input controls including pickers, toggles, sliders, steppers, segmented controls, combo boxes, text fields, text views, labels, token fields, virtual keyboards, rating indicators, and gauges. Use this skill when the user says "picker or segmented control," "how should my form look," "what keyboard type should I use," "toggle vs checkbox," or asks about picker design, toggle, switch, slider, stepper, text field, text input, segmented control, combo box, label, token field, virtual keyboard, rating indicator, gauge, form design, input validation, or control state management. Cross-references: hig-components-menus, hig-components-dialogs, hig-components-search.
/hig-components-controlsApple HIG guidance for presentation components including alerts, action sheets, popovers, sheets, and digit entry views. Use this skill when the user says "should I use an alert or a sheet," "how do I show a confirmation dialog," "when should I use a popover," "my modals are annoying users," or asks about alert design, action sheet, popover, sheet, modal, dialog, digit entry, confirmation dialog, warning dialog, modal presentation, non-modal content, destructive action confirmation, or overlay UI patterns. Cross-references: hig-components-menus, hig-components-controls, hig-components-search, hig-patterns.
/hig-components-dialogsApple Human Interface Guidelines for layout and navigation components. Use this skill when the user asks about "sidebar", "split view", "tab bar", "tab view", "scroll view", "window design", "panel", "list view", "table view", "column view", "outline view", "navigation structure", "app layout", "boxes", "ornaments", or organizing content hierarchically in Apple apps. Also use when the user says "how should I organize my app", "what navigation pattern should I use", "my layout breaks on iPad", "how do I build a sidebar", "should I use tabs or a sidebar", or "my app doesn't adapt to different screen sizes". Cross-references: hig-foundations for layout/spacing principles, hig-platforms for platform-specific navigation, hig-patterns for multitasking and full-screen, hig-components-content for content display.
/hig-components-layoutApple HIG guidance for menu and button components including menus, context menus, dock menus, edit menus, the menu bar, toolbars, action buttons, pop-up buttons, pull-down buttons, disclosure controls, and standard buttons. Use this skill when the user says "how should my buttons look," "what goes in the menu bar," "should I use a context menu or action sheet," "how do I design a toolbar," or asks about button design, menu design, context menu, toolbar, menu bar, action button, pop-up button, pull-down button, disclosure control, dock menu, edit menu, or any menu/button component layout and behavior. Cross-references: hig-components-search, hig-components-controls, hig-components-dialogs.
/hig-components-menusApple HIG guidance for navigation-related components including search fields, page controls, and path controls. Use this skill when the user says "how should search work in my app," "I need a breadcrumb," "how do I paginate content," or asks about search field, search bar, page control, path control, breadcrumb, navigation component, search UX, search suggestions, search scopes, paginated content navigation, or file path hierarchy display. Cross-references: hig-components-menus, hig-components-controls, hig-components-dialogs, hig-patterns.
/hig-components-searchApple HIG guidance for status and progress UI components including progress indicators, status bars, and activity rings. Use this skill when asked about: "progress indicator", "progress bar", "loading spinner", "status bar", "activity ring", "progress display", determinate vs indeterminate progress, loading states, or fitness tracking rings. Also use when the user says "how do I show loading state," "should I use a spinner or progress bar," "what goes in the status bar," or asks about activity indicators. Cross-references: hig-components-system for widgets and complications, hig-inputs for gesture-driven progress controls, hig-technologies for HealthKit and activity ring data integration.
/hig-components-statusApple HIG guidance for system experience components: widgets, live activities, notifications, complications, home screen quick actions, top shelf, watch faces, app clips, and app shortcuts. Use when asked about: "widget design", "live activity", "notification design", "complication", "home screen quick action", "top shelf", "watch face", "app clip", "app shortcut", "system experience". Also use when the user says "how do I design a widget," "what should my notification look like," "how do Live Activities work," "should I make an App Clip," or asks about surfaces outside the main app. Cross-references: hig-components-status for progress in widgets, hig-inputs for interaction patterns, hig-technologies for Siri and system integration.
/hig-components-systemApple Human Interface Guidelines design foundations. Use this skill when the user asks about "HIG color", "Apple typography", "SF Symbols", "dark mode guidelines", "accessible design", "Apple design foundations", "app icon", "layout guidelines", "materials", "motion", "privacy", "right to left", "RTL", "inclusive design", branding, images, spatial layout, or writing style. Also use when the user says "my colors look wrong in dark mode", "what font should I use", "is my app accessible enough", "how do I support Dynamic Type", "what contrast ratio do I need", "how do I pick system colors", or "my icons don't match the system style". Cross-references: hig-platforms for platform-specific guidance, hig-patterns for interaction patterns, hig-components-layout for structural components, hig-components-content for display.
/hig-foundationsApple HIG guidance for input methods and interaction patterns: gestures, Apple Pencil, keyboards, game controllers, pointers, Digital Crown, eye tracking, focus system, remotes, spatial interactions, gyroscope, accelerometer, and nearby interactions. Use when asked about: "gesture design", "Apple Pencil", "keyboard shortcuts", "game controller", "pointer support", "mouse support", "trackpad", "Digital Crown", "eye tracking", "visionOS input", "focus system", "remote control", "gyroscope", "spatial interaction". Also use when the user says "what gestures should I support," "how do I add keyboard shortcuts," "how does input work on Apple TV," "should I support Apple Pencil," or asks about input device handling. Cross-references: hig-components-status, hig-components-system, hig-technologies for VoiceOver and Siri.
/hig-inputsApple Human Interface Guidelines interaction and UX patterns. Use this skill when the user asks about "onboarding flow", "user onboarding", "app launch", "loading state", "drag and drop", "search pattern", "settings design", "notifications", "modality", "multitasking", "feedback pattern", "haptics", "undo redo", "file management", data entry, sharing, collaboration, full screen, audio, video, haptic feedback, ratings, printing, help, or account management in Apple apps. Also use when the user says "how should onboarding work", "my app takes too long to load", "should I use a modal here", "how do I handle errors", "when should I ask for permissions", "how to show progress", or "what's the right way to confirm a delete". Cross-references: hig-foundations for underlying principles, hig-platforms for platform specifics, hig-components-layout for navigation, hig-components-content for data display.
/hig-patternsApple Human Interface Guidelines for platform-specific design. Use this skill when the user asks about "designing for iOS", "iPad app design", "macOS design", "tvOS", "visionOS", "watchOS", "Apple platform", "which platform", platform differences, platform-specific conventions, or multi-platform app design. Also use when the user says "should I design differently for iPad vs iPhone", "how does my app work on visionOS", "what's different about macOS apps", "porting my app to another platform", "universal app design", or "what input methods does this platform use". Cross-references: hig-foundations for shared design foundations, hig-patterns for interaction patterns, hig-components-layout for navigation structures, hig-components-content for content display.
/hig-platformsCreate or update a shared Apple design context document that other HIG skills use to tailor guidance. Use when the user says "set up my project context," "what platforms am I targeting," "configure HIG settings," or when starting a new Apple platform project. Also activates when other HIG skills need project context but none exists yet. This skill creates .claude/apple-design-context.md so that hig-foundations, hig-platforms, hig-components-*, hig-inputs, and hig-technologies can provide targeted advice without repetitive questions.
/hig-project-contextApple HIG guidance for Apple technology integrations: Siri, Apple Pay, HealthKit, HomeKit, ARKit, machine learning, generative AI, iCloud, Sign in with Apple, SharePlay, CarPlay, Game Center, in-app purchase, NFC, Wallet, VoiceOver, Maps, Mac Catalyst, and more. Use when asked about: "Siri integration", "Apple Pay", "HealthKit", "HomeKit", "ARKit", "augmented reality", "machine learning", "generative AI", "iCloud sync", "Sign in with Apple", "SharePlay", "CarPlay", "in-app purchase", "NFC", "VoiceOver", "Maps", "Mac Catalyst". Also use when the user says "how do I integrate Siri," "what are the Apple Pay guidelines," "how should my AR experience work," "how do I use Sign in with Apple," or asks about any Apple framework or service integration. Cross-references: hig-inputs for input methods, hig-components-system for widgets.
/hig-technologiesThis skill should be used when the user asks to "test for HTML injection", "inject HTML into web pages", "perform HTML injection attacks", "deface web applications", or "test conten...
/html-injection-testingGuide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate exte...
/mcp-builder-msMaster Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced data fetching. Use when building Next.js applications, implementing SSR/SSG, or optimizing React Serve...
/nextjs-app-router-patternsNext.js App Router principles. Server Components, data fetching, routing patterns.
/nextjs-best-practicesExpert integration of Supabase Auth with Next.js App Router Use when: supabase auth next, authentication next.js, login supabase, auth middleware, protected route.
/nextjs-supabase-authExpert in building custom tools that solve your own problems first. The best products often start as personal tools - scratch your own itch, build for yourself, then discover others have the same i...
/personal-tool-builderBuild accessible design systems with Radix UI primitives. Headless component customization, theming strategies, and compound component patterns for production-grade UI libraries.
/radix-ui-design-systemReact 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 pat...
/react-best-practicesExpert ReactFlow architect for building interactive graph applications with hierarchical node-edge systems, performance optimization, and auto-layout integration. Use when Claude needs to create or...
/react-flow-architectCreate React Flow node components with TypeScript types, handles, and Zustand integration. Use when building custom nodes for React Flow canvas, creating visual workflow editors, or implementing no...
/react-flow-node-tsUpgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features. Use when modernizing React codebases, migrating to React Hooks, or upgrading to...
/react-modernizationBuild production React Native apps with Expo, navigation, native modules, offline sync, and cross-platform patterns. Use when developing mobile apps, implementing native integrations, or architecti...
/react-native-architectureReact and Next.js 14+ application development with App Router, Server Components, TypeScript, Tailwind CSS, and modern frontend patterns.
/react-nextjs-developmentModern React patterns and principles. Hooks, composition, performance, TypeScript best practices.
/react-patternsMaster modern React state management with Redux Toolkit, Zustand, Jotai, and React Query. Use when setting up global state, managing server state, or choosing between state management solutions.
/react-state-managementModern React UI patterns for loading states, error handling, and data fetching. Use when building UI components, handling async data, or managing UI states.
/react-ui-patternsCreates exhaustive technical references and API documentation.
/reference-builderBuild security Blue Books for sensitive apps
/security-bluebook-builderDerive security requirements from threat models and business context. Use when translating threats into actionable requirements, creating security user stories, or building security test cases.
/security-requirement-extractionAnalyzes content for E-E-A-T signals and suggests improvements to
/seo-authority-builderBuild Slack apps using the Bolt framework across Python, JavaScript, and Java. Covers Block Kit for rich UIs, interactive components, slash commands, event handling, OAuth installation flows, and W...
/slack-bot-builderExpert guide for creating effective prompts for Google Stitch AI UI design tool. Use when user wants to design UI/UX in Stitch, create app interfaces, generate mobile/web designs, or needs help cra...
/stitch-ui-designWrite, review, or improve SwiftUI code following best practices for state management, view composition, performance, modern APIs, Swift concurrency, and iOS 26+ Liquid Glass adoption. Use when buil...
/swiftui-expert-skillBuild scalable design systems with Tailwind CSS, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI...
/tailwind-design-systemTailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.
/tailwind-patternsExpert in building Telegram bots that solve real problems - from simple automation to complex AI-powered bots. Covers bot architecture, the Telegram Bot API, user experience, monetization strategie...
/telegram-bot-builderThis skill should be used when the user asks to "identify web application vulnerabilities", "explain common security flaws", "understand vulnerability categories", "learn about inject...
/top-web-vulnerabilitiesOpinionated, evolving constraints to guide agents when building interfaces
/ui-skillsCreate interface designs, wireframes, and design systems. Masters
/ui-ux-designerUI/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, cr...
/ui-ux-pro-maxRigorous visual validation expert specializing in UI testing,
/ui-visual-validatorExpert in building shareable generator tools that go viral - name generators, quiz makers, avatar creators, personality tests, and calculator tools. Covers the psychology of sharing, viral mechanic...
/viral-generator-builderReview UI code for Web Interface Guidelines compliance. Use when asked to \\"review my UI\\", \\"check accessibility\\", \\"audit design\\", \\"review UX\\", or \\"check my site aga...
/web-design-guidelinesOptimize website and web application performance including loading speed, Core Web Vitals, bundle size, caching strategies, and runtime performance
/web-performance-optimizationWeb application security testing workflow for OWASP Top 10 vulnerabilities including injection, XSS, authentication flaws, and access control issues.
/web-security-testingThis skill should be used when the user asks to "test for XSS vulnerabilities", "perform cross-site scripting attacks", "identify HTML injection flaws", "exploit client-side injection...
/xss-html-injectionNothing matches.