skills.rest
dangvu008
dangvu008COMMUNITY
Explore all skills by this author →
GitHub

rune-ext-ui

Audits and generates frontend UI code covering React health, design tokens, accessibility, and motion patterns.

1|Updated Mar 22, 2026
Search Tags:#accessibility#react#design system#animation#core web vitals#tailwindcss#ui audit
One-click install
npx skills add https://github.com/dangvu008/VietTruyen --skill rune-ext-ui-dangvu008
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: rune-ext-ui
Source: https://github.com/dangvu008/VietTruyen/tree/main/.agents/skills/rune-ext-ui
Command: npx skills add https://github.com/dangvu008/VietTruyen --skill rune-ext-ui-dangvu008

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires axe-core, framer-motion, @phosphor-icons/react, focus-trap-react, and includes references (resource) components.

What problem does it solve? Frontend projects accumulate invisible design and code debt: ad-hoc color values, mismatched font pairings, prop-heavy components, accessibility violations, janky animations, and slow page loads. This Skill provides ten coordinated workflows that audit, score, and generate fixes across the full UI lifecycle. ## Core Features & Use Cases - React Health & Performance Audits: Score a React codebase 0-100 across six dimensions and audit Core Web Vitals (LCP, CLS, INP) against Google thresholds. - Design System Generation: Produce 3-layer design tokens, curated color palettes with contrast verification, and typography pairings with Google Fonts and Tailwind config output. - Accessibility & Motion: Run axe-core scans plus manual WCAG 2.1 AA checks (focus traps, skip nav, ARIA), and apply motion patterns that always respect prefers-reduced-motion. - Use Case: When starting a new SaaS dashboard, run design-decision to map the product domain to a full style recommendation, then chain palette-picker and type-system to emit ready-to-use CSS custom properties and font configuration. ## Quick Start Ask the AI to run a React health score and accessibility audit on your frontend project and generate a design token file with a verified color palette.

Frequently Asked Questions about rune-ext-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I audit Core Web Vitals in a React app?▼

Run the web-vitals workflow to measure LCP, CLS, FCP, TBT, and INP against Google thresholds. It identifies render-blocking resources, layout shift culprits, missing preloads, and tree-shaking opportunities, then emits a prioritized fix list.

How to generate a design system with Tailwind config?▼

Use the design-system and type-system workflows to emit 3-layer tokens (primitive, semantic, component) as CSS custom properties, plus a Google Fonts link and Tailwind fontFamily configuration. Dark and light theme switching is included by default.

Does this work with SvelteKit and Vue, or only React?▼

It supports React 19, Next.js 16, SvelteKit 5, Vue 3, and Astro 5. Styling targets TailwindCSS 4 or CSS custom properties, and motion uses Framer Motion, GSAP, or the View Transitions API depending on the detected stack.

What accessibility standard does the a11y audit check?▼

The audit targets WCAG 2.1 AA as the minimum bar, combining axe-core automated scans with manual checks for focus traps on dialogs, keyboard navigation, ARIA labeling, color contrast, and skip navigation links.

Will refactoring overwrite my existing component files?▼

No. Component refactors are emitted to separate *.refactored.tsx files or provided as diffs, so original files remain untouched until you review and apply the changes manually.

Why do animations need prefers-reduced-motion checks?▼

Users with vestibular disorders can experience nausea or disorientation from motion effects. Every animation emitted by this Skill is wrapped in a prefers-reduced-motion media query or Framer Motion useReducedMotion hook to meet accessibility requirements.

Related Skills

Explore More Design & Creative Skills→
reclaimprotocolreclaimprotocol
1

Integrate Reclaim Protocol

Automates Reclaim Protocol integration into Node.js projects with stack detection and code generation.

Official
Intermediate
djkloopdjkloop

polish

Fix alignment, spacing, consistency, and micro-detail issues in UI designs.

Community
Advanced
InnerScopeHearingInnerScopeHearing

designer

Generate icons, illustrations, screenshots, videos, and voiceovers using AI models.

Official
Advanced
jg-chalk-iojg-chalk-io

moai-design-systems

Automate design system creation and validation with tokens, components, and WCAG 2.2 checks.

Community
Advanced