PURPOSE: Scaffold a complete, production-grade semantic web application foundation featuring OKLCH color token architecture, fluid typography scales, modern CSS logical properties, and bilingual Arabic RTL/LTR layout balance.

BEHAVIOR: Generates complete in-memory application files (index.html, styles.css, main.js) within the structured result envelope. Operates purely in-memory with zero direct filesystem side effects; callers receive the code ready to be written to disk. Requires no external credentials or elevated permissions.

USAGE GUIDELINES:

• When to use: Call at the start of a web project to establish root HTML semantics, CSS custom property foundations, viewport meta tags, and font configurations.

• When NOT to use: Do NOT use to craft isolated UI widgets (use ink_craft_component instead) or to synthesize standalone color variables without project markup (use ink_generate_palette_tokens instead).

• Alternatives: Use ink_craft_component for individual components; use ink_generate_palette_tokens for standalone CSS color tokens.

RETURNS: ResultEnvelope containing structured 'files' dictionary (index.html, styles.css, main.js), OKLCH tokensOverview, contrast verification analysis, and typography scales.

PURPOSE: Generate bespoke OKLCH color token ramps, layered shadow elevations, and fluid clamp() typography scales tailored to a creative aesthetic mood and base hue.

BEHAVIOR: Synthesizes CSS custom property tokens and typography steps purely in-memory. Zero filesystem writes and zero external network access. Guarantees WCAG AAA contrast compliance across all text/surface pairings with mathematical delta-E verification.

USAGE GUIDELINES:

• When to use: Use when creating or refining a design system's color foundation, fluid typographic scales, or dark/light mode surface tokens.

• When NOT to use: Do NOT use to extract colors from an existing live website (use ink_inspect_website_style instead) or to scaffold an entire project skeleton (use ink_create_base instead).

• Alternatives: Use ink_inspect_website_style to reverse-engineer design tokens from existing sites; use ink_create_base for full-page scaffolding.

RETURNS: ResultEnvelope containing semantic OKLCH token map, computed contrast analysis, fluid typography scales, and a ready-to-use CSS :root variable stylesheet string.

PURPOSE: Synthesize bespoke, tactile UI components (hero sections, glass cards, tactile buttons, navigation bars, metrics grids, modal dialogs) with semantic HTML5, modern CSS logical properties, and spring micro-interaction physics.

BEHAVIOR: Generates component markup, stylesheets, and lifecycle JavaScript strings purely in-memory. Does not mutate the filesystem, write to disk, or initiate network connections. Enforces keyboard accessibility (ARIA dialog, roving tabindex, escape dismiss) and bidi RTL/LTR compliance.

USAGE GUIDELINES:

• When to use: Use when creating individual, high-craft UI components and interactive widgets that need to be embedded in an existing layout.

• When NOT to use: Do NOT use to scaffold an entire web application project (use ink_create_base instead), nor for 3D WebGL scenes (use ink_build_threejs_experience instead), nor for non-visual state stores (use ink_generate_script_logic instead).

• Alternatives: Use ink_create_base for full application scaffolding; use ink_build_threejs_experience for 3D canvas experiences.

RETURNS: ResultEnvelope containing semantic 'html' markup, scoped 'css' rules using logical properties and OKLCH tokens, tactile 'js' interaction logic, and accessibility notes.

PURPOSE: Generate high-performance, responsive 3D WebGL scenes using Three.js (particle constellations, geometric wireframes, morphing meshes, or interactive hero canvases) with memory-safe lifecycles.

BEHAVIOR: Generates client-side HTML container, full-bleed CSS, and JavaScript module code purely in-memory. Zero filesystem mutations. Incorporates GPU protections: automatically clamps window.devicePixelRatio to 2, attaches window resize listeners, pauses requestAnimationFrame on hidden browser tabs via the Page Visibility API, and exposes a clean teardown disposal function (geometries, materials, renderer.dispose()).

USAGE GUIDELINES:

• When to use: Use when a page needs an interactive 3D hero background, ambient particle field, or futuristic geometric visual experience.

• When NOT to use: Do NOT use for standard 2D UI widgets or layouts (use ink_craft_component instead), nor for basic CSS animations without WebGL.

