一键在 Manus 中运行任何 Skill

component-splitter

星标0

分支0

更新时间2026年2月7日 10:02

Specialized agent for systematic reduction of oversized components (>300 lines) into focused, composable modules. Use this skill when splitting large React components, extracting custom hooks for complex state management or side effects, implementing component composition patterns, or maintaining API compatibility during refactoring.

安装

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

在 Manus 中运行

来源

shynlee04

shynlee04/idumb-v2

打开 GitHub 仓库查看创作者相关仓库

下载

在 Manus 中运行

Component Splitter

This Skill provides Claude Code with specific guidance for normalizing component size and extracting reusable hooks.

When to use this skill

When a component exceeds 300 lines
When extracting complex state logic into custom hooks
When separating concerns (UI, state, business logic)
When implementing component composition patterns
When reducing component complexity through decomposition
When creating reusable sub-components
When maintaining API stability during refactoring

Instructions

For detailed implementation guidance, refer to: Component Splitter Agent

Workflow Integration

This skill is part of the normalize-components workflow:

Component Analysis: Identify composition opportunities, calculate complexity metrics
Hook Extraction: Extract custom hooks for state, effects, event handlers
Component Decomposition: Create modular sub-components with composition patterns
Validation & Testing: Validate functionality preserved, test composition

Quality Standards

Code Quality

✅ Max 300 lines per component (excluding imports/comments)
✅ Max 5 parameters per function
✅ Max 3 nesting levels
✅ Single responsibility principle
✅ Clear composition patterns

Backward Compatibility

✅ Props interface stable
✅ Component behavior preserved
✅ Styling maintained
✅ Event handlers work identically

Example Usage

"Split src/presentation/components/knowledge/KnowledgePage.tsx (658 lines) using the normalize-components workflow"

This will:

Analyze the component for composition opportunities
Extract custom hooks for complex logic (e.g., useKnowledgeSource, useRAGPipeline)
Create sub-components (e.g., SourceList, DocumentPreview, EmbeddingProgress)
Maintain API compatibility (same props, same behavior)
Validate with tests and TypeScript checking

Validation Commands

# TypeScript check
pnpm tsc --noEmit --incremental

# Test suite
pnpm test

# Component size verification
find src/presentation/components -name "*.tsx" -exec wc -l {} \; | awk '$1 > 300 {print $2, $1, "lines"}'

Success Criteria

✅ All components ≤300 lines
✅ Zero TypeScript errors
✅ 100% test pass rate
✅ Props interface stable
✅ Component behavior preserved
✅ Custom hooks tested independently

同仓库更多 Skills

同仓库

agent-browser

shynlee04/idumb-v2

Browser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking screenshots, extracting data, testing web apps, or automating any browser task. Triggers include requests to "open a website", "fill out a form", "click a button", "take a screenshot", "scrape data from a page", "test this web app", "login to a site", "automate browser actions", or any task requiring programmatic web interaction.

2026-02-070

gap-analysis

shynlee04/idumb-v2

