Fabric-Pro

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.

中文简介正在准备中。当前显示原文说明。

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-browser testing capabilities.

中文简介正在准备中。当前显示原文说明。

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 maintaining test coverage during structural improvements.

中文简介正在准备中。当前显示原文说明。

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 defense-in-depth protection.

中文简介正在准备中。当前显示原文说明。

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.

中文简介正在准备中。当前显示原文说明。

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 the development process.

中文简介正在准备中。当前显示原文说明。

Create interactive, self-contained artifacts like mini-apps, visualizations, calculators, and tools that can be embedded or used standalone. Use when building interactive calculators, creating data visualizations, making mini web apps, building embeddable widgets, creating interactive demos, making tools for specific tasks, or generating standalone HTML/JS applications.

中文简介正在准备中。当前显示原文说明。

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.

中文简介正在准备中。当前显示原文说明。

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.

中文简介正在准备中。当前显示原文说明。

Set up and maintain continuous integration and continuous deployment pipelines with GitHub Actions, GitLab CI, Jenkins, or similar tools to automate testing, building, and deployment. Use when configuring automated builds, setting up test automation, implementing deployment automation, creating release workflows, managing environment deployments, configuring build caching, implementing blue-green deployments, setting up rollback strategies, or automating the entire software delivery pipeline.

中文简介正在准备中。当前显示原文说明。

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.

中文简介正在准备中。当前显示原文说明。

Process, parse, create, and manipulate Excel spreadsheets (.xlsx, .xls) using libraries like xlsx, exceljs, or SheetJS for data import/export and spreadsheet automation. Use when reading Excel files for data import, generating Excel reports, exporting data to spreadsheets, parsing bulk uploads, creating financial reports, manipulating workbooks and worksheets, or building data export features.

中文简介正在准备中。当前显示原文说明。

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.

中文简介正在准备中。当前显示原文说明。

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 gracefully.

中文简介正在准备中。当前显示原文说明。

Build reusable, composable, and maintainable React/Vue/Angular components following established design patterns like compound components, render props, custom hooks, and HOCs. Use when creating component libraries, implementing component composition, building reusable UI elements, designing prop APIs, managing component state patterns, implementing controlled vs uncontrolled components, creating compound components, using render props or children as functions, building custom hooks, or establishing component architecture standards.

中文简介正在准备中。当前显示原文说明。

Manage source control effectively with Git including branching strategies, commit conventions, merge conflict resolution, rebasing, and collaboration workflows like GitHub Flow or GitFlow. Use when managing feature branches, creating meaningful commits, resolving merge conflicts, rebasing branches, squashing commits, using interactive rebase, implementing branch naming conventions, following commit message standards, managing pull requests, or collaborating in team environments.

中文简介正在准备中。当前显示原文说明。

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.

中文简介正在准备中。当前显示原文说明。

Organize, categorize, track, and manage invoices systematically with automated extraction of invoice data, payment tracking, and financial organization. Use when processing invoice uploads, extracting invoice details (date, amount, vendor), categorizing expenses, tracking payment status, organizing receipts, generating financial reports, or building accounting and bookkeeping systems.

中文简介正在准备中。当前显示原文说明。

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.

中文简介正在准备中。当前显示原文说明。

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.

中文简介正在准备中。当前显示原文说明。

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 JavaScript.

中文简介正在准备中。当前显示原文说明。

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 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.

中文简介正在准备中。当前显示原文说明。