722 skills · sorted by relevance
Search local design guidance to plan, build, review, or improve web, mobile, and desktop interfaces. Find suitable colors, font pairings, layouts, charts, and interaction patterns, with implementation advice matched to the project's technology.
Create a single-page editorial landing site from a brand brief, using paper textures, collage imagery, and structured content sections. The output includes responsive layouts, scroll animations, and sticky navigation, with generated, placeholder, or supplied images.
Build React or Next.js interfaces with specific rules for typography, color, spacing, and animation. The skill guides responsive layouts, loading and error states, and performance-conscious interactions while preserving the original v1 design behavior.
Design and build landing pages, portfolios, and website redesigns around the audience and brand. Choose suitable typography, colors, layouts, and motion, then check consistency, responsive behavior, and readable buttons and forms before delivery.
Review and refine an existing web page or HTML artifact before sharing it. Improve visual hierarchy, copy, and restrained animation, while fixing responsive layouts and accessibility issues and preserving the original content and brand.
Generate website design images before coding, then analyze their text, spacing, colors, and layout to guide implementation. Separate references for each section help translate the design into a responsive frontend with a readable first screen on smaller laptops.
Generate a DESIGN.md file for Google Stitch that defines a shared visual direction. It pairs plain-language descriptions with exact colors, typography, component states, responsive rules, and motion guidance to keep generated screens consistent.
Build React or Next.js interfaces using adjustable layout variation, motion, and information density. This preserved v1 skill covers typography, color, responsive layouts, interaction states, and animation isolation for projects that require its original behavior.
Build Python APIs with FastAPI using clear routes, validated inputs, and consistent error handling. It guides asynchronous database and API calls, reusable dependencies, caching, and code organization to support readable implementations and responsive services.
Review mobile and tablet pages in portrait and landscape. Identify orientation locks, blocking rotation messages, and hidden controls, then suggest responsive layout changes so essential content and actions remain usable in both orientations.
Review stylesheets for a CSS reset or normalization layer that reduces differences in browser defaults. Check import order, framework provisions, and rendered layouts across screen sizes and interaction states, then suggest changes for a consistent styling foundation.
Review website images for high-density displays, where standard assets can look blurry. Check higher-resolution versions, HTML and CSS image selection, delivery settings, and loading behavior, then identify specific files or components that need changes.
Inspect compressed JavaScript bundles, the files that package application code, to find excessive size and loading costs. Recommend splitting code, removing unused portions, and reviewing dependencies based on measured effects on page responsiveness.
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.
Audit CSS class names for inconsistency and ambiguity, then organize them using BEM, a convention that names components, their elements, and variations. Check the rendered interface across screen sizes and interaction states when reviewing changes.
Review CSS layouts for unwanted horizontal scrolling on narrow screens and at high browser zoom. Identify fixed widths, overflowing media, and unbroken text, then apply layout fixes that keep content readable within the viewport.
Audit website image file sizes against guidelines for photos, graphics, hero images, and thumbnails. Report oversized assets with target sizes, distinguish compression issues from dimension mismatches, and guide format conversion and delivery of smaller variants to mobile devices.
Measure how quickly a webpage updates after user interactions using INP, a responsiveness metric. Identify confirmed bottlenecks and improve event handlers, split long tasks, or move heavy computation to web workers.
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.
Review styles written directly in HTML or embedded style blocks, and move suitable rules into external stylesheets. Check layouts across screen sizes and interaction states while preserving justified exceptions for critical styles and dynamic values.
Review CSS text sizes for mobile readability and accessibility. Identify undersized text and fixed pixel settings, suggest relative units that follow browser font preferences, and check that content and controls remain usable at 200% zoom.
Review the loading order of CSS and JavaScript to address rendering delays and flashes of unstyled content. Suggest changes to the document head, script loading, and critical styles, while checking layouts across screen sizes and interaction states.
Review and create print styles for web pages so printed content stays readable. Adjust typography and page breaks, hide navigation and ads, and display external link URLs in the printed output.
Check whether production CSS is minified, meaning unnecessary spaces, comments, and verbose syntax are removed to reduce file size. Review build settings and rendered layouts, then suggest suitable minification tools or framework settings.