{"product_id":"frontend-design-skill","title":"Frontend Design Skill - Production React and Tailwind UI for Claude Code","description":"\u003cp\u003eFrontend 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.\u003c\/p\u003e\u003cp\u003eBuilt 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.\u003c\/p\u003e\u003cp\u003e\u003cstrong\u003ePolished, accessible React and Tailwind components that match your product, with every state and a QA report.\u003c\/strong\u003e\u003c\/p\u003e\u003cp\u003e\u003cstrong\u003eCompatible with:\u003c\/strong\u003e 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.\u003c\/p\u003e\u003cul\u003e\n\u003cli\u003e\n\u003cstrong\u003eDoes it support Tailwind v4?\u003c\/strong\u003e Yes - it detects v4 CSS-first @theme config or a v3 tailwind.config file and writes tokens for the one you use.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eWill it replace my component library?\u003c\/strong\u003e No - it reuses and extends your existing primitives and helpers instead of adding a second set.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eDoes it handle accessibility?\u003c\/strong\u003e Yes - native elements first, WAI-ARIA patterns for custom widgets, keyboard support and contrast targets per WCAG 2.2 AA.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eIs it the official Anthropic frontend-design skill?\u003c\/strong\u003e No - it is our own skill focused on production components; you can use it alongside Anthropic's.\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"KissMySkills","offers":[{"title":"Default Title","offer_id":59028833992968,"sku":null,"price":19.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/1036\/1444\/7880\/files\/frontend-design-skill-1.png?v=1791448192","url":"https:\/\/kissmyskills.com\/ja\/products\/frontend-design-skill","provider":"KissMySkills","version":"1.0","type":"link"}