skills.rest
alexwox
alexwoxCOMMUNITY
Explore all skills by this author →
Website𝕏@alexwoxstGitHub

product-craft

Audit UI polish and produce prioritized Tailwind/CSS design system specs.

Updated Apr 6, 2026
Search Tags:#design#audit#animation#tailwind#ui-ux#spacing#polish
One-click install
npx skills add https://github.com/alexwox/genesis-template --skill product-craft
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: product-craft
Source: https://github.com/alexwox/genesis-template/tree/main/.cursor/skills/product-craft
Command: npx skills add https://github.com/alexwox/genesis-template --skill product-craft

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provide implementation-level craft guidance that turns amateur-feeling interfaces into professionally polished products by standardizing spacing, typography, shadows, animations, component states, and invisible polish details so the UI feels intentional and reliable.

Core Features & Use Cases

  • Build a brand-agnostic design system with fill-in-the-blank procedures for spacing, typography, color, shadows, motion, component states, and polish.
  • Audit existing products to produce scored checklists, prioritized fixes, and code-level Tailwind/CSS/React recommendations.
  • Deep-dive on a single domain (animations, spacing, shadows, micro-interactions) with decision rules, worked examples, anti-patterns, and exact production values.
  • Outputs include complete design token files, component state matrices, prioritized audit reports, and references to anchored research files.

Quick Start

Audit my dashboard and produce a prioritized polish report with Tailwind token suggestions for spacing, typography, shadows, animations, and component states.

Frequently Asked Questions about product-craft

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

FAQPage Schema
How do I audit my UI for polish and fix inconsistent spacing or shadows?▼

To audit UI polish, you can generate a scored checklist covering spacing, typography, shadows, and animations, which produces a prioritized report with specific Tailwind and CSS token recommendations for implementation.

What is included in a design system for SaaS applications?▼

A SaaS design system includes fill-in-the-blank specifications for spacing, typography, color, shadows, motion, component states, and invisible polish details, outputting complete design token files and component state matrices.

Can I use this to generate Tailwind tokens and React component states?▼

Yes, you can generate exact Tailwind and CSS token files, code-level React examples, and component state matrices that define standard interaction behaviors across your application's UI.

What's the best way to standardize micro-interactions and animations?▼

Standardizing micro-interactions involves deep-diving into animations using decision rules, worked examples, and exact production values to ensure motion feels intentional and reliable across the product.

Does this work with existing design systems or only new projects?▼

This works with existing design systems and live products by auditing current implementations to identify amateur-feeling interfaces and applying standardization rules to achieve professional polish.

Related Skills

Explore More Design & Creative Skills→
JannaelJannael
16

tailwind-css-patterns

Provide Tailwind CSS v4.1+ patterns for responsive UI components across React, Vue, and Svelte.

Community
Advanced
open-sessionopen-session

frontend-design

Create BOS-aligned frontend interfaces with distinctive aesthetics and production-ready interactions.

Official
Advanced
ChildoftheVibeChildoftheVibe

minimalist-ui

Generate CSS tokens and layout rules for minimalist bento-grid UI systems.

Community
Advanced
distribucionesfayosmoreno-sysdistribucionesfayosmoreno-sys

ui-visual-validator

Validate UI modifications for visual regression, compliance, and accessibility.

Community
Advanced