AI导哈

设计与多媒体

Frontend Responsive Design Standards

am-will/codex-skills

Build responsive, mobile-first layouts using fluid containers, flexible units, media queries, and touch-friendly design that works across all screen sizes. Use this skill when creating or modifying UI layouts, responsive grids, breakpoint styles, mobile navigation, or any interface that needs to adapt to different screen sizes. Apply when working with responsive CSS, media queries, viewport settings, flexbox/grid layouts, mobile-first styling, breakpoint definitions (mobile, tablet, desktop), touch target sizing, relative units (rem, em, %), image optimization for different screens, or testing layouts across multiple devices. Use for any task involving multi-device support, responsive design patterns, or adaptive layouts.

  • 0 次安装
  • 1000 星标

安装命令

npx skills add https://github.com/am-will/codex-skills --skill 'Frontend Responsive Design Standards'

SKILL.md

Frontend Responsive Design Standards

Rule: Mobile-first development with consistent breakpoints, fluid layouts, relative units, and touch-friendly targets.

When to use this skill

  • When creating or modifying layouts that need to work on mobile, tablet, and desktop
  • When implementing mobile-first design patterns starting with mobile layout
  • When writing media queries or breakpoint-specific styles
  • When using flexible units (rem, em, %) instead of fixed pixels for scalability
  • When implementing fluid layouts with percentage-based widths or flexbox/grid
  • When ensuring touch targets meet minimum size requirements (44x44px) for mobile
  • When optimizing images and assets for different screen sizes and mobile networks
  • When testing UI across multiple device sizes and breakpoints
  • When maintaining readable typography across all screen sizes
  • When prioritizing content display on smaller screens through layout decisions
  • When using responsive design utilities in CSS frameworks (Tailwind, Bootstrap responsive classes)

This Skill provides Codex with specific guidance on how to adhere to coding standards as they relate to how it should handle frontend responsive.

相关 Skills

context7am-will/codex-skillsFetch up-to-date library documentation via Context7 CLI. Use PROACTIVELY when: (1) Working with ANY external library (React, Next.js, Supabase, etc.) (2) User asks about library APIs, patterns, or best practices (3) Implementing features that rely on third-party packages (4) Debugging library-specific issues (5) Need current documentation beyond training data cutoff (6) AND MOST IMPORTANTLY, when you are installing dependencies, libraries, or frameworks you should ALWAYS check the docs to see what the latest versions are. Do not rely on outdated knowledge. Always prefer this over guessing library APIs or using outdated knowledge.后端与数据库1220planneram-will/codex-skillsCreate comprehensive, phased implementation plans with sprints and atomic tasks. Use when user says: "make a plan", "create a plan", "plan this out", "plan the implementation", "help me plan", "design a plan", "draft a plan", "write a plan", "outline the steps", "break this down into tasks", "what's the plan for", or any similar planning request. Also triggers on explicit "/planner" or "/plan" commands.智能体工作流1196read-githubam-will/codex-skillsRead and search GitHub repository documentation via gitmcp.io MCP service. **WHEN TO USE:** - User provides a GitHub URL - User mentions a specific repo in owner/repo format - User asks "what does this repo do?", "read the docs for X repo", or similar - User wants to search code or docs within a repo智能体工作流1193parallel-taskam-will/codex-skillsOnly to be triggered by explicit /parallel-task commands.其他1176plan-harderam-will/codex-skillsUse when user specfically says 'plan harder'.智能体工作流1163llm-councilam-will/codex-skillsOrchestrate a configurable, multi-member CLI planning council (Codex, Claude Code, Gemini, OpenCode, or custom) to produce independent implementation plans, anonymize and randomize them, then judge and merge into one final plan. Use when you need a robust, bias-resistant planning workflow, structured JSON outputs, retries, and failure handling across multiple CLI agents.智能体工作流1160