Claude Skills by Fabric-Pro

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".

Prepare or update a Fabric pull request by proving the changeset-or-skip decision, validation evidence, DCO sign-off, and public-safe PR metadata. Use before the first push, after later revisions, or when asked to create or update a PR. Do not use to review an unrelated PR or authorize relay.

Guide for adding new OAuth-based integrations to Fabric. Use when implementing OAuth providers like Microsoft Teams, GitHub, Google Drive, Slack, or similar services that need OAuth 2.0 authentication for user data access.

Design clean, scalable, and maintainable REST and GraphQL APIs following industry best practices. Use when designing public or internal APIs, planning endpoint structures, defining request/response contracts, establishing versioning strategies, implementing authentication patterns, designing data models, creating API documentation, ensuring consistent error handling, optimizing for performance, or establishing service contracts between microservices.

Architect scalable backend services using layered architecture, dependency injection, middleware patterns, service classes, and separation of concerns. Use when building API services, implementing business logic layers, creating service classes, setting up middleware chains, implementing dependency injection, designing controller-service-repository patterns, handling cross-cutting concerns, creating domain models, implementing CQRS patterns, or establishing backend architecture standards.

Facilitate ideation, explore alternatives, and refine concepts through structured brainstorming techniques before implementation. Use when starting new projects, designing features, exploring solutions, evaluating tradeoffs, challenging assumptions, generating creative ideas, planning architecture, or refining rough concepts into detailed designs.

Create and maintain comprehensive brand guidelines including visual identity, tone of voice, messaging, color palettes, typography, and usage rules for consistent brand expression. Use when establishing brand identity, creating style guides, defining visual standards, setting tone of voice, creating brand assets, or ensuring brand consistency.

Create visual designs, graphics, and layouts using HTML Canvas API or design tools for data visualization, graphics, animations, and interactive visual content. Use when creating data visualizations, building interactive graphics, implementing drawing tools, creating charts and diagrams, building game graphics, implementing image manipulation, or creating dynamic visual content.

Generate comprehensive changelogs from Git history, commit messages, pull requests, and issue tracking for release documentation. Use when preparing releases, documenting changes, creating release notes, categorizing commits, generating version summaries, maintaining project history, or automating changelog updates.

Systematically review pull requests, feature implementations, and code changes to ensure quality, maintainability, security, and adherence to best practices. Use when reviewing code before merging, conducting peer reviews, performing self-reviews, auditing code quality, checking for security vulnerabilities, ensuring consistent coding standards, verifying test coverage, assessing performance implications, evaluating architectural decisions, or providing constructive feedback to improve team c...

Research topics thoroughly and write comprehensive, well-structured content including articles, documentation, blog posts, and technical writing with proper citations and sources. Use when writing blog posts, creating technical articles, researching topics, gathering sources, writing documentation, creating educational content, or producing research-backed content.

Design scalable, normalized database schemas with proper relationships, indexes, constraints, and migration strategies for relational and NoSQL databases. Use when designing database schemas, planning table relationships and foreign keys, creating indexes for query optimization, defining constraints and validations, designing data models for scalability, planning database migrations, choosing between SQL and NoSQL, implementing sharding strategies, optimizing query performance, or establishin...

Apply systematic root cause analysis and debugging methodologies to diagnose and fix bugs, test failures, and unexpected behavior. Use when encountering production issues, investigating test failures, diagnosing performance problems, tracing error sources through call stacks, analyzing logs and stack traces, reproducing inconsistent bugs, debugging race conditions, investigating memory leaks, or applying scientific method to problem-solving before proposing fixes.

Create comprehensive technical documentation including API docs, component libraries, README files, architecture diagrams, and developer guides using tools like JSDoc, Storybook, or Docusaurus. Use when documenting APIs, creating component documentation, writing README files, generating API references, documenting architecture decisions, creating onboarding guides, maintaining changelogs, documenting configuration options, or building developer documentation sites.

Write comprehensive end-to-end tests that verify complete user workflows, integration between components, and system behavior from user perspective using Playwright, Cypress, or similar frameworks. Use when testing user flows, verifying feature integration, testing across real browsers, ensuring UI interactions work correctly, validating form submissions end-to-end, testing authentication flows, catching regressions, automating QA processes, testing API integrations, or building confidence in...

Design robust error handling strategies including try-catch blocks, custom error classes, error boundaries, graceful degradation, and comprehensive logging. Use when implementing exception handling, creating custom error types, setting up error boundaries in React, designing error response formats for APIs, implementing retry logic, handling async errors and promise rejections, logging errors for monitoring, creating user-friendly error messages, or building fault-tolerant systems that fail g...

Organize, categorize, rename, and manage files systematically using automated rules, naming conventions, and folder structures for efficient file management. Use when organizing uploaded files, implementing file naming conventions, categorizing files by type or metadata, creating folder structures, cleaning up messy directories, automating file movements, implementing media libraries, or building file management systems.

Respond to production incidents systematically with triage, investigation, resolution, and post-mortem analysis to minimize downtime and prevent recurrence. Use when handling production outages, triaging incidents, investigating critical bugs, coordinating incident response, implementing hotfixes, conducting post-mortems, or establishing incident response procedures.

