设计

frontend-design

derKlinke

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

ui-design-system

hieutrtr

Generates consistent UI components, layouts, and design tokens following a design system. Enforces spacing, color, typography, and accessibility standards across React/TypeScript projects. Use when creating new UI components, building page layouts, choosing colors or typography, setting up design tokens, or reviewing UI code for design consistency. Covers 8pt spacing grid, Tailwind CSS token usage, shadcn/ui primitives, WCAG 2.1 AA compliance, responsive breakpoints, semantic HTML structure, and TypeScript component interfaces. Does NOT cover backend implementation (use python-backend-expert), testing (use react-testing-patterns), or deployment (use deployment-pipeline).

dashboard-ui

macaron-software

"Next.js 14 dashboard components for Finary-style wealth management. Dark theme design system extracted from Finary production CSS. Covers net worth, portfolio, budget views with Recharts, TanStack Query, Zustand, Tailwind CSS."

Capital Lens — Marxian Analysis for the AI Economy

tomerose

Capital Lens v1.0 — by tomerose. Analytical toolkit, not political program. Every quote sourced to the primary text.

whop-dev

steve-cooks

Build Next.js apps for the Whop platform. For empty repos, guides users from idea to deployed app through discovery and setup. For existing projects, provides best practices for authentication, payments, webhooks, and UI. Triggers on "build me a Whop app", @whop/sdk, verifyUserToken, checkAccess, checkout flows, webhook handling, Experience/Dashboard pages, Frosted UI. Delegates to companion skills (frontend-design, vercel-react-best-practices, supabase-postgres-best-practices, web-design-guidelines) for design, performance, and database.

schematica

tester2024

"Schematica is a Python toolkit and interactive REPL for building Minecraft Java Edition schematics, exposed as an AI skill. Use this skill when the user asks to build, generate, design, or export Minecraft structures, schematics, .schem/.schematic/.litematic files, voxel maps, or 3D builds programmatically; when the user wants a procedural or creative toolkit for Minecraft builds; when the user mentions shapes, polygons, geometry, heightmaps, meshes, sessions, previews, Sponge schematics, MCEdit schematics, or Litematica; or when the user wants to script Minecraft map construction from Python or a REPL with undo/redo, block palettes, and multi-view PNG previews. Also use for tasks involving minecraft-data block catalogs, blockstate validation, trimesh/shapely geometry voxelization, or Perlin terrain. The AI agent is the creative driver: it composes shapes, blocks, and generators from this toolkit to realize the user's request."

ecommerce-store-designer

russodope

Design and generate e-commerce store homepage / decoration module images for any online-store platform. Use this skill whenever a user wants to: - Design an online store homepage or decoration (店铺装修 / 首页装修 / 店铺首页) - Create store banner images, series showcases, category navigation, or brand story sections - Build a modular store-design tool in HTML that exports module images at a user-specified width - Design e-commerce product showcase / homepage pages for any platform - Create a customizable store template for different brands Trigger on "店铺装修", "店铺首页", "首页设计", "banner", "详情页", "电商装修", "store/shop decoration", or "store homepage" alongside design or image-generation requests. ⚠️ The skill FIRST asks the user for the target image size (platform / 出图宽度), then designs at a 1440px internal reference and exports at the user's width.

SKILL.md — OpenClaw Agent Skill

freaxnx01

elite-performance

RSHVR

Performance optimization for premium animated websites. Use when asked about: animation performance, 60fps, Core Web Vitals, Vite setup, bundle optimization, lazy loading, will-change, GPU acceleration, layout thrashing, debugging jank, or performance budgets.

elite-gsap

RSHVR

Complete GSAP (GreenSock Animation Platform) reference for elite web animations. Covers ScrollTrigger, SplitText, Flip, MorphSVG, DrawSVG, MotionPath, Observer, Draggable, timelines, and framework integration. 2026 UPDATE: All GSAP plugins are now 100% FREE (Webflow acquisition). Use when asked about: GSAP, gsap, GreenSock, ScrollTrigger, scroll animations, SplitText, text animations, Flip plugin, layout animations, MorphSVG, DrawSVG, SVG animations, complex animations, animation library, pinned sections, horizontal scroll, parallax effects, or any sophisticated web animation needs.

apex-development

david-sfdev

Expert guidance for Apex development on Salesforce Platform following NimbleUser style guide standards. Use this skill when working with Apex classes, triggers, test classes, or when the user mentions Salesforce Apex, .cls files, .trigger files, or Apex-specific concepts like SOQL, DML, governor limits, or test coverage.

video-use

