cpq-builder
Configure-Price-Quote (CPQ) vertical skill for the Customware SPA. Defines patterns, minimum standards, layout patterns, lifecycle indicators, product configurator patterns, business rule templates, and mapping rules for transforming a DOMAIN.md into a CPQ-shaped application. Targeted at SMB customers (5-50 employees) migrating from spreadsheets and email-based quoting workflows. The prototype must feel dramatically better than Excel without feeling enterprise-overcomplicated. Patterns are defaults, not mandates — adapt them when the actual workflow deviates. Trigger signals: quoting, pricing, product configuration, calculators, guided intake forms, assessment tools, estimate builders, proposal workflows, eligibility checkers, any "fill in fields → calculate → produce a deliverable" pattern.
What this skill does
# CPQ Builder Skill ## What This Skill Does This skill defines patterns for building **Configure-Price-Quote**-shaped tools — systems where users configure inputs, the system applies rules to calculate results, and the output is a formatted deliverable that may require review/approval. CPQ is NOT limited to product pricing. The same structural pattern covers: | Domain | "Configure" | "Calculate" | "Output" | |---|---|---|---| | **Equipment sales** | Select product, pick options | Apply markup, calculate totals | Sales quote PDF | | **Legal calculators** | Enter case details (income, duration) | Apply guideline formulas | Summary report with estimates | | **Insurance estimators** | Enter coverage details | Apply rate tables | Premium estimate document | | **Loan qualification** | Enter financial details | Apply lending criteria | Qualification letter | | **Benefits eligibility** | Enter personal details | Apply eligibility rules | Benefits summary | | **Service proposals** | Select services, set scope | Apply labor rates | Service proposal | The builder reads this skill, reads the DOMAIN.md for the specific domain terminology and rules, and generates a working prototype. The DOMAIN.md determines whether the tool is about crane quotes or divorce calculations; this skill provides the structural pattern that fits. **The patterns in this skill are defaults, not mandates.** When the actual workflow deviates from the canonical CPQ shape — has fewer stages, has a different layout, produces a different output — adapt the patterns. Each major section names the deviations explicitly. --- ## Customer Context Customware's CPQ customers span many domains: industrial equipment dealers, custom apparel and signage shops, food/beverage wholesalers, professional services firms (legal, consulting, design), IT and managed service providers, construction and trades businesses, manufacturers, distributors. The CPQ pattern fits all of them. **Examples in this skill rotate across multiple domains** — industrial equipment, services, consumer goods, software, custom goods. This is deliberate. The patterns are domain-agnostic; the examples illustrate by analogy. When applying this skill, ignore the specific domain in any given example and pull out the structural pattern. Your DOMAIN.md determines the specific vocabulary, products, rules, and roles for the build. A "single girder crane requires a motor" rule has the same shape as "custom hoodie requires a printing method" or "managed service contract requires a tier" or "dog treat order requires a packaging size." The rule is "parent product requires child component selection." Build that pattern; let DOMAIN.md fill in the words. ### The customer profile Customware's CPQ customers are typically **SMB businesses (5-50 employees)** going through growing pains. They are NOT migrating from another CPQ system. They are migrating from: - Excel spreadsheets that have grown unwieldy (multiple tabs, copy-paste errors, broken formulas) - Word document quote templates that get manually edited per customer - Email-based approval workflows where the boss approves a quote in a reply-all thread - Tribal knowledge about which products require which accessories, which lives in the senior rep's head - Hand-keyed pricing where margin gets eroded through inconsistent discounting The prototype's job is to feel **dramatically better than spreadsheets** without feeling **enterprise-overcomplicated**. A small team that's been quoting in Excel for 5 years should look at the prototype and immediately think "this is so much faster" — not "this looks complicated." This positioning shapes every design decision in this skill: - Inline line editing IS the comparison point. Excel users expect a grid they can edit directly. - Live totals matter. Customers have been doing math in formulas; they expect to see numbers update as they change inputs. - Role gating is impressive. Customers have never had "only the owner can approve over $50K" enforced by software — it was a verbal rule that got broken. - Branded PDF output is impressive. Customers have been hand-formatting Word docs. - Customer-facing portals, AI suggestions, e-signature integrations are NOT impressive at this stage. They're enterprise complexity that solves problems the customer doesn't have yet. Build for the customer who's tired of broken Excel formulas, not the customer migrating from Salesforce. --- ## Is This Even CPQ? Before applying any pattern in this skill, confirm the workflow is actually CPQ-shaped. The CPQ pattern fits when ALL FOUR of these hold: 1. **The user collects structured inputs** that determine the outcome (configuration choices, customer details, requirements, financial data, case details). 2. **Business rules or calculation logic transforms those inputs** into a deliverable (markup formulas, guideline calculations, rate tables, eligibility rules). 3. **A review or approval gate exists** between input and finalization, OR the deliverable goes through some kind of stakeholder review (preparer/reviewer pattern). 4. **The work product feels like it gets handed off** — to a customer, an internal stakeholder, a regulatory body, a downstream system. If criterion 1 is missing → it's a dashboard or display tool, not CPQ. Bail. If criterion 2 is missing → it's a data entry form, not CPQ. Bail. If criterion 3 is missing → it's "intake-and-deliver" — apply CPQ patterns but skip the Approve section. If criterion 4 is missing → it's a personal calculator/utility, not CPQ. Bail. **Common false positives:** - A "stock quote viewer" — has the word "quote" but is a display tool (criterion 1 missing) - A "tax calculator" with no review step — utility, not CPQ (criterion 3 + 4 missing) - A "product catalog" with prices — display, not CPQ (criterion 2 + 3 missing) - A "feedback form" — data entry, not CPQ (criterion 2 missing) If the four criteria don't hold, do not force-fit the patterns below. Build from the task description and DOMAIN.md using frontend-design's principles instead. --- ## Domain Type Most CPQ-shaped workflows fall into one of two domain types. Identify which type the build is before applying patterns: **Product domain.** The user configures sellable products/services. Pricing is the central calculation. Output is a quote document with line items, totals, tax, and terms. Examples: equipment sales, custom apparel orders, food/CPG wholesale, service proposals (consulting bids, managed services), software licensing, custom packaging. **Calculator/intake domain.** The user enters case/applicant details. Calculation applies guidelines/rules/rate tables. Output is a summary report with inputs, calculated values, and disclaimers. Examples: spousal support calculators (Clarity Legal), insurance estimators, loan qualification, benefits eligibility. The skill's patterns adapt to both. When a section or rule is domain-specific, this skill says so explicitly. --- ## Minimum Standards Every CPQ build MUST meet Tier 1 standards. Tier 2 standards are built when DOMAIN.md signals the need. Tier 3 capabilities are mentioned in the completion summary as future work but not built in the prototype. ### Tier 1 — Non-negotiable (every CPQ build) These are the capabilities that make the prototype feel dramatically better than Excel + Word. If any are missing, the build is incomplete regardless of how clean the UI looks. **1. Direct inline line-item editing.** A spreadsheet-style table where users add rows, edit any cell, and see totals update live. NOT a "Configure form → Add to Quote → Build Quote table → Edit" round trip. The line items table IS the workspace. See "Section Pattern" below for the canonical implementation. **2. Bundle / required-child products with appropriate configurator pattern.** When a parent product requires a child component (e.g., "industrial unit requires a motor selection," "custom hoodie requires a printing method," "managed service c
Related in Design
contribute
IncludedLocal-only OSS contribution command center. Auto-refreshes the user's in-flight PR and issue state on invoke so conversations start with full context — no need to brief Claude on what's in flight. Helps the user find issues to contribute to on GitHub, builds per-repo dossiers of what each upstream expects (CLA, DCO, branch convention, AI policy, draft-first, review bots, issue templates), runs deterministic gates before any external action so AI-assisted contributions don't reach maintainers as slop. State is markdown-only: candidate files at ~/.contribute-system/candidates/, repo dossiers at ~/.contribute-system/research/, append-only event log at ~/.contribute-system/log.jsonl. No database, no cloud calls. Use when the user asks about their PRs / issues / contributions, wants to find new work to take on, claim an issue, build/refresh a repo's dossier, or draft a Design Issue or PR. Trigger with "/contribute", "what's my PR status", "find a contribution", "claim issue X", "draft a Design Issue for Y", "refresh dossier for Z".
architectural-analysis
IncludedUser-triggered deep architectural analysis of a codebase or scoped subtree across eight modes — information architecture, data flow, integration points, UI surfaces, interaction patterns, data model, control flow, and failure modes. This skill should be used when the user asks to "diagram this codebase," "map the architecture," "show the data flow," "give me an ERD," "trace control flow," "find the integration points," "verify the layout pattern," "audit the UX architecture," or any similar request whose primary deliverable is mermaid diagrams plus cited reports under docs/architecture/. Dispatches haiku/sonnet sub-agents in parallel for per-mode exploration, then verifies every citation mechanically before any node lands in a diagram. Not for one-off prose explanations of code (use code-explanation) or for high-level system design from scratch (use system-design).
mcp
IncludedModel Context Protocol (MCP) server development and tool management. Languages: Python, TypeScript. Capabilities: build MCP servers, integrate external APIs, discover/execute MCP tools, manage multi-server configs, design agent-centric tools. Actions: create, build, integrate, discover, execute, configure MCP servers/tools. Keywords: MCP, Model Context Protocol, MCP server, MCP tool, stdio transport, SSE transport, tool discovery, resource provider, prompt template, external API integration, Gemini CLI MCP, Claude MCP, agent tools, tool execution, server config. Use when: building MCP servers, integrating external APIs as MCP tools, discovering available MCP tools, executing MCP capabilities, configuring multi-server setups, designing tools for AI agents.
react-native-skia
IncludedDesign, build, debug, and optimise high-polish animated graphics in React Native or Expo using @shopify/react-native-skia, Reanimated, and Gesture Handler. Use when the user wants canvas-driven UI, shaders, paths, rich text, image filters, sprite fields, Skottie, video frames, snapshots, web CanvasKit setup, or performance tuning for custom motion-heavy elements such as loaders, hero art, cards, charts, progress indicators, particle systems, or gesture-driven surfaces. Also use when the user asks for fluid, glow, glass, blob, parallax, 60fps/120fps, or GPU-friendly animated effects in React Native, even if they do not explicitly say "Skia". Do not use for ordinary form/layout work with standard views.
plaid
IncludedProduct Led AI Development — guides founders from idea to launched product. Six capabilities: Idea (discover a product idea), Validate (pressure-test the idea against fatal flaws, problem reality, competition, and 2-week MVP feasibility), Plan (vision intake + document generation), Design (translate image references into a design.md spec), Launch (go-to-market strategy), and Build (roadmap execution). Use when someone says "PLAID", "plaid idea", "help me find an idea", "product idea", "idea from my business", "idea from my expertise", "plaid validate", "validate my idea", "pressure-test", "is this idea good", "find fatal flaws", "validate the problem", "plan a product", "define my vision", "generate a PRD", "product strategy", "plaid design", "design from image", "translate image to design", "create design.md", "extract design tokens", "plaid launch", "go-to-market", "launch plan", "GTM strategy", "launch playbook", "plaid build", "build the app", "start building", or "execute the roadmap".
nextjs-framer-motion-animations
IncludedAdds production-safe Motion for React or Framer Motion animations to Next.js apps, including reveal, hover and tap micro-interactions, whileInView, stagger, AnimatePresence, layout and layoutId transitions, reorder, scroll-linked UI, and lightweight route-content transitions. Use when the user asks to add, refactor, or debug Motion or Framer Motion in App Router or Pages Router codebases, especially around server/client boundaries, reduced motion, LazyMotion, bundle size, hydration, or route transitions. Avoid for GSAP-style timelines, WebGL or 3D scenes, heavy scroll storytelling, or CSS-only effects unless Motion is explicitly requested.