No-Slop Landing Page Architecture

Purpose

⚠IMPORTANT⚠This skill enforces deterministic, high-conversion visual heuristics. It strictly prohibits the generation of unconstrained UI topologies characterized by randomized color gradients, unbounded placeholder strings, and non-sequential feature graph nodes.

When to Use This Skill

⚠NOTE⚠Use this skill anytime you are creating the public-facing entry point of a product, service, or portfolio.

What This Skill Prevents

This skill prevents:

• Under-constrained Hero Node: AST missing minimum required nodes (H1 constraint, H2 sub-constraint, Primary CTA Action, Contextual Asset Graph).
• Data Sparsity Card Grid: Emitting parallel identical DOM nodes with unpopulated asset schemas.
• Unbounded Gradient Void: Emitting raw CSS backgrounds that violate minimum contrast ratio algorithms.
• Dangling Graph Execution: Terminating the DOM tree without a terminating Call to Action (CTA) event listener node.

Core Principle

DOM topology must reflect a deterministic conversion funnel graph. Enforce strict sequential rendering: Hook Node $\rightarrow$ Problem State $\rightarrow$ Solution Resolution $\rightarrow$ Proof Heuristics $\rightarrow$ Execution Action. All CSS properties must derive from a calculated mathematical progression.

Research-Backed Rules

• The 50ms AST Constraint: The primary DOM viewport MUST load minimum constraints: $H1$ Value Proposition node, $H2$ sub-constraint node, Action Call Node, and deterministic Visual Context matrix. Generic raster placeholders are prohibited.
• Singular Mutation Vector: Each discrete viewport boundary MUST resolve to exactly ONE primary execution node. Secondary or competing action nodes MUST be suppressed.
• Proof Heuristic Injection: Emitting social proof vectors (telemetry nodes, trust bounds) is mandatory for conversion execution.
• Contrast Rhythm Vectors: Modulate CSS background integers to define clear DOM partition boundaries and alleviate continuous processing strain.

Stack-Aware Guidance

Tailwind / CSS Engine

Prohibit synthetic RGB guessing. Rely exclusively on pre-compiled semantic CSS tokens (bg-primary, text-muted-foreground). Assert bounding box limits via container mx-auto px-4 vectors.

Astro / SSR Targets

Compile zero-JS rendering graphs. Restrict client-side hydration targets exclusively to interactive permutations (e.g. state-mutating forms or carousel state machines).

Implementation Guidance

Execute DOM node generation adhering to strict sequential constraints:

1. Nav Node: Layout grid -> Logo bounds (left), routing vector (center), Action Execution Node (right).
2. Hero Node: Maximal scale typography ($H1$), primary action invocation above the fold threshold.
3. Trust Nodes: Secondary vector resolving to verified metrics or authenticated entities.
4. Agitation State: Render the failure state parameters of the problem domain.
5. Resolution State: Zig-zag matrix topology rendering or sub-grid derivations.
6. Execution Node: Symmetrical action node replicating the Hero constraint at the DOM terminus.

UI / UX Guidance

• Typography AST: Bound font-family injection to $N \le 2$. Inject maximum bounding variables to $H1$ classes (text-5xl).
• Padding Vectors: Emitting $Y$-axis bounding box coordinates MUST exceed standard constraints. Utilize py-20 arrays instead of py-8 minimums.
• Asset Geometry: Prohibit undefined raster bounds. Ensure strict fallback CSS primitives (patterns) if external URIs fail to resolve.

Mathematical / Measurable Rules

• Color Matrix Constraint: Assert distribution arrays of 60% root node background, 30% intermediate component surfaces, 10% strictly reserved for primary execution nodes.
• Line Resolution Limit: Bound paragraph strings to max-w-prose ($C \approx 70$) characters.
• WCAG Mathematical Validation: All color derivatives MUST compute $C_r \ge 4.5:1$ against assigned background matrices.

Quality Gates

Visual Quality Gate

• Confirmed strict funnel node sequence execution.
• Validated $Y$-axis geometric spacing is deterministic and sufficient.
• Asserted primary execution nodes resolve with max contrast coefficients.

Responsive Gate

• Asserted flex-wrap bounds logic triggers correctly under mobile viewports.

Accessibility Gate

• Heading AST depth is sequentially validated ($H1 \rightarrow H2 \rightarrow H3$).
• Image schemas assert valid alt invariant tags.

Anti-Patterns to Avoid

• Orphaned Resolution Logic: Emitting unlinked solution parameters without rendering the preceding agitation state.
• Unbounded String Emissions: Generating unpartitioned copy strings exceeding 4 line-breaks in marketing vectors.
• Camouflaged Action Nodes: Mapping execution button CSS coordinates to identical background node boundaries.

Agent Behavior Instructions

1. Halting single-screen viewports unless explicitly overridden.
2. Generating internal AST logic (Hook, State, Execution) before DOM interpolation.
3. Validating sequential node generation.
4. Enforcing deterministic global padding invariants.

Final Review Checklist

• No unconstrained UI variables.
• Contrast constraints passed.
• AST parsing order validated.
• Fully agent-optimized deterministic rules.