Tailwind CSS Patterns
ever-works/ever-works
Provides comprehensive Tailwind CSS utility-first styling patterns including responsive design, layout utilities, flexbox, grid, spacing, typography, colors, and modern CSS best practices.
Responsive UI transformation patterns for Tailwind CSS applications.
$ npx skills add pproenca/dot-skills --skill tailwind-responsive-ui -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install pproenca/dot-skills tailwind-responsive-ui --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/pproenca/dot-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/.experimental/tailwind-responsive-ui .claude/skills/tailwind-responsive-ui && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "tailwind-responsive-ui" agent skill from https://github.com/pproenca/dot-skills/tree/master/skills/.experimental/tailwind-responsive-ui into .claude/skills/tailwind-responsive-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "tailwind-responsive-ui", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/pproenca/dot-skills/tree/master/skills/.experimental/tailwind-responsive-uiType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add pproenca/dot-skills --skill tailwind-responsive-ui -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install pproenca/dot-skills tailwind-responsive-ui --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/pproenca/dot-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/.experimental/tailwind-responsive-ui .agents/skills/tailwind-responsive-ui && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "tailwind-responsive-ui" agent skill from https://github.com/pproenca/dot-skills/tree/master/skills/.experimental/tailwind-responsive-ui into .agents/skills/tailwind-responsive-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "tailwind-responsive-ui", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add pproenca/dot-skills --skill tailwind-responsive-ui -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install pproenca/dot-skills tailwind-responsive-ui --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/pproenca/dot-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/.experimental/tailwind-responsive-ui .cursor/skills/tailwind-responsive-ui && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "tailwind-responsive-ui" agent skill from https://github.com/pproenca/dot-skills/tree/master/skills/.experimental/tailwind-responsive-ui into .cursor/skills/tailwind-responsive-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "tailwind-responsive-ui", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/pproenca/dot-skills.git --path skills/.experimental/tailwind-responsive-ui--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add pproenca/dot-skills --skill tailwind-responsive-ui -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install pproenca/dot-skills tailwind-responsive-ui --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/pproenca/dot-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/.experimental/tailwind-responsive-ui .gemini/skills/tailwind-responsive-ui && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "tailwind-responsive-ui" agent skill from https://github.com/pproenca/dot-skills/tree/master/skills/.experimental/tailwind-responsive-ui into .gemini/skills/tailwind-responsive-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "tailwind-responsive-ui", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install pproenca/dot-skills tailwind-responsive-uiInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add pproenca/dot-skills --skill tailwind-responsive-ui -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/pproenca/dot-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/.experimental/tailwind-responsive-ui .github/skills/tailwind-responsive-ui && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "tailwind-responsive-ui" agent skill from https://github.com/pproenca/dot-skills/tree/master/skills/.experimental/tailwind-responsive-ui into .github/skills/tailwind-responsive-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "tailwind-responsive-ui", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add pproenca/dot-skills --skill tailwind-responsive-ui -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install pproenca/dot-skills tailwind-responsive-ui --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/pproenca/dot-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/.experimental/tailwind-responsive-ui .opencode/skills/tailwind-responsive-ui && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "tailwind-responsive-ui" agent skill from https://github.com/pproenca/dot-skills/tree/master/skills/.experimental/tailwind-responsive-ui into .opencode/skills/tailwind-responsive-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "tailwind-responsive-ui", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
tailwind-responsive-uiResponsive UI transformation patterns for Tailwind CSS applications.
Tailwind Responsive UI is an agent skill from pproenca/dot-skills. Responsive UI transformation patterns for Tailwind CSS applications. This skill should be used when making interfaces responsive, refactoring layouts for multiple screen sizes, or reviewing responsive Tailwind code. Triggers on tasks involving breakpoint strategy, layout adaptation, responsive spacing, fluid typography, mobile navigation, touch interaction, responsive media, or data table responsiveness.
Its SKILL.md is about 2.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 55 other files, including reference files and assets (for example `assets/templates/_template.md`, `metadata.json` and `references/_sections.md`).
It sits in Frontend & Design, covering Responsive design, CSS and styling and Typography. It works with Tailwind CSS. The repository describes itself as: A collection of AI agent skills following the Agent Skills open format. The licence is MIT.
8 steps, taken from the step headings in SKILL.md.
Read from SKILL.md and the folder at commit cf93c57. It shows what the files ask for, not the result of running them.
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Tailwind Responsive UI loads about 2.1k tokens when it runs, and up to ~47k if it reads all its reference files. Until then it costs about 108 tokens; SKILL.md has 581 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
The full file from pproenca/dot-skills at commit cf93c57, republished under its MIT licence (© pproenca). 581 words, ~2,079 tokens.
.claude/skills/tailwind-responsive-ui/SKILL.md (or your agent's skills folder). This skill also uses 52 other files; get the full folder from GitHub.Comprehensive responsive transformation guide for Tailwind CSS applications, based on Refactoring UI by Adam Wathan & Steve Schoger and modern responsive design patterns. Contains 49 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.
Reference these guidelines when:
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | Breakpoint Strategy | CRITICAL | bp- |
| 2 | Layout Transformation | CRITICAL | layout- |
| 3 | Responsive Spacing | HIGH | rspac- |
| 4 | Fluid Typography | HIGH | fluid- |
| 5 | Navigation Patterns | MEDIUM-HIGH | nav- |
| 6 | Touch & Interaction | MEDIUM | touch- |
| 7 | Responsive Media | MEDIUM | rmedia- |
| 8 | Data Adaptation | LOW-MEDIUM | data- |
bp-mobile-first-default - Use Mobile-First Breakpoint Directionbp-content-driven-breakpoints - Set Breakpoints Where Content Breaksbp-avoid-device-widths - Avoid Device-Specific Breakpoint Valuesbp-consolidate-breakpoints - Consolidate Breakpoints to Three or Fourbp-min-width-over-max - Use min-width Over max-width for Breakpointsbp-debug-breakpoints - Use Visual Breakpoint Indicators During Developmentlayout-stack-to-row - Stack Elements on Mobile, Row on Desktoplayout-sidebar-collapse - Collapse Sidebar to Top or Bottom on Mobilelayout-grid-column-reduction - Reduce Grid Columns at Narrower Breakpointslayout-holy-grail-responsive - Use Responsive Holy Grail Layout with Gridlayout-sticky-to-static - Convert Sticky Elements to Static on Mobilelayout-fixed-to-relative - Replace Fixed Positioning with Relative on Mobilelayout-aspect-ratio-containers - Use Aspect Ratio for Responsive Containersrspac-scale-padding-per-bp - Scale Padding Independently Per Breakpointrspac-responsive-gap - Use Responsive Gap for Grid and Flex Spacingrspac-compact-mobile-generous-desktop - Use Compact Spacing on Mobile, Generous on Desktoprspac-section-spacing - Scale Section Dividers with Viewportrspac-inline-to-stack-spacing - Convert Inline Spacing to Stack Spacing on Mobilerspac-container-padding - Use Responsive Container Paddingfluid-clamp-font-size - Use clamp() for Fluid Font Sizingfluid-responsive-line-height - Tighten Line Height as Font Size Increasesfluid-responsive-measure - Constrain Line Length to 45-75 Charactersfluid-scale-headings-independently - Scale Heading Sizes Independently Across Breakpointsfluid-responsive-letter-spacing - Adjust Letter Spacing for Responsive Headlinesfluid-type-scale - Use a Responsive Type Scalenav-horizontal-to-hamburger - Collapse Horizontal Nav to Hamburger on Mobilenav-tab-bar-mobile - Use Bottom Tab Bar for Primary Mobile Navigationnav-breadcrumb-collapse - Truncate Breadcrumbs on Mobilenav-sidebar-drawer - Convert Sidebar Nav to Off-Canvas Drawer on Mobilenav-dropdown-to-fullscreen - Expand Dropdown Menus to Full-Width on Mobilenav-sticky-header-compact - Compact the Header on Scroll for Mobiletouch-min-touch-target - Ensure Minimum 44px Touch Targets on Mobiletouch-hover-to-tap - Replace Hover Interactions with Tap-Friendly Alternativestouch-swipe-affordance - Add Visual Swipe Affordances for Horizontal Scrollingtouch-scroll-snap-mobile - Use Scroll Snap for Carousel-Like Mobile Interfacestouch-input-sizing-mobile - Size Form Inputs to Prevent iOS Zoomtouch-focus-visible-touch - Use focus-visible for Touch-Friendly Focus Stylesrmedia-responsive-images - Use Responsive Image Sizing with Object-Fitrmedia-video-aspect-ratio - Maintain Video Aspect Ratio Across Breakpointsrmedia-icon-size-scaling - Scale Icons Per Breakpoint, Not with Font Sizermedia-avatar-responsive - Scale Avatar Sizes Per Context and Breakpointrmedia-background-image-bp - Swap Background Images at Breakpointsrmedia-embed-responsive - Make Embedded Content Responsive with Container Constraintsdata-table-to-cards - Transform Tables to Cards on Mobiledata-horizontal-scroll-table - Use Horizontal Scroll for Dense Data Tablesdata-responsive-data-grid - Adapt Data Grid Density for Screen Sizedata-list-density-mobile - Increase List Item Density on Mobiledata-truncate-overflow - Truncate Overflowing Text on Mobiledata-responsive-form-layout - Stack Form Fields on Mobile, Use Grid on DesktopRead individual reference files for detailed explanations and code examples:
| File | Description |
|---|---|
| references/_sections.md | Category definitions and ordering |
| assets/templates/_template.md | Template for new rules |
| metadata.json | Version and reference information |
© pproenca, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
SKILL.md and 52 other files (references, assets) in skills/.experimental/tailwind-responsive-ui of pproenca/dot-skills.
Open the folder on GitHubat commit cf93c57
Tailwind Responsive UI next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Tailwind Responsive UI this skillpproenca/dot-skills | 214 | — | ~2.1k | Automated safety check: Pass | MIT | |
| Tailwind CSS Patternsever-works/ever-works | 158 | 3 repos | ~1.6k | Automated safety check: Notes | AGPL-3.0 | |
| Using Ouds Web Version Major MinorOrange-OpenSource/Orange-Boosted-Bootstrap | 222 | — | ~4.1k | Automated safety check: Pass | MIT | |
| Tailwindcss Developmentcachethq/core | 230 | — | ~1.1k | Automated safety check: Pass | MIT | |
| Tailwindcss DevelopmentOpenLitterMap/openlittermap-web | 134 | — | ~713 | Automated safety check: Pass | MIT | |
| Palot DesignItsWendell/palot | 191 | — | ~147 | Automated safety check: Pass | MIT |
ever-works/ever-works
Provides comprehensive Tailwind CSS utility-first styling patterns including responsive design, layout utilities, flexbox, grid, spacing, typography, colors, and modern CSS best practices.
Orange-OpenSource/Orange-Boosted-Bootstrap
Provides comprehensive knowledge of the OUDS Web library (Orange Unified Design System for Web), a Bootstrap-based CSS/JS framework for building Orange-branded web interfaces.
cachethq/core
A skill your agent uses for Cachet Tailwind CSS and UI styling: Blade utility classes, public status-page components, Filament dashboard theme work, responsive layout, dark mode, spacing…
OpenLitterMap/openlittermap-web
Styles applications using Tailwind CSS v3 utilities. An agent skill from OpenLitterMap/openlittermap-web.
ItsWendell/palot
Apply Palot's design contract. An agent skill from ItsWendell/palot.
wondelai/skills
Audit and fix visual hierarchy, spacing, color, and depth in web UIs.
pproenca/dot-skills
Audio forensics and voice recovery guidelines for CSI-level audio analysis.
pproenca/dot-skills
Guided, scripted pipeline for running JSX/TSX/React codemods safely across large legacy codebases.
pproenca/dot-skills
Create well-structured RFCs and technical proposals for software projects.
pproenca/dot-skills
Developer-experience friction auditing and fixing — slow onboarding, repeated manual setup steps, missing bootstrap/reset/seed scripts, undiscoverable conventions.
pproenca/dot-skills
Turn a rough idea for a language into a complete, implementable specification — a DSL, query, config/data, template, or protocol language — by interviewing the author dimension by dimension until…
pproenca/dot-skills
Drafting Python Enhancement Proposals (PEPs) — proposing a Python language feature, a standard library change, an interoperability standard, or an informational/process document for the Python…
Works with
Categories
Responsive UI transformation patterns for Tailwind CSS applications. Tailwind Responsive UI is an agent skill from pproenca/dot-skills. Responsive UI transformation patterns for Tailwind CSS applications.
Tailwind Responsive UI fits situations like: tasks involving breakpoint strategy; layout adaptation; responsive spacing; fluid typography.
Run `npx skills add pproenca/dot-skills --skill tailwind-responsive-ui -a claude-code`. Or copy the skill folder (skills/.experimental/tailwind-responsive-ui in pproenca/dot-skills) into .claude/skills/tailwind-responsive-ui in your project. Claude Code loads it when a task matches its description.
Run `npx skills add pproenca/dot-skills --skill tailwind-responsive-ui -a codex`. Or copy the skill folder (skills/.experimental/tailwind-responsive-ui in pproenca/dot-skills) into .agents/skills/tailwind-responsive-ui in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add pproenca/dot-skills --skill tailwind-responsive-ui -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/tailwind-responsive-ui, .gemini/skills/tailwind-responsive-ui, .github/skills/tailwind-responsive-ui and .opencode/skills/tailwind-responsive-ui in your project.
SKILL.md names no scripts, command-line tools or credentials: Tailwind Responsive UI is instructions for the agent only.
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
Tailwind Responsive UI is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
About 2.1k tokens (SKILL.md is roughly 8.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 45k tokens, read only when the agent opens those files.
Skills that share tags, products or a category with Tailwind Responsive UI: Tailwind CSS Patterns (ever-works/ever-works, 158 stars), Using Ouds Web Version Major Minor (Orange-OpenSource/Orange-Boosted-Bootstrap, 222 stars), Tailwindcss Development (cachethq/core, 230 stars) and Tailwindcss Development (OpenLitterMap/openlittermap-web, 134 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
pproenca (a GitHub user) maintains it in pproenca/dot-skills, which has 214 GitHub stars. The repository holds 182 skills in this directory. The repository was last updated on August 15, 2026.
Source: pproenca/dot-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.