New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Responsive UI

by trycompai in trycompai/comp

MANDATORY for any UI work in apps/app, apps/portal, or packages/design-system — every component, page, or layout change must work on mobile (~375px), tablet (~768px), desktop (~1280px), and large…

AGPL-3.0Auto-check passedFrontend & Design

Install Responsive UI

skills CLI
$ npx skills add trycompai/comp --skill responsive-ui -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install trycompai/comp responsive-ui --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/trycompai/comp.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/responsive-ui .claude/skills/responsive-ui && rm -rf skills-src

Use ~/.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/

Facts

Skill name
responsive-ui
GitHub stars
2k
Token cost
~1.4k tokens
SKILL.md length
654 words
Files
1
Skills in repo
31
Repo updated
First seen
Licence
AGPL-3.0

At a glance

MANDATORY for any UI work in apps/app, apps/portal, or packages/design-system — every component, page, or layout change must work on mobile (~375px), tablet (~768px), desktop (~1280px), and large…

  • Works in 5 steps: The page body never scrolls… → No fixed width without a responsive… → Touch targets on mobile: interactive… → …
  • : new component
  • SKILL.md covers The rule, Works WITH the design system —…, Non-negotiables and Repo patterns (use these,…, plus 2 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Responsive UI is an agent skill from trycompai/comp. MANDATORY for any UI work in apps/app, apps/portal, or packages/design-system — every component, page, or layout change must work on mobile (~375px), tablet (~768px), desktop (~1280px), and large desktop (~1920px) BY DEFAULT, without being asked. Read this before writing or editing any JSX/TSX that renders visible UI. Triggers on: new component, page, layout, table, toolbar, form, modal/sheet, dashboard, "build UI", "add a column", "add a filter", any styling change.

Its SKILL.md is about 1.4k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering React components and Design systems. It works with Tailwind CSS. The repository describes itself as: AI Native platform to get companies compliant - Vanta & Drata Alternative. The licence is AGPL-3.0.

When your agent uses it

  • : new component
  • Any styling change

Example prompts

  • “build UI”
  • “add a column”
  • “add a filter”
  • “/responsive-ui”

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

  1. The page body never scrolls horizontally. Wide content (tables, code, diagrams)
  2. No fixed width without a responsive strategy. A fixed-width control is only
  3. Touch targets on mobile: interactive elements ≥40px tall; don't rely on hover
  4. Test with real content lengths — long names, emails, 33-item counts. Use
  5. Large desktops: content must not stretch into unreadable full-width lines —

What it can do on your machine

Read from SKILL.md and the folder at commit 0117612. It shows what the files ask for, not the result of running them.

  • Tool permissions

    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.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are typescript).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Responsive UI loads about 1.4k tokens when it runs. Until then it costs about 121 tokens; SKILL.md has 654 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~121
When it runs · the whole SKILL.md, loaded when a task matches
~1.4k

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.

Safety

Auto-check passed

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.

SKILL.md

The full file from trycompai/comp at commit 0117612, republished under its AGPL-3.0 licence (© trycompai). 654 words, ~1,380 tokens.

Download SKILL.mdSave it as .claude/skills/responsive-ui/SKILL.md (or your agent's skills folder).
name
responsive-ui
description
MANDATORY for any UI work in apps/app, apps/portal, or packages/design-system — every component, page, or layout change must work on mobile (~375px), tablet (~768px), desktop (~1280px), and large desktop (~1920px) BY DEFAULT, without being asked. Read this before writing or editing any JSX/TSX that renders visible UI. Triggers on: new component, page, layout, table, toolbar, form, modal/sheet, dashboard, "build UI", "add a column", "add a filter", any styling change.

Responsive UI — default, not a feature request

The rule

Every UI change ships working at all four device classes. Nobody has to ask.

DeviceTest widthTailwind context
Mobile375pxbase (no prefix)
Tablet768pxmd:
Desktop1280pxxl:
Large desktop1920pxbeyond 2xl:

Tailwind is mobile-first: unprefixed classes are the mobile layout; prefixes add behavior at wider screens (sm: 640, md: 768, lg: 1024, xl: 1280, 2xl: 1536). Write the mobile layout first, then widen — not the other way around.

A change is NOT done until you have reasoned through (or better, viewed via the webapp-testing skill / browser dev tools) what it looks like at 375, 768, 1280, and 1920. If you only checked one width, you checked none.

Works WITH the design system — precedence rules

This skill layers on top of the ui skill; where they touch, the design-system rules win. Responsiveness is achieved THROUGH the DS, never around it:

  • Never put responsive classes (or any className) on DS components (Text, Stack, HStack, Badge, Button, …) — they don't accept it. Put breakpoint utilities on a wrapper <div> (the ui skill's "Layout with Wrapper Divs" pattern):
    tsx
    // ✅ breakpoints on the wrapper, DS component untouched
