Skills
Discover and install skills to enhance Claude Code.
418 skills found - Clear filters
ark-dashboard-and-ui-testing
Test the Ark Dashboard and UI with Playwright and create PRs with screenshots. Use this skill when testing dashboard UI, taking screenshots for PRs, or validating dashboard changes.
formik-patterns
Formik form handling with validation patterns. Use when building forms, implementing validation, or handling form submission.
web-development
Web frontend project development rules. Use this skill when developing web frontend pages, deploying static hosting, and integrating CloudBase Web SDK.
demo-video
Create product demo videos by automating browser interactions and capturing frames. Use when the user wants to record a demo, walkthrough, product showcase, or interactive video of a web application. Supports Playwright CDP screencast for high-quality capture and FFmpeg for video encoding.
dagre-graph
Build DagreGraph components for hierarchical diagrams. Use for org charts, dependency graphs, flowcharts, and decision trees.
hotwire-patterns
Implements Hotwire patterns with Turbo Frames, Turbo Streams, and Stimulus controllers. Use when building interactive UIs, real-time updates, form handling, partial page updates, or when user mentions Turbo, Stimulus, or Hotwire.
mermaid-tools
Extracts Mermaid diagrams from markdown files and generates high-quality PNG images using bundled scripts. Activates when working with Mermaid diagrams, converting diagrams to PNG, extracting diagrams from markdown, or processing markdown files with embedded Mermaid code.
doc-views
Comprehensive guide for the view system in magenta.nvim, including template literal syntax, component composition, interactive bindings, and TUI-specific rendering patterns
threejs-animation
Three.js animation - keyframe animation, skeletal animation, morph targets, animation mixing. Use when animating objects, playing GLTF animations, creating procedural motion, or blending animations.
seo-meta-generator
Generate seo meta generator operations. Auto-activating skill for Frontend Development. Triggers on: seo meta generator, seo meta generator Part of the Frontend Development skill category. Use when working with seo meta generator functionality. Trigger with phrases like "seo meta generator", "seo generator", "seo".
frontend-mobile-development-component-scaffold
You are a React component architecture expert specializing in scaffolding production-ready, accessible, and performant components. Generate complete component implementations with TypeScript, tests, s
c4-component
Expert C4 Component-level documentation specialist. Synthesizes C4 Code-level documentation into Component-level architecture, defining component boundaries, interfaces, and relationships. Creates component diagrams and documentation. Use when synthesizing code-level documentation into logical components.
qr-code-generator
Use this skill when users need to create QR codes for any purpose. Triggers include: requests to "generate QR code", "create QR", "make a QR code for", or mentions of encoding data into scannable codes. Supports URLs, text, WiFi credentials, vCards (contact information), email addresses, phone numbers, SMS, location coordinates, calendar events, and custom data. Can customize colors, add logos, generate bulk QR codes, and export in multiple formats (PNG, SVG, PDF). Requires OpenClawCLI installation from clawhub.ai.
waterui
Build cross-platform apps with WaterUI. Use when writing views, handling state, styling UI, or debugging WaterUI Rust code. Covers reactive bindings, layout, components, and the water CLI.
huskarui
Expert on HuskarUI components. Queries metadata for documentation and examples. Works with or without Python.
miro
Manage Miro boards, sticky notes, and shapes via Miro API. Create collaborative whiteboards programmatically.
lighthouse-fixer
Run Lighthouse audit and get AI fix suggestions. Use when improving performance.
simon-html-tools
Build single-file HTML tools following Simon Willison's patterns - self-contained HTML+JS+CSS applications optimized for LLM generation, no build step, CDN dependencies. Use when creating browser-based tools, utilities, or demos that should be (1) Self-contained in one HTML file, (2) Easy to distribute and host statically, (3) Quick to prototype with LLMs, (4) Client-side only with no server requirements. Ideal for data visualization, API explorers, format converters, debugging tools, and interactive demos.
axiom-uikit-animation-debugging
Use when CAAnimation completion handler doesn't fire, spring physics look wrong on device, animation duration mismatches actual time, gesture + animation interaction causes jank, or timing differs between simulator and real hardware - systematic CAAnimation diagnosis with CATransaction patterns, frame rate awareness, and device-specific behavior
ffmpeg-media-info
Analyze media file properties - duration, resolution, bitrate, codecs, and stream information