响应式
响应式设计与移动优先
ui-styling
duongductrong
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.
breakpoints
dylantarre
Generates responsive breakpoint tokens for media queries and container queries. Use when setting up responsive design, mobile-first layouts, or viewport-based styling. Outputs CSS, Tailwind, or JSON.
layout-primitives
dylantarre
Builds composable layout components (Stack, Cluster, Grid, Sidebar, Center, Cover). Use when creating layout systems, spacing compositions, or Every Layout-style intrinsic design patterns that adapt without breakpoints.
responsive-typography
dylantarre
Implements fluid typography using CSS clamp() that scales with viewport. Use when creating responsive font sizes, viewport-aware headings, or type that adapts smoothly without breakpoints.
protocols
modu-ai
Solo(단일 페르소나), Crew(다중 페르소나), Adaptive(컨텍스트 전환) 모드를 위한 글쓰기 프로토콜. 섹션 매핑과 페르소나 조율 전략을 정의한다. 콘텐츠 생성 워크플로우를 결정하거나 다중 페르소나 콘텐츠를 조율할 때 사용한다.
slidev-styling
yoanbernabeu
Style Slidev slides with UnoCSS and custom CSS. Use this skill for custom colors, typography, animations, and responsive designs.
interaction-design
petekp
Design intuitive, meaningful interactions grounded in user goals and cognitive principles. Use when designing component behaviors, user flows, feedback systems, error handling, loading states, transitions, accessibility, keyboard navigation, touch/gesture interactions, or when evaluating interaction quality. Also use for modal vs modeless decisions, direct manipulation patterns, input device considerations, emotional/dramatic aspects of UX, or when asked about making interfaces feel responsive, humane, and goal-directed.
suanfish-design-system
SuanFishXYY
Suanfish Design System — A unified multi-agent design language system with 14 specialized agents across 6 tiers and a REJECT mechanism for opinionated AI-driven UI generation. Governs both first-impression onboarding moments (welcome, version updates) and steady-state interfaces (three-pane layouts, modals, wizards, data viz). Activate when designing, generating, auditing, or refactoring any UI surface. 算鱼工作室的统一多智能体设计语言体系，14 位专精 agent 协同工作，分布在 6 个 tier，搭载 6 条 REJECT 硬规则。
interface-design
joabgonzalez
"UI/UX design patterns for software. Trigger: When designing user interfaces, planning UX flows, or evaluating UI decisions."
expo
joabgonzalez
"Managed workflow for cross-platform mobile apps with EAS. Trigger: When developing with Expo, configuring EAS services, or building mobile apps."
tailwind-css
sablier-labs
This skill should be used when the user asks about "Tailwind CSS", "tailwind-variants", "tv() function", "CSS-first configuration", "Tailwind breaking changes", mentions styling with Tailwind utilities, gradient syntax, or component variants with TypeScript.
react-native
joabgonzalez
"Cross-platform mobile development with React Native. Trigger: When developing mobile apps, implementing platform features, or optimizing performance."
asset-optimization
pluginagentmarketplace
Asset pipeline optimization, compression, streaming, and resource management for efficient game development and delivery.
frontend-ui-designer
GrishaAngelovGH
Expert guidance for creating modern, intuitive, and visually stunning user interfaces. Use this skill when designing or implementing frontend UIs, components, layout structures, or styling.
figma-design-sync
ratacat
"Use this agent when you need to synchronize a web implementation with its Figma design by automatically detecting and fixing visual differences. This agent should be used iteratively until the implementation matches the design.\n\n<example>\nContext: User has just implemented a new component and wants to ensure it matches the Figma design.\nuser: \\"I've just finished implementing the hero section component. Can you check if it matches the Figma design at https://figma.com/file/abc123/design?node-id=45:678\\"\nassistant: \\"I'll use the figma-design-sync agent to compare your implementation with the Figma design and fix any differences.\\"\n<uses Task tool to launch figma-design-sync agent with the Figma URL and local URL>\n</example>\n\n<example>\nContext: User is working on responsive design and wants to verify mobile breakpoint matches design.\nuser: \\"The mobile view doesn't look quite right. Here's the Figma: https://figma.com/file/xyz789/mobile?node-id=12:34\\"\nassistant: \\"Let me use the figma-design-sy..."
magento-luma-specialist
maxnorm
Customizes and extends Magento's default Luma theme. Use when working with Luma theme, LESS preprocessing, RequireJS modules, KnockoutJS components, or traditional Magento frontend architecture. Masters LESS variables, RequireJS configuration, and responsive design.
magento-theme-developer
maxnorm
Creates custom Magento 2 themes, child themes, and theme modifications. Use when developing themes, customizing frontend, implementing responsive design, or working with Luma/Blank themes. Masters frontend architecture, layout XML, templates, and performance optimization.
magento-frontend-developer
maxnorm
Creates comprehensive Magento 2 frontend solutions. Use when developing frontend features, working with layout XML, templates, JavaScript, or responsive design. Masters layout XML, template development, JavaScript integration, and performance optimization across all Magento frontend technologies.
ios-glass-ui-designer
heyman333
Redesign mobile app UI to feel unmistakably iOS-native with modern Apple-like glass materials (translucency, blur, depth). Use this skill when designing iOS-first interfaces that leverage iOS material hierarchy (ultra-thin/regular/thick), SF Pro typography, safe-area patterns, and system component behaviors—without overdoing glass effects.
apple-ui-designer
heyman333
Redesign mobile app UI to feel unmistakably Apple-like, iOS-forward, and native. Use this skill when building iOS apps, applying Apple Human Interface Guidelines, or creating native-feeling mobile interfaces with SF Pro typography, translucency, and system-like components.
editorial-designer
heyman333
Create distinctive, production-grade frontend interfaces with high editorial 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.
pubnub-order-delivery-driver
pubnub
Build real-time order tracking and delivery driver systems with PubNub
form-cro
almeidamarcell
When the user wants to optimize any form that is NOT signup/registration — including lead capture forms, contact forms, demo request forms, application forms, survey forms, or checkout forms. Also use when the user mentions "form optimization," "lead form conversions," "form friction," "form fields," "form completion rate," or "contact form." For signup/registration forms, see signup-flow-cro. For popups containing forms, see popup-cro.
auth_patterns
vuralserhat86
Master authentication and authorization patterns including JWT, OAuth2, session management, and RBAC to build secure, scalable access control systems. Use when implementing auth systems, securing APIs, or debugging security issues.