Explorar skills

Capture or record visual behavior from a website — scroll transitions, hover, mousemove/parallax, auto-timers. Also for side-by-side comparison between a reference site and a local clone. Triggers on "take baseline screenshots of <URL>", "record the hover effects", "capture scroll animations", "record the parallax", "capture every transition on <URL>", "compare <ref> vs <localhost>", "diff against

Build frontend interfaces for Manzanita Research — warm, editorial, California-rooted design for music tools and brand pages. React + Tailwind. Use when building web components, pages, landing pages, dashboards, plugin UIs, or any web interface for Manzanita projects.

When designing loosely coupled systems that react to state changes asynchronously.

Orientação especializada para desenvolvimento Plone 6 e Volto. Abrange backend (Python, Dexterity, plone.restapi) e frontend (React, Volto, Blocks).

Build frontend interfaces with intentional, craft-level design — editorial layout, expressive typography, textured atmosphere, and considered motion. React + Tailwind. Use when building web components, pages, landing pages, dashboards, plugin UIs, or any web interface. For Manzanita Research projects, this skill works alongside brand-tokens for the visual identity layer.

When building or refactoring React UI components to ensure reusability and maintainability.

Compare original site vs implementation with automated AE/SSIM diff — near-zero vision tokens. Triggers on "it looks different", "doesn't match", "compare with original", "what's wrong", "why is the impl off", "diff against ref", "verify the clone". Uses auto-diagnose to find mismatched elements from diff images without vision tokens. Falls back to reading diff images only when auto-diagnose finds

Manage Rust projects effectively with Cargo workspaces, features, and tooling. Use when the user sets up Cargo workspaces, configures feature flags, writes build.rs scripts, prepares crates for publishing, or uses cargo clippy, cargo fmt, and other Cargo development tools.

Enforce immutable data patterns across JavaScript, TypeScript, Python, and Go. Use when the user writes code that mutates objects, arrays, or state. Apply whenever modifying data structures, updating state, or reviewing code for mutation bugs. Always prefer immutable patterns over in-place mutation.

Guide for writing GitHub Actions workflows with triggers, reusable workflows, matrix strategies, caching, secrets, and composite actions. Use when the user creates or modifies GitHub Actions workflows, asks about CI/CD on GitHub, or needs help with workflow syntax. Trigger whenever GitHub Actions, .github/workflows, or CI pipelines on GitHub are mentioned.

TypeScript strictness, clean code, and security rules. Use when writing, reviewing, or refactoring TypeScript code in any project. Enforces strict type safety (no any, no as, no unknown abuse), proper error handling patterns, import hygiene, React component conventions, and vulnerability prevention. Derived from 10+ production TypeScript projects with 100% strict mode adoption.

使用现代前端 Web 技术（React、Tailwind CSS、shadcn/ui）创建复杂多组件 claude.ai HTML artifacts 的工具套件。用于需要状态管理、路由或 shadcn/ui 组件的复杂 artifacts - 不适用于简单的单文件 HTML/JSX artifacts。