Systematically identify what's missing, unknown, or needs investigation before making changes or decisions. Use proactively when proposing features, implementing changes, or making technical decisions to ensure all critical areas are covered. This skill catches overlooked dependencies, edge cases, and integration points before they become problems. Examples: - "Implement user authentication" → trigger gap analysis (what's the current auth system?) - "Add caching to API" → trigger gap analysis (what caching infrastructure exists?) - "Migrate to TypeScript" → trigger gap analysis (what's the build pipeline?) - "Refactor this module" → trigger gap analysis (what depends on this module?) - "Add new API endpoint" → trigger gap analysis (what endpoints exist, what patterns?)

2026-02-070

intent-clarification

shynlee04/idumb-v2

Detect ambiguous or underspecified research requests and guide through structured clarification questions before executing any research. Use proactively when user requests are vague, lack specificity, missing context, or have unclear goals. This skill prevents wasted research by ensuring intent is crystal clear before any web searches, file reads, or data gathering. Examples: - "Research the codebase" → ❌ Too vague, trigger clarification - "Why is this slow?" → ❌ Missing context (what is "this"?), trigger clarification - "Add a feature" → ❌ Not research, this is implementation - "Investigate authentication flow" → ❌ What specifically about it? Trigger clarification - "Compare React and Vue" → ✅ Specific enough, but still validate dimensions

2026-02-070

multi-aspect-assessment

shynlee04/idumb-v2

Evaluate requests, proposals, or decisions from multiple dimensions (technical, business, UX, security, performance, maintainability, etc.) to ensure holistic understanding before proceeding. Use proactively when making technical decisions, choosing solutions, or proposing changes. This skill prevents single-minded thinking and uncovers trade-offs, risks, and opportunities across all relevant aspects. Examples: - "Use Redis for caching" → assess multiple aspects (performance, cost, complexity, ops) - "Add AI to our app" → assess aspects (technical feasibility, user experience, data privacy) - "Refactor to microservices" → assess aspects (benefits, costs, migration complexity, team readiness) - "Implement authentication" → assess aspects (security, UX, integration effort, maintenance) - "Switch to React 19" → assess aspects (benefits, migration cost, breaking changes, learning curve)

2026-02-070

opencode-primitive-selector

shynlee04/idumb-v2

Choose the right OpenCode primitive (Command, Skill, Tool, Prompt, CustomTool, Plugin hook) for a given task or workflow. Use proactively when deciding which OpenCode capability to use, or when trying to understand what's available. This skill maps research and development needs to appropriate OpenCode mechanisms, ensuring optimal use of the platform's capabilities. Examples: - "How do I search the codebase?" → select tool (read/grep) - "I need a reusable workflow for feature development" → select command - "How do I intercept file writes?" → select plugin hook - "What primitive should I use for systematic debugging?" → select skill - "I need a custom tool for X" → select CustomTool (if innate tools insufficient)

2026-02-070

research-workflow-planner

shynlee04/idumb-v2

Create structured, executable research plans with clear phases, checkpoints, and validation criteria. Use proactively when research intent is clear but execution plan is missing. This skill transforms research goals into actionable workflows with defined deliverables, time estimates, and success metrics, ensuring research is systematic and produces useful outputs. Examples: - "Research how to add OAuth" (intent clear, need plan) → trigger workflow planner - "Investigate performance bottlenecks" (intent clear, need plan) → trigger workflow planner - "Analyze codebase architecture" (intent clear, need plan) → trigger workflow planner - "Find best practices for X" (intent clear, need plan) → trigger workflow planner - "Compare technology options" (intent clear, need plan) → trigger workflow planner

2026-02-070

name	Component Splitter
description	Specialized agent for systematic reduction of oversized components (>300 lines) into focused, composable modules. Use this skill when splitting large React components, extracting custom hooks for complex state management or side effects, implementing component composition patterns, or maintaining API compatibility during refactoring.

Component Splitter

This Skill provides Claude Code with specific guidance for normalizing component size and extracting reusable hooks.

When to use this skill

When a component exceeds 300 lines
When extracting complex state logic into custom hooks
When separating concerns (UI, state, business logic)
When implementing component composition patterns
When reducing component complexity through decomposition
When creating reusable sub-components
When maintaining API stability during refactoring

Instructions

For detailed implementation guidance, refer to: Component Splitter Agent

Workflow Integration

This skill is part of the normalize-components workflow:

Component Analysis: Identify composition opportunities, calculate complexity metrics
Hook Extraction: Extract custom hooks for state, effects, event handlers
Component Decomposition: Create modular sub-components with composition patterns
Validation & Testing: Validate functionality preserved, test composition

Quality Standards

Code Quality

✅ Max 300 lines per component (excluding imports/comments)
✅ Max 5 parameters per function
✅ Max 3 nesting levels
✅ Single responsibility principle
✅ Clear composition patterns

Backward Compatibility

✅ Props interface stable
✅ Component behavior preserved
✅ Styling maintained
✅ Event handlers work identically

Example Usage

"Split src/presentation/components/knowledge/KnowledgePage.tsx (658 lines) using the normalize-components workflow"

This will:

Analyze the component for composition opportunities
Extract custom hooks for complex logic (e.g., useKnowledgeSource, useRAGPipeline)
Create sub-components (e.g., SourceList, DocumentPreview, EmbeddingProgress)
Maintain API compatibility (same props, same behavior)
Validate with tests and TypeScript checking

Validation Commands

# TypeScript check
pnpm tsc --noEmit --incremental

# Test suite
pnpm test

# Component size verification
find src/presentation/components -name "*.tsx" -exec wc -l {} \; | awk '$1 > 300 {print $2, $1, "lines"}'

Success Criteria

✅ All components ≤300 lines
✅ Zero TypeScript errors
✅ 100% test pass rate
✅ Props interface stable
✅ Component behavior preserved
✅ Custom hooks tested independently