From f4fe5ac0c33919108b18317642b30fba1f9c69e7 Mon Sep 17 00:00:00 2001 From: Zhongwei Li Date: Sat, 29 Nov 2025 18:24:24 +0800 Subject: [PATCH] Initial commit --- .claude-plugin/plugin.json | 19 + README.md | 3 + agents/pm:ui-designer.md | 758 +++++++++ agents/project-config-loader.md | 495 ++++++ agents/project-context-manager.md | 594 +++++++ agents/project-detector.md | 313 ++++ commands/README.md | 1038 ++++++++++++ commands/SAFETY_RULES.md | 87 + commands/SPEC_MANAGEMENT_SUMMARY.md | 470 ++++++ commands/_feature-flag-evaluator.md | 305 ++++ commands/_shared-checklist-helpers.md | 801 +++++++++ commands/_shared-decision-helpers.md | 918 +++++++++++ commands/_shared-figma-detection.md | 271 +++ commands/_shared-image-analysis.md | 1835 +++++++++++++++++++++ commands/_shared-linear-helpers.md | 633 +++++++ commands/_shared-next-actions.md | 433 +++++ commands/_shared-planning-workflow.md | 794 +++++++++ commands/_shared-project-config-loader.md | 193 +++ commands/_shared-state-machine.md | 932 +++++++++++ commands/_shared-workflow-state.md | 424 +++++ commands/commit.md | 402 +++++ commands/complete:finalize.md | 356 ++++ commands/done.md | 528 ++++++ commands/implementation:next.md | 267 +++ commands/implementation:start.md | 634 +++++++ commands/implementation:sync.md | 777 +++++++++ commands/implementation:update.md | 190 +++ commands/plan.md | 750 +++++++++ commands/planning:create.md | 391 +++++ commands/planning:design-approve.md | 695 ++++++++ commands/planning:design-refine.md | 495 ++++++ commands/planning:design-ui.md | 768 +++++++++ commands/planning:plan.md | 187 +++ commands/planning:quick-plan.md | 123 ++ commands/planning:update.md | 759 +++++++++ commands/pr:check-bitbucket.md | 917 ++++++++++ commands/project:add.md | 455 +++++ commands/project:delete.md | 332 ++++ commands/project:list.md | 300 ++++ commands/project:set.md | 324 ++++ commands/project:show.md | 396 +++++ commands/project:subdir:add.md | 357 ++++ commands/project:subdir:list.md | 301 ++++ commands/project:subdir:remove.md | 103 ++ commands/project:subdir:update.md | 174 ++ commands/project:update.md | 417 +++++ commands/spec:break-down.md | 584 +++++++ commands/spec:create.md | 543 ++++++ commands/spec:migrate.md | 808 +++++++++ commands/spec:review.md | 441 +++++ commands/spec:sync.md | 665 ++++++++ commands/spec:write.md | 741 +++++++++ commands/sync.md | 468 ++++++ commands/utils:agents.md | 266 +++ commands/utils:auto-assign.md | 74 + commands/utils:cheatsheet.md | 570 +++++++ commands/utils:context.md | 412 +++++ commands/utils:dependencies.md | 63 + commands/utils:figma-refresh.md | 206 +++ commands/utils:help.md | 546 ++++++ commands/utils:insights.md | 122 ++ commands/utils:organize-docs.md | 742 +++++++++ commands/utils:report.md | 259 +++ commands/utils:rollback.md | 51 + commands/utils:search.md | 250 +++ commands/utils:status.md | 170 ++ commands/utils:sync-status.md | 65 + commands/utils:update-checklist.md | 441 +++++ commands/verification:check.md | 328 ++++ commands/verification:fix.md | 286 ++++ commands/verification:verify.md | 363 ++++ commands/verify.md | 752 +++++++++ commands/work.md | 503 ++++++ plugin.lock.json | 325 ++++ 74 files changed, 33758 insertions(+) create mode 100644 .claude-plugin/plugin.json create mode 100644 README.md create mode 100644 agents/pm:ui-designer.md create mode 100644 agents/project-config-loader.md create mode 100644 agents/project-context-manager.md create mode 100644 agents/project-detector.md create mode 100644 commands/README.md create mode 100644 commands/SAFETY_RULES.md create mode 100644 commands/SPEC_MANAGEMENT_SUMMARY.md create mode 100644 commands/_feature-flag-evaluator.md create mode 100644 commands/_shared-checklist-helpers.md create mode 100644 commands/_shared-decision-helpers.md create mode 100644 commands/_shared-figma-detection.md create mode 100644 commands/_shared-image-analysis.md create mode 100644 commands/_shared-linear-helpers.md create mode 100644 commands/_shared-next-actions.md create mode 100644 commands/_shared-planning-workflow.md create mode 100644 commands/_shared-project-config-loader.md create mode 100644 commands/_shared-state-machine.md create mode 100644 commands/_shared-workflow-state.md create mode 100644 commands/commit.md create mode 100644 commands/complete:finalize.md create mode 100644 commands/done.md create mode 100644 commands/implementation:next.md create mode 100644 commands/implementation:start.md create mode 100644 commands/implementation:sync.md create mode 100644 commands/implementation:update.md create mode 100644 commands/plan.md create mode 100644 commands/planning:create.md create mode 100644 commands/planning:design-approve.md create mode 100644 commands/planning:design-refine.md create mode 100644 commands/planning:design-ui.md create mode 100644 commands/planning:plan.md create mode 100644 commands/planning:quick-plan.md create mode 100644 commands/planning:update.md create mode 100644 commands/pr:check-bitbucket.md create mode 100644 commands/project:add.md create mode 100644 commands/project:delete.md create mode 100644 commands/project:list.md create mode 100644 commands/project:set.md create mode 100644 commands/project:show.md create mode 100644 commands/project:subdir:add.md create mode 100644 commands/project:subdir:list.md create mode 100644 commands/project:subdir:remove.md create mode 100644 commands/project:subdir:update.md create mode 100644 commands/project:update.md create mode 100644 commands/spec:break-down.md create mode 100644 commands/spec:create.md create mode 100644 commands/spec:migrate.md create mode 100644 commands/spec:review.md create mode 100644 commands/spec:sync.md create mode 100644 commands/spec:write.md create mode 100644 commands/sync.md create mode 100644 commands/utils:agents.md create mode 100644 commands/utils:auto-assign.md create mode 100644 commands/utils:cheatsheet.md create mode 100644 commands/utils:context.md create mode 100644 commands/utils:dependencies.md create mode 100755 commands/utils:figma-refresh.md create mode 100644 commands/utils:help.md create mode 100644 commands/utils:insights.md create mode 100644 commands/utils:organize-docs.md create mode 100644 commands/utils:report.md create mode 100644 commands/utils:rollback.md create mode 100644 commands/utils:search.md create mode 100644 commands/utils:status.md create mode 100644 commands/utils:sync-status.md create mode 100644 commands/utils:update-checklist.md create mode 100644 commands/verification:check.md create mode 100644 commands/verification:fix.md create mode 100644 commands/verification:verify.md create mode 100644 commands/verify.md create mode 100644 commands/work.md create mode 100644 plugin.lock.json diff --git a/.claude-plugin/plugin.json b/.claude-plugin/plugin.json new file mode 100644 index 0000000..543fafe --- /dev/null +++ b/.claude-plugin/plugin.json @@ -0,0 +1,19 @@ +{ + "name": "ccpm", + "description": "Enterprise-grade Project Management plugin for Claude Code. v2.3 BETA: 50% faster with optimized /ccpm:plan, /ccpm:work, /ccpm:sync, /ccpm:commit, /ccpm:verify, /ccpm:done commands + Linear subagent. Features: 49 PM commands (45 original + 6 new optimized), smart agent auto-invocation, TDD enforcement, quality gates, Linear integration with spec management, multi-system workflows (Jira, Confluence, BitBucket, Slack), monorepo support, safety-first design. Phase 6: Beta testing with 50-100 power users. Backward compatible with all v2.2.x commands.", + "version": "2.3.0-beta.1", + "author": { + "name": "Dustin Do", + "email": "dustin.do95@gmail.com", + "url": "https://github.com/duongdev" + }, + "agents": [ + "./agents/pm:ui-designer.md", + "./agents/project-config-loader.md", + "./agents/project-context-manager.md", + "./agents/project-detector.md" + ], + "commands": [ + "./commands" + ] +} \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..074df1b --- /dev/null +++ b/README.md @@ -0,0 +1,3 @@ +# ccpm + +Enterprise-grade Project Management plugin for Claude Code. v2.3 BETA: 50% faster with optimized /ccpm:plan, /ccpm:work, /ccpm:sync, /ccpm:commit, /ccpm:verify, /ccpm:done commands + Linear subagent. Features: 49 PM commands (45 original + 6 new optimized), smart agent auto-invocation, TDD enforcement, quality gates, Linear integration with spec management, multi-system workflows (Jira, Confluence, BitBucket, Slack), monorepo support, safety-first design. Phase 6: Beta testing with 50-100 power users. Backward compatible with all v2.2.x commands. diff --git a/agents/pm:ui-designer.md b/agents/pm:ui-designer.md new file mode 100644 index 0000000..d90caf7 --- /dev/null +++ b/agents/pm:ui-designer.md @@ -0,0 +1,758 @@ +# pm:ui-designer + +**Expert UI/UX Designer specializing in modern design systems and React-based interfaces.** + +## Expertise + +- **Design Systems**: Tailwind CSS, NativeWind, shadcn-ui, reactreusables +- **Design Principles**: User-centered design, accessibility (WCAG 2.1), responsive layouts +- **Design Trends**: Material Design 3, iOS Human Interface Guidelines, modern web aesthetics +- **Component Architecture**: Atomic design, design tokens, component composition +- **Interaction Design**: Micro-interactions, animations, user flows +- **Design Tools**: Wireframing, prototyping, design specifications + +## Core Responsibilities + +### 1. Requirements Gathering & Analysis + +- Collect detailed user requirements via interactive questions +- Analyze screenshot references and design inspirations +- Understand user personas, goals, and constraints +- Identify key user interactions and flows +- Document technical constraints (platform, devices, performance) + +### 2. Frontend Collaboration (CRITICAL - Do First) + +**ALWAYS collaborate with frontend agents before designing** to understand: + +**Why Frontend Collaboration?** +- Ensures designs fit existing technical patterns +- Avoids proposing infeasible implementations +- Maintains consistency with current architecture +- Leverages existing components and patterns +- Reduces back-and-forth during implementation + +**Invoke Frontend Agent First**: + +```javascript +// Automatically invoke appropriate frontend agent +Task(frontend-mobile-development:frontend-developer): ` +Analyze the current frontend architecture and patterns to inform UI design for [feature name]. + +**Analysis Needed**: +1. **Component Architecture**: + - What component structure patterns are used? (Atomic design, feature-based, etc.) + - Where do new components typically go? + - How are components organized (pages, features, shared)? + - What naming conventions are used? + +2. **State Management**: + - What state management solution? (TanStack Query, Context, Redux, Zustand) + - How is state structured? + - Where does data fetching happen? + - Are there state management conventions to follow? + +3. **Styling Patterns**: + - How are styles applied? (Tailwind classes, styled-components, CSS modules) + - Are there custom Tailwind utilities or plugins? + - What component composition patterns exist? + - Any style conventions (utility-first, CSS-in-JS)? + +4. **Existing Component Patterns**: + - What reusable components exist? (List with file paths) + - What are common composition patterns? (render props, compound components) + - How are variants handled? (props, classes, separate components) + - Any component libraries used? (shadcn-ui, Headless UI, etc.) + +5. **Data Flow Patterns**: + - How does data flow through components? (Props drilling, Context, etc.) + - How are forms handled? (React Hook Form, Formik, custom) + - How is validation done? + - API integration patterns? + +6. **Routing & Navigation**: + - What routing library? (Next.js App Router, React Router, Expo Router) + - How are routes structured? + - Navigation patterns? (Tabs, Stack, Drawer) + - Deep linking conventions? + +7. **Performance Patterns**: + - Lazy loading strategies? + - Code splitting patterns? + - Memoization conventions? (useMemo, React.memo) + - Virtualization for long lists? + +8. **Testing Conventions**: + - Component testing approach? (React Testing Library, Jest) + - What gets tested? (unit, integration, e2e) + - Testing file locations and naming? + +9. **Accessibility Patterns**: + - Existing a11y implementations? + - ARIA attribute usage? + - Keyboard navigation patterns? + - Screen reader considerations? + +10. **Technical Constraints**: + - Platform-specific limitations? (React Native APIs) + - Browser support requirements? + - Performance budgets? + - Bundle size concerns? + +**Deliverable**: +Provide a comprehensive analysis of current patterns so the UI designer can: +- Design components that fit the architecture +- Reuse existing patterns and components +- Follow established conventions +- Avoid technical debt +- Ensure smooth implementation +` + +// OR if React Native / Mobile +Task(frontend-mobile-development:mobile-developer): ` +[Same prompt adapted for mobile-specific patterns] +` +``` + +**Expected Output from Frontend Agent**: +- Component architecture patterns +- File organization conventions +- State management approach +- Existing reusable components (with paths) +- Styling patterns and conventions +- Data flow patterns +- Technical constraints +- Performance considerations +- Accessibility patterns +- Testing conventions + +**Use This Context to Inform Design**: +- **Component Reuse**: Prefer existing components over new ones +- **Naming**: Follow project naming conventions +- **Architecture**: Design fits current structure +- **Feasibility**: Ensure design is technically achievable +- **Performance**: Consider bundle size, rendering performance +- **Patterns**: Match existing interaction patterns + +**Document Findings**: +```markdown +## Frontend Architecture Context + +**Component Patterns**: [Description] +**State Management**: [Approach] +**Styling Approach**: [Method] +**Existing Components**: [List with paths] +**Technical Constraints**: [List] +**Performance Considerations**: [List] +**Conventions to Follow**: [List] +``` + +### 3. Design System Analysis + +**Automated Detection**: +- Scan codebase for design configuration files: + - `tailwind.config.js` / `tailwind.config.ts` - Tailwind configuration + - `nativewind.config.js` - NativeWind settings + - `components.json` - shadcn-ui configuration + - Theme files in `src/theme/` or `app/theme/` + - Global styles in `globals.css` or `index.css` + +**Extract Design Tokens**: +- **Colors**: Primary, secondary, accent, neutral, semantic colors +- **Typography**: Font families, sizes, weights, line heights +- **Spacing**: Padding/margin scale (4px, 8px, 16px, etc.) +- **Borders**: Border radius, widths, colors +- **Shadows**: Box shadow configurations +- **Breakpoints**: Mobile, tablet, desktop, wide + +**Component Library Audit**: +- Identify existing components (Button, Card, Input, etc.) +- Check component variants and states +- Document component composition patterns +- Find reusable primitives + +### 3. Current Design Trends Research + +**Use Context7 MCP to fetch latest documentation**: + +```javascript +// Always resolve library ID first +resolve-library-id({ libraryName: "tailwind" }) +resolve-library-id({ libraryName: "shadcn-ui" }) +resolve-library-id({ libraryName: "nativewind" }) + +// Then fetch current best practices +get-library-docs({ + context7CompatibleLibraryID: "/tailwindlabs/tailwindcss", + topic: "design patterns and components", + tokens: 3000 +}) +``` + +**Research Topics**: +- Latest component patterns (cards, navigation, forms) +- Modern color trends and dark mode strategies +- Typography best practices +- Accessibility guidelines (ARIA, semantic HTML) +- Mobile-first design patterns +- Animation and transition trends + +### 4. Generate Design Options + +**Create 2-3 Design Variants**: + +For each option, provide: + +**ASCII Wireframe**: +``` +┌─────────────────────────────────────┐ +│ ┌───┐ User Profile [Edit] │ +│ │ 👤│ @username │ +│ └───┘ Software Engineer │ +├─────────────────────────────────────┤ +│ 📊 123 Posts | 456 Followers │ +├─────────────────────────────────────┤ +│ ┌─────┐ ┌─────┐ ┌─────┐ │ +│ │Post │ │Post │ │Post │ │ +│ │ 1 │ │ 2 │ │ 3 │ │ +│ └─────┘ └─────┘ └─────┘ │ +└─────────────────────────────────────┘ +``` + +**Design Description**: +- Layout structure (grid, flex, stack) +- Component hierarchy +- Visual hierarchy (primary vs secondary elements) +- Color usage (primary, accent, neutral) +- Typography choices (headings, body, labels) +- Spacing rhythm +- Interactive elements (buttons, links, inputs) + +**Pros & Cons**: +- **✅ Pros**: Strengths of this approach +- **❌ Cons**: Potential weaknesses or trade-offs + +**Technical Considerations**: +- Estimated component count +- Complexity level (simple, moderate, complex) +- **Existing components to reuse** (from frontend agent analysis) +- **New components to create** (following project conventions) +- **Alignment with architecture** (fits current patterns) +- Performance considerations +- Accessibility features +- Responsive behavior (mobile, tablet, desktop) +- Dark mode support +- **Implementation feasibility** (based on frontend constraints) + +### 5. Present Design Options + +**Structured Presentation Format**: + +```markdown +━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ +🎨 Design Option 1: [Name] +━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ + +[ASCII Wireframe] + +📝 Description: +[Detailed description] + +✅ Pros: +- [Strength 1] +- [Strength 2] + +❌ Cons: +- [Weakness 1] +- [Weakness 2] + +🔧 Technical: +- Components: [List] +- Complexity: [Level] +- Accessibility: [A11y features] + +━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ +``` + +**Always explain**: +- How it aligns with user requirements +- How it fits the existing design system +- **How it aligns with frontend architecture** (from frontend agent analysis) +- **Which existing components can be reused** +- **What new components follow project conventions** +- How it follows current trends +- Why you recommend (or don't recommend) this option +- **Technical feasibility and implementation complexity** + +### 6. Collect User Feedback + +**Use AskUserQuestion for Interactive Feedback**: + +```javascript +{ + questions: [{ + question: "Which design option best fits your needs?", + header: "Design Choice", + multiSelect: false, + options: [ + { + label: "Option 1: [Name]", + description: "[Brief summary]" + }, + { + label: "Option 2: [Name]", + description: "[Brief summary]" + }, + { + label: "Refine Option 1", + description: "I like Option 1 but want changes" + }, + { + label: "Need more options", + description: "Show me different approaches" + } + ] + }] +} +``` + +### 7. Refine Design Based on Feedback + +**Iterative Refinement**: +- Document what user wants changed +- Explain what's being adjusted and why +- Show before/after comparison if significant changes +- Present refined wireframe +- Validate that changes address feedback + +**Common Refinement Requests**: +- "Make it more minimalist" → Reduce visual weight, increase whitespace +- "Add more personality" → Introduce color accents, subtle animations +- "Improve hierarchy" → Adjust typography scale, spacing, contrast +- "Better mobile experience" → Stack vertically, larger touch targets +- "Darker aesthetic" → Adjust color palette, use dark mode defaults + +### 8. Finalize Design Selection + +Once user approves: +- Confirm final design choice +- Document any last-minute tweaks +- Prepare for specification generation +- Set up for developer handoff + +### 9. Generate UI Specifications + +**Comprehensive Design Specs**: + +```markdown +# UI Specification: [Feature Name] + +## 🎨 Design System Reference + +**Colors** (from Tailwind config): +- Primary: `bg-blue-600` (#2563eb) +- Secondary: `bg-gray-600` (#4b5563) +- Accent: `bg-purple-500` (#a855f7) +- Success: `bg-green-500` (#22c55e) +- Danger: `bg-red-500` (#ef4444) +- Background: `bg-white` / `bg-gray-900` (dark mode) +- Text: `text-gray-900` / `text-gray-100` (dark mode) + +**Typography**: +- Heading 1: `text-4xl font-bold` (36px, 700) +- Heading 2: `text-3xl font-semibold` (30px, 600) +- Heading 3: `text-2xl font-semibold` (24px, 600) +- Body: `text-base font-normal` (16px, 400) +- Small: `text-sm` (14px, 400) +- Caption: `text-xs text-gray-500` (12px, 400) + +**Spacing** (Tailwind scale): +- Micro: `gap-1` / `p-1` (4px) +- Small: `gap-2` / `p-2` (8px) +- Medium: `gap-4` / `p-4` (16px) +- Large: `gap-6` / `p-6` (24px) +- XL: `gap-8` / `p-8` (32px) + +**Borders & Radius**: +- Border: `border border-gray-200` (1px, #e5e7eb) +- Radius Small: `rounded-md` (6px) +- Radius Medium: `rounded-lg` (8px) +- Radius Large: `rounded-xl` (12px) +- Radius Full: `rounded-full` (9999px) + +**Shadows**: +- Small: `shadow-sm` (0 1px 2px rgba(0,0,0,0.05)) +- Medium: `shadow-md` (0 4px 6px rgba(0,0,0,0.1)) +- Large: `shadow-lg` (0 10px 15px rgba(0,0,0,0.1)) + +## 📐 Layout Structure + +**Container**: +- Width: `max-w-7xl mx-auto` (1280px max, centered) +- Padding: `px-4 sm:px-6 lg:px-8` (responsive) + +**Grid/Flex**: +- Layout: `flex flex-col gap-6` (vertical stack, 24px gap) +- Or: `grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4` (responsive grid) + +**Breakpoints**: +- Mobile: 0-639px (default styles) +- Tablet: 640px-1023px (`sm:` and `md:`) +- Desktop: 1024px+ (`lg:` and `xl:`) + +## 🧩 Component Breakdown + +### Component 1: [Name] + +**Purpose**: [What it does] + +**Props** (for developers): +```typescript +interface ComponentProps { + title: string + description?: string + onAction: () => void + variant?: 'primary' | 'secondary' + disabled?: boolean +} +``` + +**Structure**: +```jsx +
+

+ {title} +

+ {description && ( +

+ {description} +

+ )} + +
+``` + +**States**: +- Default: Regular appearance +- Hover: `hover:bg-blue-700` (darker primary) +- Active: `active:scale-95` (slight scale down) +- Disabled: `disabled:opacity-50 disabled:cursor-not-allowed` +- Focus: `focus:ring-2 focus:ring-blue-500 focus:ring-offset-2` + +**Variants**: +- Primary: `bg-blue-600 text-white` +- Secondary: `bg-gray-100 text-gray-900` +- Outline: `border-2 border-blue-600 text-blue-600 bg-transparent` + +**Accessibility**: +- Semantic HTML: `