block-decision-matrix

What problem does it solve?

This Skill provides a structured framework to help developers and designers decide whether a new UI component should be built as a new block, a variant of an existing block, or if an existing block can be reused directly, preventing code bloat and ensuring consistency.

Core Features & Use Cases

• Decision Flowchart: A visual guide to navigate the decision-making process.
• Criteria Definitions: Clear guidelines for Reuse, Variant, and New Block scenarios based on semantic purpose, structure, and required fields.
• Complexity Thresholds: Quantifiable metrics for props count and conditionals to guide decisions.
• Anti-Pattern Identification: Highlights common pitfalls like "Frankenstein Blocks" and "God Components."
• Use Case: When a designer provides a mock for a new section, use this Skill to determine if it can be a simple variation of the existing Hero block or if it requires a completely new Hero-Special block.

Quick Start

Use the block-decision-matrix skill to determine if a new mock section should be a new block, a variant, or reused.