What is the frontend-responsive-ui skill?
The frontend-responsive-ui skill is a SKILL.md in am-will's codex-skills repository. It sets rules for responsive front end code: start from the mobile layout, reuse the project's breakpoints, size in rem, keep touch targets at 44x44px or more, serve right-sized images and test at five widths.
Its SKILL.md frontmatter names it Frontend Responsive Design Standards, and its rule fits one line: mobile-first development with consistent breakpoints, fluid layouts, relative units and touch-friendly targets. The repository is a collection of Codex and agent skills.
Each section pairs a bad example with a good one in CSS, Tailwind or JSX. The agent copies the good pattern when it writes layouts and walks a verification checklist before it calls the work finished.
What changes in your agent's output
- Base styles target the smallest screen, and min-width media queries add columns at 768px and 1024px. The desktop-first max-width pattern is shown as the wrong way.
- The agent checks the codebase for existing breakpoints before inventing any, and avoids arbitrary values such as 850px or 1150px unless a task requires them.
- Containers use width: 100% with a max-width. Sizes move from px to rem, while px stays for borders and shadows. Reading lines cap near 65ch, which pairs well with typography-scale.
- Icon buttons gain padding or min-width and min-height so each target reaches 44x44px, with at least 8px between interactive elements.
- Images get srcset and sizes, or a picture element with AVIF and WebP sources.
Quick reference the skill ships
| Situation | Action |
|---|---|
| Starting a new layout | Begin with mobile at 320 to 375px |
| Need a breakpoint | Use the project standard; check existing code first |
| Setting a width | width: 100% plus max-width |
| Setting font size or spacing | Use rem; 16px equals 1rem |
| Button too small | Ensure at least 44x44px with padding |
| Testing a layout | Check 375px, 768px, 1024px and 1440px |
Who the frontend-responsive-ui skill is for
Best for
- Building or restyling layouts that must work on phone, tablet and desktop.
- Tailwind or Bootstrap projects, since the skill lists the default breakpoints for both. For a Tailwind token setup, see tailwind-design-system.
- Finishing a layout with the checklist: mobile first, shared breakpoints, no fixed widths, readable type, no horizontal scroll.
Not for
- Choosing a visual style, palette or typographic personality. The skill sets responsive mechanics, not the look. See frontend-design for that.
- Native mobile apps. The examples are CSS, Tailwind classes and JSX.
- Running tests for you. It lists testing methods such as DevTools responsive mode and real devices, but the agent or you still have to run them.
- Deeper pattern libraries. Compare owl-responsive-design or wshobson-responsive-design.
Use it with UiChemy
This skill governs front end code your agent writes. If that code is an AI build you bring into WordPress with UiChemy AI to WordPress, test the imported page at 375, 768, 1024 and 1440px, as the checklist does. Click Get Started on uichemy.com.
How to install Frontend Responsive UI Skill: Mobile-First CSS
git clone https://github.com/am-will/codex-skills.gitClone the repository
Run
git clone https://github.com/am-will/codex-skills.git. The skill sits in the skills/frontend-responsive-ui folder.Copy the skill folder
Copy skills/frontend-responsive-ui into the folder your agent loads skills from. The README does not name a folder for a manual copy, so use the one your agent documents.
Give it a responsive task
Ask for something the skill covers: a responsive grid, breakpoint styles, mobile navigation or a layout that must adapt to different screen sizes.
Check that it loaded
Ask the agent to build a card grid. It should start with a one column mobile layout, add min-width media queries for 768px and 1024px, size with rem and finish by walking the verification checklist.
Key features
- Mobile-first by ruleThe skill calls mobile-first mandatory. It shows a desktop-first example as bad and a base-then-min-width example as good, and says the approach forces content prioritization and avoids overriding styles.
- Shared breakpointsLists Tailwind breakpoints sm 640px, md 768px, lg 1024px, xl 1280px and 2xl 1536px, and Bootstrap 576, 768, 992, 1200 and 1400px. Existing project breakpoints come first.
- Fluid layoutsPrefers width: 100% with max-width, flex-grow, grid 1fr, minmax with auto-fit or auto-fill, and container queries over fixed pixel widths like 1200px and 300px.
- Relative unitsUse rem for font sizes and spacing, em for component-relative sizing, percent for parent-relative widths, px only for borders and shadows, vw and vh for hero sections and ch for text widths.
- Touch-friendly targetsMinimum target size is 44x44px for iOS and 48x48px for Android, with form inputs at least 44px tall and at least 8px between interactive elements.
- Readable typographyBody text at 16px minimum, small text at 14px minimum, line height 1.5 for body and 1.2 for headings, lines of 45 to 75 characters and fluid sizes with clamp.
- Mobile content priorityShow the main content first, use the order property, hide non-essential elements with classes like hidden lg:block, collapse secondary content and use hamburger navigation.
- Responsive imagesUse srcset with sizes, a picture element with AVIF and WebP sources, and Next.js Image with explicit width, height and sizes.
- Device testing checklistCheck 375px, 414px, 768px, 1024px and 1440px, and watch for horizontal scrolling, text overflow, overlapping elements, unreadable text, tiny targets and distorted images.
Frequently asked questions
What is the frontend-responsive-ui skill?
It is a skill in the am-will/codex-skills repository, with the frontmatter name Frontend Responsive Design Standards. It guides an agent to write mobile-first, fluid, touch-friendly layouts using relative units, consistent breakpoints and optimized images, and to check them with a verification checklist.
How do I install the frontend-responsive-ui skill?
Clone am-will/codex-skills and copy the skills/frontend-responsive-ui folder into the place your agent loads skills from. Then give the agent a responsive layout task, such as a grid, breakpoint styles or mobile navigation, and it should apply the rules from SKILL.md.
Which breakpoints does the frontend-responsive-ui skill use?
It does not force one set. It lists Tailwind (640, 768, 1024, 1280, 1536px) and Bootstrap (576, 768, 992, 1200, 1400px) as common systems, tells the agent to check the codebase for existing definitions first, and forbids arbitrary values like 850px or 1150px unless required.
What touch target and font sizes does the skill require?
Touch targets must be at least 44x44px for iOS and 48x48px for Android, with at least 8px between interactive elements. Body text should be 16px or more, small text 14px or more, and contrast should meet WCAG AA at 4.5:1 for normal text.
Which AI coding agents can use the frontend-responsive-ui skill?
SKILL.md says it gives Codex guidance, and the repository calls itself a collection of Codex and agent skills. Its installer flags name claude-code and codex as targets. Other agents that load SKILL.md folders may work, but the repository does not confirm each one.
Does the skill work with Tailwind or only plain CSS?
Both. The examples appear as plain CSS media queries and as Tailwind utility classes such as grid-cols-1 md:grid-cols-2 lg:grid-cols-4, plus a Next.js Image example. It also mentions Bootstrap responsive classes, so the rules apply across common frameworks.
Does the skill test my layout for me?
No. It gives a testing checklist for widths of 375, 414, 768, 1024 and 1440px, and names DevTools responsive mode, real devices, browser extensions and visual regression tests as methods. The agent or you still have to run those checks.
What license does the frontend-responsive-ui skill use?
GitHub reports no license for the am-will/codex-skills repository, and the README does not state one. Check the repository directly before you copy or redistribute the skill folder inside a product.