Agent skill

Styling

by EpicenterHQ in EpicenterHQ/epicenter

CSS and Tailwind, cn(), flex layouts. An agent skill from EpicenterHQ/epicenter.

Custom licenceAuto-check passedFrontend & Design

Install Styling

skills CLI
$ npx skills add EpicenterHQ/epicenter --skill styling -a claude-code

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

GitHub CLI
$ gh skill install EpicenterHQ/epicenter styling --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/EpicenterHQ/epicenter.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/styling .claude/skills/styling && 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
styling
GitHub stars
4.8k
Token cost
~2k tokens
SKILL.md length
748 words
Files
1
Skills in repo
65
Repo updated
First seen
Licence
Custom licence

At a glance

CSS and Tailwind, cn(), flex layouts. An agent skill from EpicenterHQ/epicenter.

  • Works in 2 steps: Prefer plain overflow-y-auto on a div… → If you need styled scrollbars, wrap…
  • Tailwind utilities
  • SKILL.md covers Minimize Wrapper Elements, Tailwind Best Practices, Shared Primitive Overrides and Disabled States: Use HTML…, plus 1 more section
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Styling is an agent skill from EpicenterHQ/epicenter. CSS and Tailwind, cn(), flex layouts. Use for "style this", "fix the CSS", "add classes", "not scrolling", "overflow", Tailwind utilities.

Its SKILL.md is about 2k 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 CSS and styling. It works with Tailwind CSS. The repository describes itself as: Open-source, local-first apps.

When your agent uses it

  • Tailwind utilities
  • Tasks that involve CSS and styling

Example prompts

  • “style this”
  • “fix the CSS”
  • “add classes”
  • “/styling”

Workflow steps

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

  1. Prefer plain overflow-y-auto on a div with flex-1 min-h-0 (simpler, always works)
  2. If you need styled scrollbars, wrap ScrollArea.Root in a div with flex-1 min-h-0 overflow-hidden to give it a bounded ancestor

What it can do on your machine

Read from SKILL.md and the folder at commit 9cc65c3. 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 svelte).

    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

Styling loads about 2k tokens when it runs. Until then it costs about 37 tokens; SKILL.md has 748 words of instructions outside code blocks.

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

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

Its licence (Custom licence) doesn't allow us to republish the file, so here is its outline and opening line. It has 748 words (~1,984 tokens).

“When styling depends on shadcn-svelte structure, class merging, variants, Bits UI composition, or local wrapper behavior, read ui-design's component-system reference for upstream grounding. Ordinary Tailwind utilities and the repo-local layout rules below need no external lookup.”

— opening of SKILL.md by EpicenterHQ, Custom licence
name
styling
metadata.author
epicenter
metadata.version
1.0

Read the full SKILL.md on GitHub

Files

Just SKILL.md in .agents/skills/styling of EpicenterHQ/epicenter.

Open the folder on GitHubat commit 9cc65c3

Compare with similar skills

Styling 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.

Styling compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Styling this skillEpicenterHQ/epicenter4.8k—~2kAutomated safety check: PassCustom licence
Tailwindcss Developmentanonaddy/anonaddy4.9k10 repos~865Automated safety check: PassMIT
UI StylingOhh-889/skyroc79513 repos~2.5kAutomated safety check: PassMIT
MCP Developmentcoollabsio/coolify63k1 repos~949Automated safety check: PassMIT
Kill AI Slopyetone/kill-ai-slop1.3k—~1.4kAutomated safety check: PassApache-2.0
Cosscrafter-station/petdex4.2k—~1.4kAutomated safety check: PassMIT

