skills.rest
jscraik
jscraikCOMMUNITY
Explore all skills by this author →
Website𝕏@jscraikGitHub

ui-ux-creative-coding

Generate UI briefs and implementation artifacts for React/Tauri applications.

8|4|Updated Jan 15, 2026
Search Tags:#react#ui design#tauri#motion design#ux polish#component benchmarking#design personas
One-click install
npx skills add https://github.com/jscraik/Agent-Skills --skill ui-ux-creative-coding
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-creative-coding
Source: https://github.com/jscraik/Agent-Skills/tree/main/frontend/ui/ui-ux-creative-coding
Command: npx skills add https://github.com/jscraik/Agent-Skills --skill ui-ux-creative-coding

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @storybook/react, react, tailwindcss, and includes assets (resource) and references (resource) and scripts (resource) components.

What problem does it solve?

This Skill transforms vague UI polish requests into shippable implementation guidance, ensuring motion enhances communication, craft quality survives accessibility and performance checks, and output is implementation-first.

Core Features & Use Cases

  • UI Brief & Plan Generation: Creates detailed UI briefs, component/system plans, and motion plans.
  • Persona Integration: Blends insights from five distinct design personas (@benjitaylor, @jh3yy, @jenny_wen, @emilkowalski, @kubadesign) or applies them individually.
  • Component Benchmarking: Utilizes component.gallery for evidence-based component selection and comparison.
  • Implementation Artifacts: Delivers patch-ready guidance, verification notes, and optional style overlay summaries.
  • Use Case: A product team needs to refine a complex dashboard's micro-interactions and visual polish. This Skill can generate a plan incorporating best practices for motion, accessibility, and performance, tailored by specific design personas, and benchmark component choices.

Quick Start

Use the ui-ux-creative-coding skill to design a settings screen for a Tauri app with motion polish, blending all five personas.

Frequently Asked Questions about ui-ux-creative-coding

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

FAQPage Schema
How do I add motion polish to a React and Tauri application dashboard?▼

To add motion polish to a React and Tauri application dashboard, this Skill generates patch-ready implementation guidance and motion plans. It blends five design personas to ensure micro-interactions enhance communication while passing accessibility and performance checks.

What is component benchmarking for UI design and how does it work?▼

Component benchmarking for UI design is an evidence-based pattern selection process utilizing component.gallery. It compares React UI components to ensure chosen patterns meet performance and accessibility standards before shippable implementation guidance is delivered.

Does this UI polish approach work with Tailwind CSS and Storybook?▼

This UI polish approach works directly with Tailwind CSS and Storybook, as both are core dependencies. It delivers implementation artifacts and style overlay summaries specifically tailored for the React component ecosystem.

How do I use design personas to plan micro-interactions in React?▼

To use design personas for planning micro-interactions in React, this Skill integrates insights from five distinct persona profiles. It applies them individually or blends their perspectives to generate detailed UI briefs and motion plans.

Best way to turn vague UI polish requests into shippable React code?▼

The best way to turn vague UI polish requests into shippable React code is using an implementation-first pipeline. This Skill transforms briefs into patch-ready guidance, component/system plans, and verification notes grounded in evidence-based benchmarking.

Related Skills

Explore More Design & Creative Skills→
AbdullahMalik17AbdullahMalik17
9

styling-with-shadcn

Set up shadcn/ui components, forms, and dark mode in Next.js projects.

Community
Intermediate
limit5limit5

SKILL_HD_CVE_AUTO_BACKPORT

Generate vendor CVE patch backport proposals for customer overlay codebases.

Community
Basic
The-Skyy-Rose-Collection-LLCThe-Skyy-Rose-Collection-LLC
3

Interactive Web Development

Build interactive web experiences with JavaScript frameworks and animation libraries.

Official
Advanced
danzam98danzam98
1

stripe-level-ui

Create polished UI components in Next.js, React, and Tailwind projects.

Community
Advanced