progressive-sucralfate943

Edit any video by conversation. Transcribe, cut, color grade, generate overlay animations, burn subtitles — for talking heads, montages, tutorials, travel, interviews. No presets, no menus. Ask questions, confirm the plan, execute, iterate, persist. Production-correctness rules are hard; everything else is artistic freedom.

building-design-systems

sumik5

Design system construction and governance methodology covering system foundations, pattern taxonomy, organizational adoption, pattern library operations, and UI pattern catalog (20+ interaction patterns). Use when architecting, evaluating, or restructuring a design system, planning organizational adoption, or building a pattern library. NOT for component styling (applying-design-guidelines), design-to-code (implementing-design), frontend codegen (designing-frontend), Tailwind config (styling-with-tailwind), or design thinking (practicing-design-thinking).

frontend-design

dmonteroh

"Implement distinctive, production-grade frontend UI code with high design quality. Use when asked to build or style components/pages/apps and deliver working UI code; avoid for design-only briefs without implementation."

design-system

peterbamuhigire

Establishes the visual foundation for a website — fonts, colors, spacing, animations, and aesthetic direction. Use before building any pages. Reads docs/style-brief.md for brand direction.

designing-frontend

sumik5

Creates distinctive, production-grade frontend code with shadcn/ui integration. Use when implementing web components, pages, or applications requiring creative, polished UI code. Covers HTML/CSS/JS code generation and shadcn/ui component management. For Storybook story creation and component testing, use developing-storybook instead. For theoretical UI/UX design principles, use applying-design-guidelines instead. For Tailwind CSS methodology, component design patterns, and design system construction, use styling-with-tailwind instead. For design system methodology (pattern language, organizational strategy, UI pattern catalog, anti-patterns), use building-design-systems instead.

design

dravensoft-dev

Use this skill to build user interfaces with Arena, a token-driven design system with React and Angular component libraries on a shared Tailwind layer, for production screens or for throwaway prototypes and mocks. Covers design tokens, colour, type, spacing, motion, iconography, the accessibility pattern each component binds, and a UI kit. Arena carries the design language and not the skin: it ships Dravensoft's palette and fonts, and any project declares its own in arena.config.json.

digital-allies-design

Digital-Allies

Use this skill to generate well-branded interfaces and assets for Digital Allies — a Kingman, AZ one-person technology shop — either for production or for throwaway prototypes/mocks. Contains the brand voice, color and type tokens, fonts, logo and icon assets, recreated UI components, and slide templates needed to design on-brand work.

implementing-figma

sumik5

Comprehensive Figma MCP integration for design-to-code conversion. Covers all 13 Figma MCP tools, basic and advanced workflows (Figma Make, Code Connect, Design System Rules, design token sync), and visual validation. Use when converting Figma designs to code or managing design systems. Requires Figma MCP server. For general design implementation principles (non-Figma), use implementing-design instead.

elouan-web-generator

elouangrimm

Generates plain HTML, CSS, and JavaScript websites following Elouan's dark-first design system with zero border-radius, flat UI, stone color palette, and strict file organization. Use when creating or scaffolding web projects for Elouan, when asked to generate static sites with his design preferences, when user asks to create a website/web page/web project, when user requests a static site or front-end project, when user mentions generating HTML/CSS/JS, or when user references Elouan's design system or style preferences.

frontend-design

roman-16

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

bootstrap-content

sjnims

This skill should be used when the user asks about Bootstrap typography, "how do I style text in Bootstrap", "show me Bootstrap heading styles", "Bootstrap text looks wrong", "text not wrapping in Bootstrap", "how to create responsive tables", "Bootstrap table not responsive", "Bootstrap table overflowing on mobile", "how do I format code blocks", "Bootstrap images not responsive", "why is my Bootstrap image not scaling", "how to center images in Bootstrap", "image thumbnail not working", "how to add figure captions", "figure caption not showing", display headings, lead text, text alignment, text formatting, tables, table styling, responsive images, figures, code blocks, blockquotes, lists, abbreviations, horizontal rules, Reboot CSS reset, or when help is needed styling text, tables, images, and other content elements in Bootstrap.

canvas-design

eyadsibai

Use when "creating posters", "visual art", "design philosophy", "PDF art", "PNG design", or asking about "abstract art", "visual design", "museum-quality graphics"

frontend-pe

PrakharMNNIT

ACTIVATION TRIGGER. Use this skill when the user demands "Ultrafrontend", "High-End UX", "Awwwards Style", or world-class UI design. This skill enforces a design-first workflow with zero-compromise aesthetics.