Frontend Design Pro

Production-grade frontend UI/UX skill registry. Auto-routes to the correct skill based on user intent. Use for anything involving what users see and click in a browser — building or fixing React/Next.js components, pages and layouts; visual defects; animation; dashboards; forms; accessibility audits; frontend performance; 3D with Three.js/R3F; design systems and tokens; and tests for any of it. Skip for backend logic, APIs, databases and infrastructure.

12 starsFrontend & Design

Install

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

npx skills add Krishna-Modi12/frontend-design-pro --skill frontend-design-pro

Manual install

git clone --depth 1 https://github.com/Krishna-Modi12/frontend-design-pro.git /tmp/frontend-design-pro
mkdir -p ~/.claude/skills
cp -r /tmp/frontend-design-pro/. ~/.claude/skills/frontend-design-pro

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-design-pro — Skill Registry

## Identity

You are a Principal Frontend Engineer and Staff UI/UX Designer. You produce production-ready, accessible, performant, genuinely well-designed UI. Output is never generic. Stack default: React 19 · TypeScript strict · Tailwind v4 · shadcn/ui + Radix · Next.js App Router.

## Behavioural preamble — load `core/agent-behavior.md` first

1. **Think before coding** — state assumptions, surface tradeoffs, present both readings when ambiguous, push back when warranted. Confused? Stop and ask one question.
2. **Simplicity first** — minimum code that solves the problem. No speculative abstraction, no unrequested flexibility, no `memo`/`useEffect` without a named reason.
3. **Surgical changes** — touch only what you must, match existing style, don't refactor the neighbourhood.
4. **Goal-driven execution** — define verifiable success criteria before coding, self-verify before returning.

## 🚫 Anti-slop wall — absolute, overrides everything

Read the full skill on GitHub

Details

Skill name: frontend-design-pro
Repository: Krishna-Modi12/frontend-design-pro
License: MIT
Repo updated: 20 October 2026

FAQ

What does the Frontend Design Pro skill do?

How do I install the Frontend Design Pro skill?

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

Is Frontend Design Pro popular?

It lives in Krishna-Modi12/frontend-design-pro, which has 12 GitHub stars and 0 forks.

Related skills

No Slop UI

LeoStehlik/no-slop-ui

Build or review frontend UI for clean, restrained, human-designed interfaces without generic AI visual patterns.

Frontend & Design

Designbrief

Heiberg-Industries/designbrief

A library of UI design direction files that provide style guardrails for building tasteful, consistent interfaces. Use when building any UI — select a style or let the AI recommend one based on the project context.

Frontend & Design

Replica

Surya17155/Replica

Use when the user uploads a screenshot of a hero section or landing page (or a URL/description of one) and wants a copy-paste-ready developer prompt to recreate it exactly in a tool like Lovable, Bolt, Replit, or Cursor. Produces prompts with exact hex colors, Tailwind classes, animation timing tuples, and component structure — not vague descriptions.

Frontend & Design

UI Styles

chrzamz/ui-styles-skill

Participate before building or changing product UI: websites, apps, demos, dashboards, forms, visual redesigns, component-library selection, themes and interaction states. Act as a practical designer: understand the product, recommend and preview a direction, preserve a project visual standard, and implement it using the existing stack. 支持风格推荐、界面制作、组件库选型、主题 token、自定义风格。Skip backend-only work and nonvisual fixes.

Frontend & Design

Replicate Webpage

22duxiaoyu/replicate-webpage-skill

Rebuild a webpage from a user-provided URL with high visual and behavioral fidelity, then customize its text, names, images, colors, or branding. Use when the user asks to “replicate this webpage,” “clone this website,” “复刻这个网页,” recreate a reference site, or reproduce a page’s observable layout, responsive behavior, animations, and interactions in a local codebase.

Frontend & Design

Figma Annotations Strategy

saralobo/skill-figma-annotations

Generate strategic Figma annotations via MCP based on PRs, tickets, or user descriptions. Use when the user wants to document a screen, flow, or component for Figma, or mentions "figma annotations", "annotation strategy".

Frontend & Design

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