<div className="hidden sm:block"><Badge variant="outline">Active</Badge></div>
// ❌ className on a DS component
<Badge className="hidden sm:block">Active</Badge>
  • Reach for DS layout primitives first (PageLayout, Stack, HStack, Section) — they carry responsive spacing already. Raw responsive divs are for what the primitives don't cover, not a replacement for them.
  • Arbitrary pixel values stay an anti-pattern (w-[847px] ❌ — per the ui skill). Prefer the standard Tailwind scale (max-w-sm, w-48, max-w-xs). A fixed control width like w-[200px] is acceptable ONLY when it matches an established pattern already used on that surface, and it must still carry a responsive strategy (see below).

Non-negotiables

  1. The page body never scrolls horizontally. Wide content (tables, code, diagrams) scrolls inside its own container, never the page.
  2. No fixed width without a responsive strategy. A fixed-width control is only acceptable if the element hides, shrinks, or wraps on smaller screens (hidden sm:block, w-full md:max-w-xs, or a wrapping parent) — with the breakpoint classes on a wrapper div, never on a DS component.
  3. Touch targets on mobile: interactive elements ≥40px tall; don't rely on hover for anything essential (no hover on touch devices).
  4. Test with real content lengths — long names, emails, 33-item counts. Use truncate / min-w-0 on flex children that hold text.
  5. Large desktops: content must not stretch into unreadable full-width lines — cap with max-w-* containers where the layout doesn't already.
Show full SKILL.md (262 more words)Show less

