- 📁 references/
- 📄 README.md
- 📄 SKILL.md
Audit designs against 18 professional rules across Figma files and code (HTML/CSS/React/Vue/Tailwind). Detects framework automatically, runs category-specific code superpowers (aria, focus, contrast, tokens, responsive, motion, forms, navigation, spacing), audits for dark patterns and ethical design issues, outputs before/after code diffs, and generates a structured developer handoff report. Triggers on: check my design, review my UI, audit my layout, is this accessible, design review, typography check, color contrast, WCAG, a11y, pixel perfect, UI critique, Figma audit, CSS check, review this component, does this look good, dark patterns, ethical design, is this GDPR compliant, check my onboarding, review my checkout, is this manipulative, any dark patterns here, check my landing page, is my UI accessible, check my design system, is this ethical, is my form accessible, check my navigation, is my dark mode correct, is this responsive, review my empty states, check my error states.
- 📁 assets/
- 📁 evals/
- 📁 examples/
- 📄 SKILL.md
Apply web animation principles from Animation at Work by Rachel Nabors. Covers human perception of motion, 12 principles of animation, animation patterns (transitions, supplements, feedback, demonstrations, decorations), CSS transitions, CSS animations, Web Animations API, SVG/Canvas/WebGL, communicating animation with storyboards and motion comps, performance (composite-only properties, will-change, RAIL), accessibility (prefers- reduced-motion, vestibular disorders), and team workflow. Trigger on "animation", "transition", "CSS animation", "keyframe", "easing", "motion design", "web animation", "prefers-reduced-motion", "storyboard", "parallax", "loading animation", "hover effect", "micro-interaction". --- # Animation at Work Skill You are an expert web animation advisor grounded in the 5 chapters from *Animation at Work* by Rachel Nabors. You help in two modes: 1. **Design Application** — Apply animation principles to create purposeful, performant web animations 2. **Design Review** — Analyze existing animations and recommend improvements ## How to Decide Which Mode - If the user asks to *create*, *add*, *implement*, *animate*, or *build* animations → **Design Application** - If the user asks to *review*, *audit*, *evaluate*, *optimize*, or *fix* animations → **Design Review** - If ambiguous, ask briefly which mode they'd prefer --- ## Mode 1: Design Application When helping create animations, follow this decision flow: ### Step 1 — Classify the Animation's Purpose Every animation must have a clear purpose. Classify using these five patterns: | Pattern | Purpose | When to Use | Example | |---------|---------|-------------|---------| | **Transition** | Show state change between views/states | Navigating pages, opening panels, switching tabs | Page slide-in, modal open/close | | **Supplement** | Bring elements into/out of a view that's already in place | Adding items to lists, showing notifications, revealing content | Toast notification slide-in, list item appear
- 📁 .claude-plugin/
- 📁 agents/
- 📁 autoresearch/
- 📄 .gitignore
- 📄 LICENSE
- 📄 logo.png
The ultimate frontend design and UI engineering skill. Use this whenever the user asks to build, design, style, or improve any web interface, component, page, application, dashboard, landing page, artifact, poster, or visual output. Covers typography, color systems, spatial design, motion/animation, interaction design, responsive layouts, sound design, haptic feedback, icon systems, generative art, theming, React best practices, and DESIGN.md system generation. Also use when the user asks to audit, critique, polish, simplify, animate, or normalize a frontend. Triggers on any mention of "make it look good," "fix the design," "UI," "UX," "frontend," "component," "landing page," "dashboard," "artifact," "poster," "design system," "theme," "animation," "responsive," or any request to improve visual quality. Use this skill even when the user does not explicitly ask for design help but the task involves producing a visual interface.
SVG business card designer that takes contact details and brand preferences, then produces 12 front design concepts with optional back designs, interactive HTML preview galleries, individual card showcases with front/back flip animation, and print-ready SVG exports with bleed area and crop marks. Supports horizontal and vertical orientations, six layout styles (minimal, corporate, creative, elegant, bold, tech), multiple color schemes, QR code placeholders, social media icons, and logo integration. Use this skill whenever the user asks to design a business card, create a name card, make visiting cards, or says "design business card", "buat kad bisnes", "create name card", "reka kad perniagaan", "design kad nama", "I need a business card for X". --- # Business Card Designer
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
Use this skill when users ask about design thinking basics, ideation techniques, or the Design Partner process. Trigger phrases: "what is design thinking", "how does this work", "what's the process", "how do I generate ideas", "what are best practices". --- # Design Thinking Fundamentals **For Claude:** This skill provides foundational design thinking knowledge to help users understand the Design Partner workflow and methodology. ## Core Design Thinking Process
iOS 26 / iPadOS 26 Liquid Glass design system for web and app development. Exact design tokens, component specs, layout patterns, and animation parameters from Apple's official Figma Community Kit.
This skill should be used when the user asks to "design a CLI", "improve command structure", "format terminal output", "review CLI usability", "design help text", or "add flags and arguments". Automatically activates when designing new CLI tools, improving command interfaces, formatting terminal output, or reviewing CLI usability. Not for GUI/web design, backend APIs, or shell scripting.
- 📄 LICENSE
- 📄 README.md
- 📄 SKILL.md
Rules and patterns for building UI with shadcn/ui, Tailwind v4, and Motion against a Vois design token set. Use when building components, pages, or any UI that should conform to the workspace design system. Covers spacing, typography, color tokens, component architecture, animation, accessibility, and modern CSS patterns.
Figma tasarım verisini AI'nın kod üretimi için kullanabileceği tek bir handoff paketine dönüştürür (HANDOFF şablonu + JSON manifest). Node kimlikleri, design context özeti, token özeti, ekran görüntüsü referansları ve opsiyonel Code Connect haritası üretir. PO/PM için executive summary da içerir. "AI handoff", "handoff dosyası", "handoff export", "teslimat paketi", "figma handoff", "koda teslim özeti", "design handoff oluştur", "handoff al", "implementasyon paketi" ifadeleriyle tetiklenir. F-MCP Bridge plugin bağlantısı gerektirir.
技术架构设计 Skill。根据产品需求文档（PRD）设计完整的技术架构方案，输出结构化的架构设计文档。覆盖技术栈选型、系统架构、数据模型、API 设计、部署方案、非功能需求、安全设计等。触发条件：(1) 设计技术架构，(2) 从 PRD 推导技术方案，(3) 系统设计/技术选型，(4) 数据库设计，(5) API 设计，(6) 部署架构设计。
Invoke BEFORE any design or feature work. Wraps superpowers:brainstorming with scout agent context harvesting, stack-first design considerations, and constitutional rule awareness. Asks questions one at a time to refine the design.
