Frontend Design Skill - React and Tailwind UI

Name: Frontend Design Skill - Production React and Tailwind UI for Claude Code
Brand: KissMySkills
Price: 19.0 USD
Availability: InStock

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 ce skill un seul paiement à vous pour toujours

Pack skill complet téléchargement immédiatfrontend-design-skill.md

Unlimited

Get this and 2,500+ more with Unlimited $9/mois

Celui-ci et 2,500+ autres, dans votre IA

AI CRM included

Ce skill$19

Unlimited$9/mois

See Unlimited · $9/mois → or try every skill free for 7 days, no card

Payez une fois, gardez-le pour toujoursTéléchargement immédiatSatisfait ou remboursé 30 jours

As featured onProduct Hunt Fazier KittyLaunch

Works with

Secure checkout by Shopify

Trademarks of their respective owners. KissMySkills is not affiliated with or endorsed by them.

Ask it something hard.

📎 frontend-design-skill.md LOADED ✓

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.

Ou tous les skills, directement dans votre IA.

0:33 · sans son

Les 2,500+ avec Unlimited · $15/mois →

Des questions avant d’acheter ? Une personne répond, souvent le jour même : 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.

// le skill qui fait tourner votre 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.

Your standard: a component should look like it belongs to this product and nowhere else, behave correctly in every state, work with a keyboard and a screen reader, and be easy for the next developer to extend. You explain each design decision in one line and you show your numbers. · Not a landing page art director. A website art-direction skill sets a brand mood and builds marketing pages in HTML and CSS. You build components and app screens inside an existing React and Tailwind codebase: forms, tables, settings, dashboards, pricing blocks, navigation, dialogs, and marketing sections as reusable components. · Not a React architect. State management, data fetching, rendering strategy and bundle performance belong to an architecture skill. You own the visual layer and the interaction contract of components. · Not a prompt generator for UI tools. You write the code yourself rather than prompts for v0, Stitch or Figma Make. · Your niche: the last mile between "a design direction exists" and "a polished, accessible component is merged". · A new component or screen must look intentional and match the product. · An existing screen "works but looks generic" or "looks like every shadcn demo". · A design system needs a new primitive (button, input, select, tabs, dialog, toast, table) with variants and states. · Dark mode, theming or token cleanup in a Tailwind project. · A pre-merge visual and accessibility pass on UI code. · A brand identity, logo or full art direction from zero. Use a brand or art-direction skill first, then bring its tokens here. · Native mobile UI (SwiftUI, Jetpack Compose). Principles transfer; the code does not. · Backend, data modeling, auth. Out of scope. Ask once, grouped, skip anything already given. If the user wants speed, proceed with stated assumptions.

159 lignes · .md · telechargement immediat

// what's inside

Que contient cette compétence ?

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.

Buy once

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

Unlimited

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

See Unlimited →

Subscribers can still buy single files and keep them after they cancel.

Works with

Trademarks of their respective owners. KissMySkills is not affiliated with or endorsed by them.

// 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 Moins de 2 minutes

Quatre étapes. N’importe quel chat AI.

01
Télécharger le fichier
Après le paiement, le lien de téléchargement arrive dans votre boîte de réception. Enregistrez le fichier où vous voulez sur votre appareil.
02
Ouvrez votre conversation AI
Claude, ChatGPT, Gemini, Grok ou Copilot — celui que vous utilisez déjà.
03
Collez le contenu du fichier
Insérez-le dans le prompt système, les instructions du projet ou le champ des instructions personnalisées.
04
Commencez à travailler
Votre AI est maintenant configurée comme spécialiste. Posez-lui n’importe quelle question relevant de son domaine.

Aucune connaissance technique requise.

Avec Unlimited, rien à télécharger. Connectez votre IA une fois, puis demandez : « Charge Frontend Design Skill depuis KissMySkills. »

Guide d’installation → Unlimited · $15/mois →

// faq

Questions concernant ce produit

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.