• Alternatives: Use ink_craft_component for 2D UI components; use ink_create_base for scaffolding the full application shell.

RETURNS: ResultEnvelope containing canvas mounting 'html', full-bleed responsive 'css', initialization and teardown 'js', and lifecycle documentation.

PURPOSE: Generate zero-dependency, memory-safe JavaScript and TypeScript architectural modules (State Store, Event Bus, Intersection Scroll Observer, Theme Switcher, Form Validator) with production error boundaries.

BEHAVIOR: Synthesizes modular ES6+ JavaScript and optional TypeScript declarations purely in-memory. Zero filesystem modifications. All generated code enforces memory cleanup paradigms (explicit unsubscribe functions, WeakMap caching, EventTarget/listener teardown).

USAGE GUIDELINES:

• When to use: Use when creating application state management, event-driven decoupled messaging, viewport scroll animators, theme togglers, or accessible form validation.

• When NOT to use: Do NOT use to render UI elements or write component styling (use ink_craft_component instead) or WebGL graphics (use ink_build_threejs_experience instead).

• Alternatives: Use ink_craft_component for visual UI components; use ink_build_threejs_experience for 3D canvas rendering.

RETURNS: ResultEnvelope containing zero-dependency ES module 'code', optional 'typescriptTypes', architectural pattern documentation, and executable 'usageExample'.

PURPOSE: Audit frontend and full-stack web code for client-side security vulnerabilities (DOM XSS, eval/Function sinks, innerHTML execution, plain-text token storage in localStorage, missing security headers, and strict CSP generation).

BEHAVIOR: Executes AST and regex static security scanning in-memory. Purely read-only; never executes or mutates the audited code, and never transmits source code over external networks. Emits severity ratings (critical, high, medium, low) and exact code remediations.

USAGE GUIDELINES:

• When to use: Use prior to deployment or code review to ensure zero client-side injection vulnerabilities, secure token handling, and robust Content-Security-Policy headers.

• When NOT to use: Do NOT use to validate CSS aesthetic quality, color contrast, or fluid typography rules (use ink_validate_design instead), nor for external URL penetration testing.

• Alternatives: Use ink_validate_design for design system, contrast, and bidi compliance checks; use ink_run_python_tests for Python AST test suites.

RETURNS: ResultEnvelope containing 'securityScore', pass/fail boolean, structured 'findings' array with line numbers and remediations, recommended 'recommendedCspHeader', and safe authentication storage patterns.

PURPOSE: Evaluate HTML and CSS code against anti-AI-slop design heuristics (detecting generic AI purple gradients, hardcoded pixel font sizes, missing semantic tags), verify WCAG AAA color contrast ratios, and audit Arabic RTL/LTR logical properties.

BEHAVIOR: Executes in-memory static AST and regex analysis on the supplied code strings. Completely read-only with zero filesystem writes, no network requests, and deterministic score computation. Emits a letter grade (S, A, B, C, F), numerical score (0-100), and specific remediation diff advice.

USAGE GUIDELINES:

• When to use: Call after creating or modifying web layouts, components, or stylesheets to verify craft quality, contrast compliance, and bidi readiness before committing.

• When NOT to use: Do NOT use for JavaScript security vulnerability scanning (use ink_audit_security instead) or for capturing real-browser screenshots (use ink_capture_viewport instead).

• Alternatives: Use ink_audit_security for security/XSS checks; use ink_capture_viewport for visual multi-viewport screenshot verification.

RETURNS: ResultEnvelope containing 'craftScore', 'craftGrade', 'isHighCraft' boolean, 'antiSlopChecks' results, computed 'contrast' analysis, 'bidiAndAlignment' report, and prioritized 'remediationAdvice'.

PURPOSE: Execute the external Python verification suite for deep AST static analysis, mathematical contrast matrix calculation, and headless layout audits.

BEHAVIOR: Spawns the local Python 3 ink_verifier engine in a sandboxed subprocess. Purely read-only; does not mutate source files or modify disk state unless 'capture' is specifically invoked. Requires Python 3.10+ installed in the environment PATH. Returns comprehensive structured test metrics.

