菜单
Define responsive design rules including breakpoints, fluid scales, and what changes per viewport. Use whenever the user mentions responsive design, breakpoints, mobile design, fluid typography, viewport sizing, or wants to design for multiple screen sizes.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Audit a brand's full identity (logo, typography, color, voice, visual language) for consistency, distinctiveness, and gap. Use when the user asks for a brand audit, identity review, brand health check, or wants to evaluate how a brand shows up across surfaces.
Plan a content calendar tied to product, brand, or marketing goals. Use when the user asks for a content plan, editorial calendar, content strategy, posting schedule, or wants to map content to themes and audiences over a period of time.
Write a sequence of emails for onboarding, nurture, sales, lifecycle, or launch. Use when the user asks for a drip campaign, email sequence, welcome series, onboarding emails, sales cadence, or any multi-email flow tied to a goal.
Design an a/b test or experiment including hypothesis, metrics, sample size, and analysis plan. Use whenever the user mentions a/b test, experiment, split test, multivariate test, or needs to design a test that produces a decision-quality result.
Audit a design or component for WCAG accessibility compliance. Use whenever the user mentions a11y, accessibility audit, WCAG check, contrast issues, keyboard navigation, screen reader support, focus order, or asks if a design is accessible.
Extract a brand voice guide from existing copy samples. Use whenever the user shares past copy and asks to define a voice, document a voice, create voice guidelines, or wants to make their existing voice teachable and repeatable.
| name | responsive-rules |
| description | Define responsive design rules including breakpoints, fluid scales, and what changes per viewport. Use whenever the user mentions responsive design, breakpoints, mobile design, fluid typography, viewport sizing, or wants to design for multiple screen sizes. |
a default set of responsive rules. adjust to your product's traffic mix.
if traffic is mobile-first, structure breakpoints up from the smallest:
xs: 320px (small mobile)
sm: 480px (mobile)
md: 768px (tablet, landscape mobile)
lg: 1024px (small desktop, large tablet landscape)
xl: 1280px (desktop)
2xl: 1536px (large desktop)
if traffic is desktop-heavy, start at lg and adjust downward.
for type and spacing, prefer fluid clamps over breakpoint jumps where it reads well:
font-size: clamp(1rem, 0.5rem + 2vw, 1.5rem);
at minimum, design and test at: