skills.rest
Youngger9765
Youngger9765COMMUNITY
Explore all skills by this author →
GitHub

design-improvement

Automate design optimization for a young-personal-site across page components.

Updated Aug 23, 2026
Search Tags:#design#ui#accessibility#tailwind#ux#responsiveness
One-click install
npx skills add https://github.com/Youngger9765/young-personal-site --skill design-improvement
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-improvement
Source: https://github.com/Youngger9765/young-personal-site/tree/main/.claude/skills/design-improvement
Command: npx skills add https://github.com/Youngger9765/young-personal-site --skill design-improvement

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Automates design improvements to Young Tsai's site, ensuring color, typography, spacing, and layout stay professional, accessible, and responsive.

Core Features & Use Cases

  • Palette enforcement: Aligns UI with the slate-blue, coral-orange, and warm-cream palette.
  • Typography & spacing: Maintains a clear typographic hierarchy and consistent spacing.
  • Responsive polish: Ensures layouts adapt gracefully across mobile, tablet, and desktop.

Quick Start

Prompt me to apply design improvements to a page (for example, the Home page) and I will adjust Tailwind classes, spacing, and typography to win a cohesive look.

Frequently Asked Questions about design-improvement

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

FAQPage Schema
How do I improve UI design consistency across multiple pages with Tailwind?▼

Design improvement automates UI polish by applying consistent color palettes, typography hierarchy, and spacing across all page components using Tailwind classes, ensuring a cohesive responsive layout from mobile to desktop.

Can I enforce a specific color palette across my responsive site automatically?▼

Yes. Design improvement enforces palette alignment by automatically adjusting Tailwind classes to match your brand colors—slate-blue, coral-orange, and warm-cream—while maintaining contrast and accessibility across all breakpoints.

How do I ensure my site is accessible and responsive without manual rework?▼

Design improvement automates accessibility and responsive polish by analyzing existing layouts, adjusting spacing and typography for clarity, and ensuring components adapt gracefully across mobile, tablet, and desktop viewports.

What design elements does this approach standardize?▼

Design improvement standardizes color harmony, typography hierarchy, spacing consistency, and layout alignment across all page components—Home, Projects, About, and Speaking—while preserving responsive behavior.

Does this work with existing Tailwind projects?▼

Yes. Design improvement integrates with Tailwind-based projects, automating class adjustments and refinements to achieve polished, consistent visuals without requiring manual CSS rewrites.

Related Skills

Explore More Design & Creative Skills→
deepeshBodhdeepeshBodh
35

analysis-screenshot

Analyze UI screenshots to produce design-token catalogs for CSS, Tailwind, and SwiftUI.

Community
Advanced
dejanvasic85dejanvasic85
1

frontend-design

Generates Tailwind and CSS-based designs and layouts for a given text description, with multiple aesthetic options to choose from.

Community
Basic
miethemiethe

tailwind-utility-styling

Design Tailwind UI styling systems with mobile-first responsive rules and cva variants.

Community
Basic
AIS-Commercial-Business-UnitAIS-Commercial-Business-Unit

ais-ux-design-system-bridge

Normalize and port design system rules across Figma tokens, Storybook components, and project code.

Official
Advanced