export declare const DESIGN_EXPLORATION_SKILL_MD = "---\nname: design-exploration\ndescription: >-\n  Use Design for UI/UX exploration, side-by-side design directions,\n  interactive prototype previews, user selection, iteration, and design-to-code\n  handoff through the hosted Design MCP app.\nmetadata:\n  visibility: exported\n---\n\n# Design Exploration\n\nUse the Design app when a workflow needs visual UI exploration, prototype\niteration, or a human-in-the-loop choice among design directions.\n\n## Choose The Path\n\n- Use `create-design` first to create a project shell. Do not report the\n  design as ready until it has renderable HTML.\n- For open-ended UX exploration, generate distinct, compact, complete HTML\n  directions (2-5, three by default) and call `present-design-variants`. Each\n  direction should be one representative screen or directional snapshot, not a\n  full app per variant. Design saves every option as a normal screen on the\n  overview board and renders an inline chat choice with one button per screen\n  name. After the user picks, delete the unchosen variant screens and continue\n  from the kept screen by first calling `get-design-snapshot` with that\n  screen's `fileId`, then calling `edit-design` on that same `fileId` in a\n  bounded single-file pass. Use `mode: \"replace-file\"` when expanding the\n  representative placeholder into the full chosen direction. Do not call\n  `generate-design` after a variant pick.\n- If the chat choice buttons are not available in the host, ask the user to\n  tell you the screen name they prefer. The variants are already real screens\n  on the board, so do not ask them to paste HTML or copy a generated handoff\n  summary.\n- For direct refinements to an already chosen direction, call\n  `get-design-snapshot`, edit from the current tuned HTML, and use\n  `edit-design` for surgical changes or `mode: \"replace-file\"` for a bounded\n  selected-file replacement. Use `generate-design` for new files only.\n- Use `export-coding-handoff` when the user wants to implement the chosen\n  design in a codebase.\n\n## Exploration Defaults\n\n1. Default to three variants unless the user asks for a different count\n   (`present-design-variants` accepts 2-5; three is the sweet spot).\n2. Make variants structurally and stylistically distinct, not just color swaps.\n3. Each variant must be a compact, complete standalone HTML document that\n   renders without a build step.\n4. For product UI redesigns, prefer cleaner hierarchy, progressive disclosure,\n   and realistic controls over decorative mockups.\n5. After `present-design-variants`, wait for the user's pick before\n   generating the next version. Keep the chosen screen, delete the other\n   variant screens, call `get-design-snapshot` with `fileId` for the kept\n   screen, then call `edit-design` on that same `fileId` in a bounded pass.\n   Use `mode: \"replace-file\"` when expanding the representative placeholder\n   into the full chosen direction. Do not call `generate-design` after a\n   variant pick. Stop after the first successful `edit-design` save.\n\n## Design Quality Bar\n\nGeneric \"AI slop\" comes from letting one prompt set taste, explore, and emit code\nat once \u2014 so the model returns the training-average (Inter, an indigo/violet\ngradient, a centered hero, three rounded cards). The variant flow above exists to\nseparate those jobs; use it, and hold this bar:\n\n- Before generating, name the concrete audience, the screen's primary job, and\n  the visual thesis. If the brief is vague, make a reasonable choice and state\n  it instead of producing a generic dashboard/landing-page default.\n- Refuse the defaults, and pair every \"don't\" with a \"do\" (banning Inter alone\n  just makes you reach for Roboto). Avoid Inter/Roboto/system fonts, the\n  indigo/violet slop palette (`#6366F1`/`#8B5CF6`/`#A855F7`) and purple-on-white\n  gradients, and centered-hero + three-icon-card layouts; instead pick a\n  distinctive font pairing, one non-default palette family with a single decisive\n  accent, and an asymmetric layout with a clear focal point.\n- Make each direction distinct in structure and behavior, not just palette.\n  Give every variant one memorable signature choice, then keep the surrounding\n  chrome disciplined. Even your creative picks converge (Space Grotesk\n  everywhere) \u2014 vary deliberately so two directions never share a fingerprint.\n- For existing products, inspect the current screen, design system, tokens, and\n  component language before inventing a new direction. Treat any drift back to a\n  default as a missing token to pin, and vary layout per screen so on-brand does\n  not become same-in-your-colors.\n- Treat copy, data, and imagery as design material. Use realistic domain\n  content and first-party/generated assets when images matter; avoid lorem\n  ipsum, vague SaaS filler, and decorative placeholder boxes.\n- Build to a quiet quality floor: responsive desktop/mobile layout, visible\n  keyboard focus, useful loading/empty/error states for app UI, and reduced\n  motion support when custom motion is present.\n- After broad generation or refinement, inspect the rendered Design surface or\n  a screenshot-capable host before calling it ready. Fix obvious hierarchy,\n  overflow, contrast, broken interaction, and placeholder-content issues first.\n\n## Cross-App Use\n\n- Hosted default: connect `https://design.agent-native.com/mcp`.\n  Do not put shared secrets in skill files.\n- For CLI/code-editor clients, keep any `npx @agent-native/core@latest connect` command\n  running until browser authorization finishes. Stopping it early can leave the\n  browser approved but the local MCP config unwritten. Restart or reload the\n  agent client after installing or connecting if Design tools do not appear in\n  the live session.\n- Dispatch can expose Design alongside other apps. Use Design for UI/UX design\n  tasks, Assets for image/media selection, Slides for decks, and so on.\n- Keep the loop visual: surface the inline MCP App or the returned \"Open\n  design\" link instead of pasting large HTML blobs into chat.\n- If a Design tool call returns `Session terminated`, `needs auth`, or\n  another connector/session error, do not keep retrying the tool. Stop and give\n  the user the reconnect step: in Claude Code run `/mcp` and choose\n  Authenticate/Reconnect for the Design connector; from any terminal run\n  `npx -y @agent-native/core@latest reconnect https://design.agent-native.com` \u2014 this\n  re-authenticates WITHOUT reinstalling. Never reinstall from scratch just to fix\n  auth. Continue once the connector is available.\n- Do not hand-roll MCP HTTP requests with curl from the agent session. Use the\n  host-exposed Design tools after restart/reload, or use the returned\n  browser/deep-link fallback.\n- If you inspect local MCP config, redact `Authorization`, `http_headers`,\n  and token values. Never paste bearer tokens into chat or logs.\n";
//# sourceMappingURL=design-exploration-skill.d.ts.map