polish

Codify design systems, keyboard-first navigation, and UX patterns into production-grade software.

2|1|Updated Sep 28, 2023

Search Tags:#design-system #polish #ui-patterns #keyboard-navigation #view-modes #command-palette

Ready to run

npx skills add https://github.com/vmasrani/dotfiles --skill polish-vmasrani

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: polish
Source: https://github.com/vmasrani/dotfiles/tree/main/maintained_global_claude/archive/skills/polish
Command: npx skills add https://github.com/vmasrani/dotfiles --skill polish-vmasrani

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Transform functional prototypes into production-grade software by establishing a cohesive design system, keyboard-first navigation, and polished UX patterns that scale across teams.

Core Features & Use Cases

Design System: VS Code/Linear/GitHub Dark styles, typography, color tokens, and accessibility guidelines to create a consistent UI.
Keyboard-First Navigation: Patterns and interactions optimized for keyboard usage, including command palettes and focus management.
Command Palette: A central hub for actions, shortcuts, and quick actions to streamline workflows.
View Modes & Patterns: Grid, detail/viewer, quicklook, and compare layouts with robust state management.
UX Polish: Focus rings, hover states, transitions, and responsive design to give a production-grade feel.

Quick Start

Apply the polish patterns to your MVP to upgrade its UI into a production-grade, polished app.

Frequently Asked Questions about polish

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

FAQPage Schema

How do I transform a functional prototype into a production-grade app?▼

To transform a prototype into a production-grade app, apply a cohesive design system with typography and color tokens, implement keyboard-first navigation, and add UX polish like focus rings and transitions.

What design system styles and UI patterns are used for production-grade software?▼

Production-grade software uses design system styles like VS Code, Linear, and GitHub Dark, incorporating specific typography, color tokens, and accessible UI patterns to ensure a consistent user interface.

How do I implement keyboard-first navigation and a command palette in my UI?▼

Keyboard-first navigation and command palettes are implemented by defining explicit navigation semantics, optimizing interactions for keyboard usage, and creating a central hub for actions and shortcuts.

What view modes and layouts should a scalable design system include?▼

A scalable design system should include grid, detail or viewer, quicklook, and compare layouts, supported by robust state management to handle consistent UX patterns across teams and platforms.

Can I apply these UI patterns to modern apps across different teams?▼

Yes, you can apply these UI patterns to modern apps across different teams by specifying a design-system-driven workflow and scalable component structure to ensure reliable and maintainable products.

What UX polish elements are needed to give an MVP a production-grade feel?▼

To give an MVP a production-grade feel, apply UX polish elements including focus rings, hover states, smooth transitions, and responsive design alongside established accessibility guidelines.