Similar skills

  • Tailwindcss Development

    anonaddy/anonaddy

    Always invoke when the user's message includes 'tailwind' in any form.

    4.9k GitHub starsUsed in 10 repos~865 tokens
    Frontend & DesignAuto-check passed
  • UI Styling

    Ohh-889/skyroc

    Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs.

    795 GitHub starsUsed in 13 repos~2.5k tokens
    Frontend & DesignAuto-check passed
  • MCP Development

    coollabsio/coolify

    A skill your agent uses for Laravel MCP development. An agent skill from coollabsio/coolify.

    63k GitHub starsUsed in 1 repo~949 tokens
    Frontend & DesignAuto-check passed
  • Kill AI Slop

    yetone/kill-ai-slop

    Find and remove AI slop — the generic, machine-default visual and copy tics of vibe-coded products — from a web project.

    1.3k GitHub stars~1.4k tokensUpdated 23 days ago
    Frontend & DesignAuto-check passed
  • Coss

    crafter-station/petdex

    Helps implement coss UI components correctly. An agent skill from crafter-station/petdex.

    4.2k GitHub stars~1.4k tokensUpdated 9 days ago
    Frontend & DesignAuto-check passed
  • Official daisyUI skill for Tailwind CSS projects, routing to install, usage, configuration, color and per-component guides before writing any HTML or JSX with its classes.

    43k GitHub stars~1.3k tokensUpdated 8 days ago
    Frontend & DesignAuto-check passed

More from EpicenterHQ/epicenter

All 65 skills in this repo
  • Agent Instructions

    EpicenterHQ/epicenter

    Write and maintain repository guidance across AGENTS.md, CLAUDE.md, and .agents/skills.

    4.8k GitHub stars~1.2k tokensUpdated today
    Auto-check passed
  • Consult Claude

    EpicenterHQ/epicenter

    Assign Claude Code a read-only investigation, recommendation, or finished text draft.

    4.8k GitHub stars~2k tokensUpdated today
    Auto-check passed
  • Better Auth security hardening: rate limits, secrets, CSRF, trusted origins, cookies, sessions, OAuth tokens, and audit logging.

    4.8k GitHub stars~896 tokensUpdated today
    Auto-check passed
  • Cohesion Over Testability

    EpicenterHQ/epicenter

    Collapse test-shaped production boundaries while preserving behavior and coverage.

    4.8k GitHub stars~2k tokensUpdated today
    Auto-check passed
  • Collapse Pass

    EpicenterHQ/epicenter

    Remove indirection that does not earn its boundary across a diff or package.

    4.8k GitHub stars~2k tokensUpdated today
    Auto-check passed
  • Error Handling

    EpicenterHQ/epicenter

    Apply Wellcrafted Result patterns to fallible operations and preserve failures at boundaries.

    4.8k GitHub stars~1.4k tokensUpdated today
    Auto-check passed

Works with

Questions about Styling

What does Styling do?

CSS and Tailwind, cn(), flex layouts. An agent skill from EpicenterHQ/epicenter. Styling is an agent skill from EpicenterHQ/epicenter. CSS and Tailwind, cn(), flex layouts.

When should I use Styling?

Styling fits situations like: tailwind utilities; tasks that involve CSS and styling.

How do I install Styling in Claude Code?

Run `npx skills add EpicenterHQ/epicenter --skill styling -a claude-code`. Or copy the skill folder (.agents/skills/styling in EpicenterHQ/epicenter) into .claude/skills/styling in your project. Claude Code loads it when a task matches its description.

How do I install Styling in Codex?

Run `npx skills add EpicenterHQ/epicenter --skill styling -a codex`. Or copy the skill folder (.agents/skills/styling in EpicenterHQ/epicenter) into .agents/skills/styling in your project. Codex loads it when a task matches its description.

Can I use Styling 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 EpicenterHQ/epicenter --skill styling -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/styling, .gemini/skills/styling, .github/skills/styling and .opencode/skills/styling in your project.

What does Styling need to run?

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

Does Styling 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 Styling 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 Styling use?

Styling has a licence file (the repository's licence) that doesn't match a standard licence. Read it on GitHub before reusing the skill.

How many tokens does Styling use?

About 2k tokens (SKILL.md is roughly 7.9k 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 Styling?

Skills that share tags, products or a category with Styling: Tailwindcss Development (anonaddy/anonaddy, 4.9k stars), UI Styling (Ohh-889/skyroc, 795 stars), MCP Development (coollabsio/coolify, 63k stars) and Kill AI Slop (yetone/kill-ai-slop, 1.3k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Styling?

EpicenterHQ (a GitHub organization) maintains it in EpicenterHQ/epicenter, which has 4,819 GitHub stars. The repository holds 65 skills in this directory. The repository was last updated on October 8, 2026.

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