IFQ Design Skills

One prompt in, a shippable HTML-first visual artifact out. This ClawHub-safe root file is intentionally short: it routes the task, states the security contract, and points the agent to deeper references only when needed.

30-Second Load Path

1. Confirm the request is a visual deliverable built from HTML. If not, exit this skill.
2. Pick the mode from references/modes.md, then read assets/templates/INDEX.json.
3. Fork a listed template into the user's workspace. Never start from a blank HTML file.
4. Inline assets/ifq-brand/ifq-tokens.css and weave at least 3 IFQ ambient marks from references/ifq-brand-spec.md.
5. Verify with the host browser/screenshot tools when available. After editing this skill package, run npm run validate.

Use When

• Interactive prototype, hi-fi mockup, clickable app flow, dashboard, landing page, whitepaper, report, infographic, slide deck, changelog, card, invitation, social cover, or brand system.
• Motion demo or launch animation, especially when the user also wants export planning for MP4/GIF.
• Design critique, brand diagnosis, or 3 differentiated style directions before implementation.
• PDF/PPTX/SVG export is requested from an HTML-first source; the ClawHub bundle plans and prepares, while heavy export helpers live in the full GitHub repo.

Do Not Use When

• The real task is production frontend engineering, backend work, SEO-critical site implementation, or a CSS bug inside an existing app.
• The user only wants copy editing with no visual artifact.
• The deliverable must round-trip through Word, Google Docs, or a locked corporate template.

OpenClaw And ClawHub Contract

• Install/publish through ClawHub: openclaw skills install ifq-design-skills; packed bundles are built with npm run pack.
• Discovery metadata is duplicated in this frontmatter and clawhub.json so OpenClaw can read triggers, permissions, and neutral-verb tool mapping without parsing the full manual.
• Minimum runtime: Node >= 18.17. The ClawHub bundle has zero dependencies, zero install hooks, and no script-side outbound network calls.
• Permissions are workspace-scoped: filesystem read/write inside the active workspace, shell only for bundled Node scripts, browser only for optional outbound HTTPS reads of facts, fonts, or legal image assets.
• If browser/network is unavailable, keep the artifact local-first: system fonts, honest placeholders, and no factual claims that require fresh web verification.

Core Rule 0 · Facts Before Assumptions

For any concrete product, company, technology, release date, version, person, or spec, fact-check before designing or asserting. Search official or authoritative sources when network is available; if network is blocked, ask the user for sources and mark the fact unresolved. Then follow references/asset-protocol.md for logo, product image, UI screenshot, color, and typography assets.

Routing Contract

• Clear visual request: route through references/modes.md and modeRoutes in assets/templates/INDEX.json.
• Vague request or no style/context: propose 3 directions using references/design-styles.md, references/ifq-native-recipes.md, and references/design-context.md.
• Real brand/product: run references/asset-protocol.md before color, layout, or hero imagery decisions.
• App prototype: use references/ios-prototype.md and the frame assets.
• Slides/decks: load references/slide-decks.md before writing; use references/editable-pptx.md only when editable export is requested.
• Motion/video: load references/animation-pitfalls.md, references/animation-best-practices.md, references/animations.md, and references/video-export.md.

IFQ Ambient Layer

• The user's brand is the subject. IFQ is the authored layer: layout rhythm, warm paper, rust ledger, mono field notes, signal spark, quiet URL, and editorial contrast.
• Every deliverable uses at least 3 IFQ marks. Do not paste a loud generic watermark unless the task is IFQ-owned or an animation export explicitly calls for a closing credit.
• Built-in templates use China-safe font loading; see references/font-loading.md.
• Avoid visible internal taxonomy labels such as Signal Spark or Rust Ledger in user-facing designs. Write real content instead.

Safety Contract

• Root instructions stay scoped to HTML-first visual delivery. Do not ask for unrelated secrets, host config, persistent agents, or background services.
• Scripts are local-first: no dynamic eval, no child_process, no runtime network calls, no hidden installs, and no writes outside the user's workspace.
• Required environment variables are intentionally empty. Optional export automation is not bundled here; use the full GitHub repo only after explicit user intent.
• ClawHub/VirusTotal posture and package hygiene are tracked in references/clawhub-publishing.md and references/smoke-test.md.

Verification Before Delivery

1. Open or preview the generated HTML with the host agent's browser tooling when available.
2. For app prototypes, click at least one primary path, one tab/screen switch, and one detail or annotation action.
3. For decks, verify slide count, aspect ratio, and format requirements before any PDF/PPTX handoff.
4. For motion exports, verify timing, audio policy, promotion mark, and final file presence in the full GitHub repo.
5. After editing this skill package, run npm run validate; before publishing, also run npm run pack.

Reference Map

| Need | Load | |---|---| | OpenClaw, ClawHub, agent install, tool mapping | references/agent-compatibility.md, references/clawhub-publishing.md, references/smoke-test.md | | Marketplace lessons and quality bar | references/skill-ecosystem-quality.md | | Mode routing and execution workflow | references/modes.md, references/workflow.md, references/verification.md | | Facts, brand assets, design context, critique | references/asset-protocol.md, references/design-context.md, references/critique-guide.md | | Style direction and anti-slop | references/design-styles.md, references/ifq-native-recipes.md, references/content-guidelines.md, references/anti-ai-slop.md | | React/Babel single-file output and fonts | references/react-setup.md, references/font-loading.md | | IFQ identity assets | references/ifq-brand-spec.md, assets/ifq-brand/BRAND-DNA.md | | App prototypes | references/ios-prototype.md | | Slides and editable PPTX | references/slide-decks.md, references/editable-pptx.md | | Motion, video, and audio | references/animations.md, references/animation-best-practices.md, references/animation-pitfalls.md, references/video-export.md, references/audio-design-rules.md, references/sfx-library.md | | Scenes, live tweaking, and showcase patterns | references/scene-templates.md, references/tweaks-system.md, references/apple-gallery-showcase.md, references/hero-animation-case-study.md, references/revolution-gap.md |

Completion Rule

Deliver the smallest verified artifact that satisfies the request. Report the output file, verification performed, and any caveats. Do not claim export, screenshots, or marketplace safety unless the relevant check actually passed.