figma-integration
Figma Integration Skill
Transform Figma designs into implementation-ready specifications with CCPM's design-to-code workflow.
When This Skill Activates
This skill auto-activates when:
- User mentions "Figma" or "design" in implementation context
- User asks about "component", "design system", or "design tokens"
- Running
/ccpm:plan(starts design process) - Running
/ccpm:plan(refine designs) - Running
/ccpm:plan(generate specs) - Running
/ccpm:figma-refresh(refresh cached designs) - User mentions "design-to-code", "design file", or "Figma component"
The Figma Workflow
Phase 1: Design Phase
More from duongdev/ccpm
ccpm-code-review
Enforces quality verification gates with four-step validation (tests pass, build succeeds, checklist complete, no blockers) before task completion, PR creation, or status updates. Auto-activates when user says "done", "complete", "finished", "ready to merge", or runs /ccpm:verify or /ccpm:done commands. Provides systematic verification workflow that prevents false completion claims and ensures production readiness. Blocks external system writes (Jira, Slack) until evidence collected. Integrates with external-system-safety for confirmation workflow. When verification fails, suggests /ccpm:verify to debug issues systematically.
9hook-optimization
Provides guidance on optimizing CCPM hooks for performance and token efficiency. Auto-activates when developing, debugging, or benchmarking hooks. Includes caching strategies, token budgets, performance benchmarking, and best practices for maintaining sub-5-second hook execution times.
9ccpm-debugging
Systematic debugging with defense-in-depth approach (symptoms → immediate cause → root cause → systemic issues → prevention). Auto-activates when user mentions "error", "failing", "broken", "debug", "bug", "issue" or when /ccpm:verify runs. Uses Observe → Hypothesize → Test → Confirm → Fix → Verify → Document workflow. Updates Linear with findings and automatically logs blockers that require external fixes. Traces root causes instead of patching symptoms. Integrates with ccpm-code-review to verify fixes pass all gates before marking complete. Suggests binary search for intermittent issues and five-whys analysis for complex problems.
8workflow-state-tracking
Tracks and visualizes CCPM workflow state transitions (IDEA → PLANNED → IMPLEMENTING → VERIFYING → VERIFIED → COMPLETE). Prevents invalid state transitions and suggests appropriate next actions. Auto-activates when users ask about task status, "where am I in the workflow", "what should I do next", or "can I do this now".
8planning-strategy-guide
Guides intelligent planning strategies with automatic phase detection and complexity assessment. Auto-activates when users mention epic breakdown, feature decomposition, scope estimation, dependency analysis, risk identification, or ask "how do I plan this complex task", "break down this feature", "what's the scope", "estimate effort", "identify dependencies", or "planning strategy". Provides interactive planning mode with 6 planning phases (complexity assessment, scope definition, dependency analysis, risk identification, task breakdown, effort estimation). Works with sequential-thinking for complex decomposition, docs-seeker for research, pm-workflow-guide for command suggestions, and linear-subagent-guide for Linear integration.
7natural-workflow
Guide users through CCPM's streamlined 6-command workflow (plan/work/sync/commit/verify/done). Auto-activates when users ask about starting tasks, committing changes, or completing work. Provides step-by-step guidance for the complete development lifecycle.
6