Plugin Claude Code
Chat-first frontend UI quality for AI agents — judgment, tokens, anti-slop, a11y, perf, testing.
Plugin Claude Code
Chat-first frontend UI quality for AI agents — judgment, tokens, anti-slop, a11y, perf, testing.
Plugin Claude Code
Chat-first frontend UI quality — judgment, tokens, responsive, motion, marketing landing, anti-AI-slop, a11y, perf, testing.
Command Claude Code
Alias of /design — design system audit.
Command Claude Code
Run a design system audit — anti-ai-slop, ui-feel, tokens, responsive-ui, accessibility, web-performance.
Command Claude Code
Loop build → test → audit → fix until UI quality gates pass.
Command Claude Code
Test user-facing UI — frontend-testing, states, a11y; invoke test-engineer.
Command Claude Code
Build production UI with curated tokens — design-tokens, ui-components, responsive-ui, motion, anti-ai-slop, ui-feel, accessibility.
Cursor rule Cursor
Auto-route Frontend Expert suite skills — chat-first, judgment first, slash optional.
Instructions file CodexOpenCode
Instructions for sukirman1901/frontend-expert, covering agents.md, chat-first (default), what this pack is, auto intent map and expert judgment.
Instructions file
Instructions for sukirman1901/frontend-expert, covering claude.md, plugin assets, default behavior (chat-first + judgment), references and verify.
Skill Claude CodeCodex
Chat-first frontend UI quality suite — 22 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.
Agent
Design system auditor focused on visual quality, token adherence, and preventing "AI aesthetic". Use for design-focused reviews, token compliance checks, and identifying structural design anti-patterns in web applications.
Agent
Frontend test engineer for user-facing UI — TDD, component tests, a11y assertions, critical paths. Use when writing or reviewing UI tests, or when /test-ui / testing intent is clear.
Agent
Frontend developer focused on building production-quality UI using curated design tokens. Use when implementing components, layouts, or pages that need to avoid "AI aesthetic" and follow real design system patterns.
Hook
Runs when a session starts, executing session-start.sh. From sukirman1901/frontend-expert.
Hook
Runs after a tool call finishes for Edit and Write tool calls, executing anti-slop-scan.sh. From sukirman1901/frontend-expert.
Skill Claude CodeCodex
Enforce WCAG 2.1 AA (keyboard, ARIA, focus, contrast, semantic HTML). Use for accessibility work, pre-ship UI checks, and as a light pass on every UI build or design review — including "a11y", "keyboard", "screen reader", or shipping user-facing changes, without requiring a slash command.
Skill Claude CodeCodex
Detect and fix AI aesthetic anti-patterns (purple/indigo defaults, gradients, rounded-2xl everywhere, generic heroes, Lorem ipsum, shadow-heavy cards). Use whenever building, restyling, or reviewing visual UI quality — including "terlalu generik", "AI slop", "rapihin UI", or design audit requests — without requiring…
Skill Claude CodeCodex
App shell, navigation, layouts, breadcrumbs, deep links, 404/empty routes. Use when building dashboard shells, side nav, top nav, multi-page flows, "routing", "layout app", "404", or information architecture for web apps. Requires modern chrome: logo, topbar theme icon, avatar→account menu, custom filter selects — not…
Skill Claude CodeCodex
Async UI for remote data — loading, error, retry, empty, stale, cache boundaries. Use when building lists, detail pages, dashboards fed by API, React Query/SWR, fetch/loaders, or "ambil data", "loading state API", "retry".
Skill Claude CodeCodex
Spec vs implementation fidelity — Figma/Dev Mode/screenshot compare, spacing tolerance, token remap, close-enough rules. Use when matching a design file, "pixel perfect", "mirip Figma", design QA, or /design with a provided mock.
Skill Claude CodeCodex
Choose and apply CSS design tokens via decision tree (project system, explicit preset, Plasma hard-gate, or scored pack preset) — colors, spacing, radius, typography; no raw hex. Use whenever building or styling any user-facing UI, page, layout, component, theme, or brand look — including chats like "bikin halaman"…
Skill Claude CodeCodex
Name a design or UI concept from a loose description. Reverse-lookup for design terms — user describes something vaguely ("card floating over blur", "zig-zag layout"), skill returns the proper name + brief definition. Use when the user uses informal language for a UI concept, or when you need the correct term to…
Skill Claude CodeCodex
Name a frontend engineering concept from a loose description. Reverse-lookup for FE technical terms — user describes a pattern informally ("supaya gak fetch ulang", "render cuma yang keliatan"), skill returns the proper name + brief definition. Use when the user uses informal language for a technical concept, or when…