refactor: enhance Fumadocs pattern with tabs troubleshooting guide

- Add global component availability note for Tabs/Tab components
- Include common issue patterns and solutions for tab value matching
- Expand CLAUDE.md with cc-self-refer pattern system documentation
- Add comprehensive pattern list table for intelligent context matching

Author: mym0404

.claude/patterns/018-fumadocs-usage.md

@@ -86,6 +86,9 @@ import { Apple, Smartphone, Zap } from 'lucide-react'
 ```
 
 ### Tabs
+
+**Note**: `<Tabs>` and `<Tab>` components are available globally in Fumadocs MDX - no import required.
+
 ```mdx
 <Tabs items={['React', 'Vue', 'Svelte']}>
   <Tab value="React">
@@ -109,6 +112,23 @@ import { Apple, Smartphone, Zap } from 'lucide-react'
   </Tab>
 </Tabs>
 
+**IMPORTANT**: The `value` prop of `<Tab>` must exactly match the items in the `items` array of `<Tabs>`. Case-sensitive matching is required.
+
+**Common Issue**: Using different values than items array will cause tabs content not to display:
+```mdx
+<!-- ❌ Wrong - Tab values don't match items -->
+<Tabs items={['Camera', 'Region']}>
+  <Tab value="Basic">Content 1</Tab>  <!-- Wrong value -->
+  <Tab value="Basic">Content 2</Tab>  <!-- Wrong + duplicate value -->
+</Tabs>
+
+<!-- ✅ Correct - Tab values match items exactly -->
+<Tabs items={['Camera', 'Region']}>
+  <Tab value="Camera">Content 1</Tab>
+  <Tab value="Region">Content 2</Tab>
+</Tabs>
+```
+
 <Tabs groupId="lang" items={['JS', 'TS']} persist>
   <Tab value="JS">JavaScript code</Tab>
   <Tab value="TS">TypeScript code</Tab>

CLAUDE.md

@@ -162,3 +162,89 @@ To test the library, you need to configure API keys:
 - `pnpm pod` - Install iOS dependencies via CocoaPods
 - `pnpm pod:update` - Update iOS dependencies via CocoaPods
 
