Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".
- 📁 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.
- 📁 .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
- 📁 scripts/
- 📄 examples.md
- 📄 SKILL.md
アイデアを設計まで落とし込むためのブレスト手順。実装前に必ず使うこと。
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.
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.
Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".
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.
- 📄 BEST_PRACTICES.md
- 📄 SKILL.md
- 📄 WORKFLOWS.md
使用 Semi Design 组件的完整指南,包括 MCP 工具使用流程、常见模式、最佳实践。当你需要查询 Semi Design 组件、生成组件代码或解决使用问题时,请使用此技能。
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
- 📄 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.