Repo patterns (use these, don't invent)

  • Tables: the design-system Table already wraps rows in overflow-x-auto — wide tables scroll horizontally inside themselves on mobile. That is the accepted pattern for dense admin tables. Do NOT try to reflow table columns per breakpoint; do keep cells reasonable (min-w-* max-w-* on cell content is fine).
  • Toolbars / filter rows: primary control (search) is w-full md:max-w-[300px]; secondary controls (filters, source selectors) collapse on phones with hidden sm:block. Example: the People tab toolbar in apps/app/.../people/all/components/TeamMembersClient.tsx.
  • Page shells: use design-system PageLayout / Stack / HStack — they carry the responsive spacing; don't rebuild them with raw divs.
  • Grids: grid-cols-1 md:grid-cols-2 xl:grid-cols-3 style progressions — never a fixed column count for all widths.
  • Sheets/Modals: design-system Sheet/Dialog are responsive already; don't fix their widths with arbitrary values.
  • Images/logos: constrain (max-w-full, explicit small sizes); never let an image force layout width.

Checklist before "done" (run mentally or in the browser)

  • 375px — nothing overflows the viewport; controls usable or intentionally hidden; text truncates instead of breaking layout
  • 768px — secondary controls visible; layout uses available width sensibly
  • 1280px — the intended "design" width; matches mockups
  • 1920px — no absurdly stretched content; whitespace balanced
  • Long content (names, emails, high counts) doesn't break any of the above
  • Tests: if a component hides/reflows per breakpoint in a way that matters, its test asserts the class contract (e.g. hidden sm:block)

When you can skip a width

Admin-only dense screens (e.g. internal tooling) may treat mobile as "usable via horizontal scroll" rather than fully reflowed — but that must be a conscious choice following the existing pattern of that page, never an accident of not checking.

© trycompai, AGPL-3.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .claude/skills/responsive-ui of trycompai/comp.

Open the folder on GitHubat commit 0117612

Compare with similar skills

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.

Responsive UI compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Responsive UI this skilltrycompai/comp2k—~1.4kAutomated safety check: PassAGPL-3.0
Creative Tim UI Blockscreativetimofficial/ui12k—~2.1kAutomated safety check: NotesMIT
Animated React Component LibrariesHainrixz/editor-pro-max2611 repos~5.7kAutomated safety check: PassCustom licence
Create ComponentEndava/BEEQ163—~1.5kAutomated safety check: PassApache-2.0
Design Systemflornkm/personal-site150—~1.6kAutomated safety check: PassNone
Shadcn Tailwind UILiarMTTT/TavernWeave150—~1.7kAutomated safety check: PassCustom licence

Similar skills

  • Creative Tim UI Blocks

    creativetimofficial/ui

    Helps install, generate and review Creative Tim UI blocks: shadcn/ui-based React and Tailwind sections that follow a restrained, production-minded design philosophy.

    12k GitHub stars~2.1k tokensUpdated 6 mo ago
    Frontend & DesignAuto-check: notes

  • Animated React Component Libraries

    Hainrixz/editor-pro-max

    Helps choose and drop in animated React components from Magic UI and React Bits for landing pages, marketing sites and dashboards, instead of hand-coding animations.

    261 GitHub starsUsed in 1 repo~5.7k tokens
    Frontend & DesignAuto-check passed

  • Create Component

    Endava/BEEQ

    Create a new BEEQ StencilJS web component. An agent skill from Endava/BEEQ.

    163 GitHub stars~1.5k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Design System

    flornkm/personal-site

    How to build UI in this repo — compose classes with cn, use the CSS-variable design tokens (never raw hex/px), reuse the typographic and ui/ primitives, and define variants with cva like the…

    150 GitHub stars~1.6k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Shadcn Tailwind UI

    LiarMTTT/TavernWeave

    Build, restyle, or review accessible React interfaces that use shadcn/ui, Radix UI primitives, and Tailwind CSS.

    150 GitHub stars~1.7k tokensUpdated 4 days ago
    Frontend & DesignAuto-check passed

  • Daisyui

    carverauto/serviceradar

    Official daisyUI component library skill. An agent skill from carverauto/serviceradar.

    921 GitHub stars~1.3k tokensUpdated today
    Frontend & DesignAuto-check passed

More from trycompai/comp

All 31 skills in this repo

  • API Endpoint Contract

    trycompai/comp

    The contract every new or modified API endpoint must follow so it is correct for the public OpenAPI spec, the MCP server (npm @trycompai/mcp-server), the ValidationPipe, and the docs.

    2k GitHub stars~2.7k tokensUpdated yesterday
    Auto-check passed

  • Check Results Service

    trycompai/comp

    How to reuse ANY integration check's results in a feature via the universal CheckResultsService (apps/api integration-platform).

    2k GitHub stars~2.1k tokensUpdated yesterday
    Auto-check passed

  • Data

    trycompai/comp

    A skill your agent uses when implementing data fetching, API calls, server/client components, or SWR hooks

    2k GitHub stars~955 tokensUpdated yesterday
    Auto-check passed

  • Diagnose Generation Failure

    trycompai/comp

    A skill your agent uses when SDK generation failed or seeing errors.

    2k GitHub stars~938 tokensUpdated yesterday
    Auto-check passed

  • Forms

    trycompai/comp

    A skill your agent uses when building forms - covers React Hook Form, Zod validation, and form patterns

    2k GitHub stars~1k tokensUpdated yesterday
    Auto-check passed

  • Code

    trycompai/comp

    A skill your agent uses when writing TypeScript/React code - covers type safety, component patterns, and file organization

    2k GitHub stars~909 tokensUpdated yesterday
    Auto-check: warnings

Works with

Categories

Questions about Responsive UI

What does Responsive UI do?

MANDATORY for any UI work in apps/app, apps/portal, or packages/design-system — every component, page, or layout change must work on mobile (~375px), tablet (~768px), desktop (~1280px), and large…. Responsive UI is an agent skill from trycompai/comp. MANDATORY for any UI work in apps/app, apps/portal, or packages/design-system — every component, page, or layout change must work on mobile (~375px), tablet (~768px), desktop (~1280px), and large desktop (~1920px) BY DEFAULT, without being asked.

When should I use Responsive UI?

Responsive UI fits situations like: : new component; any styling change.

How do I install Responsive UI in Claude Code?

Run `npx skills add trycompai/comp --skill responsive-ui -a claude-code`. Or copy the skill folder (.claude/skills/responsive-ui in trycompai/comp) into .claude/skills/responsive-ui in your project. Claude Code loads it when a task matches its description.

How do I install Responsive UI in Codex?

Run `npx skills add trycompai/comp --skill responsive-ui -a codex`. Or copy the skill folder (.claude/skills/responsive-ui in trycompai/comp) into .agents/skills/responsive-ui in your project. Codex loads it when a task matches its description.

Can I use Responsive UI in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add trycompai/comp --skill 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/responsive-ui, .gemini/skills/responsive-ui, .github/skills/responsive-ui and .opencode/skills/responsive-ui in your project.

What does Responsive UI need to run?

SKILL.md names no scripts, command-line tools or credentials: Responsive UI is instructions for the agent only.

Does Responsive UI access the network?

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.

Is Responsive UI safe to install?

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.

What licence does Responsive UI use?

Responsive UI is published under the AGPL-3.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Responsive UI use?

About 1.4k tokens (SKILL.md is roughly 5.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Responsive UI?

Skills that share tags, products or a category with Responsive UI: Creative Tim UI Blocks (creativetimofficial/ui, 12k stars), Animated React Component Libraries (Hainrixz/editor-pro-max, 261 stars), Create Component (Endava/BEEQ, 163 stars) and Design System (flornkm/personal-site, 150 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Responsive UI?

trycompai (a GitHub organization) maintains it in trycompai/comp, which has 2,018 GitHub stars. The repository holds 31 skills in this directory. The repository was last updated on October 7, 2026.

Source: trycompai/comp on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.