Loading...
Loading...
Found 18 Skills
Modern CSS techniques that replace breakpoint ladders, wrapper elements and scripts. Use whenever you write, edit or review styles in any form, including plain CSS, Tailwind classes, StyleX, CSS-in-JS and inline styles, and whenever you build or restyle a page or component, even if the user never mentions CSS.
Generate correct shadcn/Tailwind layouts by applying CSS mental models. This skill should be used when the user asks to 'create a shadcn layout', 'fix layout issues', 'debug CSS height problems', 'make scrolling work', or has issues with Tailwind flex/grid. Keywords: shadcn, Tailwind, layout, CSS, flex, grid, height, scroll, overflow.
Turn any concept, idea, or description into a polished static HTML visual, then export it as a PNG or SVG image. Use this skill whenever the user wants to create a visual representation of an idea and needs an image file output (PNG or SVG). This includes: infographics, concept diagrams, flowcharts, comparison charts, process visuals, educational diagrams, social media graphics, data visualizations, posters, cards, badges, icons, logos sketches, or any "make me an image of X" request that can be achieved with HTML/CSS/SVG rather than photographic AI generation. Also trigger when the user has an existing HTML visual and wants to export/convert it to PNG or SVG. Trigger phrases include: "create an image of", "make a visual", "design a graphic", "export as PNG", "save as SVG", "concept to image", "turn this into an image", "screenshot this HTML", "generate an infographic", or any request combining a concept description with image output.
Calculate and debug Flexbox layout math for flex base size, flex-basis, flex-grow, flex-shrink, the flex shorthand, fractional grow values, and min/max constraints. Use when flex items resize unexpectedly, when distributing free space along one axis, when comparing flexbox with grid, or when deriving predictable card, nav, toolbar, and row layouts.
Generate high-click-through video covers and thumbnails for Bilibili, YouTube, and Douyin using the pop-out technique: place a fully brightened cutout of the person over their own darkened original photo, with text layered in between, and reflow a single set of content into 16:9, 4:3, and 3:4 using HTML/CSS. Use this when the user wants a video cover, thumbnail, Bilibili cover, YouTube thumbnail, vertical Douyin/WeChat Channels cover, a thumbnail featuring the person, or a Codex/Agent/AI video cover. Note: this skill is exclusively for video thumbnails and follows the high-design YouTube aesthetic; for Xiaohongshu posts, infographics, or PPT-style visuals, use yuyile-social-card-skill.
Improve layout composition, spacing systems, grouping, and visual rhythm. Use when the user mentions weak layout structure, arbitrary spacing, weak grouping, crowded composition, or layout monotony rather than priority/emphasis problems.