Design
UI/UX direction, visual design, and design systems
design-system
by Tyler-R-Kendrick
Use when building or maintaining a design system — the coordinated set of design tokens, component libraries, documentation, and tooling that ensures visual and behavioral consistency across products. USE FOR: design system architecture, choosing token formats vs component frameworks, connecting Figma to code, design-to-development workflows, multi-platform consistency DO NOT USE FOR: specific token authoring (use design-tokens), Figma workflows (use figma), component cataloging (use storybook), token transformation (use style-dictionary), cross-framework components (use mitosis)
design-tokens
by Tyler-R-Kendrick
Use when authoring, structuring, or consuming design tokens in the W3C Design Tokens Community Group (DTCG) format. Covers token types, groups, aliases, composite tokens, and file conventions. USE FOR: W3C DTCG token files, token types (color, dimension, typography), token aliases and references, token groups, composite tokens, .tokens.json files DO NOT USE FOR: transforming tokens into platform code (use style-dictionary), Figma variable management (use figma), component styling (use the relevant framework skill)
mitosis
by Tyler-R-Kendrick
Use when writing cross-framework UI components with Mitosis (Builder.io). Write components once in a JSX subset, compile to React, Vue, Angular, Svelte, Solid, Qwik, and more. USE FOR: Mitosis component authoring, cross-framework component compilation, multi-framework design system components, Mitosis JSX syntax, mitosis.config.js DO NOT USE FOR: single-framework components (use the framework's own skill), design token management (use design-tokens or style-dictionary), component documentation (use storybook)
Accessibility Color Checker
by Eli-yu-first
"Validates color combinations against WCAG contrast ratios and suggests accessible alternatives"
flutter-skill
by thruthesky
"본 스킬은 Flutter 프레임워크로 앱을 개발하는 데 반드시 따라야 하는 UI/UX 디자인, 상태관리, 네트워킹, API 연동에 관한 가이드라인 제공합니다. 본 스킬은 선택적인 정보를 제공하는 것이 아니라 Flutter 앱 개발에 필수적인 지침을 제공하며 반드시 준수해야 할 사항들을 제공합니다. 개발자가 디자인, UI, UX, 디자인 효과, 상태관리, 라우팅, 네트워킹, API 연동에 관한 요청, 코믹디자인, Comic 관련 요청, 채팅, FCM, 푸시 알림, 메시지, 알림에 관한 요청이 있을 때 반드시 본 스킬을 사용해서 본 스킬이 제공하는 대로 작업을 수행해야 합니다. 각 스킬 문서에의 상단에는 반드시 따라야 할 Workflow 가 있습니다. 반드시 그 Workflow 를 따라야 합니다. 추가 트리거 키워드 - 딥링크, deep link, 캐싱, cache, 아이콘, FontAwesome, Isolate, 동시성, concurrency, 카카오톡, KakaoTalk, Crashlytics, 크래시 리포팅, 공유, share, share_plus, 공유 버튼 (project)"
Responsive Breakpoint Advisor
by Eli-yu-first
"Advises on responsive design breakpoints based on analytics data and device usage patterns"
design-review
by KentoShimizu
"Run structured design reviews that produce actionable findings and clear approval decisions. Use when a design artifact needs formal review for usability, accessibility, consistency, and implementation readiness before handoff or approval; do not use for backend data-model or deployment pipeline decisions."
csharp-style-guide
by KentoShimizu
"Style, review, and refactoring standards for C#/.NET codebases. Trigger when .cs, .csproj, .sln, .props, .targets, or .razor artifacts are created, modified, or reviewed and C#-specific quality rules (naming, nullability, async patterns, API design consistency) must be enforced. Do not use for Java/Kotlin or JavaScript/TypeScript style concerns unless C# artifacts are also changed. In multi-language pull requests, run together with other applicable *-style-guide skills."
styling-system
by mgd34msu
"Load PROACTIVELY when task involves CSS architecture, theming, or visual design systems. Use when user says \"set up Tailwind\", \"add dark mode\", \"create a design system\", \"make it responsive\", or \"configure the theme\". Covers Tailwind configuration and custom plugins, design token systems, responsive breakpoint strategies, dark mode implementation, component variant patterns (CVA/class-variance-authority), CSS-in-JS alternatives, and animation patterns."
visual-testing
by serkan-ozal
Visual testing, UI verification, and design comparison using screenshots and Figma integration. Use when the user wants to verify UI appearance, compare with Figma designs, test responsive layouts, check for visual regressions, or validate design implementation.
applying-brand-guidelines
by ovachiever
This skill applies consistent corporate branding and styling to all generated documents including colors, fonts, layouts, and messaging
premium-frontend-design
by kv0906
Create award-winning, cinematic frontend interfaces that feel ALIVE. Combines 10+ years of creative frontend experience with technical excellence. Specializes in WebGL, custom shaders, premium animations, and distinctive aesthetics that would win on Awwwards. Use when building landing pages, dashboards, platforms, or any interface where "generic AI slop" is unacceptable.
ui-audit
by tommygeoco
"AI skill for automated UI audits. Evaluate interfaces against proven UX principles for visual hierarchy, accessibility, cognitive load, navigation, and more. Based on Making UX Decisions by Tommy Geoco."
aesthetic-excellence
by apexscaleai
Use when improving visual quality of existing UI - applies 2025 design principles for hierarchy, spacing systems, color theory, and typography excellence to elevate aesthetic appeal and user experience
design-system-foundation
by apexscaleai
Use when starting a new React Native or Next.js project to establish design system foundation - creates design tokens, folder structure, component architecture, and documentation scaffolding for consistent UI development
design-preset-system
by apexscaleai
Use when applying or switching design styles across UI components - provides preset design systems with tokens, patterns, and guidelines for different aesthetic approaches from timeless classics to bleeding-edge experimental styles
ui-refactoring-workflow
by apexscaleai
Use when refactoring existing React Native, Next.js, or TypeScript UI code to apply modern design principles and aesthetic excellence - analyzes current implementation, applies design presets, maintains functionality while elevating visual quality
ui-designer
by mae616
Design UI as information architecture + interaction + visual tone, then translate into implementable specs. Apply when discussing screen design, component design, design systems, or visual hierarchy.
style-guide-adherence
by troykelly
Use when writing code - follow Google style guides where available, otherwise follow established best practices for the language
aipoint-brand
by kcchien
Apply AIPoint brand guidelines to presentations, documents, and designs. Use this skill when creating or styling any content for AIPoint including: presentations (PPTX), documents (DOCX), web designs, marketing materials, or any visual content requiring AIPoint branding. Triggers: "AIPoint brand", "our brand", "company colors", "brand guidelines", "AIPoint style", or when working on AIPoint materials.
vscode-extension-uiux
by kcchien
Build secure, elegant, and accessible VS Code extensions with excellent UI/UX. Covers the complete Extension API including webviews, tree views, custom editors, sidebars, panels, and activity bar integration. Use this skill when: (1) Creating new VS Code extensions, (2) Building webview-based UIs, (3) Implementing tree views or custom editors, (4) Adding sidebar/panel contributions, (5) Ensuring extension security (CSP, message validation), (6) Theming and accessibility compliance, (7) Reviewing or improving existing extension UI/UX.
role-architect:system-design
by rnavarych
System design expertise including requirements analysis, C4 model diagrams, sequence diagrams, data flow diagrams, trade-off documentation, capacity estimation, distributed systems theory, load balancing algorithms, caching architectures, message-driven and stream processing architectures, data pipeline design, search architecture, and system design patterns for common internet-scale systems (URL shorteners, chat, news feed, rate limiters).
css-tokens
by schalkneethling
Provides foundational CSS design tokens (custom properties) for typography, spacing, colors, borders, z-index, and transitions. Use when setting up a base token system for a web project.
brand-designer
by oakoss
Creates cohesive brand identities including logos, color palettes, typography systems, and brand guidelines documents. Generates SVG logo components with variants, configures Tailwind color tokens, builds type scales, and produces social media and business card templates. Use when designing a logo, building a color palette, setting up typography systems, creating brand guidelines, generating social media templates, or organizing brand asset files. Use for branding, visual identity, logo design, brand guidelines, color systems.