mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-02-11 02:33:51 +08:00
f14418603a
重构 ccw cli 模板系统： - 新增 template-discovery.ts 模块，支持扁平化模板自动发现 - 添加 --rule <template> 选项，自动加载 protocol 和 template - 模板目录从嵌套结构 (prompts/category/file.txt) 迁移到扁平结构 (prompts/category-function.txt) - 更新所有 agent/command 文件，使用 $PROTO $TMPL 环境变量替代 $(cat ...) 模式 - 支持模糊匹配：--rule 02-review-architecture 可匹配 analysis-review-architecture.txt 其他更新： - Dashboard: 添加 Claude Manager 和 Issue Manager 页面 - Codex-lens: 增强 chain_search 和 clustering 模块 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
123 lines
2.1 KiB
Plaintext
123 lines
2.1 KiB
Plaintext
# Rule Template: Component Rules (Frontend/Fullstack Only)
|
|
|
|
## Variables
|
|
- {TECH_STACK_NAME}: Tech stack display name
|
|
- {FILE_EXT}: File extension pattern
|
|
- {UI_FRAMEWORK}: UI framework (React, Vue, etc)
|
|
|
|
## Output Format
|
|
|
|
```markdown
|
|
---
|
|
paths:
|
|
- "**/components/**/*.{FILE_EXT}"
|
|
- "**/ui/**/*.{FILE_EXT}"
|
|
- "**/views/**/*.{FILE_EXT}"
|
|
- "**/pages/**/*.{FILE_EXT}"
|
|
---
|
|
|
|
# {TECH_STACK_NAME} Component Rules
|
|
|
|
## Component Structure
|
|
|
|
[Organization patterns from Exa research]
|
|
|
|
### File Organization
|
|
```
|
|
components/
|
|
├── common/ # Shared components
|
|
├── features/ # Feature-specific
|
|
├── layout/ # Layout components
|
|
└── ui/ # Base UI elements
|
|
```
|
|
|
|
### Component Template
|
|
```{lang}
|
|
// Standard component structure
|
|
```
|
|
|
|
### Naming Conventions
|
|
- PascalCase for components
|
|
- Descriptive names
|
|
- Prefix conventions (if any)
|
|
|
|
## Props & State
|
|
|
|
[State management guidelines]
|
|
|
|
### Props Definition
|
|
```{lang}
|
|
// Props type/interface example
|
|
```
|
|
|
|
### Props Best Practices
|
|
- Required vs optional
|
|
- Default values
|
|
- Prop validation
|
|
- Prop naming
|
|
|
|
### Local State
|
|
- When to use local state
|
|
- State initialization
|
|
- State updates
|
|
|
|
### Shared State
|
|
- State management approach
|
|
- Context usage
|
|
- Store patterns
|
|
|
|
## Styling
|
|
|
|
[CSS/styling conventions]
|
|
|
|
### Approach
|
|
- [CSS Modules/Styled Components/Tailwind/etc]
|
|
|
|
### Style Organization
|
|
```{lang}
|
|
// Style example
|
|
```
|
|
|
|
### Naming Conventions
|
|
- Class naming (BEM, etc)
|
|
- CSS variable usage
|
|
- Theme integration
|
|
|
|
## Accessibility
|
|
|
|
[A11y requirements]
|
|
|
|
### Essential Requirements
|
|
- Semantic HTML
|
|
- ARIA labels
|
|
- Keyboard navigation
|
|
- Focus management
|
|
|
|
### Testing A11y
|
|
- Automated checks
|
|
- Manual testing
|
|
- Screen reader testing
|
|
|
|
## Performance
|
|
|
|
[Performance guidelines]
|
|
|
|
### Optimization Patterns
|
|
- Memoization
|
|
- Lazy loading
|
|
- Code splitting
|
|
- Virtual lists
|
|
|
|
### Avoiding Re-renders
|
|
- When to memoize
|
|
- Callback optimization
|
|
- State structure
|
|
```
|
|
|
|
## Content Guidelines
|
|
|
|
- Focus on component-specific patterns
|
|
- Include framework-specific examples
|
|
- Cover accessibility requirements
|
|
- Address performance considerations
|