UI/UX, logos, slides, and image generation (7.3K skills)
Cards, drawers, carousels and other patterns borrowed from the physical world. Use when designing layout patterns, gestures or navigation paradigms.
The English summary is being prepared. Showing the original description.
Few semantic colours, each meaning one thing, and errors with a way forward. Use when designing status indicators, validation, alerts or error states.
The English summary is being prepared. Showing the original description.
Match information density to platform and user type. Use when designing data tables, dashboards or toolbars, or adapting a desktop product for mobile.
The English summary is being prepared. Showing the original description.
Mobile, tablet and desktop are different paradigms, not one layout scaled. Use when designing responsive layouts or deciding what each breakpoint shows.
The English summary is being prepared. Showing the original description.
Currency, language, region and unit selectors live in a low-profile header or footer spot. Use when designing locale switchers or product-wide preference controls.
The English summary is being prepared. Showing the original description.
Toasts, inline errors, banners and recovery paths. Use when designing error states, success confirmations, async feedback or in-place editing.
The English summary is being prepared. Showing the original description.
Small purposeful animations — toggles, animated icons, success moments. Use when designing interactive feedback, success states or loaders.
The English summary is being prepared. Showing the original description.
Best practices for designing CosmWasm smart contract APIs. Use when defining message types, designing execute/query interfaces, or optimizing API ergonomics.
The English summary is being prepared. Showing the original description.
Build, maintain, and audit design systems — tokens, component libraries, style guides, and cross-project consistency. Use when asked to create a design system, define tokens, audit component consistency, generate a style guide, or sync design tokens with code.
The English summary is being prepared. Showing the original description.
Review UI designs and implementations for accessibility, consistency, usability, and visual quality. Use when asked to review a design, audit accessibility, check UI consistency, compare implementation against mockups, or evaluate a user interface.
The English summary is being prepared. Showing the original description.
Reverse-engineer a design system from a live website (public URL or localhost). Extracts colors, typography, spacing, shadows, radii, breakpoints, and component patterns using a headed Playwright browser. Captures screenshots of pages, components, and interactive states at real device resolutions. Produces structured design tokens and optionally seeds a Penpot project. **Triggers — use this skill when:** - User says "extract design system from [url]" - User asks to "reverse-engineer the styles from [site]" - User says "build a design system based on [website]" - User asks to "pull the design tokens from [url]" - User says "analyze the design of [site]" - User asks to "import styles from [website] into Penpot" - User points at a URL and asks about its colors, fonts, spacing, or components
The English summary is being prepared. Showing the original description.
3D Morph PPT — extends morph-ppt with GLB model insertion, cinematographic camera, model-content layout, and enriched visual design system.
The English summary is being prepared. Showing the original description.
Capture the before/after rendered PNGs a UI-affecting PR in this repository needs as visual evidence, including bringing an Android SDK up in a fresh sandbox. Use when a change touches a Compose @Preview, a catalog, the VS Code webview, an overlay, a theme, an icon or a fixture, and the PR body needs real pixels.
The English summary is being prepared. Showing the original description.
Audit and rewrite frontend UI to remove generic AI design patterns ("AI slop"), both the first-order defaults (purple gradients, Inter, a centered hero over three cards, untouched shadcn) and the second-order "tasteful AI" ones (cream with terracotta, near-black with acid green, all-caps mono chrome, one accented headline word, decorative 01/02/03). Use when asked to "de-slop a UI", "make a design look less AI-generated", "audit a page or component for AI design tells", "fix Claude/Codex-generated frontend that looks generic", or keep a multi-page site on one design system. Covers HTML/CSS and React/Tailwind/shadcn. Has a detection-only mode and a zero-dependency scanner (scripts/detect.mjs) for the code-certain tells.
The English summary is being prepared. Showing the original description.
Fetch up-to-date documentation for any library, framework, API, or service into context. Use when the user wants to look up API references, check function signatures or required fields, find feature-specific docs, or verify how an external tool actually works. Triggers for queries about third-party libraries like Stripe, SQLAlchemy, Tailwind, FastAPI, shadcn, Drizzle, Hono, Better Auth — any time the answer lives in official docs rather than in the project codebase. Use this instead of guessing from trained knowledge, which is stale.
The English summary is being prepared. Showing the original description.
Builds distinctive, production-grade UIs that avoid generic AI aesthetics. Use whenever the user wants to build, restyle, or give visual direction to any interface — pages, dashboards, landing pages, components, onboarding flows, mobile screens, or design systems — even without an explicit 'design' request. Also triggers for: picking an aesthetic direction, improving the look of a dull/generic existing page, adding visual personality, or choosing colors/typography. Includes a bundled design intelligence database for concrete guidance across web (React, Next.js, Vue, Tailwind) and mobile (React Native, Flutter, SwiftUI).
The English summary is being prepared. Showing the original description.
Design effective excitation signals (step tests) for system identification and parameter estimation in control systems.
The English summary is being prepared. Showing the original description.
Linearizing nonlinear dynamics around operating points for control design.
The English summary is being prepared. Showing the original description.
Adding integral action to MPC for offset-free tension tracking.
The English summary is being prepared. Showing the original description.
Analyze incoming user requests to detect intent, request type (design/validate/debug/document), complexity level, and identify vague requirements or buzzwords that need clarification. Use when cto-orchestrator receives new requests that need classification before routing to specialist agents.
The English summary is being prepared. Showing the original description.
Guidance for scaling systems from startup to enterprise scale. Use when planning for growth, diagnosing bottlenecks, or designing systems that need to handle 10x-1000x current load.
The English summary is being prepared. Showing the original description.
Use when a screen design needs variants - how many, one document per variant, what makes two variants genuinely different, recommending one, how the human's choice is read, and narrowing to the chosen one in revision
The English summary is being prepared. Showing the original description.
Use when you write any words a user reads in a mockup or a hand-off - content language and voice, buttons, labels, errors, empty states, confirmations, numbers and dates, and the longest-string check
The English summary is being prepared. Showing the original description.
Use when you derive, change or extend a design system - where tokens live per stack, the DTCG token tree, role-based names for both themes, base vs layer vs drift, the DESIGN.md section order, the inventory format, the contrast check and the lint every proposal returns
The English summary is being prepared. Showing the original description.