Build Model Context Protocol (MCP) servers and tools that extend Claude's capabilities with custom functions, data sources, and integrations. Use when creating custom MCP servers, implementing tools for Claude, building integrations with external services, creating data source connectors, implementing custom functions, or extending Claude's capabilities with domain-specific tools.

Analyze meeting transcripts, recordings, and notes to extract action items, key decisions, topics, sentiment, and generate summaries using NLP and AI. Use when processing meeting transcripts, extracting action items, summarizing discussions, identifying key decisions, tracking topics and themes, analyzing sentiment, generating meeting notes, or building collaboration and productivity tools.

Implement comprehensive monitoring, logging, metrics, tracing, and alerting for production applications to ensure reliability and quick incident response. Use when setting up application monitoring, implementing structured logging, creating metrics and dashboards, setting up alerts, implementing distributed tracing, monitoring performance, tracking errors, or building observability into applications.

Use Neon serverless Postgres with branching, connection pooling, and instant scalability for modern applications with Prisma or Drizzle ORM integration. Use when setting up serverless Postgres databases, implementing database branching for preview environments, configuring connection pooling, optimizing for serverless cold starts, using Prisma with Neon, implementing database migrations, scaling databases automatically, or building applications on Vercel/Netlify with Postgres.

Build modern Next.js 13+ applications using App Router architecture with Server Components, Client Components, and advanced routing patterns. Use when implementing server-first rendering, creating nested layouts, building parallel routes, implementing intercepting routes, using React Server Components, optimizing data fetching with server-side async components, implementing streaming with Suspense, managing client-side interactivity boundaries, or leveraging Next.js 13+ app directory features...

Build efficient React applications using Next.js Server Components that render on the server, reducing client bundle size, improving performance, and enabling direct database access. Use when fetching data server-side, reducing JavaScript bundle size, accessing databases directly in components, implementing streaming with Suspense, creating layouts that only render once, optimizing Core Web Vitals, or building SEO-friendly applications with server-first architecture.

Optimize application performance through code splitting, lazy loading, caching strategies, bundle size reduction, render optimization, and profiling. Use when improving page load times, reducing bundle sizes, optimizing React rendering, implementing code splitting, configuring caching strategies, lazy loading components and routes, optimizing images and assets, profiling performance bottlenecks, implementing virtual scrolling for large lists, or improving Core Web Vitals and Lighthouse scores.

Automate browser testing, web scraping, and user workflow testing with Playwright across multiple browsers. Use when writing end-to-end tests for web applications, automating repetitive browser tasks, scraping data from websites, testing across Chrome/Firefox/Safari, taking screenshots for visual regression testing, testing authentication flows, filling and submitting forms programmatically, testing responsive designs across viewports, or any browser automation requiring reliable, cross-brows...

Implement React Server Actions in Next.js 14+ for secure, progressively enhanced form handling and server mutations without API routes. Use when handling form submissions, performing server-side mutations, implementing progressive enhancement, creating actions that work without JavaScript, validating data on the server, revalidating cached data after mutations, handling file uploads server-side, implementing optimistic UI updates, or building forms that gracefully degrade without client-side ...

Improve code structure, readability, and maintainability without changing external behavior through systematic refactoring techniques like extracting functions, removing duplication, simplifying conditionals, and applying design patterns. Use when reducing technical debt, extracting functions or classes, removing code duplication, simplifying complex conditionals, renaming for clarity, applying design patterns, improving code organization, reducing coupling, increasing cohesion, or maintainin...

Trace bugs backward through call stacks and execution flows to identify the original source of errors, invalid data, or incorrect behavior. Use when debugging complex issues, tracing error origins, investigating data corruption, following execution paths, identifying where invalid data enters the system, or finding root causes of cascading failures.

Implement comprehensive security patterns to protect applications against OWASP Top 10 vulnerabilities including XSS, CSRF, SQL injection, authentication bypass, and data exposure. Use when handling user data, implementing authentication and authorization, validating input, encrypting sensitive data, preventing injection attacks, securing API endpoints, managing sessions and tokens, implementing rate limiting, configuring security headers, or building security-critical features that require d...

Build beautiful, accessible UI components using shadcn/ui library with Radix UI primitives and Tailwind CSS styling that you own and can customize. Use when creating accessible component libraries, implementing common UI patterns (dialogs, dropdowns, tooltips), building forms with validation, creating data tables, implementing command palettes, using Radix UI primitives, customizing components with Tailwind, or building design systems with full ownership of code.

Create well-structured, comprehensive Claude skills with clear activation criteria, detailed descriptions, usage examples, and proper documentation following best practices. Use when documenting new workflows, creating reusable skill patterns, establishing coding standards as skills, building team knowledge base, or expanding the skills library with new capabilities.

Establish and enforce coding standards, best practices, and architectural patterns across the codebase using linters, formatters, and code review processes. Use when setting up ESLint/Prettier, configuring linting rules, creating code style guides, implementing pre-commit hooks, establishing naming conventions, enforcing TypeScript strict mode, maintaining consistency, conducting architecture reviews, or defining team coding standards.

