Claude Skills by INERATE

Anime.js v4 animation guidance for timelines, SVG motion, draggable interactions, motion paths, scroll effects, staggering, and text splitting.

Apple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible transitions, translucent materials and depth, typography (optical sizing, tracking, leading), reduced-motion, or the design foundations (feedback, spatial consistency, restraint) behind Apple-style interfaces.

Atelier's native asset tools — image→webp compression, video→webp frame sequences, scrollytelling scaffolding, and AI video generation (Gemini Omni Flash / Veo 3.1) with a graceful no-credentials fallback. Load when handling images, video, storytelling sections, or media generation.

Initialize Atelier project state and check dependencies and optional integrations.

Execute an existing Atelier plan and verify its completion criteria.

Resolve unanswered project decisions using the Atelier clarification workflow.

Diagnose Atelier dependencies, database integrity, integrations and hooks.

Learn design and implementation lessons from supplied references into project overlays.

Create an Atelier project plan and verifiable done-state contract.

Promote a selected Atelier overlay into tracked project design documentation.

Review project changes against Atelier quality gates and the selected contract.

Verify an Atelier plan's release criteria and record its ship report.

Read Atelier plan progress, unmet criteria and known capability gaps.

Refresh an installed Atelier plugin and its project core defaults safely.

The Atelier Auth Law — production-hardened session architecture (rotating refresh tokens, families, grace window, silent refresh, sliding window) plus the anti-patterns that corrupt auth. Load before designing or touching ANY authentication code.

The Atelier Clean Code Law — 250-word-per-file budget, DRY via the graph, ponytail minimalism, and the comment policy. Load before writing or refactoring any source code.

The Atelier deployment advisor — where to host frontend, backend, database, and workers, with real cost expectations. Load when choosing hosting, estimating costs, or setting up deploys/CI.

The Atelier Design Law — premium, industrial-grade UI. Load BEFORE any UI/design work (pages, components, animations, icons, landing pages). Defines the style vocabulary, tokens, motion physics, component canon, reference canon, and the banned AI-slop anti-style.

Build a premium documentation site (Claude-docs style) with Astro Starlight, restyled to the design law, deployed free on GitHub Pages. Covers MDX vs Markdown, base-path setup, sidebar, search, and the deploy workflow. Load when the user asks for docs, a documentation site, a knowledge base, or a developer guide site.

The design-truth gateway — resolves which design files are authoritative right now (core law + self-learning overlays). Run at the START of any UI/design task, before reading the design law.

Continuous, self-contained component animations — Cloudflare/Stripe-style dynamic infographics. Inline SVG schematics with flowing data packets, pulsing nodes, and state-reactive timelines that run inside a card, not across the page. Load when building animated cards, data-flow diagrams, "how it works" graphics, ambient loops, or interactive micro-experiences.

The Atelier operating loop — understand → clarify → plan → execute → review → compare-vs-done-state. Governs when to stop, when to ask, which model tier runs each phase, and when to think deep or compact. Load for ANY nontrivial task.

Turn any component site, asset library, or API into something agents can use — a registry entry, a skill, or a full MCP server. Load when the user says "add this site/library to Atelier" or wants to contribute a new integration.

The thinking protocol — load FIRST on every prompt, before any other skill. Helps the selected model reason like a principal engineer - decisive answers, root-cause debugging, security reflexes, outcome-first communication. This is step 0 of the loop.

The Atelier Security Law — OWASP-grade defense for every request path (injection, XSS, CSRF, tenant isolation, rate limiting, transport). Load before writing ANY endpoint, form, or data-processing code — not just auth. Auth token/session mechanics live in [[auth-law]]; this is everything else.

Apply Atelier conventions for the project's existing stack when implementing or reviewing architecture.

The Atelier Structure Law — canonical, industrial-standard file structures per stack (Next.js, FastAPI, monorepo, full platform), naming rules, and the intake questions that settle layout once. Load before scaffolding or moving files.

Live 3D for the web — Spline embeds (@splinetool/runtime), three.js / React Three Fiber / Threlte, Theatre.js sequencing, 3D icons, PeachWeb, and the performance laws that keep 3D premium. Load for ANY 3D request — 3D hero, 3D icons, product viewer, WebGL, Spline scene, scroll-driven 3D.

Audit public websites and documentation for technical SEO, semantics, accessibility, responsive behavior, performance, metadata, and crawlability before release.