Frontend Expert

Chat-first frontend UI quality suite — 33 skills across UI Quality, Responsive, Ship FE, and Depth pillars. Token decision tree, compliance gates, anti-AI-slop, motion vocabulary (12 families), marketing landing recipes, and quality loop. Auto-loads on any UI/build/audit/polish request — no slash commands needed.

9 stars 1 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add sukirman1901/frontend-expert --skill frontend-expert

Manual install

git clone --depth 1 https://github.com/sukirman1901/frontend-expert.git /tmp/frontend-expert
mkdir -p ~/.claude/skills
cp -r /tmp/frontend-expert/. ~/.claude/skills/frontend-expert

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Frontend Expert

**Chat-first frontend UI quality suite** for shipping polished, responsive, accessible web interfaces.

## What this pack does

This is **not** a single skill — it's a **suite of 33 skills** organized into pillars that auto-load based on what you ask. You never need to type a slash command; just describe what you want to build or fix.

## Start here

- **`frontend-expert`** — use when you are unsure which skill owns the problem.
- **`design-direction`** — use when a new or ambiguous surface needs a direction. **`prototype`** if they need those options **on screen** or a state stress pass.
- **`quality-loop`** — use when an existing interface works and needs evidence-backed refinement before shipping.

## Pillars

| Pillar | Skills | When it loads |
|--------|--------|---------------|
| **UI Quality** | judgment, prototype, foundations, tokens, typography, color, surfaces, content, components, anti-slop, polish, a11y, testing, quality-loop, motion, motion-inspection, webgl, monitoring, marketing, fidelity, devtools | Any UI build, audit, or polish |
| **Responsive** (MUST) | responsive | Every layout — 320/768/1024/1440 verified |
| **Ship FE** | app-shell, data-fetching, forms | Shell/nav, API data, forms |
| **Depth** | architecture, seo | Folder structure, meta/OG/SEO |

Full pillar map: `docs/pillars.md`.

## How it works

1. **You ask** — "bikin dashboard", "landing page", "rapihin UI", "audit design"

Read the full skill on GitHub

Details

Skill name: frontend-expert
Repository: sukirman1901/frontend-expert
License: MIT
Repo updated: 18 September 2026

FAQ

What does the Frontend Expert skill do?

How do I install the Frontend Expert skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add sukirman1901/frontend-expert --skill frontend-expert. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Frontend Expert popular?

It lives in sukirman1901/frontend-expert, which has 9 GitHub stars and 1 forks.

Related skills

Obsidian Theme Designer

XiangyuSu611/obsidian-theme-designer

Use when the user wants to design, preview, or customize an Obsidian vault theme — including choosing styles, comparing color schemes, adjusting typography, or generating CSS snippets. Triggers on keywords like "Obsidian theme", "color scheme", "CSS snippet", "appearance".

Frontend & Design

Ckw Design

connerkward/ckw-design-skill

Entry point for frontend design. Use WHENEVER building or touching the look of any web UI — components, pages, dashboards, landing pages, React/Vue/HTML-CSS — and whenever the user says "make this look better/nicer", "fix the spacing/layout", or mentions styling, color, typography, fonts, responsive design, polish, or aesthetics, even without the word "design". Load design-thinking for direction; design-system for implementation; design-spatial for layout; design-philosophy for visual philosophy or art-direction.

Frontend & Design

Pair Design

mary13/pair-design-agent-skill

Use this skill for collaborative UX/UI design work — designing user flows, creating wireframes or prototypes, working through interaction design problems, or making structured design decisions where iteration and rationale matter. Triggers include: 'design a flow', 'create a wireframe', 'let's pair design', 'I need to design X', 'walk me through designing Y', requests for prototype screens, mentions of UX/UI methodology, interaction design, information architecture, or service design. The skill enforces a disciplined one-artifact-at-a-time methodology with clear human-AI roles (Synth/Gen) and

Frontend & Design

Pbi Theme

gusbavia/pbi-theme

Generate complete Power BI Desktop theme files from brand colors. Creates production-ready JSON themes with branded canvas backgrounds, CSS design tokens, DAX HTML visual examples, and A4 PDF design system documents. Runs standalone or chained with pbi-lifecycle (auto-saves into the client's Global Theme/pbi-theme/ folder when invoked inside a lifecycle-managed project). Use when user asks to create a Power BI theme, PBI theme, dashboard theme, report branding, or Power BI color palette. Triggers on "create theme", "Power BI branding", "theme generator", "branded dashboard". Supports light/dar

Frontend & Design

Rsa Whiteboard Teacher

tangyc828/RSA-Whiteboard-Animation

Generate RSA-style whiteboard animation storyboards with scene timing, image prompts, and narration scripts. Supports English and Chinese.

Frontend & Design

Anime 80s

m-mahadi/anime-80s-skill

Turn any brand, product, event, sentence, theme, or reference photo into an original printed piece that looks like it came out of 1980s Japanese anime print culture - theatrical one-sheets, anime-magazine covers, solid colour-field posters, one-ink screenprints, package labels, riso overprints, colored-pencil plates, and giant-word posters. Use whenever the user asks for 80s anime, 90s anime, retro anime, old anime, cel animation, cel-shaded, city pop, showa anime, anime key art, anime movie poster, anime magazine cover, or wants their brand, product, merch, packaging, social post, podcast cov

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.