Design skills

Browse reusable Agent Skills, each with a clear purpose and practical guidance.

premium-web-build-gate

Premium website pre-build gate for cinematic, editorial, Squarespace-polished, Raycast/Linear/Vercel-precise, or motion-heavy web work. Use before implementing or redesigning a homepage, landing page, portfolio, product site, agency/studio site, or high-polish web app when the user wants non-generic visual quality, strong scroll/motion choreography, strict content scope, or an award-level result. Produces a build-ready UI spec, source-trust decisions, motion storyboard, and QA gates before code.

105 repo starsObserved in 1 repos
Design
GitHub

reduced-motion-design

Design reduced-motion alternatives for websites and apps. Use for prefers-reduced-motion, Motion useReducedMotion, CSS media queries, disabling parallax, replacing large movement, simplifying scroll scenes, preserving state feedback, accessibility, vestibular-sensitive animation, and motion QA.

105 repo starsObserved in 1 repos
Design
GitHub

section-layout-systems

Design non-generic website section layouts. Use when a page needs alternatives to card grids, bento overuse, generic feature blocks, repetitive centered sections, bland stat strips, or template-like section sequencing.

105 repo starsObserved in 1 repos
Design
GitHub

surface-shadow-material-systems

Design surface, shadow, border, material, radius, glass, elevation, overlay, divider, and depth systems for premium websites and apps. Use when cards, panels, modals, nav, product UI, dashboards, luxury sections, or editorial layouts need polished material hierarchy without generic glassmorphism or heavy shadows.

105 repo starsObserved in 1 repos
Design
GitHub

tailwind-design-tokens

Create token-driven Tailwind and CSS variable systems for premium websites. Use for color tokens, typography tokens, spacing rhythm, radius, shadows, gradients, surfaces, responsive constraints, dark/light modes, and avoiding random utility-class styling.

105 repo starsObserved in 1 repos
Design
GitHub

ui-primitives-shadcn-lucide

Use shadcn/ui, Radix-style primitives, and lucide-react icons without producing generic default UI. Use for dialogs, menus, accordions, tabs, forms, buttons, toolbars, icons, inputs, and app controls that need accessibility and polished custom styling.

105 repo starsObserved in 1 repos
Design
GitHub

ui-screenshot-composition

Compose UI screenshots inside website layouts. Use for product sections, feature blocks, app showcases, case studies, dashboards, mockup stacks, detail crops, callout overlays, annotation systems, responsive screenshot art direction, and avoiding generic SaaS screenshot-card sections.

105 repo starsObserved in 1 repos
Design
GitHub

ux-walkthrough-skill

以资深 UX 专家身份走查产品体验问题。阅读 PRD 理解产品目标， 系统性检查用户流程、UI 一致性、错误处理等体验问题并汇总报告。 Triggers on "UX走查", "体验问题", "用户体验检查", "walkthrough"。

105 repo starsObserved in 1 repos
Design
GitHub

visual-assets-direction

Direct website imagery, video, generative visuals, product renders, screenshots, gallery crops, hero media, thumbnails, and visual assets. Use when a site needs real or generated media rather than generic gradients, stock-like backgrounds, placeholder images, or uninspected crops.

105 repo starsObserved in 1 repos
Design
GitHub

web-design-direction-system

Use for premium frontend, website, app UI, landing page, dashboard, redesign, image-to-code, or visual-polish work that needs clearer design intent, adjustable visual direction, motion discipline, less generic output, and a final preflight check before handoff.

105 repo starsObserved in 1 repos
Design
GitHub