412 skills · sorted by relevance
Refine interface appearance and interactions by reviewing spacing, typography, rounded corners, shadows, animation, and clickable areas. Get concrete before-and-after recommendations for buttons, cards, forms, and other components, including hover, focus, and loading states.
Turn existing interface code into shared design rules for colors, type, and spacing, with documented decisions and an interactive preview. Audit visual consistency across ten areas and identify specific places to improve.
Build HTML/CSS pages using visual specifications from 54 established websites, including Stripe, Linear, and Vercel. Templates provide colors, typography, spacing, component styles, and layouts that adapt to different screen sizes.
Define a new product's visual style through product discovery and research. Get recommendations for fonts, colors, layout, spacing, and motion, preview font and color combinations, and document the shared design rules in DESIGN.md.
Add a live adjustment panel to an HTML page so viewers can explore colors, text sizes, spacing, themes, and motion. Changes appear immediately and are saved in the browser for the next visit.
Design minimalist web interfaces with warm monochrome colors, clear typographic hierarchy, generous spacing, and flat card grids. Use muted pastel accents and subtle motion to create an editorial layout for product interfaces.
Turn a design request into a concrete specification covering colors, fonts, layout, mood, spacing, and constraints. Generate DESIGN.md and an HTML preview, with a clear report of defaults applied to unspecified choices.
Customize Ant Design colors, spacing, corners, and typography using design tokens, shared values that control appearance. Configure global styles, individual components, dark mode, and CSS variables through ConfigProvider, and extract computed theme values when needed.
Design and improve website and app interfaces, from typography, spacing, and color to task flows. Review usability, accessibility, responsive layouts, and performance, or refine interface text, error states, and reusable design elements.
Review fixed pixel values in fonts, widths, and spacing, then suggest relative units that adapt to available space and browser font preferences. Check rendered layouts at different screen widths and during interactions before proposing changes.
Review CSS spacing, borders, and positioning for conversion to logical properties, which follow writing direction. Check rendered layouts across screen sizes and interaction states to support right-to-left languages and vertical text.
Review and fix Flexbox layouts with overflowing text, uneven item widths, or inconsistent spacing. Check rendered results across screen sizes and interaction states, then adjust sizing rules, spacing, and text overflow settings.
Check whether sticky headers, banners, or chat widgets hide controls reached with the keyboard. Review tab order, zoomed views, and mobile layouts, then suggest spacing or scrolling changes that keep the focused control and its indicator visible.
Find repeated colors, spacing, and font sizes in CSS, then organize them into custom properties, reusable values referenced with var(). Review their use across components and screen sizes, and explain how overrides support theme changes.
Build and revise a design system from brand materials or code. Organize colors, typography, spacing, components, and assets into structured files, with usage guidelines and previews, using the supported Design System artifact format.
Build web interfaces that adapt to screen and component widths. Use CSS Grid, flexible text and spacing, and container queries, which respond to a component’s available space, to adjust layouts, images, navigation, and tables.
Build consistent interface foundations with design tokens, named values for colors, spacing, and typography. Covers light and dark themes, multiple brands, reusable components, and workflows that keep design definitions aligned with application code.
Convert plain text documents into Markdown while preserving their content. Follow supplied formatting rules or a reference file, organize headings, lists, and code blocks, and clean up spacing for the chosen publishing platform.
Compare a UI screenshot with reference images and receive a structured JSON assessment. Get a score, pass or revision status, concrete visual differences, and suggested edits for layout, spacing, typography, colors, and visual hierarchy.
Build interfaces with Tailwind CSS v4 using CSS-based configuration, layouts that adapt to their container, and shared color and spacing values. The skill guides responsive styling, dark mode, and reusable component patterns.
Create a consistent UI design system from brand colors. Generate design tokens, reusable values for colors, typography, and spacing, and support component documentation, responsive layout calculations, accessibility considerations, and clear handoff materials for developers.
Create shared UI design values from a brand color, including palettes, typography, and spacing. Export them as CSS, SCSS, or JSON, document component behavior, plan layouts for different screens, and prepare developer handoff materials.
Build and review JetBrains plugin interfaces using Swing and IntelliJ Platform components. Follow concrete rules for layouts, theme colors, fonts, spacing, dialogs, and tool windows while keeping shared style values consistent.
Format plain text or Markdown into a readable article with headings, emphasis, lists, and tables while preserving the original wording. Add titles and summaries, adjust spacing in mixed Japanese and English text, and save a formatted copy.