Design Tools Claudeスキル

Plasmic Automation

Automates UI development and content management tasks within the Plasmic visual builder platform using Composio's Rube MCP.

Adobe Creative Automation

Automates complex Adobe Creative Cloud workflows and asset management through the Rube MCP integration.

Felt Automation

Automates collaborative mapping workflows and spatial data management within Felt using the Rube MCP.

V0 Automation

Automates V0 UI generation and frontend development workflows using the Composio Rube MCP toolkit.

Dreamstudio Automation

Automates AI image generation and design workflows using Dreamstudio via the Rube MCP.

Frontend Design

Creates distinctive, production-grade frontend interfaces with high design quality that avoid generic AI aesthetics.

Frontend Patterns (ZH-TW)

Implements production-grade React and Next.js design patterns, performance optimizations, and UI best practices for modern web development.

Web Design Guidelines Auditor

Audits frontend code for compliance with Vercel's Web Interface Guidelines to ensure high-quality UI, UX, and accessibility standards.

Frontend Development Patterns

Standardizes React and Next.js development using battle-tested architectural patterns and UI best practices.

Medusa UI Component Documenter

Generates comprehensive, live-example-driven documentation for Medusa UI components following strict architectural patterns.

HeroUI React v3 Component Guide

Builds accessible, modern React interfaces using HeroUI v3 components and Tailwind CSS v4 architectures.

Responsive Web Design

Implements modern, adaptive layouts using container queries, fluid typography, and mobile-first CSS strategies.

Design System Patterns

Architects scalable UI foundations using design tokens, multi-brand theming infrastructure, and robust component patterns.

Visual Design Foundations

Implements professional visual design systems including typography scales, semantic color palettes, and spacing grids to ensure UI consistency and accessibility.

Accessibility Compliance Expert

Implements WCAG 2.2 compliant interfaces with ARIA patterns, keyboard navigation, and assistive technology support for inclusive user experiences.

Web Component Design Architecture

Architects reusable, high-performance UI components using modern patterns and styling strategies for React, Vue, and Svelte.

Interaction Design

Implements high-quality microinteractions, motion design, and responsive state transitions to enhance user experience and UI polish.

Frontend Design

Creates distinctive, production-grade frontend interfaces with high design quality and custom aesthetics.

Canvas Visual Designer

Generates sophisticated, museum-quality visual art and design philosophies through high-fidelity digital artifacts.

Web Artifacts Builder

Builds complex, multi-component React artifacts for Claude.ai featuring shadcn/ui and Tailwind CSS.

Algorithmic Art Creator

Generates sophisticated generative art systems and algorithmic philosophies using p5.js and seeded randomness.

Anthropic Brand Styling

Applies official Anthropic brand colors, typography, and visual identity standards to digital artifacts and presentations.

Theme Factory

Applies professional color palettes and font pairings to digital artifacts like slide decks, documents, and landing pages.

Figma to React Converter

Transforms Figma designs into pixel-perfect React components using TypeScript and Tailwind CSS V4.

Tailwind Design System

Implements scalable design systems and production-ready component libraries using Tailwind CSS and design tokens.

Tailwind Design System

Builds scalable, production-ready design systems using Tailwind CSS, design tokens, and standardized UI patterns.

Web Artifacts Builder

Builds sophisticated, multi-component React applications bundled into single-file HTML artifacts using modern frontend frameworks and design systems.

Theme Factory

Applies professional color palettes and font pairings to digital artifacts like slide decks, documents, and landing pages to ensure visual consistency.

Algorithmic Art

Generates sophisticated algorithmic art and interactive p5.js visualizations based on custom computational philosophies.

Slack GIF Creator

Generates and optimizes animated GIFs for Slack emojis and messages using custom drawings and motion effects.