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
Ir a la información del producto
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
este skill
un solo pago
tuyo para siempre
Paquete skill completo descarga instantáneafrontend-design-skill.md
Unlimited
Get this and 2,500+ more with Unlimited
$9/mes
Este y 2,500+ más, dentro de tu IA
AI CRM includedEste skill$19
Unlimited$9/mes
Paga una vez, tuyo para siempreDescarga instantáneaGarantía de reembolso de 30 días
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.
O todos los skills, dentro de tu IA.
¿Dudas antes de comprar? Responde una persona, normalmente el mismo día: 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.
Usa el nombre
Con el archivo cargado, hablale por su nombre: «Serge, mira esta pagina.» Para eso esta el nombre. Asi varios skills no se mezclan en un mismo chat.
Con el archivo cargado, hablale por su nombre: «Serge, mira esta pagina.» Para eso esta el nombre. Asi varios skills no se mezclan en un mismo chat.
// el skill con el que funciona tu IA
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
¿Qué contiene esta habilidad?
- 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.
// cómo instalar
En menos de 2 minutos
Cuatro pasos. Cualquier chat de AI.
- 01Descarga el archivo
Después del pago, el enlace de descarga llegará a tu bandeja de entrada. Guarda el archivo en cualquier lugar de tu dispositivo.
- 02Abre tu chat de AI
Claude, ChatGPT, Gemini, Grok o Copilot: el que ya uses.
- 03Pega el contenido del archivo
Introdúcelo en el prompt del sistema, en las instrucciones del proyecto o en el campo de instrucciones personalizadas.
- 04Empieza a trabajar
Tu AI ahora está configurada como especialista. Pregúntale cualquier cosa dentro de su ámbito.
No se requieren conocimientos técnicos.
Con Unlimited no hay nada que descargar. Conecta tu IA una vez y pide: «Carga a Frontend Design Skill de KissMySkills».
// faq
Preguntas sobre este producto
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.