19 skills (repositories by Leonxlnx) · sorted by popularity
An older experimental skill for designing landing pages, portfolios, and redesigns around a brief and audience. Adjust layout variation, motion, and information density while applying contextual design rules, consistent styling, and accessible interaction states.
Build expressive web pages with wide headings, tightly filled grids, and GSAP animations that follow scrolling. Organize content from attention through action, vary layouts through a defined selection process, and provide static states for reduced-motion preferences.
Create website interfaces with defined typography, spacing, layered cards, and animation rules. The skill guides React, Tailwind, and HTML output, combining asymmetric layouts with mobile adaptations and performance constraints for a consistent visual direction.
Create website reference images, inspect their text, spacing, colors, and layout, then build the frontend to match. Section-specific images guide landing pages, portfolios, and redesigns, with attention to readable content and uncluttered first screens.
Design, build, or refine public websites using researched layouts, typography, palettes, and imagery. It develops a concept from the subject, checks the page in a real browser at three widths, and guides revisions through screenshot reviews.
Generate separate horizontal design reference images for each section of a landing page or marketing website. It coordinates colors, typography, imagery, spacing, and action buttons while varying layouts to give developers a concrete visual guide.
Audit and refine existing websites or apps while preserving their functionality and technology choices. Improve typography, colors, spacing, navigation, and interaction states, including loading, empty, and error screens, through focused changes rather than a full rebuild.
Generate a brand overview image that brings together logos, colors, typography, imagery, and application mockups. Develop a new visual identity or extend supplied brand assets into a coherent presentation board guided by the brand’s purpose and audience.
Design web interfaces inspired by industrial print and old military terminals. Use rigid grids, contrasting type sizes, restrained color, and simulated analog textures to shape data-heavy dashboards, portfolios, or editorial sites.
Design and code restrained web interfaces using warm whites, charcoal text, contrasting typefaces, and generous spacing. Flat grids, muted pastel accents, and subtle interactions create an editorial feel, with motion settings that respect user preferences.
Generate mobile app screen images and connected screen flows for iOS, Android, or cross-platform concepts. The skill emphasizes readable text, consistent colors and components, logical navigation, and balanced phone mockup framing. It produces images only.
Guide an agent to deliver complete code and written outputs without placeholders or skipped sections. It checks requested deliverables against the response and defines clear stopping points and continuation markers when an answer approaches the token limit.
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.
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.
Enforces completion discipline for substantial autonomous work by writing acceptance gates before execution, decomposing work with the Depth Tree, running approved checks, and re-verifying evidence before reporting. Use when an agent faces a long or multi-part task, work that has returned half-done, an exhaustive audit or build, parallel leaves or pipelines, or explicit triggers such as /unlazy, $unlazy, "tree N", "gates", and "do not stop until it is done".
The English summary is being prepared. Showing the original description.
Listen with earshot whenever you must judge, choose, trim, verify or compare sound you cannot hear - picking a sound effect, music or ambience from candidates, finding the cleanest moment in a recording, checking whether audio reads as a real recording or as code-synthesized, reviewing a soundtrack or a video's audio (what happens when, sync to picture, loudness, mix), A/B-ing a mix change, or making a sound in code and improving it by listening (earshot forge). Use it before telling anyone how audio sounds.
The English summary is being prepared. Showing the original description.
Build premium, realistic soundtracks for code-made videos and animations from real licensed recordings - launch films, product and feature videos, UI walkthroughs, logo stings, explainers, trailers and animated shorts made with Remotion, HyperFrames, three.js, GSAP or any renderer. Use this whenever a video or animation needs sound design, SFX, foley, ambience, music, a soundtrack, a score, UI click / whoosh / riser / impact / logo-sting sounds, or a music edit to picture; whenever a synthesized or "random" sounding soundtrack must be replaced with real recordings; or when the user asks to source, license, credit, mix, master, critique or mux audio for a film. It covers cue lists from the picture, sourcing from Freesound / Mixkit / composer libraries with licence checks, a music edit at bar lines, a JSON sound design rendered by a deterministic mixer, measured QA (clicks, masking, harshness, sync, loudness) plus earshot listening, a multi-agent critique, mastering, credits and the mux.
The English summary is being prepared. Showing the original description.
Direct, build and render premium cinematic motion design from code — launch films, product and feature videos, looping feature animations for landing pages and social, logo stings and reveals, UI walkthroughs, app demos, kinetic type, teasers, trailers, intros and promo clips. Use this whenever the user wants any video, animation, motion graphic or animated demo made with Remotion, HyperFrames, HTML/GSAP or React, or asks to storyboard, time, score, render, polish or critique one — even if they only say "make a video about X", "animate this feature" or "we need a launch clip". It supplies concept and copy discipline, type and colour taste that defers to a supplied brand, a beat-locked timeline that drives both picture and a code-made soundtrack, choreography and transition craft, real product UI in motion, film-grade finishing (true motion blur, no banding, BT.709, sync-checked mux) and a measured self-critique loop on contact sheets and renders.
The English summary is being prepared. Showing the original description.
Senior UI/UX Engineer. Architect digital interfaces overriding default LLM biases. Enforces metric-based rules, strict component architecture, CSS hardware acceleration, and balanced design engineering.
The English summary is being prepared. Showing the original description.