响应式
响应式设计与移动优先
design_responsive
vuralserhat86
Breakpoints, fluid typography, container queries ve modern CSS features.
canvas_design
vuralserhat86
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
docs_api
vuralserhat86
OpenAPI/Swagger API documentation ve endpoint belgeleme şablonları.
better_auth
vuralserhat86
The ultimate authentication and authorization skill. Implement login, signin, signup, registration, OAuth, 2FA, MFA, passkeys, and user session management. Secure your application with RBAC and access control.
design_patterns
vuralserhat86
Visual hierarchy, z-index, shadows, animations ve white space kuralları.
database_design
vuralserhat86
Schema tasarımı, migration stratejileri, indexing, query optimization ve database best practices.
design_components
vuralserhat86
Button, card, input ve icon sizing kuralları. Component boyutlandırma standartları.
api_design
vuralserhat86
API tasarımı, GraphQL schema, OpenAPI spec, versioning. ⚠️ Tasarım aşaması için kullan. Uygulama/security için → backend-api.
design_tokens
vuralserhat86
8-point grid spacing, typography scale ve color system. Temel tasarım değişkenleri.
backend_core
vuralserhat86
Node.js/TypeScript temel prensipler, proje yapısı ve TypeScript strict mode kuralları.
clerk_auth
vuralserhat86
Clerk modern authentication, WebAuthn, passkeys ve social auth entegrasyonu rehberi.
cc_chrome_devtools_mcp_skill
justfinethanku
Comprehensive Chrome DevTools automation for performance testing, Core Web Vitals measurement (INP, LCP, CLS), network monitoring, accessibility validation, responsive testing, and browser automation. Uses Chrome DevTools Protocol via MCP to provide professional-grade web application testing, debugging, and analysis capabilities including performance tracing, HAR export, device emulation, and multi-page workflows.
slidev-styling
yoanbernabeu
Style Slidev slides with UnoCSS and custom CSS. Use this skill for custom colors, typography, animations, and responsive designs.
screencast-studio
TatsuKo-Tsukimi
Auto-record narrated demo videos of any web UI from a Playwright-driven walkthrough — primary use case is the vibe-coding test loop (you just shipped a feature with AI help and need to verify it / vibe-show it / iterate on it without manual screen recording). Output is a final.mp4 (synthetic cursor lerp + Material click ripples + burned-in subtitles + optional persistent mask regions for sensitive UI) plus a 4-pass review screenshot set for visual + privacy QA. Activate when the user wants to test or share something they just vibe-coded, or asks for a polished walkthrough / OSS feature demo / bug repro screencast / tutorial recording.
ux-ui
aviflombaum
UX/UI design principles for clean, intuitive interfaces. Use when designing layouts, improving usability, planning information architecture, or ensuring accessibility. Triggers on "user experience", "usability", "information architecture", "accessibility", "interaction design".
tailwind
aviflombaum
Tailwind CSS patterns, utilities, and component styling for Rails. Use when styling with Tailwind, creating responsive layouts, or building UI components. Triggers on "tailwind", "style with", "css classes", "responsive layout".
convert-pdf-to-epub
koreyba
Convert PDF books to EPUB format for e-readers. Use when user asks to convert PDF to EPUB, create an e-book from PDF, make PDF readable on Kindle/phone/tablet, or extract book content from PDF. Handles: chapter detection, image extraction with optimization, footnotes/endnotes with hyperlinks, reading order for multi-column layouts. Validates conversion quality automatically.
adding-tauri-system-tray
dchuk
Guides the user through implementing Tauri system tray functionality, including tray icon setup, tray menu creation, handling tray events, and updating the tray at runtime in the notification area.
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.
gstack
24601
Fast headless browser for QA testing and site dogfooding. Navigate pages, interact with elements, verify state, diff before/after, take annotated screenshots, test responsive layouts, forms, uploads, dialogs, and capture bug evidence. Use when asked to open or test a site, verify a deployment, dogfood a user flow, or file a bug with screenshots.
coder-frontend-design
OzeroHAX
Frontend design system practices: tokens, typography, color, layout, and component consistency.
testing-mobile
OzeroHAX
Mobile testing (native/hybrid/web, gestures, offline, interruptions)
tailwind-ui-patterns
autohandai
Tailwind CSS v4 patterns, component styling, and responsive design