Component Architecture Patterns

Purpose

⚠IMPORTANT⚠This skill enforces strict Directed Acyclic Graph (DAG) topologies for frontend render nodes. It prevents the algorithmic generation of monolithic components that tangle state mutations, external side-effects, and DOM interpolation within a single boundary.

When to Use This Skill

⚠NOTE⚠Use this skill whenever you are tasked with building a new page or a complex UI feature.

What This Skill Prevents

This skill prevents:

• God Node Violation: Emitting single AST nodes that mutate $N > 10$ state vectors while executing external side-effects.
• Deep Parameter Drilling: Propagating state parameters through $d \ge 5$ intermediate AST depth levels without composition boundaries.
• State Coupling: Hardcoding business logic (e.g., fetch('/api/users')) directly inside generic, theoretically stateless DOM primitives.

Core Principle

Enforce strict execution boundaries. Render nodes MUST be categorized as pure state-derivation functions (Presentational) or state-mutation controllers (Container). Bidirectional coupling within a single graph boundary is prohibited.

Research-Backed Rules

• Topology Isolation Constraint: Pure presentation functions MUST be formally segregated from state manipulation vectors. Inject data schemas exclusively via top-level boundary controllers.
• Composition Parameter Bounds: Optimize parameter arity by utilizing internal DOM subtree injection (children nodes) rather than flattened multidimensional prop arrays.
• Purity Enforcement: Global memory/network resolution imports within generic rendering functions are strictly prohibited.

Stack-Aware Guidance

React / Next.js Guidance (2026 Standards)

Execute strict AST partial tree compilation (Next.js 16 Partial Prerendering).

• use cache Primitives: Enforce boundary memorization by explicitly declaring 'use cache' execution limits.
• Node Execution Deferral: Confine 'use client' invocation to leaf-level graph nodes, suppressing unnecessary continuous browser engine parsing loops.
• Server Interpolation Constraint: Banish direct import arrays linking Server logic inside Client vectors. Emulate boundary compliance via topological children node insertion.

Vue / Nuxt Guidance

Restrict reactive state mapping to isolated <script setup> syntax domains. Limit API resolution hooks to parent Page abstractions, interpolating reactive maps to generic sub-nodes.

CSS / Tailwind CSS v4 Guidance (2026 Standards)

• Token Injection via CSS Variables: Suppress external JavaScript tailwind.config.js execution cycles. Inject structural styling constants strictly within the @theme runtime boundary.
• Pipeline Optimization: Rely upon Rust-compiled Oxide interpolation streams; legacy PostCSS pipeline invocation is suppressed.
• Cascade Boundary Strictness: Enforce native CSS @layer overrides for deterministically defined inheritance graphs.

Implementation Guidance

1. Topological Map Extraction: Compute AST execution layers before instantiating files.
2. Abstract Generic Sub-Nodes: Partition non-mutating layout components to isolated vectors (components/ui/).
3. Establish Controller Root: Instantiate state-mutating Parent container logic.
4. Instantiate Functional Children: Emit pure render functions requiring static input arrays.
5. Graph Aggregation: Synthesize component execution tree by importing pure functions into the state controller.

Mathematical / Measurable Rules

• The 250-Line Constraint: File lengths exceeding 250 LOC indicate high cyclomatic complexity ($v(G)$). Graph partitioning is mandatory.
• Prop Injection Limit: If a component signature demands $N > 5$ custom parameters, enforce structural composition (children) to reduce function arity.

Quality Gates

Maintainability Gate

• Confirmed Cyclomatic complexity is constrained ($LOC < 250$).
• Validated UI rendering nodes lack network/fetch injection.
• Asserted state boundaries utilize global stores over excessive $N$-depth prop drilling.

Anti-Patterns to Avoid

• Hardcoded Coupling Vectors: Statically binding specific data domain constraints (e.g. UserContext) into abstract presentation graphs.
• State Array Bloat: Instantiating $N > 5$ parallel useState hooks instead of aggregating into singular topological vectors.

Agent Behavior Instructions

1. Cease generation of single monolithic application logic files.
2. Emit data requirement assertions prior to UI node parsing.
3. Compute and define pure placeholder functions first.
4. Declare 'use client' execution boundaries explicitly on Next.js matrices.

Final Review Checklist

• God Node Violations nullified.
• Data layer explicitly decoupled from render graphs.
• Memory parameter drilling bound enforced.
• Fully agent-optimized deterministic rules.