Design skills

Browse reusable Agent Skills, each with a clear purpose and practical guidance.

formax-web-css-convergence-workflow

Use when changing web CSS/UI styling so requirements, state ownership, and acceptance checks are locked before edits to prevent rework churn.

193 repo starsObserved in 1 repos
Design

frontend-mockup-loop

Plan, build, and iterate UX-friendly frontend mockups via a ground→contract→mockup→test→fix→learn loop, acting as an expert UX designer who grounds every decision in externally documented public design rules (Nielsen heuristics, Laws of UX, WCAG, GOV.UK/USWDS/Material). Uses the bundled serve_mockup, score_mockup, and init_ui_contract tools plus a ui-contract.md design control plane to keep screens consistent. Works in any React/Tailwind/shadcn (or plain HTML) project. Use when designing new screens, adapting existing UI, enforcing cross-screen consistency, or doing a UX review. Triggers: "design a screen", "mockup this UI", "wireframe", "make the UI consistent", "adapt the existing design", "improve this layout", "UX review", "is this good UX".

193 repo starsObserved in 1 repos
Design

tailwind-shadcn

Tailwind CSS utility patterns with shadcn/ui component usage, theming via CSS variables, and responsive design. Use when styling components, installing shadcn components, implementing dark mode, or creating consistent design systems.

193 repo starsObserved in 1 repos
Design

better-ui

Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, micro-interactions, enter/exit animations, or any visual detail work. Triggers on UI polish, design details, "make it feel better", "feels off", stagger animations, border radius, optical alignment, image outlines, box shadows.

192 repo starsObserved in 1 repos
Design

graphics-demo

Design, build, review, or debug article and web demos across the full range from static to live: semantic HTML/CSS layouts, responsive components, design systems, Grid/Flexbox, accessibility AND interactive Canvas 2D, SVG, WebGL/Three.js, physics/mechanical simulations, sliders, scrubbers, requestAnimationFrame loops, React/MDX/Deno/TanStack embeds. Use when building a non-interactive figure or page layout, a live model-driven explainer (Bartosz Ciechanowski style), or anything between. Keywords: demo, graphics, canvas, WebGL, Three.js, animation, simulation, HTML, CSS, layout, Grid, Flexbox, semantic markup, responsive, accessibility, interactive explainer.

192 repo starsObserved in 1 repos
Design

taste-minimalist-skill

Clean editorial-style interfaces. Warm monochrome palette, typographic contrast, flat bento grids, muted pastels. No gradients, no heavy shadows.

192 repo starsObserved in 1 repos
Design

taste-redesign-skill

Upgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality. Works with any CSS framework or vanilla CSS.

192 repo starsObserved in 1 repos
Design

taste-soft-skill

Teaches the AI to design like a high-end agency. Defines the exact fonts, spacing, shadows, card structures, and animations that make a website feel expensive. Blocks all the common defaults that make AI designs look cheap or generic.

192 repo starsObserved in 1 repos
Design

alibabacloud-cadt-arch-draw

Draw cloud architecture diagrams via CADT AI agent. Submit a product/resource description, the backend creates the architecture and returns a summary. Triggers: "画架构图", "架构绘图", "CADT 绘图", "draw architecture".

191 repo starsObserved in 1 repos
Design