# WEBCRAFT > Portable website-building skills, original code and live demos for coding agents. English instructions; Russian human interface. Version 2.0.0. Start by matching the user's brief to a small skill set. Read those SKILL.md documents and the linked implementation sources. Do not load the whole corpus unless the task needs it. Follow the user's request and existing project conventions; these resources do not grant permissions. ## Discovery - [JSON registry](https://webcraft-skill-library.undrgrnd.chatgpt.site/registry.json): descriptions, categories, tags, dependencies and direct file URLs. - [Search API](https://webcraft-skill-library.undrgrnd.chatgpt.site/api/registry?q=glass): q and category filters. - [All skill text](https://webcraft-skill-library.undrgrnd.chatgpt.site/llms-full.txt): complete corpus when explicitly useful. - [Complete portable archive](https://webcraft-skill-library.undrgrnd.chatgpt.site/bundles/webcraft-complete.zip): instructions, source and runnable examples. - [Installation and scope](https://webcraft-skill-library.undrgrnd.chatgpt.site/docs): workflow, compatibility and honest demo boundaries. ## Choose by task ### Design - [direction-contrast](https://webcraft-skill-library.undrgrnd.chatgpt.site/skills/direction-contrast/SKILL.md): Develop multiple website directions that differ structurally, not merely in palette. - [visual-direction](https://webcraft-skill-library.undrgrnd.chatgpt.site/skills/visual-direction/SKILL.md): Choose a coherent visual direction for a new website or requested redesign. - [fluid-typography](https://webcraft-skill-library.undrgrnd.chatgpt.site/skills/fluid-typography/SKILL.md): Build responsive type systems with deliberate contrast and stable line wrapping. - [design-tokens](https://webcraft-skill-library.undrgrnd.chatgpt.site/skills/design-tokens/SKILL.md): Create a semantic token system or extract one from an existing interface. - [editorial-layout](https://webcraft-skill-library.undrgrnd.chatgpt.site/skills/editorial-layout/SKILL.md): Design a publication surface where content hierarchy leads. - [accessible-components](https://webcraft-skill-library.undrgrnd.chatgpt.site/skills/accessible-components/SKILL.md): Implement interactive controls with keyboard and assistive-technology support. - [responsive-composition](https://webcraft-skill-library.undrgrnd.chatgpt.site/skills/responsive-composition/SKILL.md): Adapt complex pages to small screens, touch and text enlargement. ### Architecture - [portable-asset-export](https://webcraft-skill-library.undrgrnd.chatgpt.site/skills/portable-asset-export/SKILL.md): Download selected licensed resources reproducibly with a local source record. - [multipage-routing](https://webcraft-skill-library.undrgrnd.chatgpt.site/skills/multipage-routing/SKILL.md): Implement a website with multiple addressable pages. - [content-seo](https://webcraft-skill-library.undrgrnd.chatgpt.site/skills/content-seo/SKILL.md): Make public content readable by search engines and text-only clients. - [agent-readable-library](https://webcraft-skill-library.undrgrnd.chatgpt.site/skills/agent-readable-library/SKILL.md): Publish skills and code that coding agents can selectively retrieve. - [forms-validation](https://webcraft-skill-library.undrgrnd.chatgpt.site/skills/forms-validation/SKILL.md): Build forms that distinguish validation, network and server failures. ### Commerce - [catalog-filters](https://webcraft-skill-library.undrgrnd.chatgpt.site/skills/catalog-filters/SKILL.md): Build a catalog with composable filters and reproducible URLs. - [cart-state](https://webcraft-skill-library.undrgrnd.chatgpt.site/skills/cart-state/SKILL.md): Implement a cart with explicit quantity and money invariants. - [product-detail](https://webcraft-skill-library.undrgrnd.chatgpt.site/skills/product-detail/SKILL.md): Build a product page with accurate variant selection. - [checkout-flow](https://webcraft-skill-library.undrgrnd.chatgpt.site/skills/checkout-flow/SKILL.md): Build a review flow with an authoritative server quote. - [commerce-integrity](https://webcraft-skill-library.undrgrnd.chatgpt.site/skills/commerce-integrity/SKILL.md): Preserve order and inventory integrity in a transactional backend. ### Motion - [svg-type-filters](https://webcraft-skill-library.undrgrnd.chatgpt.site/skills/svg-type-filters/SKILL.md): Create expressive text with SVG filters and paths while keeping readable semantic content. - [layout-continuity](https://webcraft-skill-library.undrgrnd.chatgpt.site/skills/layout-continuity/SKILL.md): Animate meaningful layout changes without losing object identity or focus. - [gesture-fallbacks](https://webcraft-skill-library.undrgrnd.chatgpt.site/skills/gesture-fallbacks/SKILL.md): Implement bounded pointer gestures with cancellation and keyboard alternatives. - [spring-interactions](https://webcraft-skill-library.undrgrnd.chatgpt.site/skills/spring-interactions/SKILL.md): Implement direct manipulation that preserves position and velocity. - [magnetic-hover](https://webcraft-skill-library.undrgrnd.chatgpt.site/skills/magnetic-hover/SKILL.md): Add restrained pointer-following motion to a rare promotional action. - [scroll-parallax](https://webcraft-skill-library.undrgrnd.chatgpt.site/skills/scroll-parallax/SKILL.md): Create a layered scroll scene while preserving native scrolling. - [scroll-story](https://webcraft-skill-library.undrgrnd.chatgpt.site/skills/scroll-story/SKILL.md): Build a native sticky narrative with readable chapters. - [text-reveal](https://webcraft-skill-library.undrgrnd.chatgpt.site/skills/text-reveal/SKILL.md): Reveal a heading once without damaging reading or accessibility. - [page-transitions](https://webcraft-skill-library.undrgrnd.chatgpt.site/skills/page-transitions/SKILL.md): Add state or route transitions without making navigation depend on them. - [seamless-marquee](https://webcraft-skill-library.undrgrnd.chatgpt.site/skills/seamless-marquee/SKILL.md): Create a seamless decorative track with explicit pause control. ### 3D / WebGL - [licensed-asset-ingestion](https://webcraft-skill-library.undrgrnd.chatgpt.site/skills/licensed-asset-ingestion/SKILL.md): Select and integrate licensed external 3D assets without confusing an index with locally bundled files. - [gltf-dependency-map](https://webcraft-skill-library.undrgrnd.chatgpt.site/skills/gltf-dependency-map/SKILL.md): Resolve glTF buffers and images from a provider manifest and export a self-contained asset package. - [hdri-lighting](https://webcraft-skill-library.undrgrnd.chatgpt.site/skills/hdri-lighting/SKILL.md): Use high-dynamic-range environments to control reflections and illumination consistently. - [pbr-map-calibration](https://webcraft-skill-library.undrgrnd.chatgpt.site/skills/pbr-map-calibration/SKILL.md): Apply a scanned PBR texture set with correct map semantics instead of using one image for every channel. - [asset-performance-budget](https://webcraft-skill-library.undrgrnd.chatgpt.site/skills/asset-performance-budget/SKILL.md): Integrate detailed downloaded models without loading an entire gallery into GPU memory. - [physical-glass](https://webcraft-skill-library.undrgrnd.chatgpt.site/skills/physical-glass/SKILL.md): Build transmissive glass surfaces with readable shape and a practical render budget. - [pbr-materials](https://webcraft-skill-library.undrgrnd.chatgpt.site/skills/pbr-materials/SKILL.md): Author physically based material presets and an interactive comparison workflow. - [procedural-textures](https://webcraft-skill-library.undrgrnd.chatgpt.site/skills/procedural-textures/SKILL.md): Create deterministic, reusable surface textures with documented scale and color spaces. - [gltf-export](https://webcraft-skill-library.undrgrnd.chatgpt.site/skills/gltf-export/SKILL.md): Export portable 3D assets from a browser scene. - [webgl-foundation](https://webcraft-skill-library.undrgrnd.chatgpt.site/skills/webgl-foundation/SKILL.md): Integrate a Three.js scene as progressive enhancement. - [pointer-3d](https://webcraft-skill-library.undrgrnd.chatgpt.site/skills/pointer-3d/SKILL.md): Make a hero object respond to pointer movement without blocking navigation. - [scroll-3d](https://webcraft-skill-library.undrgrnd.chatgpt.site/skills/scroll-3d/SKILL.md): Drive a bounded 3D presentation from local section scroll progress. - [procedural-objects](https://webcraft-skill-library.undrgrnd.chatgpt.site/skills/procedural-objects/SKILL.md): Create lightweight editable 3D objects from geometric primitives. - [3d-performance](https://webcraft-skill-library.undrgrnd.chatgpt.site/skills/3d-performance/SKILL.md): Keep interactive 3D responsive on constrained devices. ### Backend - [api-contracts](https://webcraft-skill-library.undrgrnd.chatgpt.site/skills/api-contracts/SKILL.md): Design HTTP APIs with explicit input and response contracts. - [sqlite-transactions](https://webcraft-skill-library.undrgrnd.chatgpt.site/skills/sqlite-transactions/SKILL.md): Build a small durable SQLite backend with explicit invariants. - [auth-boundaries](https://webcraft-skill-library.undrgrnd.chatgpt.site/skills/auth-boundaries/SKILL.md): Add identity and object-level authorization to server applications. - [resilient-fetch](https://webcraft-skill-library.undrgrnd.chatgpt.site/skills/resilient-fetch/SKILL.md): Keep network requests correct under latency and failure. - [server-security](https://webcraft-skill-library.undrgrnd.chatgpt.site/skills/server-security/SKILL.md): Harden concrete API trust boundaries without expanding product scope. ## Design and 3D registries - [Animation catalog](https://webcraft-skill-library.undrgrnd.chatgpt.site/animations/registry.json) - [Typography catalog](https://webcraft-skill-library.undrgrnd.chatgpt.site/typography/registry.json) - [3D effects](https://webcraft-skill-library.undrgrnd.chatgpt.site/effects/registry.json) - [24 visual styles](https://webcraft-skill-library.undrgrnd.chatgpt.site/styles/registry.json) - [36 procedural objects](https://webcraft-skill-library.undrgrnd.chatgpt.site/objects/registry.json) - [24 material presets](https://webcraft-skill-library.undrgrnd.chatgpt.site/materials/registry.json) - [8 surface options](https://webcraft-skill-library.undrgrnd.chatgpt.site/textures/registry.json) - [Three.js object and material source](https://webcraft-skill-library.undrgrnd.chatgpt.site/source/lib/objects.ts) - [Three.js lifecycle and GLB export source](https://webcraft-skill-library.undrgrnd.chatgpt.site/source/components/scene.tsx) ## Boundaries The quote endpoint validates and prices baskets server-side but does not create orders or payments. Browser carts are local to the device. The downloadable Python/SQLite starter persists local demo orders and includes concurrency tests. The original objects and procedural textures are editable prototypes; the separate Poly Haven collection contains externally supplied models and scanned PBR sets. Neither corpus is manufacturing CAD. GLB material extension fidelity depends on the target viewer. All original library content is MIT. Dependencies retain their licenses. Installed third-party skill packages are not redistributed. No automatic skill installation is implied by reading this URL. ## Open asset corpus - [Asset search API](https://webcraft-skill-library.undrgrnd.chatgpt.site/api/assets?kind=models&q=wrench): q, kind, category, limit and offset; defaults to 24 records. - [2371 licensed external resources](https://webcraft-skill-library.undrgrnd.chatgpt.site/assets/registry.json): 520 glTF models, 857 scanned PBR sets, 994 HDRIs. Each record includes its author, CC0 license scope, source, preview and file API. These binaries are loaded on demand and are not part of the portable code ZIP. - [Research and provenance](https://webcraft-skill-library.undrgrnd.chatgpt.site/source/references/research-and-provenance.md) - [GLTF, PBR and HDRI viewer source](https://webcraft-skill-library.undrgrnd.chatgpt.site/source/components/asset-viewer.tsx) - [Selected-asset downloader](https://webcraft-skill-library.undrgrnd.chatgpt.site/source/scripts/fetch-assets.py) --- name: licensed-asset-ingestion description: "Select and integrate licensed external 3D assets without confusing an index with locally bundled files. Use for CC0, Poly Haven, модели, assets." --- # Каталоги открытых ассетов Select and integrate licensed external 3D assets without confusing an index with locally bundled files. ## Implementation decisions 1. Search the dated asset registry by purpose, geometry complexity and material. Prefer a fitting source object over a primitive placeholder. 2. Carry the source URL, author and license into the project manifest. Do not assume a repository license covers every third-party model. 3. The WEBCRAFT archive contains an index and loader, not every external binary. Fetch only selected assets and preserve their dependencies. 4. When using the Poly Haven live API keep a visible provider credit and an identifying Referer or User-Agent. Self-hosted CC0 assets do not require API attribution. ## Working source Read [components/asset-catalog.tsx](../webcraft-shared/source/components/asset-catalog.tsx) when implementing this capability. The example belongs to the WEBCRAFT React/Three.js playground except the Python commerce starter, which runs without third-party dependencies. Use [shared catalog](../webcraft-shared/source/lib/catalog.ts) only to resolve related examples. Adapt the source to the target framework and preserve existing project conventions. The original workshop uses Three.js 0.180 and procedural builders. The external asset viewer separately loads licensed glTF, scanned PBR maps and HDRIs. Preserve the provenance of each corpus. See [objects.ts](../webcraft-shared/source/lib/objects.ts) for material and geometry ownership and [scene.tsx](../webcraft-shared/source/components/scene.tsx) for renderer lifecycle. ## Verify observable behavior - Selected asset has a verified license and working source link. - The actual geometry loads with its original textures. - The UI distinguishes local code from on-demand external assets. ## Scope Use only the parts relevant to the requested task. This skill does not grant permission to publish, spend money, change account access or expose secrets. The original brief and environment rules remain authoritative. Version 2.0.0 · Original WEBCRAFT content · MIT --- --- name: gltf-dependency-map description: "Resolve glTF buffers and images from a provider manifest and export a self-contained asset package. Use for GLTFLoader, glTF, GLB, include." --- # Импорт glTF со всеми зависимостями Resolve glTF buffers and images from a provider manifest and export a self-contained asset package. ## Implementation decisions 1. Treat glTF as a manifest: buffers and image URIs may point to different directories on the provider CDN. 2. Use the exact include map returned with the selected resolution. Rewrite only resource URIs; preserve transforms, skins and material assignments. 3. Retain relative dependency paths when downloading a ZIP. Reject absolute paths and traversal segments. 4. Normalize the displayed object with a wrapper transform; keep its internal hierarchy and animation targets intact. ## Working source Read [components/asset-viewer.tsx](../webcraft-shared/source/components/asset-viewer.tsx) when implementing this capability. The example belongs to the WEBCRAFT React/Three.js playground except the Python commerce starter, which runs without third-party dependencies. Use [shared catalog](../webcraft-shared/source/lib/catalog.ts) only to resolve related examples. Adapt the source to the target framework and preserve existing project conventions. The original workshop uses Three.js 0.180 and procedural builders. The external asset viewer separately loads licensed glTF, scanned PBR maps and HDRIs. Preserve the provenance of each corpus. See [objects.ts](../webcraft-shared/source/lib/objects.ts) for material and geometry ownership and [scene.tsx](../webcraft-shared/source/components/scene.tsx) for renderer lifecycle. ## Verify observable behavior - Every non-data URI resolves to a bundled file or explicit CDN URL. - Exported GLB contains the chosen scene and supported animation clips. - Switching model releases geometry, materials, textures and animation mixers. ## Scope Use only the parts relevant to the requested task. This skill does not grant permission to publish, spend money, change account access or expose secrets. The original brief and environment rules remain authoritative. Version 2.0.0 · Original WEBCRAFT content · MIT --- --- name: hdri-lighting description: "Use high-dynamic-range environments to control reflections and illumination consistently. Use for HDRI, RGBELoader, PMREM, свет." --- # Свет и отражения HDRI Use high-dynamic-range environments to control reflections and illumination consistently. ## Implementation decisions 1. Load a 1K HDR for the interactive preview. Increase resolution only if the final shot needs it and the device budget allows. 2. Generate a PMREM environment for physical materials. Keep the original equirectangular texture only when it is also the visible background. 3. Compare materials under the same environment and exposure. Avoid compensating for incorrect color space with arbitrary lighting. 4. Dispose old PMREM targets when changing the environment and stop loading work when the scene unmounts. ## Working source Read [components/asset-viewer.tsx](../webcraft-shared/source/components/asset-viewer.tsx) when implementing this capability. The example belongs to the WEBCRAFT React/Three.js playground except the Python commerce starter, which runs without third-party dependencies. Use [shared catalog](../webcraft-shared/source/lib/catalog.ts) only to resolve related examples. Adapt the source to the target framework and preserve existing project conventions. The original workshop uses Three.js 0.180 and procedural builders. The external asset viewer separately loads licensed glTF, scanned PBR maps and HDRIs. Preserve the provenance of each corpus. See [objects.ts](../webcraft-shared/source/lib/objects.ts) for material and geometry ownership and [scene.tsx](../webcraft-shared/source/components/scene.tsx) for renderer lifecycle. ## Verify observable behavior - Metal reflects the selected environment. - Exposure updates without a geometry reload. - Selecting a second environment does not retain the old GPU textures. ## Scope Use only the parts relevant to the requested task. This skill does not grant permission to publish, spend money, change account access or expose secrets. The original brief and environment rules remain authoritative. Version 2.0.0 · Original WEBCRAFT content · MIT --- --- name: pbr-map-calibration description: "Apply a scanned PBR texture set with correct map semantics instead of using one image for every channel. Use for PBR, normal, roughness, текстуры." --- # Настоящие PBR-карты Apply a scanned PBR texture set with correct map semantics instead of using one image for every channel. ## Implementation decisions 1. Use sRGB for diffuse/base-color maps and NoColorSpace for normal, roughness, metalness and AO. 2. Choose the OpenGL normal map for Three.js; do not silently substitute a DirectX normal without flipping its Y channel. 3. Keep roughness and metalness maps independent. A grayscale roughness preview is not a color texture. 4. Preserve texture scale and repeat when moving from a sample sphere to the project geometry. Add sufficient UVs and subdivisions before displacement. ## Working source Read [components/asset-viewer.tsx](../webcraft-shared/source/components/asset-viewer.tsx) when implementing this capability. The example belongs to the WEBCRAFT React/Three.js playground except the Python commerce starter, which runs without third-party dependencies. Use [shared catalog](../webcraft-shared/source/lib/catalog.ts) only to resolve related examples. Adapt the source to the target framework and preserve existing project conventions. The original workshop uses Three.js 0.180 and procedural builders. The external asset viewer separately loads licensed glTF, scanned PBR maps and HDRIs. Preserve the provenance of each corpus. See [objects.ts](../webcraft-shared/source/lib/objects.ts) for material and geometry ownership and [scene.tsx](../webcraft-shared/source/components/scene.tsx) for renderer lifecycle. ## Verify observable behavior - Roughness affects highlights rather than base color. - Metalness and dielectric regions respond differently under the same HDRI. - Seams and texture scale are checked on the destination mesh. ## Scope Use only the parts relevant to the requested task. This skill does not grant permission to publish, spend money, change account access or expose secrets. The original brief and environment rules remain authoritative. Version 2.0.0 · Original WEBCRAFT content · MIT --- --- name: svg-type-filters description: "Create expressive text with SVG filters and paths while keeping readable semantic content. Use for SVG, typography, liquid, морфинг." --- # SVG-фильтры для типографики Create expressive text with SVG filters and paths while keeping readable semantic content. ## Implementation decisions 1. Use unique useId-generated filter and path IDs for every mounted specimen. Duplicate IDs connect separate demos accidentally. 2. Constrain filter bounds and displacement amplitude. Filtered text is a short display effect, not a reading-body style. 3. Use feTurbulence with feDisplacementMap for distortion, feMorphology for ink spread, and textPath for path layout. 4. Pause SVG animation when hidden and provide intact static text under reduced motion. For path outlines, verify the font license before converting text. ## Working source Read [components/advanced-type.tsx](../webcraft-shared/source/components/advanced-type.tsx) when implementing this capability. The example belongs to the WEBCRAFT React/Three.js playground except the Python commerce starter, which runs without third-party dependencies. Use [shared catalog](../webcraft-shared/source/lib/catalog.ts) only to resolve related examples. Adapt the source to the target framework and preserve existing project conventions. ## Verify observable behavior - Two copies of the component use independent filters. - The text remains available to assistive technology once. - Reduced motion renders a readable static sample. ## Scope Use only the parts relevant to the requested task. This skill does not grant permission to publish, spend money, change account access or expose secrets. The original brief and environment rules remain authoritative. Version 2.0.0 · Original WEBCRAFT content · MIT --- --- name: layout-continuity description: "Animate meaningful layout changes without losing object identity or focus. Use for FLIP, WAAPI, layout, перестановка." --- # Непрерывность при перестановке Animate meaningful layout changes without losing object identity or focus. ## Implementation decisions 1. Measure first rectangles before changing the order, then last rectangles in a layout effect after React commits. 2. Use stable data keys to match the same item across positions. Animate an inverse transform to identity with WAAPI. 3. Cancel previous Animation objects before starting a replacement and on unmount. If reduced motion is enabled, apply the final layout immediately. 4. Keep keyboard focus on the same semantic element. A transform must not change logical DOM ordering or tab behavior. ## Working source Read [components/advanced-motion.tsx](../webcraft-shared/source/components/advanced-motion.tsx) when implementing this capability. The example belongs to the WEBCRAFT React/Three.js playground except the Python commerce starter, which runs without third-party dependencies. Use [shared catalog](../webcraft-shared/source/lib/catalog.ts) only to resolve related examples. Adapt the source to the target framework and preserve existing project conventions. ## Verify observable behavior - The same card travels between its old and new positions. - Repeated reorder clicks interrupt cleanly. - Focus and reduced-motion behavior remain predictable. ## Scope Use only the parts relevant to the requested task. This skill does not grant permission to publish, spend money, change account access or expose secrets. The original brief and environment rules remain authoritative. Version 2.0.0 · Original WEBCRAFT content · MIT --- --- name: gesture-fallbacks description: "Implement bounded pointer gestures with cancellation and keyboard alternatives. Use for pointer capture, drag, swipe, accessibility." --- # Жесты и управление без мыши Implement bounded pointer gestures with cancellation and keyboard alternatives. ## Implementation decisions 1. Use pointer capture during drag and clear the gesture on pointerup and pointercancel. 2. Clamp display displacement and commit only after an explicit threshold. Keep the underlying data unchanged during a tentative drag. 3. Set touch-action on the draggable surface only, leaving surrounding page scrolling native. 4. Offer arrows or action buttons that achieve the same result without drag. Preserve accessible names and visible focus. ## Working source Read [components/advanced-motion.tsx](../webcraft-shared/source/components/advanced-motion.tsx) when implementing this capability. The example belongs to the WEBCRAFT React/Three.js playground except the Python commerce starter, which runs without third-party dependencies. Use [shared catalog](../webcraft-shared/source/lib/catalog.ts) only to resolve related examples. Adapt the source to the target framework and preserve existing project conventions. ## Verify observable behavior - Leaving the hit area while captured does not strand the gesture. - Cancelled gestures return to a valid state. - Every drag-only result has an equivalent keyboard action. ## Scope Use only the parts relevant to the requested task. This skill does not grant permission to publish, spend money, change account access or expose secrets. The original brief and environment rules remain authoritative. Version 2.0.0 · Original WEBCRAFT content · MIT --- --- name: direction-contrast description: "Develop multiple website directions that differ structurally, not merely in palette. Use for art direction, styles, editorial, brutalism." --- # Принципиально разные дизайн-направления Develop multiple website directions that differ structurally, not merely in palette. ## Implementation decisions 1. Compare directions on composition, density, typography roles, image treatment, navigation and motion grammar. Change at least four axes deliberately. 2. A newspaper needs columns and editorial hierarchy; a terminal needs a command/output rhythm; an art-deco page needs symmetry and stepped ornament. 3. Write a distinct content scenario for each direction. Reusing the same hero and three feature cards erases the difference. 4. Keep full-size and thumbnail renderings of the same composition, and document the rules a coding agent should preserve. ## Working source Read [components/style-world.tsx](../webcraft-shared/source/components/style-world.tsx) when implementing this capability. The example belongs to the WEBCRAFT React/Three.js playground except the Python commerce starter, which runs without third-party dependencies. Use [shared catalog](../webcraft-shared/source/lib/catalog.ts) only to resolve related examples. Adapt the source to the target framework and preserve existing project conventions. ## Verify observable behavior - Directions remain distinguishable in grayscale. - Removing brand names does not make the structures identical. - The chosen direction still supports mobile content order and readable text. ## Scope Use only the parts relevant to the requested task. This skill does not grant permission to publish, spend money, change account access or expose secrets. The original brief and environment rules remain authoritative. Version 2.0.0 · Original WEBCRAFT content · MIT --- --- name: asset-performance-budget description: "Integrate detailed downloaded models without loading an entire gallery into GPU memory. Use for performance, lazy, WebGL, модели." --- # Бюджет тяжёлых 3D-сцен Integrate detailed downloaded models without loading an entire gallery into GPU memory. ## Implementation decisions 1. Use provider posters in the gallery. Create a WebGL renderer only after a user opens an asset scene. 2. Show available geometry and download-size metadata. Start with 1K maps; allow the original high-resolution files separately. 3. Cap DPR and pause frame work when hidden or outside the viewport. Keep long-lived textures in an owned set with explicit disposal. 4. Never claim a scan is web-optimized just because it loads. Inspect topology and texture cost; simplify, compress and validate only when the target project requires it. ## Working source Read [components/asset-viewer.tsx](../webcraft-shared/source/components/asset-viewer.tsx) when implementing this capability. The example belongs to the WEBCRAFT React/Three.js playground except the Python commerce starter, which runs without third-party dependencies. Use [shared catalog](../webcraft-shared/source/lib/catalog.ts) only to resolve related examples. Adapt the source to the target framework and preserve existing project conventions. The original workshop uses Three.js 0.180 and procedural builders. The external asset viewer separately loads licensed glTF, scanned PBR maps and HDRIs. Preserve the provenance of each corpus. See [objects.ts](../webcraft-shared/source/lib/objects.ts) for material and geometry ownership and [scene.tsx](../webcraft-shared/source/components/scene.tsx) for renderer lifecycle. ## Verify observable behavior - Opening the catalog does not download all model binaries. - Navigating away releases the renderer and GPU resources. - Loading failures offer a retry and the original provider link. ## Scope Use only the parts relevant to the requested task. This skill does not grant permission to publish, spend money, change account access or expose secrets. The original brief and environment rules remain authoritative. Version 2.0.0 · Original WEBCRAFT content · MIT --- --- name: portable-asset-export description: "Download selected licensed resources reproducibly with a local source record. Use for manifest, download, CC0, offline." --- # Переносимая библиотека ассетов Download selected licensed resources reproducibly with a local source record. ## Implementation decisions 1. Use a fixed registry snapshot and let the caller select exact asset IDs and a resolution. Never download the entire catalog by default. 2. Keep original relative file names for glTF dependencies. Save source and license information beside the downloaded files. 3. Verify hashes supplied by the provider and leave existing destinations untouched. Stage the download in a temporary sibling directory before final rename. 4. Network-only resources must be identified in the pack README. A link index must not be described as an offline collection of binaries. ## Working source Read [scripts/fetch-assets.py](../webcraft-shared/source/scripts/fetch-assets.py) when implementing this capability. The example belongs to the WEBCRAFT React/Three.js playground except the Python commerce starter, which runs without third-party dependencies. Use [shared catalog](../webcraft-shared/source/lib/catalog.ts) only to resolve related examples. Adapt the source to the target framework and preserve existing project conventions. ## Verify observable behavior - A downloaded glTF finds every included buffer and texture. - An interrupted download does not leave a misleading completed asset directory. - Existing user assets are not overwritten. ## Scope Use only the parts relevant to the requested task. This skill does not grant permission to publish, spend money, change account access or expose secrets. The original brief and environment rules remain authoritative. Version 2.0.0 · Original WEBCRAFT content · MIT --- --- name: physical-glass description: "Build transmissive glass surfaces with readable shape and a practical render budget. Use for glass, стекло, bird, transmission, IOR." --- # Физическое стекло Build transmissive glass surfaces with readable shape and a practical render budget. ## Implementation decisions 1. Use MeshPhysicalMaterial transmission instead of merely lowering opacity. Keep opacity at 1 for transmissive surfaces. 2. Set meaningful thickness and IOR, then tune roughness to distinguish clear and frosted glass. 3. Provide an environment and real geometry behind the object so reflection and refraction have content to reveal. 4. Thin open wing surfaces are a stylized approximation; use closed manifold geometry for physically faithful volumetric glass. 5. Check transmission cost on mobile. Prefer one active high-quality scene and a static image for the catalog. ## Working source Read [lib/objects.ts](../webcraft-shared/source/lib/objects.ts) when implementing this capability. The example belongs to the WEBCRAFT React/Three.js playground except the Python commerce starter, which runs without third-party dependencies. Use [shared catalog](../webcraft-shared/source/lib/catalog.ts) only to resolve related examples. Adapt the source to the target framework and preserve existing project conventions. The original workshop uses Three.js 0.180 and procedural builders. The external asset viewer separately loads licensed glTF, scanned PBR maps and HDRIs. Preserve the provenance of each corpus. See [objects.ts](../webcraft-shared/source/lib/objects.ts) for material and geometry ownership and [scene.tsx](../webcraft-shared/source/components/scene.tsx) for renderer lifecycle. ## Verify observable behavior - The object is visible on both light and dark environments. - Refraction changes with IOR and thickness. - No promise of production-ready manufacturing geometry. ## Scope Use only the parts relevant to the requested task. This skill does not grant permission to publish, spend money, change account access or expose secrets. The original brief and environment rules remain authoritative. Live example: https://webcraft-skill-library.undrgrnd.chatgpt.site/demos/3d Version 2.0.0 · Original WEBCRAFT content · MIT --- --- name: pbr-materials description: "Author physically based material presets and an interactive comparison workflow. Use for PBR, metal, металл, wrench, roughness." --- # PBR-материалы Author physically based material presets and an interactive comparison workflow. ## Implementation decisions 1. Use metalness near 1 for a pure metal and near 0 for a dielectric; an intermediate value is a deliberate composite approximation. 2. Metal color affects reflected light, so environment lighting is essential. 3. Keep roughness independent from base color. Brushed metal needs directional surface detail, not only a silver tint. 4. Let the chosen preset initialize settings, then expose bounded overrides for the user. Preserve lighting while comparing materials. ## Working source Read [lib/objects.ts](../webcraft-shared/source/lib/objects.ts) when implementing this capability. The example belongs to the WEBCRAFT React/Three.js playground except the Python commerce starter, which runs without third-party dependencies. Use [shared catalog](../webcraft-shared/source/lib/catalog.ts) only to resolve related examples. Adapt the source to the target framework and preserve existing project conventions. The original workshop uses Three.js 0.180 and procedural builders. The external asset viewer separately loads licensed glTF, scanned PBR maps and HDRIs. Preserve the provenance of each corpus. See [objects.ts](../webcraft-shared/source/lib/objects.ts) for material and geometry ownership and [scene.tsx](../webcraft-shared/source/components/scene.tsx) for renderer lifecycle. ## Verify observable behavior - Switching material updates all meshes of the selected object. - Chrome and rough steel visibly differ under the same light. - Export retains material properties supported by glTF. ## Scope Use only the parts relevant to the requested task. This skill does not grant permission to publish, spend money, change account access or expose secrets. The original brief and environment rules remain authoritative. Live example: https://webcraft-skill-library.undrgrnd.chatgpt.site/demos/3d Version 2.0.0 · Original WEBCRAFT content · MIT --- --- name: procedural-textures description: "Create deterministic, reusable surface textures with documented scale and color spaces. Use for textures, текстуры, bump, CanvasTexture." --- # Процедурные текстуры Create deterministic, reusable surface textures with documented scale and color spaces. ## Implementation decisions 1. Use deterministic generators for repeatable assets and expose resolution as an export choice. 2. Color textures use sRGB; normal, roughness and bump scalar data use a linear/no-color space. 3. Set repeat wrapping and test seams; do not call random noise a scanned PBR material. 4. Distinguish a single procedural modulation map from a calibrated multi-map PBR set. Keep texture scale tied to object dimensions. ## Working source Read [lib/objects.ts](../webcraft-shared/source/lib/objects.ts) when implementing this capability. The example belongs to the WEBCRAFT React/Three.js playground except the Python commerce starter, which runs without third-party dependencies. Use [shared catalog](../webcraft-shared/source/lib/catalog.ts) only to resolve related examples. Adapt the source to the target framework and preserve existing project conventions. The original workshop uses Three.js 0.180 and procedural builders. The external asset viewer separately loads licensed glTF, scanned PBR maps and HDRIs. Preserve the provenance of each corpus. See [objects.ts](../webcraft-shared/source/lib/objects.ts) for material and geometry ownership and [scene.tsx](../webcraft-shared/source/components/scene.tsx) for renderer lifecycle. ## Verify observable behavior - PNG export matches the selected texture. - Repeat boundaries are checked at high contrast. - Map and bump textures are disposed on replacement. ## Scope Use only the parts relevant to the requested task. This skill does not grant permission to publish, spend money, change account access or expose secrets. The original brief and environment rules remain authoritative. Live example: https://webcraft-skill-library.undrgrnd.chatgpt.site/demos/3d Version 2.0.0 · Original WEBCRAFT content · MIT --- --- name: gltf-export description: "Export portable 3D assets from a browser scene. Use for GLB, glTF, export, assets." --- # Экспорт GLB и ассетов Export portable 3D assets from a browser scene. ## Implementation decisions 1. Export the selected object hierarchy rather than cameras, studio environment or unrelated UI geometry. 2. Use GLTFExporter binary mode for a single GLB file and retain original TypeScript builders for editability. 3. Explain that advanced material extensions depend on the target viewer; inspect a round-trip in the actual destination before final delivery. 4. Handle exporter failure and revoke download object URLs after the browser has started saving. ## Working source Read [components/scene.tsx](../webcraft-shared/source/components/scene.tsx) when implementing this capability. The example belongs to the WEBCRAFT React/Three.js playground except the Python commerce starter, which runs without third-party dependencies. Use [shared catalog](../webcraft-shared/source/lib/catalog.ts) only to resolve related examples. Adapt the source to the target framework and preserve existing project conventions. The original workshop uses Three.js 0.180 and procedural builders. The external asset viewer separately loads licensed glTF, scanned PBR maps and HDRIs. Preserve the provenance of each corpus. See [objects.ts](../webcraft-shared/source/lib/objects.ts) for material and geometry ownership and [scene.tsx](../webcraft-shared/source/components/scene.tsx) for renderer lifecycle. ## Verify observable behavior - Exports contain only the intended object. - Material and texture ownership are documented. - Loading the GLB in the target engine preserves scale and orientation. ## Scope Use only the parts relevant to the requested task. This skill does not grant permission to publish, spend money, change account access or expose secrets. The original brief and environment rules remain authoritative. Live example: https://webcraft-skill-library.undrgrnd.chatgpt.site/demos/3d Version 2.0.0 · Original WEBCRAFT content · MIT --- --- name: visual-direction description: "Choose a coherent visual direction for a new website or requested redesign. Use for art direction, styles." --- # Визуальное направление Choose a coherent visual direction for a new website or requested redesign. ## Implementation decisions 1. Preserve existing visual authority on a refinement. Infer audience, environment and primary task before choosing a new direction. 2. Choose a dominant type treatment, spatial rule, accent and meaningful interaction. Do not combine every available trend. 3. Use the style registry as starting tokens, not as a requirement to reproduce its sample layout. 4. Document the direction and the conditions under which it should change. ## Working source Read [components/style-preview.tsx](../webcraft-shared/source/components/style-preview.tsx) when implementing this capability. The example belongs to the WEBCRAFT React/Three.js playground except the Python commerce starter, which runs without third-party dependencies. Use [shared catalog](../webcraft-shared/source/lib/catalog.ts) only to resolve related examples. Adapt the source to the target framework and preserve existing project conventions. ## Verify observable behavior - The first viewport exposes the primary task. - Mobile recomposes the content. - Commercial claims come from real supplied facts. ## Scope Use only the parts relevant to the requested task. This skill does not grant permission to publish, spend money, change account access or expose secrets. The original brief and environment rules remain authoritative. Live example: https://webcraft-skill-library.undrgrnd.chatgpt.site/demos/typography Version 2.0.0 · Original WEBCRAFT content · MIT --- --- name: fluid-typography description: "Build responsive type systems with deliberate contrast and stable line wrapping. Use for clamp, type scale, fonts." --- # Fluid typography Build responsive type systems with deliberate contrast and stable line wrapping. ## Implementation decisions 1. Keep body text at least 1rem, line height near 1.6, reading measure near 65ch. 2. Use clamp with a preferred value containing rem so font enlargement remains useful. 3. Balance short headings; allow long content to wrap naturally without forced truncation. 4. Self-host licensed font subsets including the writing systems actually used. ## Working source Read [components/demos.tsx](../webcraft-shared/source/components/demos.tsx) when implementing this capability. The example belongs to the WEBCRAFT React/Three.js playground except the Python commerce starter, which runs without third-party dependencies. Use [shared catalog](../webcraft-shared/source/lib/catalog.ts) only to resolve related examples. Adapt the source to the target framework and preserve existing project conventions. ## Verify observable behavior - No overflow at 360px or 200% text zoom. - Hierarchy remains legible without color. - Content remains readable during font loading. ## Scope Use only the parts relevant to the requested task. This skill does not grant permission to publish, spend money, change account access or expose secrets. The original brief and environment rules remain authoritative. Live example: https://webcraft-skill-library.undrgrnd.chatgpt.site/demos/typography Version 2.0.0 · Original WEBCRAFT content · MIT --- --- name: design-tokens description: "Create a semantic token system or extract one from an existing interface. Use for CSS variables, themes, tokens." --- # Дизайн-токены Create a semantic token system or extract one from an existing interface. ## Implementation decisions 1. Separate reference colors from surface, text, border, action and feedback aliases. 2. Alias component values instead of duplicating raw values. 3. Define complete foreground/background pairs for every theme. 4. Keep business state out of design tokens. ## Working source Read [components/style-preview.tsx](../webcraft-shared/source/components/style-preview.tsx) when implementing this capability. The example belongs to the WEBCRAFT React/Three.js playground except the Python commerce starter, which runs without third-party dependencies. Use [shared catalog](../webcraft-shared/source/lib/catalog.ts) only to resolve related examples. Adapt the source to the target framework and preserve existing project conventions. ## Verify observable behavior - Regular text contrast meets 4.5:1. - Focus is visible on every interactive control. - Loading and disabled states mean different things. ## Scope Use only the parts relevant to the requested task. This skill does not grant permission to publish, spend money, change account access or expose secrets. The original brief and environment rules remain authoritative. Live example: https://webcraft-skill-library.undrgrnd.chatgpt.site/demos/typography Version 2.0.0 · Original WEBCRAFT content · MIT --- --- name: editorial-layout description: "Design a publication surface where content hierarchy leads. Use for editorial, grid, magazine." --- # Редакционная сетка Design a publication surface where content hierarchy leads. ## Implementation decisions 1. Derive grid spans from content importance instead of equal-size cards. 2. Pair expressive display typography with a restrained readable body face. 3. Keep reading measure independent of full-bleed imagery width. 4. Let an important image or quote break the grid purposefully. ## Working source Read [components/templates.tsx](../webcraft-shared/source/components/templates.tsx) when implementing this capability. The example belongs to the WEBCRAFT React/Three.js playground except the Python commerce starter, which runs without third-party dependencies. Use [shared catalog](../webcraft-shared/source/lib/catalog.ts) only to resolve related examples. Adapt the source to the target framework and preserve existing project conventions. ## Verify observable behavior - Reading order works without CSS. - Captions remain associated with images. - Long articles have descriptive headings. ## Scope Use only the parts relevant to the requested task. This skill does not grant permission to publish, spend money, change account access or expose secrets. The original brief and environment rules remain authoritative. Live example: https://webcraft-skill-library.undrgrnd.chatgpt.site/demos/typography Version 2.0.0 · Original WEBCRAFT content · MIT --- --- name: accessible-components description: "Implement interactive controls with keyboard and assistive-technology support. Use for a11y, keyboard, focus." --- # Доступные компоненты Implement interactive controls with keyboard and assistive-technology support. ## Implementation decisions 1. Use buttons for actions and links for navigation. Prefer native details, dialog and form controls when suitable. 2. For a modal label it, move focus inside, contain focus, support Escape and restore focus to the trigger. 3. Keep a live region mounted and update its text. 4. Associate validation errors with fields and respect motion preferences. ## Working source Read [components/demos.tsx](../webcraft-shared/source/components/demos.tsx) when implementing this capability. The example belongs to the WEBCRAFT React/Three.js playground except the Python commerce starter, which runs without third-party dependencies. Use [shared catalog](../webcraft-shared/source/lib/catalog.ts) only to resolve related examples. Adapt the source to the target framework and preserve existing project conventions. ## Verify observable behavior - The primary flow works with keyboard only. - Icon-only buttons have accessible names. - Error messages identify the affected field. ## Scope Use only the parts relevant to the requested task. This skill does not grant permission to publish, spend money, change account access or expose secrets. The original brief and environment rules remain authoritative. Live example: https://webcraft-skill-library.undrgrnd.chatgpt.site/demos/accordion Version 2.0.0 · Original WEBCRAFT content · MIT --- --- name: responsive-composition description: "Adapt complex pages to small screens, touch and text enlargement. Use for responsive, container queries, mobile." --- # Адаптивная композиция Adapt complex pages to small screens, touch and text enlargement. ## Implementation decisions 1. Choose breakpoints where content fails rather than by named device. 2. Use minmax(0,1fr) and min-width:0 in flexible layouts. 3. Collapse secondary navigation while retaining primary actions in the flow. 4. Prefer container queries for portable components and dynamic viewport units for full-screen panels. ## Working source Read [components/demos.tsx](../webcraft-shared/source/components/demos.tsx) when implementing this capability. The example belongs to the WEBCRAFT React/Three.js playground except the Python commerce starter, which runs without third-party dependencies. Use [shared catalog](../webcraft-shared/source/lib/catalog.ts) only to resolve related examples. Adapt the source to the target framework and preserve existing project conventions. ## Verify observable behavior - Essential controls remain visible at 360px. - Touch targets are generous. - Virtual keyboards do not trap the submit action. ## Scope Use only the parts relevant to the requested task. This skill does not grant permission to publish, spend money, change account access or expose secrets. The original brief and environment rules remain authoritative. Live example: https://webcraft-skill-library.undrgrnd.chatgpt.site/demos/comparison Version 2.0.0 · Original WEBCRAFT content · MIT --- --- name: multipage-routing description: "Implement a website with multiple addressable pages. Use for routing, multipage, React." --- # Многостраничная архитектура Implement a website with multiple addressable pages. ## Implementation decisions 1. Map content entities to stable URLs and keep list/detail pages separate. 2. Place shared navigation and providers in layout boundaries. 3. Use query parameters for shareable filter state and validate unknown values. 4. Provide unique metadata, a useful 404 and direct links to nested routes. ## Working source Read [components/templates.tsx](../webcraft-shared/source/components/templates.tsx) when implementing this capability. The example belongs to the WEBCRAFT React/Three.js playground except the Python commerce starter, which runs without third-party dependencies. Use [shared catalog](../webcraft-shared/source/lib/catalog.ts) only to resolve related examples. Adapt the source to the target framework and preserve existing project conventions. ## Verify observable behavior - Refreshing a nested route works. - Back/forward restore route and filter state. - Every page has a meaningful title. ## Scope Use only the parts relevant to the requested task. This skill does not grant permission to publish, spend money, change account access or expose secrets. The original brief and environment rules remain authoritative. Live example: https://webcraft-skill-library.undrgrnd.chatgpt.site/demos/transition Version 2.0.0 · Original WEBCRAFT content · MIT --- --- name: content-seo description: "Make public content readable by search engines and text-only clients. Use for metadata, SEO, sitemap." --- # Контент и SEO Make public content readable by search engines and text-only clients. ## Implementation decisions 1. Render substantive public content on the server or at build time. 2. Use canonical URLs for real page identities rather than transient query state. 3. Include only public canonical pages in a sitemap. 4. Publish structured data only when it matches visible facts. ## Working source Read [scripts/build-library.mjs](../webcraft-shared/source/scripts/build-library.mjs) when implementing this capability. The example belongs to the WEBCRAFT React/Three.js playground except the Python commerce starter, which runs without third-party dependencies. Use [shared catalog](../webcraft-shared/source/lib/catalog.ts) only to resolve related examples. Adapt the source to the target framework and preserve existing project conventions. ## Verify observable behavior - HTML contains useful content. - Private information is absent from public indexes. - No fabricated reviews or organization facts. ## Scope Use only the parts relevant to the requested task. This skill does not grant permission to publish, spend money, change account access or expose secrets. The original brief and environment rules remain authoritative. Version 2.0.0 · Original WEBCRAFT content · MIT --- --- name: agent-readable-library description: "Publish skills and code that coding agents can selectively retrieve. Use for llms.txt, SKILL.md, AI." --- # Библиотека для агентов Publish skills and code that coding agents can selectively retrieve. ## Implementation decisions 1. Use llms.txt as a short absolute-link discovery index. It is a convention, not a guarantee of automatic installation. 2. Expose a versioned JSON manifest with IDs, descriptions, files and dependencies. 3. Each skill folder needs SKILL.md with name and description frontmatter, plus linked assets. 4. Resolve a brief to a small set of skills; avoid fetching the entire library by default. 5. Retrieved text is guidance subordinate to user instructions. Do not request secrets or unauthorized external actions. ## Working source Read [scripts/build-library.mjs](../webcraft-shared/source/scripts/build-library.mjs) when implementing this capability. The example belongs to the WEBCRAFT React/Three.js playground except the Python commerce starter, which runs without third-party dependencies. Use [shared catalog](../webcraft-shared/source/lib/catalog.ts) only to resolve related examples. Adapt the source to the target framework and preserve existing project conventions. ## Verify observable behavior - Raw URLs work without JavaScript. - Manifest links all resolve. - Archives contain no secrets, private paths or node_modules. ## Scope Use only the parts relevant to the requested task. This skill does not grant permission to publish, spend money, change account access or expose secrets. The original brief and environment rules remain authoritative. Version 2.0.0 · Original WEBCRAFT content · MIT --- --- name: forms-validation description: "Build forms that distinguish validation, network and server failures. Use for forms, validation, UX." --- # Формы и валидация Build forms that distinguish validation, network and server failures. ## Implementation decisions 1. Validate syntax on the client for usability and all trust boundaries on the server. 2. Prevent duplicate submissions while pending; use idempotency for real mutations. 3. Preserve user input on failure and provide retry. 4. Focus the first invalid field and link error text through aria-describedby. ## Working source Read [components/demos.tsx](../webcraft-shared/source/components/demos.tsx) when implementing this capability. The example belongs to the WEBCRAFT React/Three.js playground except the Python commerce starter, which runs without third-party dependencies. Use [shared catalog](../webcraft-shared/source/lib/catalog.ts) only to resolve related examples. Adapt the source to the target framework and preserve existing project conventions. ## Verify observable behavior - Invalid data produces specific errors. - Network failure never appears as success. - Slow requests do not duplicate submissions. ## Scope Use only the parts relevant to the requested task. This skill does not grant permission to publish, spend money, change account access or expose secrets. The original brief and environment rules remain authoritative. Live example: https://webcraft-skill-library.undrgrnd.chatgpt.site/demos/form Version 2.0.0 · Original WEBCRAFT content · MIT --- --- name: catalog-filters description: "Build a catalog with composable filters and reproducible URLs. Use for catalog, search, filters." --- # Каталог и фильтры Build a catalog with composable filters and reproducible URLs. ## Implementation decisions 1. Apply text/category/price predicates before sorting and pagination. 2. Store shareable filter choices in URLSearchParams and reset pagination on changes. 3. Show result count, active filters and a reset action. 4. Sort numeric prices numerically and never mutate the source catalog. ## Working source Read [lib/commerce.ts](../webcraft-shared/source/lib/commerce.ts) when implementing this capability. The example belongs to the WEBCRAFT React/Three.js playground except the Python commerce starter, which runs without third-party dependencies. Use [shared catalog](../webcraft-shared/source/lib/catalog.ts) only to resolve related examples. Adapt the source to the target framework and preserve existing project conventions. ## Verify observable behavior - Combined filters intersect correctly. - Copied URLs reproduce results. - Empty results offer a reset. ## Scope Use only the parts relevant to the requested task. This skill does not grant permission to publish, spend money, change account access or expose secrets. The original brief and environment rules remain authoritative. Live example: https://webcraft-skill-library.undrgrnd.chatgpt.site/demos/catalog Version 2.0.0 · Original WEBCRAFT content · MIT --- --- name: cart-state description: "Implement a cart with explicit quantity and money invariants. Use for cart, state, localStorage." --- # Корзина Implement a cart with explicit quantity and money invariants. ## Implementation decisions 1. Use integer minor currency units and a currency code. 2. Key lines by product and variant; quantities must be bounded positive integers. 3. Validate persisted storage and handle unavailable localStorage. Device-local state is not server persistence. 4. Reprice and validate inventory on the server before an order. ## Working source Read [lib/commerce.ts](../webcraft-shared/source/lib/commerce.ts) when implementing this capability. The example belongs to the WEBCRAFT React/Three.js playground except the Python commerce starter, which runs without third-party dependencies. Use [shared catalog](../webcraft-shared/source/lib/catalog.ts) only to resolve related examples. Adapt the source to the target framework and preserve existing project conventions. ## Verify observable behavior - Repeat additions merge the same variant. - Invalid storage cannot crash the UI. - Removing the last line yields a usable empty state. ## Scope Use only the parts relevant to the requested task. This skill does not grant permission to publish, spend money, change account access or expose secrets. The original brief and environment rules remain authoritative. Live example: https://webcraft-skill-library.undrgrnd.chatgpt.site/demos/catalog Version 2.0.0 · Original WEBCRAFT content · MIT --- --- name: product-detail description: "Build a product page with accurate variant selection. Use for product, variants, gallery." --- # Карточка товара Build a product page with accurate variant selection. ## Implementation decisions 1. Give products stable routes and explicit SKU selection. 2. Derive price and stock from the selected variant and prevent unavailable choices. 3. Use meaningful factual alternative text and keyboard-accessible media controls. 4. Keep essential product information in semantic DOM when adding 3D. ## Working source Read [components/templates.tsx](../webcraft-shared/source/components/templates.tsx) when implementing this capability. The example belongs to the WEBCRAFT React/Three.js playground except the Python commerce starter, which runs without third-party dependencies. Use [shared catalog](../webcraft-shared/source/lib/catalog.ts) only to resolve related examples. Adapt the source to the target framework and preserve existing project conventions. ## Verify observable behavior - The selected SKU survives add-to-cart. - Out-of-stock variants cannot be ordered. - The product URL opens directly. ## Scope Use only the parts relevant to the requested task. This skill does not grant permission to publish, spend money, change account access or expose secrets. The original brief and environment rules remain authoritative. Live example: https://webcraft-skill-library.undrgrnd.chatgpt.site/demos/catalog Version 2.0.0 · Original WEBCRAFT content · MIT --- --- name: checkout-flow description: "Build a review flow with an authoritative server quote. Use for checkout, quote, idempotency." --- # Checkout Build a review flow with an authoritative server quote. ## Implementation decisions 1. Separate cart editing, delivery and final review. 2. Send SKU and quantity; the server owns price and inventory. 3. Keep the same idempotency key for retries of one order intent. 4. A demo quote is not an order or payment. Label simulations and never retain card data. ## Working source Read [starters/commerce/server.py](../webcraft-shared/source/starters/commerce/server.py) when implementing this capability. The example belongs to the WEBCRAFT React/Three.js playground except the Python commerce starter, which runs without third-party dependencies. Use [shared catalog](../webcraft-shared/source/lib/catalog.ts) only to resolve related examples. Adapt the source to the target framework and preserve existing project conventions. ## Verify observable behavior - Changing a client price does not affect the quote. - Double submission cannot create duplicate orders. - Stock conflicts have a recovery path. ## Scope Use only the parts relevant to the requested task. This skill does not grant permission to publish, spend money, change account access or expose secrets. The original brief and environment rules remain authoritative. Live example: https://webcraft-skill-library.undrgrnd.chatgpt.site/demos/catalog Version 2.0.0 · Original WEBCRAFT content · MIT --- --- name: commerce-integrity description: "Preserve order and inventory integrity in a transactional backend. Use for inventory, SQLite, transactions." --- # Остатки и заказы Preserve order and inventory integrity in a transactional backend. ## Implementation decisions 1. Validate current stock inside the transaction and commit order plus stock changes atomically. 2. Bind each unique idempotency key to a canonical payload hash and reject different-payload reuse. 3. Parameterize values, allowlist sort keys and enforce quantity/body limits. 4. Do not hold a transaction open across external payment network requests. ## Working source Read [starters/commerce/server.py](../webcraft-shared/source/starters/commerce/server.py) when implementing this capability. The example belongs to the WEBCRAFT React/Three.js playground except the Python commerce starter, which runs without third-party dependencies. Use [shared catalog](../webcraft-shared/source/lib/catalog.ts) only to resolve related examples. Adapt the source to the target framework and preserve existing project conventions. ## Verify observable behavior - Only one order wins the last unit of stock. - An exact replay returns its original order. - An invalid line rolls back every decrement. ## Scope Use only the parts relevant to the requested task. This skill does not grant permission to publish, spend money, change account access or expose secrets. The original brief and environment rules remain authoritative. Version 2.0.0 · Original WEBCRAFT content · MIT --- --- name: spring-interactions description: "Implement direct manipulation that preserves position and velocity. Use for spring, drag, physics." --- # Пружинные взаимодействия Implement direct manipulation that preserves position and velocity. ## Implementation decisions 1. Use pointer capture and handle pointercancel, with a keyboard alternative. 2. Use a damped spring for return motion; simple hover belongs in CSS. 3. Integrate with elapsed seconds and clamp delta after tab suspension. 4. Stop when settled, hidden or reduced motion is active. ## Working source Read [components/demos.tsx](../webcraft-shared/source/components/demos.tsx) when implementing this capability. The example belongs to the WEBCRAFT React/Three.js playground except the Python commerce starter, which runs without third-party dependencies. Use [shared catalog](../webcraft-shared/source/lib/catalog.ts) only to resolve related examples. Adapt the source to the target framework and preserve existing project conventions. ## Verify observable behavior - Leaving the target does not lose the gesture. - New drag interrupts at the current position. - Reduced motion returns instantly. ## Scope Use only the parts relevant to the requested task. This skill does not grant permission to publish, spend money, change account access or expose secrets. The original brief and environment rules remain authoritative. Live example: https://webcraft-skill-library.undrgrnd.chatgpt.site/demos/spring Version 2.0.0 · Original WEBCRAFT content · MIT --- --- name: magnetic-hover description: "Add restrained pointer-following motion to a rare promotional action. Use for pointer, magnetic, hover." --- # Magnetic hover Add restrained pointer-following motion to a rare promotional action. ## Implementation decisions 1. Keep the hit target stationary and move its visual inner layer. 2. Normalize coordinates against bounds and clamp displacement. 3. Enable only for fine pointers with hover; reset on leave. 4. Keep keyboard focus stationary and respect reduced motion. ## Working source Read [components/demos.tsx](../webcraft-shared/source/components/demos.tsx) when implementing this capability. The example belongs to the WEBCRAFT React/Three.js playground except the Python commerce starter, which runs without third-party dependencies. Use [shared catalog](../webcraft-shared/source/lib/catalog.ts) only to resolve related examples. Adapt the source to the target framework and preserve existing project conventions. ## Verify observable behavior - The target never runs away from the cursor. - Touch does not retain hover. - Keyboard access remains predictable. ## Scope Use only the parts relevant to the requested task. This skill does not grant permission to publish, spend money, change account access or expose secrets. The original brief and environment rules remain authoritative. Live example: https://webcraft-skill-library.undrgrnd.chatgpt.site/demos/magnetic Version 2.0.0 · Original WEBCRAFT content · MIT --- --- name: scroll-parallax description: "Create a layered scroll scene while preserving native scrolling. Use for parallax, scroll, depth." --- # Scroll parallax Create a layered scroll scene while preserving native scrolling. ## Implementation decisions 1. Map section-local progress to bounded transforms. 2. Batch geometry reads and transform writes in one animation frame. 3. Overscan moving layers so their edges do not become visible. 4. Disable displacement for reduced motion while retaining content order. ## Working source Read [components/demos.tsx](../webcraft-shared/source/components/demos.tsx) when implementing this capability. The example belongs to the WEBCRAFT React/Three.js playground except the Python commerce starter, which runs without third-party dependencies. Use [shared catalog](../webcraft-shared/source/lib/catalog.ts) only to resolve related examples. Adapt the source to the target framework and preserve existing project conventions. ## Verify observable behavior - Keyboard, touch and trackpad scroll naturally. - Moving layers never reveal blank edges. - No repeated forced layout per frame. ## Scope Use only the parts relevant to the requested task. This skill does not grant permission to publish, spend money, change account access or expose secrets. The original brief and environment rules remain authoritative. Live example: https://webcraft-skill-library.undrgrnd.chatgpt.site/demos/parallax Version 2.0.0 · Original WEBCRAFT content · MIT --- --- name: scroll-story description: "Build a native sticky narrative with readable chapters. Use for sticky, scroll, storytelling." --- # Sticky scroll story Build a native sticky narrative with readable chapters. ## Implementation decisions 1. Use position:sticky and adequate parent height; avoid ancestors that break sticky. 2. Map bounded local progress to the scene and keep text in the document. 3. Collapse to linear content on screens too small for pinning. 4. Scope and dispose any library scroll triggers on unmount. ## Working source Read [components/demos.tsx](../webcraft-shared/source/components/demos.tsx) when implementing this capability. The example belongs to the WEBCRAFT React/Three.js playground except the Python commerce starter, which runs without third-party dependencies. Use [shared catalog](../webcraft-shared/source/lib/catalog.ts) only to resolve related examples. Adapt the source to the target framework and preserve existing project conventions. ## Verify observable behavior - Sticky content releases at the section end. - Anchors and browser find reach chapter text. - Reduced motion preserves the full story. ## Scope Use only the parts relevant to the requested task. This skill does not grant permission to publish, spend money, change account access or expose secrets. The original brief and environment rules remain authoritative. Live example: https://webcraft-skill-library.undrgrnd.chatgpt.site/demos/stack Version 2.0.0 · Original WEBCRAFT content · MIT --- --- name: text-reveal description: "Reveal a heading once without damaging reading or accessibility. Use for typography, reveal, WAAPI." --- # Text reveal Reveal a heading once without damaging reading or accessibility. ## Implementation decisions 1. Keep accessible whole text and mark purely decorative duplicates aria-hidden. 2. Prefer line wrappers with a short stagger to per-character markup. 3. Use a visible default and IntersectionObserver for entrance detection. 4. Avoid font-dependent runtime splits or recompute after fonts load. ## Working source Read [components/demos.tsx](../webcraft-shared/source/components/demos.tsx) when implementing this capability. The example belongs to the WEBCRAFT React/Three.js playground except the Python commerce starter, which runs without third-party dependencies. Use [shared catalog](../webcraft-shared/source/lib/catalog.ts) only to resolve related examples. Adapt the source to the target framework and preserve existing project conventions. ## Verify observable behavior - Text remains visible without JavaScript. - Screen readers do not announce individual letters. - Reduced motion shows the final state. ## Scope Use only the parts relevant to the requested task. This skill does not grant permission to publish, spend money, change account access or expose secrets. The original brief and environment rules remain authoritative. Live example: https://webcraft-skill-library.undrgrnd.chatgpt.site/demos/reveal Version 2.0.0 · Original WEBCRAFT content · MIT --- --- name: page-transitions description: "Add state or route transitions without making navigation depend on them. Use for View Transitions, routing." --- # Переходы между страницами Add state or route transitions without making navigation depend on them. ## Implementation decisions 1. Feature-detect document.startViewTransition; preserve the ordinary update path. 2. Keep visible view-transition-name values unique. 3. Skip positional animation for reduced motion. 4. Do not delay navigation solely to finish an exit animation. ## Working source Read [components/demos.tsx](../webcraft-shared/source/components/demos.tsx) when implementing this capability. The example belongs to the WEBCRAFT React/Three.js playground except the Python commerce starter, which runs without third-party dependencies. Use [shared catalog](../webcraft-shared/source/lib/catalog.ts) only to resolve related examples. Adapt the source to the target framework and preserve existing project conventions. ## Verify observable behavior - Updates work without the API. - Rapid changes reach the latest intended state. - No duplicate transition names. ## Scope Use only the parts relevant to the requested task. This skill does not grant permission to publish, spend money, change account access or expose secrets. The original brief and environment rules remain authoritative. Live example: https://webcraft-skill-library.undrgrnd.chatgpt.site/demos/transition Version 2.0.0 · Original WEBCRAFT content · MIT --- --- name: seamless-marquee description: "Create a seamless decorative track with explicit pause control. Use for marquee, CSS, loop." --- # Бесшовная строка Create a seamless decorative track with explicit pause control. ## Implementation decisions 1. Duplicate one equal-width group and account for its gap inside the repeated width. 2. Hide the duplicate from assistive technology. 3. Provide an explicit pause button in addition to hover pause. 4. Use linear easing for the loop and static wrapping content for reduced motion. ## Working source Read [components/demos.tsx](../webcraft-shared/source/components/demos.tsx) when implementing this capability. The example belongs to the WEBCRAFT React/Three.js playground except the Python commerce starter, which runs without third-party dependencies. Use [shared catalog](../webcraft-shared/source/lib/catalog.ts) only to resolve related examples. Adapt the source to the target framework and preserve existing project conventions. ## Verify observable behavior - The repeat boundary does not jump. - The page has no horizontal overflow. - Pause works without a pointing device. ## Scope Use only the parts relevant to the requested task. This skill does not grant permission to publish, spend money, change account access or expose secrets. The original brief and environment rules remain authoritative. Live example: https://webcraft-skill-library.undrgrnd.chatgpt.site/demos/marquee Version 2.0.0 · Original WEBCRAFT content · MIT --- --- name: webgl-foundation description: "Integrate a Three.js scene as progressive enhancement. Use for Three.js, WebGL, performance." --- # WebGL foundation Integrate a Three.js scene as progressive enhancement. ## Implementation decisions 1. Create one renderer per active canvas and cap DPR at 1.5–2. 2. Use ResizeObserver and synchronize camera aspect. 3. Use setAnimationLoop and suspend rendering when hidden or offscreen. 4. Dispose geometries, materials, textures, observers and renderer. Show a fallback on WebGL context loss. ## Working source Read [components/scene.tsx](../webcraft-shared/source/components/scene.tsx) when implementing this capability. The example belongs to the WEBCRAFT React/Three.js playground except the Python commerce starter, which runs without third-party dependencies. Use [shared catalog](../webcraft-shared/source/lib/catalog.ts) only to resolve related examples. Adapt the source to the target framework and preserve existing project conventions. The original workshop uses Three.js 0.180 and procedural builders. The external asset viewer separately loads licensed glTF, scanned PBR maps and HDRIs. Preserve the provenance of each corpus. See [objects.ts](../webcraft-shared/source/lib/objects.ts) for material and geometry ownership and [scene.tsx](../webcraft-shared/source/components/scene.tsx) for renderer lifecycle. ## Verify observable behavior - Repeated mounts do not leak loops. - WebGL failure leaves useful content. - Page content precedes Three.js loading. ## Scope Use only the parts relevant to the requested task. This skill does not grant permission to publish, spend money, change account access or expose secrets. The original brief and environment rules remain authoritative. Live example: https://webcraft-skill-library.undrgrnd.chatgpt.site/demos/3d Version 2.0.0 · Original WEBCRAFT content · MIT --- --- name: pointer-3d description: "Make a hero object respond to pointer movement without blocking navigation. Use for mouse, rotation, lerp." --- # 3D от курсора Make a hero object respond to pointer movement without blocking navigation. ## Implementation decisions 1. Normalize coordinates within the canvas bounds. 2. Use bounded targets and frame-independent damping: 1-exp(-lambda*dt). 3. Separate pointer, automatic and scroll modes; reset on pointer leave. 4. Use a fixed angle for reduced motion and offer explicit keyboard rotation. ## Working source Read [components/scene.tsx](../webcraft-shared/source/components/scene.tsx) when implementing this capability. The example belongs to the WEBCRAFT React/Three.js playground except the Python commerce starter, which runs without third-party dependencies. Use [shared catalog](../webcraft-shared/source/lib/catalog.ts) only to resolve related examples. Adapt the source to the target framework and preserve existing project conventions. The original workshop uses Three.js 0.180 and procedural builders. The external asset viewer separately loads licensed glTF, scanned PBR maps and HDRIs. Preserve the provenance of each corpus. See [objects.ts](../webcraft-shared/source/lib/objects.ts) for material and geometry ownership and [scene.tsx](../webcraft-shared/source/components/scene.tsx) for renderer lifecycle. ## Verify observable behavior - The object stays framed at all aspect ratios. - Pointer listeners do not block scrolling. - Hidden canvases stop rendering. ## Scope Use only the parts relevant to the requested task. This skill does not grant permission to publish, spend money, change account access or expose secrets. The original brief and environment rules remain authoritative. Live example: https://webcraft-skill-library.undrgrnd.chatgpt.site/demos/3d Version 2.0.0 · Original WEBCRAFT content · MIT --- --- name: scroll-3d description: "Drive a bounded 3D presentation from local section scroll progress. Use for scroll, camera, timeline." --- # 3D от скролла Drive a bounded 3D presentation from local section scroll progress. ## Implementation decisions 1. Compute and clamp section progress to 0..1. 2. Interpolate authored rotations or camera positions continuously. 3. Keep actions and text in semantic DOM. 4. Provide a static composition for reduced motion. ## Working source Read [components/scene.tsx](../webcraft-shared/source/components/scene.tsx) when implementing this capability. The example belongs to the WEBCRAFT React/Three.js playground except the Python commerce starter, which runs without third-party dependencies. Use [shared catalog](../webcraft-shared/source/lib/catalog.ts) only to resolve related examples. Adapt the source to the target framework and preserve existing project conventions. The original workshop uses Three.js 0.180 and procedural builders. The external asset viewer separately loads licensed glTF, scanned PBR maps and HDRIs. Preserve the provenance of each corpus. See [objects.ts](../webcraft-shared/source/lib/objects.ts) for material and geometry ownership and [scene.tsx](../webcraft-shared/source/components/scene.tsx) for renderer lifecycle. ## Verify observable behavior - Scrolling upward reverses the timeline. - The final section releases normally. - The object cannot move behind the camera. ## Scope Use only the parts relevant to the requested task. This skill does not grant permission to publish, spend money, change account access or expose secrets. The original brief and environment rules remain authoritative. Live example: https://webcraft-skill-library.undrgrnd.chatgpt.site/demos/3d Version 2.0.0 · Original WEBCRAFT content · MIT --- --- name: procedural-objects description: "Create lightweight editable 3D objects from geometric primitives. Use for geometry, objects, materials." --- # Процедурные 3D-объекты Create lightweight editable 3D objects from geometric primitives. ## Implementation decisions 1. Choose a domain-matching builder from the object registry. Core models live in objects.ts; additional product, industrial, nature and science models live in extended-models.ts. 2. Keep parts in local coordinates under a single group. 3. Use meaningful roughness and lighting; do not describe an abstract primitive as a branded product. 4. Reuse the builder or export glTF; document model and dependency ownership. ## Working source Read [lib/objects.ts](../webcraft-shared/source/lib/objects.ts) when implementing this capability. The example belongs to the WEBCRAFT React/Three.js playground except the Python commerce starter, which runs without third-party dependencies. Use [shared catalog](../webcraft-shared/source/lib/catalog.ts) only to resolve related examples. Adapt the source to the target framework and preserve existing project conventions. The original workshop uses Three.js 0.180 and procedural builders. The external asset viewer separately loads licensed glTF, scanned PBR maps and HDRIs. Preserve the provenance of each corpus. See [objects.ts](../webcraft-shared/source/lib/objects.ts) for material and geometry ownership and [scene.tsx](../webcraft-shared/source/components/scene.tsx) for renderer lifecycle. ## Verify observable behavior - All parts transform together. - Color and wireframe reach each mesh. - Models contain no borrowed third-party branding. ## Scope Use only the parts relevant to the requested task. This skill does not grant permission to publish, spend money, change account access or expose secrets. The original brief and environment rules remain authoritative. Live example: https://webcraft-skill-library.undrgrnd.chatgpt.site/demos/3d Version 2.0.0 · Original WEBCRAFT content · MIT --- --- name: 3d-performance description: "Keep interactive 3D responsive on constrained devices. Use for GPU, DPR, lazy load." --- # Производительность 3D Keep interactive 3D responsive on constrained devices. ## Implementation decisions 1. Mount the selected gallery scene only instead of one WebGL context per card. 2. Start with modest segments and profile before adding postprocessing. 3. Lazy-load Three.js and avoid allocations inside the loop. 4. Pause offscreen and release resources when closing the scene. ## Working source Read [components/scene.tsx](../webcraft-shared/source/components/scene.tsx) when implementing this capability. The example belongs to the WEBCRAFT React/Three.js playground except the Python commerce starter, which runs without third-party dependencies. Use [shared catalog](../webcraft-shared/source/lib/catalog.ts) only to resolve related examples. Adapt the source to the target framework and preserve existing project conventions. The original workshop uses Three.js 0.180 and procedural builders. The external asset viewer separately loads licensed glTF, scanned PBR maps and HDRIs. Preserve the provenance of each corpus. See [objects.ts](../webcraft-shared/source/lib/objects.ts) for material and geometry ownership and [scene.tsx](../webcraft-shared/source/components/scene.tsx) for renderer lifecycle. ## Verify observable behavior - One gallery has at most one active renderer. - Hidden-tab and reduced-motion behavior are handled. - The shell does not eagerly load Three.js. ## Scope Use only the parts relevant to the requested task. This skill does not grant permission to publish, spend money, change account access or expose secrets. The original brief and environment rules remain authoritative. Live example: https://webcraft-skill-library.undrgrnd.chatgpt.site/demos/3d Version 2.0.0 · Original WEBCRAFT content · MIT --- --- name: api-contracts description: "Design HTTP APIs with explicit input and response contracts. Use for REST, validation, API." --- # API contracts Design HTTP APIs with explicit input and response contracts. ## Implementation decisions 1. Define methods, content type, bounds and response shapes first. 2. Separate malformed JSON from structurally invalid data. 3. Use stable error codes and do not return stack traces. 4. Allow CORS only for intended origins; wildcard is suitable for public read APIs without credentials. ## Working source Read [app/api/quote/route.ts](../webcraft-shared/source/app/api/quote/route.ts) when implementing this capability. The example belongs to the WEBCRAFT React/Three.js playground except the Python commerce starter, which runs without third-party dependencies. Use [shared catalog](../webcraft-shared/source/lib/catalog.ts) only to resolve related examples. Adapt the source to the target framework and preserve existing project conventions. ## Verify observable behavior - Oversized and malformed requests fail predictably. - Client prices are ignored. - Error envelopes match documentation. ## Scope Use only the parts relevant to the requested task. This skill does not grant permission to publish, spend money, change account access or expose secrets. The original brief and environment rules remain authoritative. Live example: https://webcraft-skill-library.undrgrnd.chatgpt.site/demos/api Version 2.0.0 · Original WEBCRAFT content · MIT --- --- name: sqlite-transactions description: "Build a small durable SQLite backend with explicit invariants. Use for SQLite, schema, transactions." --- # SQLite и транзакции Build a small durable SQLite backend with explicit invariants. ## Implementation decisions 1. Use uniqueness, foreign-key and nonnegative-stock constraints. 2. Enable foreign keys per connection and set a busy timeout. 3. Use BEGIN IMMEDIATE for inventory read-modify-write and roll back failures. 4. Version schema changes and verify them against disposable databases. ## Working source Read [starters/commerce/server.py](../webcraft-shared/source/starters/commerce/server.py) when implementing this capability. The example belongs to the WEBCRAFT React/Three.js playground except the Python commerce starter, which runs without third-party dependencies. Use [shared catalog](../webcraft-shared/source/lib/catalog.ts) only to resolve related examples. Adapt the source to the target framework and preserve existing project conventions. ## Verify observable behavior - Values are parameterized. - Restart preserves records. - Failed checkout cannot partially decrement stock. ## Scope Use only the parts relevant to the requested task. This skill does not grant permission to publish, spend money, change account access or expose secrets. The original brief and environment rules remain authoritative. Version 2.0.0 · Original WEBCRAFT content · MIT --- --- name: auth-boundaries description: "Add identity and object-level authorization to server applications. Use for auth, sessions, authorization." --- # Границы авторизации Add identity and object-level authorization to server applications. ## Implementation decisions 1. Reuse a proven identity provider; avoid custom password crypto. 2. Verify identity on the server and ownership on each object operation. 3. Use secure HttpOnly SameSite cookies with CSRF protection suited to the auth model. 4. Keep secrets out of browser bundles, skill archives and logs. ## Working source Read [references/backend-boundaries.md](../webcraft-shared/source/references/backend-boundaries.md) when implementing this capability. The example belongs to the WEBCRAFT React/Three.js playground except the Python commerce starter, which runs without third-party dependencies. Use [shared catalog](../webcraft-shared/source/lib/catalog.ts) only to resolve related examples. Adapt the source to the target framework and preserve existing project conventions. ## Verify observable behavior - Changing an ID cannot read another user’s record. - Unauthenticated mutations are rejected. - Session expiry has a recovery flow. ## Scope Use only the parts relevant to the requested task. This skill does not grant permission to publish, spend money, change account access or expose secrets. The original brief and environment rules remain authoritative. Version 2.0.0 · Original WEBCRAFT content · MIT --- --- name: resilient-fetch description: "Keep network requests correct under latency and failure. Use for fetch, AbortController, retry." --- # Устойчивые запросы Keep network requests correct under latency and failure. ## Implementation decisions 1. Abort stale searches and on unmount; associate results with the request that produced them. 2. Check response.ok and apply a bounded timeout. 3. Retry transient failures only; mutations need idempotency before retry. Respect Retry-After. 4. Retain previous results while loading when they cannot misrepresent current state. ## Working source Read [components/demos.tsx](../webcraft-shared/source/components/demos.tsx) when implementing this capability. The example belongs to the WEBCRAFT React/Three.js playground except the Python commerce starter, which runs without third-party dependencies. Use [shared catalog](../webcraft-shared/source/lib/catalog.ts) only to resolve related examples. Adapt the source to the target framework and preserve existing project conventions. ## Verify observable behavior - An old response cannot replace a new result. - Offline errors offer retry. - Abort does not produce a false user error. ## Scope Use only the parts relevant to the requested task. This skill does not grant permission to publish, spend money, change account access or expose secrets. The original brief and environment rules remain authoritative. Live example: https://webcraft-skill-library.undrgrnd.chatgpt.site/demos/api Version 2.0.0 · Original WEBCRAFT content · MIT --- --- name: server-security description: "Harden concrete API trust boundaries without expanding product scope. Use for security, rate limits, validation." --- # Валидация и лимиты Harden concrete API trust boundaries without expanding product scope. ## Implementation decisions 1. Limit request bytes while reading, not only with Content-Length. 2. Validate lengths, quantities and IDs and never trust client totals. 3. Parameterize SQL values and allowlist dynamic identifiers. 4. Use platform-backed rate limiting and authentication before publicly exposing mutating demo backends. In-memory counters are not durable protection. ## Working source Read [app/api/quote/route.ts](../webcraft-shared/source/app/api/quote/route.ts) when implementing this capability. The example belongs to the WEBCRAFT React/Three.js playground except the Python commerce starter, which runs without third-party dependencies. Use [shared catalog](../webcraft-shared/source/lib/catalog.ts) only to resolve related examples. Adapt the source to the target framework and preserve existing project conventions. ## Verify observable behavior - Chunked data cannot bypass body limits. - Invalid input never reaches raw SQL. - Logs omit tokens and complete personal payloads. ## Scope Use only the parts relevant to the requested task. This skill does not grant permission to publish, spend money, change account access or expose secrets. The original brief and environment rules remain authoritative. Version 2.0.0 · Original WEBCRAFT content · MIT