Browse reusable Agent Skills, each with a clear purpose and practical guidance.
Use when designing, implementing, or reviewing responsive frontend layouts, mobile-first breakpoints, container queries, fluid grids, data-dense tables, touch targets, safe areas, orientation changes, viewport overflow, or cross-device UI behavior; Chinese triggers include 响应式布局, 移动端适配, 断点, 容器查询, 横竖屏, 触摸目标.
Use when designing, implementing, or reviewing Tailwind CSS design systems, token mapping, theme extension, utility class governance, component variants, dark mode, responsive utilities, safelists, or maintainable class composition; Chinese triggers include Tailwind, 设计 Token, 组件变体, 暗色模式, class 管理.
Use when building or improving frontend UI that needs product-specific design direction, visual hierarchy, layout tone, first-screen composition, or domain-appropriate interaction design. When an external design file is authoritative, implement from that source instead of inventing direction; Chinese triggers include UI 设计方向, 视觉风格, 界面质感, 产品化界面.
El cerebro separa elementos en primer plano y fondo. Use cuando diseñe modales, overlays, focus states, o jerarquía visual de capas.
Build accessible user interfaces with semantic HTML, keyboard navigation, ARIA attributes, and screen reader support. Use this skill when creating or modifying UI components, form elements, interactive widgets, or page layouts. When working on files like *.tsx, *.jsx, *.vue, *.svelte, or HTML templates. When adding alt text to images, labels to form inputs, implementing keyboard navigation, managing focus states, ensuring proper color contrast, using semantic HTML elements (nav, main, button), or adding ARIA attributes for complex components.
Typography setup with Google Fonts for Next.js + Tailwind projects. Use when choosing fonts, need font pairing recommendations (SaaS, editorial, corporate presets), or setting up optimized font loading. Includes ready-to-use configurations and performance best practices.
Image sourcing strategy for UI projects. Use FREE resources first - DiceBear/Boring Avatars for avatars, Unsplash/Picsum for photos, unDraw/Storyset for illustrations, Haikei for backgrounds. AI generation (DALL-E) only when custom branded assets needed and no free alternative exists.
Designs engaging gameplay loops, economies, and progression systems, balancing challenge and reward for interactive experiences.
Generate social media graphics using the jocko-imagery MCP server
Use when generating UI components, buttons, forms, cards, hero sections, or using design tools. Covers Gemini Design MCP, shadcn/ui, 21st.dev, and Tailwind CSS.