+# Self Reference Context Management System (cc-self-refer cli and context storage project sturcture)
+
+This project uses `cc-self-refer` for intelligent self-reference capabilities.
+Claude Code agents should use these CLI commands to access and manage project context automatically:
+
+## Pattern List Table
+
+[PATTERN LIST]
+
+| ID | Name | Language | Keywords | Explanation |
+|----|------|----------|----------|-------------|
+| 001 | Fabric Native Component Definition | typescript | fabric, native, component, react-native, codegen | Defines React Native Fabric component using codegenNativeComponent with TypeScript props interface |
+| 002 | React Native Codegen Commands | typescript | codegen, native, commands, react-native, async, sync | Defines imperative native methods using codegenNativeCommands for async/sync operations |
+| 003 | TurboModule Specification | typescript | turbo-module, native, module, react-native, type-safety | Defines TurboModule interface for native module access with type safety |
+| 004 | iOS Fabric Component Implementation | objc | ios, fabric, component, objective-c, react-native | iOS Fabric component implementation extending RCTViewComponentView with props handling |
+| 005 | iOS Command Handling | objc | ios, command, handling, objective-c, fabric | iOS command handling implementation for processing imperative native commands |
+| 006 | iOS Event Emission | objc | ios, event, emission, objective-c, fabric | iOS event emission using generated event emitter for sending events to JavaScript |
+| 007 | iOS TurboModule Implementation | objc | ios, turbo-module, objective-c, bridge, react-native | iOS TurboModule implementation with conditional Bridge/TurboModule support |
+| 008 | Android ViewManager with Codegen | kotlin | android, view-manager, kotlin, codegen, react-native | Android ViewManager implementation using codegen delegate pattern |
+| 009 | Android Command Handling | kotlin | android, command, handling, kotlin, react-native | Android command handling using receiveCommand method with command ID matching |
+| 010 | Android Event Emission | kotlin | android, event, emission, kotlin, react-native | Android event emission using ReactContext and RCTEventEmitter |
+| 011 | Android Package Registration | kotlin | android, package, registration, kotlin, react-native | Android ReactPackage registration for native modules and ViewManagers |
+| 012 | JSDoc Documentation | typescript | jsdoc, documentation, typescript, comments | JSDoc documentation patterns for TypeScript components and methods |
+| 013 | Native Color Parsing and Validation Pattern with TypeScript | typescript | color, parsing, validation, typescript, react-native | TypeScript color prop handling with processColor and native color utilities |
+| 014 | Android Native Utilities | kotlin | android, utilities, kotlin, validation, conversion | Android native utility functions for event emission, prop validation, and conversions |
+| 015 | iOS Native Utilities | objc | ios, utilities, objective-c, validation, conversion | iOS native utility functions for color conversion, validation, and object creation |
+| 016 | iOS Overlay Integration Pattern | objc | ios, overlay, integration, objective-c, naver-maps | iOS overlay integration pattern for Naver Maps SDK |
+| 018 | Fumadocs Usage | mdx | fumadocs, mdx, documentation, components | Concise usage patterns for Fumadocs components and features in MDX |
+
+[PATTERN LIST END]
+
+## Keyword Detection and Command Intent Recognition
+
+**When users use natural language prompts, agents should READ the corresponding command documentation and EXECUTE the instructions within:**
+
+**CRITICAL: Always monitor for these keywords in user prompts regardless of language:**
+- **pattern**
+
+When these keywords appear in user prompts, determine if the user intends to use the corresponding cc-self-refer commands below.
+
+**Response Format for Self-Reference Actions**: If you determine that the user's natural language prompt requires using cc-self-refer functionality, prefix your response with `Pattern Refering... ♦️` to indicate self-reference action execution.
+
+## Pattern Commands
+
+### Pattern Matching Intelligence
+**CRITICAL**: The CLAUDE.md context includes a [PATTERN LIST] table already with columns: ID, Name, Language, Keywords, Explanation. You should know what I mean.
+
+**When processing ANY user request**, check if the request matches patterns in the [PATTERN LIST] by analyzing:
+- **Name**: Direct pattern name matches
+- **Keywords**: Related terms and concepts
+- **Explanation**: Functional descriptions and use cases
+- **Language**: Technology stack alignment
+
+### Pattern Usage Workflows
+
+**Explicit Pattern Requests:**
+- "use pattern" / "apply pattern X" / "use existing patterns"
+- "find pattern for X" / "search patterns"
+- "use pattern #5" / "apply pattern 005"
+
+**Implicit Pattern Matching:**
+When user requests involve coding tasks that align with existing pattern Names, Keywords, or Explanations:
+
+1. **Identify Match**: Compare user's request against the [PATTERN LIST] 
+2. **Retrieve Pattern**: Use `npx -y cc-self-refer pattern view <id>` for matching patterns
+3. **Apply Pattern**: Implement user's request using the pattern's principles and structure
+4. **Inform User**: Use this format to indicate pattern usage:
+   ```
+   Pattern Refering... ♦️ 
+   Used Patterns: #002 api-response, #003 error-handling
+   ```
+
+**Example Matching Logic:**
+- "implement todo api" → Extract keywords: "api", "todo" → Match patterns containing these terms
+- "create table component" → Extract keywords: "table", "component" → Match patterns with "table", "markdown", "component"
+- "setup testing" → Extract keywords: "test", "setup" → Match patterns with "test", "example"
+- "build React form" → Extract keywords: "react", "form" → Match patterns with "react", "form", "validation"
+- "add authentication" → Extract keywords: "auth", "authentication" → Match patterns with "auth", "login", "security"
+- "database connection" → Extract keywords: "database", "connection" → Match patterns with "db", "connection", "orm"
+- "error handling" → Extract keywords: "error", "handling" → Match patterns with "error", "exception", "validation"
+
+**IMPORTANT Agent Behavior:**
+1. **Scan** [PATTERN LIST] for relevant matches during any coding request
+2. **Retrieve** matching patterns using `npx -y cc-self-refer pattern view <id>`
+3. **Apply** pattern principles to implement user's actual requirements
+