Yafa UI Dashboard

Design, build, refactor, or review polished responsive analytics dashboards, SaaS admin dashboards, business intelligence interfaces, and data-heavy product UI using Yafa-UI. Covers sidebar navigation, one-row page headers, multi-color KPI cards, charts, tables, filters, Lucide icons, accessible states, and mobile dashboard layouts across React, Next.js, Tailwind CSS, Vue, Svelte, and other frontend stacks. Do not use this visual system as the default for marketing sites, authentication, setup wizards, account or billing settings, or unrelated public pages.

7 starsFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add rejourneyco/yafa-ui-dashboard --skill yafa-ui-dashboard

Manual install

git clone --depth 1 https://github.com/rejourneyco/yafa-ui-dashboard.git /tmp/yafa-ui-dashboard
mkdir -p ~/.claude/skills
cp -r /tmp/yafa-ui-dashboard/. ~/.claude/skills/yafa-ui-dashboard

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Yafa-UI: Dashboard

Create dashboards that feel like precise analytical instruments: calm, bright, information-dense, approachable, and fast to scan. Preserve the host product's brand and framework while applying this system's hierarchy, geometry, color allocation, and responsive behavior.

## Read the relevant references

- Read [references/dashboard-visual-system.md](references/dashboard-visual-system.md) for shell, typography, geometry, cards, tables, and interaction work.
- Read [references/color-system.md](references/color-system.md) whenever choosing or reviewing route accents, KPI colors, chart series, status colors, or sidebar icon colors.
- Read [references/icon-system.md](references/icon-system.md) whenever adding, replacing, sizing, or coloring icons or the skill mark.
- Read [references/responsive-adaptation.md](references/responsive-adaptation.md) whenever changing layout, navigation, filters, charts, tables, overlays, or screen-size behavior.
- For a design or implementation review, also read [references/review-checklist.md](references/review-checklist.md).

## Preserve these invariants

Read the full skill on GitHub

Details

Skill name: yafa-ui-dashboard
Repository: rejourneyco/yafa-ui-dashboard
License: MIT
Repo updated: 20 August 2026

FAQ

What does the Yafa UI Dashboard skill do?

How do I install the Yafa UI Dashboard skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add rejourneyco/yafa-ui-dashboard --skill yafa-ui-dashboard. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Yafa UI Dashboard popular?

It lives in rejourneyco/yafa-ui-dashboard, which has 7 GitHub stars and 0 forks.

Related skills

Apple Design

bowen31337/apple-design

Build web interfaces (HTML/CSS/JS, React, Vue, Tailwind) that look and feel like Apple made them — the real Apple aesthetic, not generic glassmorphism. Covers Liquid Glass / iOS-26 materials as rendered CSS+SVG (specular highlights, refraction, vibrancy, fallbacks), Apple's fluid-motion physics (springs by damping/response, velocity handoff, momentum projection, interruptibility, rubber-banding) implemented in BOTH Motion (motion.dev) and GSAP (Flip, ScrollTrigger, SplitText, Inertia), SF typography optics, a drop-in Apple design-token layer, and complete copy-paste components (glass nav, spri

Frontend & Design

Wedding Invitation

wyx-sg/wedding-invitation-skill

Use this skill when the user wants to design and generate a wedding invitation card in any language. The skill drives a conversational workflow — you gather the couple's info and style preferences, design a bespoke HTML template from scratch (no template selection), render it locally with headless Chrome, produce a print-ready PNG, and include a live tweak panel so the user can adjust colors, fonts, frames, and optional components without rebuilding. All data stays on the user's machine; no cloud, no signups, no data leaves.

Frontend & Design

Handdraw Skill

ToBeWin/HandDraw-Skill

Create deterministic hand-drawn, whiteboard, educational, and explainer MP4 animations from a JSON Animation DSL. Use when a user asks to make or edit a hand-drawn video, whiteboard animation, animated SVG explainer, or programmatic animation video.

Frontend & Design

Tidyfactor Design

TidyFactor/Design

Code-native UI design lifecycle engine (Figma alternative) with Contextual Decision Layer (CDL). Supports all 7 design stages with zero per-page CSS/JS and pluggable CSS foundations (Native, Tailwind, daisyUI, Pico, Hybrid). Trigger on commands 'brief', 'study', 'init', 'brand', 'tokens', 'palette', 'layout', 'components', 'page', 'dashboard', 'motion', 'i18n', 'audit', 'deploy', or design system requests.

Frontend & Design

HTML CSS First

macdonst/html-css-first

Prefer modern HTML and CSS solutions over JavaScript-heavy implementations. Use this skill whenever building or reviewing frontend code — especially for UI patterns like modals, accordions, tabs, tooltips, form validation, animations, dropdowns, carousels, sticky headers, and toggles. Trigger on any request to build a UI component or page, even if the user doesn't explicitly ask for "CSS-only" — always check whether a native HTML element or CSS feature can replace a JS solution first. Also trigger when reviewing existing code for opportunities to reduce JavaScript by using modern browser capab

Frontend & Design

Game UI Mobile Friendly Design

dungnotnull/game-ui-mobile-friendly-design-agent-skill

Mobile-Friendly Game UI Design & Touch-Friendly Interaction — Bulletproof production-grade harness for Mobile Game UI/UX & Touch Interaction Design analysis with zero placeholder code. Use this skill whenever the user asks for mobile game UI evaluation, touch interaction design, gesture discoverability analysis, accessibility assessment for games, one-handed mobile usability, thumb zone layout optimization, Fitts's Law application to touch targets, colorblind accessibility in games, or any mobile game interface design question. This skill provides evidence-backed analysis with academic citatio

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.