USAGE GUIDELINES:

• When to use: Use when running deep multi-pass Python AST analysis, mathematical APCA/WCAG contrast calculation, or comprehensive verification across an entire codebase.

• When NOT to use: Do NOT use for fast in-memory CSS validation without Python (use ink_validate_design instead) or for standalone client-side security audits (use ink_audit_security instead).

• Alternatives: Use ink_validate_design for fast TypeScript-native design verification; use ink_audit_security for native security scanning.

RETURNS: ResultEnvelope containing structured test outcomes from the Python verifier engine according to the invoked action ('contrast', 'security', 'visual', 'audit', 'full', 'bidi', 'inspect', or 'capture').

PURPOSE: Capture 3 high-resolution viewport snapshots (16:9 Desktop Landscape 1920x1080, 9:16 Vertical Story 1080x1920, and Mobile View 390x844) via headless Chromium to verify layout integrity, responsiveness, and optical centering.

BEHAVIOR: Launches local headless Chromium with an isolated temporary user-data profile. Renders the provided HTML string or URL, waits for network idle, and writes 3 PNG image files to the target outputDirectory (defaults to '.ink_snapshots/'). Detects horizontal scrollbar leaks and viewport overflow. Requires local Chromium/Chrome installed.

USAGE GUIDELINES:

• When to use: Call after making HTML/CSS modifications or finishing a component to visually confirm that elements align properly across desktop, mobile, and tall vertical screens.

• When NOT to use: Do NOT use for fast code syntax or contrast checks without browser rendering (use ink_validate_design instead).

• Alternatives: Use ink_validate_design for fast static design linting; use ink_inspect_website_style to reverse-engineer design tokens from live URLs.

RETURNS: ResultEnvelope containing structured 'snapshots' list (with label, viewport, exact dimensions, file path, and size) and layout overflow metrics.

PURPOSE: Deconstruct existing live websites or HTML/CSS templates to reverse-engineer color palettes, typography scales, elevation shadows, and layout DNA into modern OKLCH tokens.

BEHAVIOR: Fetches public website markup over HTTPS or parses local HTML/CSS code strings in-memory. Strictly read-only with zero disk modifications. Remote network requests enforce a 10s timeout, safe redirect limits, and private subnet IP blocking. Converts extracted HEX/RGB values into perceptual OKLCH color variables.

USAGE GUIDELINES:

• When to use: Use when analyzing a reference website or mockup to extract its visual hierarchy, typography system, and color ramps.

• When NOT to use: Do NOT use to generate novel color tokens from scratch (use ink_generate_palette_tokens instead) or to evaluate code for anti-slop compliance (use ink_validate_design instead).

• Alternatives: Use ink_generate_palette_tokens to synthesize new design tokens; use ink_capture_viewport to capture visual screenshots.

RETURNS: ResultEnvelope containing detected 'archetype', extracted 'colors' (with HEX and OKLCH conversions), 'typography' hierarchy, 'shadows', 'layoutDna', and an actionable recommended OKLCH palette stylesheet.

PURPOSE: Dynamically configure and generate Google Fonts preconnect tags, CSS @import rules, optical line-height variables, and accessible font fallbacks for multilingual Arabic and Latin projects.

BEHAVIOR: Generates HTML link tags, CSS @import rules, and stylesheet font-family declarations purely in-memory. Does not download font binaries or write files to disk directly. Formulates tailored optical line-height variables (1.7-1.85 for Arabic, 1.5-1.6 for Latin) to eliminate clipping.

USAGE GUIDELINES:

• When to use: Call when setting up web fonts, adding Arabic typographic scales, or loading bespoke font families into a project.

• When NOT to use: Do NOT use to synthesize fluid clamp font-size scales (use ink_generate_palette_tokens instead) or to scaffold an entire project (use ink_create_base instead).

• Alternatives: Use ink_generate_palette_tokens for fluid typography size scales; use ink_create_base for full HTML document scaffolding.

RETURNS: ResultEnvelope containing 'htmlLinkTags', 'cssImportRule', 'cssVariables' with font-family definitions, and an accessible 'fallbackStack'.