Create consistent, scalable design systems using Tailwind CSS utility classes with custom themes, design tokens, and responsive design patterns. Use when building design systems, implementing custom themes, creating reusable utility patterns, configuring Tailwind theme extensions, implementing dark mode, building responsive layouts, creating design tokens, using arbitrary values, or establishing consistent spacing and typography scales.

Implement test-driven development (TDD) workflow using the red-green-refactor cycle. Use when writing new features, fixing bugs, or refactoring existing code. Always write the failing test first, then implement minimal code to pass, then refactor. Essential for ensuring code reliability, preventing regressions, improving design through testability requirements, documenting expected behavior through tests, enabling confident refactoring, and maintaining high code quality standards throughout t...

Proactively search for security threats, vulnerabilities, and suspicious patterns in applications and infrastructure before they cause damage. Use when conducting security audits, identifying vulnerabilities, analyzing security logs, detecting suspicious patterns, investigating potential breaches, performing penetration testing, or implementing security monitoring.

Write type-safe TypeScript code with strict mode enabled, comprehensive type definitions, proper error handling, and elimination of any types. Use when enabling TypeScript strict mode, adding types to existing JavaScript, fixing type errors, creating type definitions, using utility types, implementing type guards, avoiding any types, creating generic types, or ensuring complete type safety across the codebase.

Deploy and optimize applications on Vercel with preview deployments, edge functions, environment variables, and performance monitoring. Use when deploying Next.js applications, setting up preview deployments per pull request, configuring environment variables, using Vercel Edge Functions, optimizing build performance, implementing redirects and rewrites, configuring custom domains, or monitoring application performance with Vercel Analytics.

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".

Architect scalable backend services using layered architecture, dependency injection, middleware patterns, service classes, and separation of concerns. Use when building API services, implementing business logic layers, creating service classes, setting up middleware chains, implementing dependency injection, designing controller-service-repository patterns, handling cross-cutting concerns, creating domain models, implementing CQRS patterns, or establishing backend architecture standards.

Facilitate ideation, explore alternatives, and refine concepts through structured brainstorming techniques before implementation. Use when starting new projects, designing features, exploring solutions, evaluating tradeoffs, challenging assumptions, generating creative ideas, planning architecture, or refining rough concepts into detailed designs.

Create and maintain comprehensive brand guidelines including visual identity, tone of voice, messaging, color palettes, typography, and usage rules for consistent brand expression. Use when establishing brand identity, creating style guides, defining visual standards, setting tone of voice, creating brand assets, or ensuring brand consistency.

Create visual designs, graphics, and layouts using HTML Canvas API or design tools for data visualization, graphics, animations, and interactive visual content. Use when creating data visualizations, building interactive graphics, implementing drawing tools, creating charts and diagrams, building game graphics, implementing image manipulation, or creating dynamic visual content.

Generate comprehensive changelogs from Git history, commit messages, pull requests, and issue tracking for release documentation. Use when preparing releases, documenting changes, creating release notes, categorizing commits, generating version summaries, maintaining project history, or automating changelog updates.

Systematically review pull requests, feature implementations, and code changes to ensure quality, maintainability, security, and adherence to best practices. Use when reviewing code before merging, conducting peer reviews, performing self-reviews, auditing code quality, checking for security vulnerabilities, ensuring consistent coding standards, verifying test coverage, assessing performance implications, evaluating architectural decisions, or providing constructive feedback to improve team c...

Research topics thoroughly and write comprehensive, well-structured content including articles, documentation, blog posts, and technical writing with proper citations and sources. Use when writing blog posts, creating technical articles, researching topics, gathering sources, writing documentation, creating educational content, or producing research-backed content.

Design scalable, normalized database schemas with proper relationships, indexes, constraints, and migration strategies for relational and NoSQL databases. Use when designing database schemas, planning table relationships and foreign keys, creating indexes for query optimization, defining constraints and validations, designing data models for scalability, planning database migrations, choosing between SQL and NoSQL, implementing sharding strategies, optimizing query performance, or establishin...

Apply systematic root cause analysis and debugging methodologies to diagnose and fix bugs, test failures, and unexpected behavior. Use when encountering production issues, investigating test failures, diagnosing performance problems, tracing error sources through call stacks, analyzing logs and stack traces, reproducing inconsistent bugs, debugging race conditions, investigating memory leaks, or applying scientific method to problem-solving before proposing fixes.

Create comprehensive technical documentation including API docs, component libraries, README files, architecture diagrams, and developer guides using tools like JSDoc, Storybook, or Docusaurus. Use when documenting APIs, creating component documentation, writing README files, generating API references, documenting architecture decisions, creating onboarding guides, maintaining changelogs, documenting configuration options, or building developer documentation sites.

Write comprehensive end-to-end tests that verify complete user workflows, integration between components, and system behavior from user perspective using Playwright, Cypress, or similar frameworks. Use when testing user flows, verifying feature integration, testing across real browsers, ensuring UI interactions work correctly, validating form submissions end-to-end, testing authentication flows, catching regressions, automating QA processes, testing API integrations, or building confidence in...