stacks-design-output

$npx mdskill add stacksjs/stacks/stacks-design-output

Enforces complete, runnable stx files without placeholders or truncation.

  • Prevents placeholder comments and partial outputs in production-critical Stacks components.
  • Composes with stacks-design-taste and aesthetic presets for full-output enforcement.
  • Treats every task as production-critical; partial output is a broken output.
  • Delivers whole, runnable stx files using stacks-crosswind and stacks-composables.

SKILL.md

.github/skills/stacks-design-outputView on GitHub ↗
---
name: stacks-design-output
description: Use when generating stx components or design deliverables in a Stacks app and completeness matters - banning placeholder comments and truncation so you ship whole, runnable stx files instead of skeletons. Composes with stacks-design-taste and the aesthetic-preset skills as a full-output enforcement layer.
license: MIT
compatibility: Bun >= 1.3.0, TypeScript
allowed-tools: Read Edit Write Bash Grep Glob
---

# Full-Output Enforcement (Stacks)

**Related skills:** the completeness enforcement layer for [`stacks-design-taste`](../stacks-design-taste/SKILL.md) (the flagship anti-slop skill) and the aesthetic presets [`stacks-design-soft`](../stacks-design-soft/SKILL.md), [`stacks-design-minimalist`](../stacks-design-minimalist/SKILL.md), [`stacks-design-brutalist`](../stacks-design-brutalist/SKILL.md), and [`stacks-redesign`](../stacks-redesign/SKILL.md). Deliverables are stx built with [`stacks-crosswind`](../stacks-crosswind/SKILL.md) and [`stacks-composables`](../stacks-composables/SKILL.md); see [`stacks-stx`](../stacks-stx/SKILL.md) for templating rules.

## Baseline

Treat every task as production-critical. A partial output is a broken output. Do not optimize for brevity; optimize for completeness. If the user asks for a full `.stx` file, deliver the full file. If the user asks for 5 components, deliver 5 components. No exceptions.

## Banned Output Patterns

The following patterns are hard failures. Never produce them:

**In code blocks:** `// ...`, `// rest of code`, `// implement here`, `// TODO`, `/* ... */`, `// similar to above`, `// continue pattern`, `// add more as needed`, `{{-- ... --}}` or `<!-- rest of template -->` standing in for omitted markup, bare `...` standing in for omitted code, `@foreach` bodies replaced with a comment, or `<slot />` used to paper over content you were asked to write.

**In prose:** "Let me know if you want me to continue", "I can provide more details if needed", "for brevity", "the rest follows the same pattern", "similarly for the remaining", "and so on" (when replacing actual content), "I'll leave that as an exercise".

**Structural shortcuts:** Outputting a skeleton `.stx` when the request was for a full implementation. Showing the `<script>` and `<style>` blocks while skipping the `<template>` markup (or vice versa). Replacing repeated components with one example and a description. Describing what an stx component should do instead of writing it. Emitting one card and saying "repeat for the others".

## Execution Process

1. **Scope** - Read the full request. Count how many distinct deliverables are expected (`.stx` files, components, sections, views, layouts). Lock that number.
2. **Build** - Generate every deliverable completely: every `<script>` / `<template>` / `<style>` block, every directive body (`@if`, `@foreach`, `@section`), every branch and every list item. No partial drafts, no "you can extend this later".
3. **Cross-check** - Before output, re-read the original request. Compare your deliverable count against the scope count. If anything is missing, add it before responding.

## Handling Long Outputs

When a response approaches the token limit:
- Do not compress remaining sections to squeeze them in.
- Do not skip ahead to a conclusion.
- Write at full quality up to a clean breakpoint (end of a component, end of an `.stx` file, end of a section).
- End with:

```
[PAUSED - X of Y complete. Send "continue" to resume from: next section name]
```

On "continue", pick up exactly where you stopped. No recap, no repetition.

## Quick Check

Before finalizing any response, verify:
- No banned patterns from the list above appear anywhere in the output
- Every item the user requested is present and finished
- Every `.stx` block that was asked for is complete: `<script>`, `<template>`/markup, and `<style>` as applicable
- Code blocks contain actual runnable stx + Crosswind, not descriptions of what the component would do
- No stx hard-ban leaked in while rushing: no `var`, no `document.*`, no `window.*` in `<script>` blocks; icons are Iconify `i-*` classes, never hand-rolled SVG
- Nothing was shortened to save space

More from stacksjs/stacks

SkillDescription
stacks-actionsUse when working with Stacks server actions — creating actions in app/Actions/, auto-generated API actions from the useApi model trait, the 80+ default framework actions (auth, dashboard, commerce, content, deployment, jobs), action request/response handling, or action registration. Covers @stacksjs/actions and storage/framework/defaults/actions/.
stacks-aiUse when integrating AI capabilities into a Stacks application — using Anthropic/OpenAI/Ollama/AWS Bedrock drivers, image generation (DALL-E), vision analysis, RAG/vector search, embeddings, MCP (Model Context Protocol) clients, text summarization, sentiment analysis, content classification, personalization, or the buddy AI assistant. Covers @stacksjs/ai and config/ai.ts.
stacks-aliasUse when working with path aliases in a Stacks project — import resolution, module aliasing, or debugging import paths. Covers @stacksjs/alias which defines 260+ path mappings for the entire framework.
stacks-analyticsUse when adding analytics to a Stacks application — configuring Fathom or self-hosted analytics, generating tracking scripts, privacy-friendly analytics setup, or the analytics configuration. Covers @stacksjs/analytics and config/analytics.ts.
stacks-apiUse when building, modifying, or debugging API endpoints in a Stacks application — defining routes, handling requests, API middleware, working with the API server, HTTP client (fetcher), API resources, or OpenAPI generation. Covers both @stacksjs/api utilities and the stacks-api server implementation.
stacks-arraysUse when working with array utilities in Stacks — statistical operations (average, median, mode, standard deviation, z-score, percentile, covariance), array manipulation (unique, flatten, partition, shuffle, sample, move), containment checks, or the Arr facade. Covers @stacksjs/arrays.
stacks-authUse when implementing authentication, authorization, passkeys, TOTP/2FA, RBAC, gates, policies, session auth, token management, email verification, password resets, or rate limiting in a Stacks application. Covers the @stacksjs/auth package, config/auth.ts, app/Gates.ts, and app/Middleware/.
stacks-auto-importsUse when working with the Stacks auto-import system — understanding how browser and server auto-imports work, configuring auto-imported functions/models/composables, the auto-import manifests, type generation, or how globals are injected. Covers the auto-import pipeline at storage/framework/auto-imports/.
stacks-brandkitUse when defining or exploring a brand identity for a Stacks project and you want premium brand-kit REFERENCE IMAGES first - logo directions, palettes, typography specimens, identity boards, and application/mockup decks. Generates IMAGES ONLY, never code. Trained for minimalist, cinematic, editorial, dark-tech, luxury, cultural, security, gaming, developer-tool, and consumer-app brand systems with intentional logo concepting, sparse type, strong symbolic meaning, and disciplined palettes a coding step can build against.
stacks-browseUse for headless browser QA on Stacks applications — navigation, screenshots, responsive testing, console/network monitoring, and accessibility snapshots. Dependency-free: drives a system browser over the Chrome DevTools Protocol using only Bun (no Playwright/Puppeteer). Invoke with /stacks-browse.