Claude Skills by stacksjs

Use when designing or building a landing page, portfolio, hero, marketing section, or redesign in a Stacks app, or when the ask is anti-slop / premium frontend work. Reads the brief, infers the right direction, and ships stx + Crosswind interfaces that do not look templated, with a strict pre-flight check.

Use when building or sharpening a Stacks project's domain language - challenging a fuzzy or overloaded term, naming a model or event, writing or editing CONTEXT.md, or recording an architecture decision as an ADR under docs/adr/.

Ask which Stacks skill or flow fits the situation. A router over the bundled skills.

Use when a plan, design or decision needs stress-testing before any code is written, when the user asks to be grilled or to have their thinking challenged, or when another skill needs the round-and-frontier interview primitive. Produces a shared understanding, never code.

Compact the current conversation into a portable handoff document for another agent or session to pick up.

Use when the deliverable is a visually important Stacks page (hero, landing page, marketing site, portfolio, product page, editorial brand page, or redesign where visual quality matters) and you want to generate design reference image(s), deeply analyze them, then implement the UI to match. Runs an image-first pipeline (generate, analyze, implement) and retargets the implement phase to stx + Crosswind + composables.

Use when designing a mobile app (onboarding, auth, home, profile, settings, chat, ecommerce, fintech, health, productivity, or social) in a Stacks context and you want premium app-native screen and flow REFERENCE IMAGES first, shown inside clean iOS/Android/cross-platform phone mockups. Generates IMAGES ONLY, never code. Prioritizes clean hierarchy, readable text, multi-screen consistency, controlled palettes, non-generic art direction, and believable flow logic a coding step can recreate.

Use when designing a landing page, portfolio, hero, or marketing site in a Stacks app and you want premium website design REFERENCE IMAGES first (one horizontal image per section - hero, trust bar, features, pricing, CTA, etc.). Generates IMAGES ONLY, never code. Enforces composition variety, background-image freedom, varied CTAs and hero scales, a narrative concept spine, second-read moments, and one consistent palette across all frames so a coding step can accurately recreate them.

Use when building native iOS or Android applications from a Stacks and STX codebase with Craft, including mobile configuration, native capabilities, safe areas, haptics, sharing, and mobile build output.

Use when a design question needs a runnable answer rather than an argument - does this state model hold up, what should this page look like, is this API shape right. Builds throwaway code that answers one question, either a single shareable HTML demo or several stx view variants.

Use when auditing and upgrading an existing Stacks UI to premium quality - finding AI-slop and generic patterns in stx templates, then fixing layout, spacing, hierarchy, type, color, states, and copy without breaking functionality or migrating the stack. Composes with stacks-design-taste as the audit-first companion, working in stx + Crosswind + composables.

Use when building a feature or fixing a bug test-first in a Stacks project, when the user mentions red-green-refactor or vertical slices, or when deciding which seam a test belongs at. Covers the red-green loop over bun test and @stacksjs/testing, seam selection, and the test anti-patterns.

Create polished, validated architecture, workflow, sequence, data-flow, and lifecycle diagrams for Stacks applications as explorable standalone HTML with inline SVG, dark/light themes, four visual presets, optional trace motion, and PNG/JPEG/WebP/SVG/WebM export. Accepts plain-language requirements or pasted Mermaid; reads repository evidence when the diagram must reflect real code; compares two architecture snapshots as a Before/Delta/After review. Use for system or cloud architecture, secur...

Use when a procedure needs a human in the loop and the agent has hit a wall it cannot pass alone - provisioning cloud credentials, verifying a sending domain, setting CI secrets, clicking through a registrar or third-party dashboard, or running a one-off cutover. Generates an interactive bash wizard that opens each URL, captures each value, and writes it into .env and GitHub secrets.

Use when writing or editing any document an agent reads - a SKILL.md under app/Skills or storage/framework/defaults/ai/skills, the project AGENTS.md, or a reference file a skill points at. Covers context pointers, the information hierarchy, completion criteria, leading words, pruning, and the skill mechanics behind app/Skills and buddy setup:ai.