This skill as a file
$19 one payment, yours forever
- Download right after checkout, keep it for good
- Paste it into ChatGPT, Claude, Gemini or any AI chat, free plans included
- 30-day money-back guarantee
Frontend Design Skill - Production React and Tailwind UI for Claude Code
$19.00
Zu den Produktinformationen springen
Frontend Design Skill - Production React and Tailwind UI for Claude Code
Polished, accessible React and Tailwind components that match your product, with every state and a QA report.
$19.00
dieser Skill
einmal zahlen
für immer deins
Komplettes Skill-Paket Sofort-Downloadfrontend-design-skill.md
Unlimited
Get this and 2,500+ more with Unlimited
$9/Monat
Dieser plus 2,500+ weitere, direkt in deiner KI
AI CRM includedDieser Skill$19
Unlimited$9/Monat
Einmal zahlen, für immer behaltenSofort-Download30 Tage Geld-zurück-Garantie
As featured onProduct HuntFazierKittyLaunch
Secure checkout by Shopify
Trademarks of their respective owners. KissMySkills is not affiliated with or endorsed by them.
Ask it something hard.
Our billing settings page looks like a default template. Rebuild the plan selector in our Next.js app with Tailwind v4, dark mode required.
CLAUDE · WITH THIS SKILL
You get: a summary of the tokens and components it read -> a five-line design decision on hierarchy, density, type, color and one signature detail -> a token diff for the @theme block with dark values -> a typed PlanSelector component built on a native radio group -> a demo page rendering every state in light and dark -> a QA report marking pass, fail or not checked -> open items for real prices and copy.
Oder jeden Skill direkt in deiner KI.
Fragen vor dem Kauf? Ein Mensch antwortet, meist am selben Tag: hello@kissmyskills.com
// the file itself
Read it before you buy it.
The first lines of the file your AI will read, exactly as delivered. Nothing rewritten for the page.
Nutze den Namen
Wenn die Datei geladen ist, sprich es mit Namen an: „Serge, sieh dir diese Seite an.“ Dafuer ist der Name da. So bleiben auch mehrere Skills in einem Chat auseinander.
Wenn die Datei geladen ist, sprich es mit Namen an: „Serge, sieh dir diese Seite an.“ Dafuer ist der Name da. So bleiben auch mehrere Skills in einem Chat auseinander.
// der skill, auf dem deine KI laeuft
You are a design engineer who builds distinctive, production-ready React and Tailwind components inside an existing app. You have been activated to read the codebase, decide the design in five lines, then ship the component with every state, accessibility and a QA report.
// what's inside
Was steckt in dieser Fähigkeit?
- Reads your tokens and components before designing anything
- Full state matrix: focus, loading, empty, error, long content
- Tailwind v4 @theme or v3 config tokens with real dark mode
- WCAG 2.2 AA pass and a pre-merge QA checklist
Developers and product teams with a React and Tailwind app that works but looks generic and needs polished, accessible components.
// two ways to get it
Buy this file, or open the whole library.
Every skill, prompt and agent, inside your chat
$15/mo cancel anytime, or $129 a year
- All 2,500+ files in the library, loaded the moment you ask, plus 10 catalog files a month to download
- Nothing to download or paste: connect once in Claude, ChatGPT, Claude Code or Cursor
- Works on every Claude plan, free included · 30-day money-back guarantee on the first charge
Subscribers can still buy single files and keep them after they cancel.
// ask your assistant
Or let your AI set up this skill for you.
Go to kissmyskills.com/pages/for-ai-agents and set up the "Frontend Design Skill - Production React and Tailwind UI for Claude Code" skill (handle: frontend-design-skill) for me
Paste it into Claude, ChatGPT, Claude Code, Cursor or Codex. Your AI walks you through connecting KissMySkills (about 3 minutes, 7-day free trial) and loads the skill. What your AI will read →
What you're actually buying
Frontend Design Skill turns Claude into a design engineer who builds distinctive React and Tailwind components inside your real app. It reads your tokens and existing components, writes a five-line design decision, then ships a component with a clean API and variants, every state from focus to error to long content, semantic color tokens with dark mode, purposeful motion and a WCAG 2.2 AA accessibility pass, finished with a QA report.
Built for developers and product teams whose app works but looks like every template. It never invents logos, metrics or prices and never adds a dependency without asking. Unlike Iolanthe, our Anti-Slop Website Designer, who sets art direction and builds landing pages in HTML and CSS, this skill works at component level inside an existing React and Tailwind codebase. Unlike Pascal, our React Developer, it owns the visual and interaction layer, not state or architecture.
Polished, accessible React and Tailwind components that match your product, with every state and a QA report.
Compatible with: Claude Code, Claude, ChatGPT, Cursor and Codex. Install as a Skill in Claude Code or Claude, or paste the SKILL.md as instructions in any AI that writes code.
- Does it support Tailwind v4? Yes - it detects v4 CSS-first @theme config or a v3 tailwind.config file and writes tokens for the one you use.
- Will it replace my component library? No - it reuses and extends your existing primitives and helpers instead of adding a second set.
- Does it handle accessibility? Yes - native elements first, WAI-ARIA patterns for custom widgets, keyboard support and contrast targets per WCAG 2.2 AA.
- Is it the official Anthropic frontend-design skill? No - it is our own skill focused on production components; you can use it alongside Anthropic's.
// installation
Unter 2 Minuten
Vier Schritte. Jeder AI-Chat.
- 01Datei herunterladen
Nach dem Bezahlvorgang wird der Download-Link an deinen Posteingang gesendet. Speichere die Datei an einem beliebigen Ort auf deinem Gerät.
- 02Öffne deinen AI-Chat
Claude, ChatGPT, Gemini, Grok oder Copilot – ganz egal, welches du bereits nutzt.
- 03Fügen Sie den Dateiinhalt ein
Füge es in das System-Prompt-, Projektanweisungen- oder benutzerdefinierte Anweisungsfeld ein.
- 04Beginne mit der Arbeit
Deine AI ist jetzt als Spezialist konfiguriert. Frag sie alles innerhalb ihres Fachgebiets.
Keine technischen Kenntnisse erforderlich.
Mit Unlimited gibt es nichts herunterzuladen. Verbinde deine KI einmal und bitte sie dann einfach: „Lade Frontend Design Skill von KissMySkills.“
// faq
Fragen zu diesem Produkt
What does Frontend Design Skill do?+
It makes Claude act as a design engineer inside your React and Tailwind project. It reads your existing tokens and components, states a short design decision, adds only the tokens it needs, then builds the component or screen with typed props and variants, every interactive and data state, dark mode, motion that respects reduced-motion settings and a WCAG 2.2 AA accessibility pass, ending with a QA report.
How is it different from Iolanthe and from Anthropic's frontend-design skill?+
Iolanthe, our Anti-Slop Website Designer, sets visual art direction and builds landing pages in HTML and CSS. Anthropic's frontend-design skill guides Claude toward bold, non-generic interfaces. This skill focuses on the engineering last mile inside an existing React and Tailwind app: component APIs, a full state matrix, tokens, keyboard support and pre-merge QA. It works well alongside either.
Which stacks does it work with?+
React with Next.js, Vite or Remix and Tailwind CSS v3 or v4. It detects the Tailwind version from your config, follows your class-merging helper and variant style, and reuses component kits you already have such as shadcn-style or Radix-based primitives. It will not add a new library without asking you first.
Can I use it outside Claude Code?+
Yes. In Claude Code it reads your repository directly. In the Claude app, ChatGPT, Cursor or Codex, paste your tokens file and one or two existing components so it can match them. The design rules, state matrix and QA checklist work the same; it simply cannot read files you have not shared.