Frontend Engineer, Yuna AI skill by KissMySkills, cover

Frontend Engineer AI Skill - Yuna

$19
Skip to product information
Frontend Engineer, Yuna AI skill by KissMySkills, cover

Frontend Engineer AI Skill - Yuna

Build frontend: React and TypeScript, performance, accessibility, responsive CSS and testing.

$19 this skill one payment yours forever

Claude skill package instant downloadyuna-frontend-engineer.skill

Library plan

Get this skill and 2,500+ others

$9/mo or $59 a year

Get Library · $9/moGet Library
Try this skill free for 7 daysTry this skill free

Nothing is charged. A −30% code for your first payment arrives 2 days before the trial ends.

  • Works inside Claude, ChatGPT, Claude Code, Codex and Cursor through one connector
  • Every skill, prompt pack and agent, plus AI CRM and tools during the trial
  • Cancel anytime
Why a subscription? How it works

Need just this skill?

One file, paid once. No updates, no connector.

Costs about the same as 2 months of Library.

$19

Pay once, keep foreverInstant download30-day money-back guarantee

As featured onProduct HuntFazierKittyLaunch

  • Visa
  • Mastercard
  • American Express
  • Apple Pay
  • BLIK
  • Klarna

Secure checkout by Stripe

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

How it works

Ask it something hard.

📎 yuna-frontend-engineer.skillLOADED ✓
React bundle is 2.8MB, LCP on 4G is 6.1s. PM wants features, not a perf sprint. What moves the needle fastest?
CLAUDE · WITH THIS SKILL 2.8MB doesn't need a sprint, it needs an afternoon of route-level code splitting - React.lazy on your 5 heaviest routes typically cuts initial JS by 60%. Run bundle analysis first: there is almost always a moment.js with all locales, a full lodash import, and a chart library shipped to every page for one admin screen. LCP usually lands under 3s from splitting plus preloading the hero asset. Sell it to the PM as one afternoon with before/after field data, not a sprint. Paste the analyzer's top 20 modules and I'll mark the cuts.

Or have every skill inside your AI.

0:16 · no sound
Get all 2,500+ with Library · $9/mo →

Questions before you buy? A person answers, usually the same day: 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.

Use the name
Once the file is loaded, talk to it by name: “Serge, check this page.” That is what the name is for. It also keeps several skills apart in one chat.
// the skill your AI runs on

You are Yuna, a Senior Frontend Engineer who reaches for semantic HTML before ARIA, types props from the data shape down, and measures LCP, INP and CLS. You have been activated to ship a UI that works by keyboard.

SKILL.md · 183 lines · instant download

// what's inside

What's inside this skill

  1. React (hooks, state, composition) and TypeScript
  2. Performance: bundle size, code splitting, Core Web Vitals
  3. Accessibility: semantic HTML, ARIA, keyboard, WCAG
  4. Responsive CSS, state management and React Testing Library

Frontend engineers who want fast, accessible components and clean TypeScript, tested.

// two ways to get it

Use it inside your AI, or download it once.

Library plan

This skill and 2,500+ others, inside your chat

$9/mo cancel anytime, or $59 a year

  • All 2,500+ skills, prompt packs and agents, loaded the moment you ask
  • Nothing to download or paste: connect once in Claude, ChatGPT, Claude Code or Cursor
  • New skills every week and 10 catalog files a month to download
Compare Library, AI CRM and Both
Buy once

Just this skill, as a file

$19 one payment

  • Download after checkout and paste it into any AI chat
  • One file, no updates, no connector
  • 30-day money-back guarantee

Already on Library or Both? This one is included, no need to buy the file.

// ask your assistant

Or let your AI set up this skill for you.

Go to kissmyskills.com/pages/connector and set up the "Frontend Engineer AI Skill - Yuna" skill (handle: yuna-frontend-engineer) 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

Drop Yuna into Claude and get a senior frontend engineer who builds fast, accessible React components with clean TypeScript and real tests.

Yuna builds frontend: React (hooks, state, composition), TypeScript, performance (bundle size, code splitting, memoization, Core Web Vitals), accessibility (semantic HTML, ARIA, keyboard, WCAG), responsive CSS, state management, forms, and testing (React Testing Library). Always develop on a branch, test (unit and a11y), review, and verify in a preview build before merging.

What you get

  • →React (hooks, state, composition) and TypeScript
  • →Performance: bundle size, code splitting, Core Web Vitals
  • →Accessibility: semantic HTML, ARIA, keyboard, WCAG
  • →Responsive CSS, state management and React Testing Library
📄 yuna-frontend-engineer.skill Under 2 min install Works with Claude, ChatGPT & any AI chat

How to install

Download the .skill package → open Claude → paste SKILL.md into your Project Instructions or system prompt → describe your requirement → Yuna builds the answer. Includes a full worked example so you see exactly what you get.

// how to install Under 2 minutes

Four steps. Any AI chat.

  1. 01
    Download the file

    After checkout, the download link lands in your inbox. Save the .skill file: Claude takes it as it is.

  2. 02
    Open your AI chat

    Any AI chat you already use: Claude, ChatGPT, Gemini, Grok, Copilot or another.

  3. 03
    Add it to your AI

    Claude: Settings → Capabilities → Skills, upload the .skill file. ChatGPT, Gemini and others: open the .skill file like a .zip archive and paste SKILL.md into custom instructions or Project instructions.

  4. 04
    Start working

    Your AI is now configured as a specialist. Ask it anything inside its domain.

No technical knowledge required.

With Library there is nothing to download. Connect your AI once, then just ask: "Load Frontend Engineer AI Skill from KissMySkills."

Setup guide → Library · $9/mo →

// faq

Questions about this product

What does the Yuna skill do?+

Build frontend: React and TypeScript, performance, accessibility, responsive CSS and testing. Load it once into Claude Projects and you get a configured Frontend Engineer without re-explaining context at the start of every session. Always develop on a branch with tests, run it in CI against a staging environment with code review, and promote to production only after tests and approvals; never ship untested changes straight to production.

How do I install this skill file?+

Download the .skill package (it contains SKILL.md), paste the contents into Claude Projects Instructions or your AI's system prompt, add your own context and start your first session. Works with Claude, ChatGPT, or any AI chat that accepts system prompts.

Which AI tools does this skill work with?+

Works with Claude (recommended), ChatGPT, Gemini, Perplexity and Copilot, and any AI chat that accepts system prompts. Claude Projects gives the best results.

How is this different from using Claude without the Yuna skill?+

Without a skill file your AI starts every session as a general assistant. With Yuna loaded it applies Frontend Engineer methodology from the first message, with consistent quality every time. Always develop on a branch with tests, run it in CI against a staging environment with code review, and promote to production only after tests and approvals; never ship untested changes straight to production.

Ready to give your AI a specialist?

This one and 2,500+ others, inside Claude, ChatGPT, Claude Code, Codex or Cursor. Cancel anytime.