Design
UI/UX direction, visual design, and design systems
frontend-design
by UholySmokes
Transform UI style requirements into production-ready frontend code with systematic design tokens, accessibility compliance, and creative execution. Use when building websites, web applications, React/Vue components, dashboards, landing pages, or any web UI requiring both design consistency and aesthetic quality.
ui-ux-guidelines
by tylergibbs1
Implementation details for accessible, performant interfaces. Use alongside vercel-design-guidelines for detailed technical guidance on interactions, animations, and forms.
liatrio-brand
by liatrio
Applies Liatrio's official brand colors, typography, and visual identity to any artifact. Use this skill whenever creating UI code, presentations, documents, diagrams, slide decks, or any content that should follow Liatrio brand guidelines. Also use it when the user asks about Liatrio brand colors (#24AE1D), fonts (DM Sans), logos, dark/light mode theming, or visual style — even if they don't explicitly say "brand guidelines". When in doubt, apply the brand.
frontend-design
by monit-jangir
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.
SKILL.md — OpenClaw Agent Skill
by freaxnx01
Pick a repo under ~/projects/repos via fzf and launch Claude Code — with slot tracking, per-slot Telegram pages, and Remote Control integration.
mockup
by biruk741
Generate interactive HTML/React mockups of the hackathon project. Creates clickable prototypes that can be opened in a browser to test user flows and visual concepts. Use when the team wants to visualize the product, test user flows, iterate on features, or needs a tangible artifact to discuss. Also use when someone says "show me what this looks like", "let's prototype this", "mock this up", or "build a quick UI for this".
abdurohman-karim-design
by abdurohman-karim
Use this skill to generate well-branded interfaces and assets for Abdurohman Karim's portfolio brand — a strict-monochrome, crypto/web3-minimal aesthetic for a fintech backend developer. Use for production or throwaway prototypes/mocks. Contains design guidelines, colors, type, fonts, icons, and UI kit components for prototyping.
deck-4hum-ai
by 4hum-ai
Create, edit, and publish professional slide decks on deck-4hum-ai. Claude generates the deckJson structure directly from the slide-scene-graph v0.4.0 schema, then saves it via the API. Use this skill when the user asks to make a presentation, slide deck, or slideshow — or to iteratively improve one.
apollon7-development
by noone13
Methodology for collaborative development of APOLLON-7, a souls-like dungeon crawler set on a space station, using Ursina (Python 3.12+ on Panda3D). Use whenever the user mentions APOLLON-7, the space crawler project, the souls-like crawler, or asks to continue work on the dungeon crawler game. This includes adding new mechanics (oxygen, weapons, NPC types, level design), porting from the HTML prototype, working with map files, balancing combat, building Steam-ready executables with PyInstaller, or any task related to this specific game project. Always read PROJECT.md, PRODUCTION_PLAN.md, and JOURNAL.md first to understand current state.
ui-design-core
by Protagonistss
核心设计能力，提供配色、布局、组件样式生成及反模式检查。
check-prd
by Liquid-erigeronphiladelphicus552
Review B端 PRDs, requirement docs, SaaS or enterprise product specs, and system design documents with a 14-dimension quality framework. Use this whenever the user asks to check, review, critique, improve, or find gaps in a PRD, 需求文档, 产品方案, B端系统设计, SaaS spec, or similar design document, even if they only say "帮我看看这个 PRD/方案/需求".
ppt-image
by FA-T-T
Create academic PPT decks, proofsheet PPTX files, poster-style slides, one-slide system architecture diagrams, and paper-report slides as 16:9 image-native presentations using GPT Image 2 through the local gpt-image-2-skill backend, with reference-first handling for real figures from txt/md/docx/tex folders and figure directories. Use when the user asks for PPT, slides, presentation slides, report deck, proofsheet, poster, system architecture diagram, academic presentation, poster-like slide, conference talk visuals, or Nature/Science-style white-background slide images with coherent story flow and reusable files under a slides/ directory.
frontend-studio
by potatoman03
Build tasteful, modern, production-grade frontends with distinctive design. Use when building websites, landing pages, dashboards, SaaS UIs, e-commerce pages, portfolios, or any web interface. Extends Anthropic's frontend-design skill with a design decision framework, shadcn/ui defaults, rams.ai accessibility enforcement, and a technique library that produces clean, unique output — never AI slop. Activate for: "build me a website", "create a landing page", "design a dashboard", "make a UI for...", or any frontend request.
name-candidate-generator
by NexaScience
AI/テック系のサービス名・プロダクト名・ブランド名の候補を、命名技法(造語・音象徴・語根・接尾辞パターン等)を 使って多数生成し、読み(カナ)・由来・タイプ付きの構造化リストで返すスキル。 ユーザーが「名前を考えて/出して/生成して」「ネーミング」「サービス名/プロダクト名/ブランド名の候補を出して」「命名」「名前案」 「いい名前ない?」など “まだ候補を作る” 段階の依頼をしたら必ずこのスキルを使う。 これは“生成”専用。商標/ドメイン/SNSの空き調査はしない（「使えるか調べて」「空き確認」「商標チェック」は brand-name-availability スキルの役割）。 生成後は人間がショートリストを選び、その後 brand-name-availability で調査する流れ。
figma-d3-react-ts
by CoRLab-Tech
D3.js data visualization in React/Next.js components with PIXEL-PERFECT Figma matching. Use when building interactive charts, graphs, network diagrams, geographic maps, or any custom data visualization with D3.js inside React components. Covers pixel-perfect Figma extraction workflow, iterative visual validation via Playwright, two integration approaches (useRef+useEffect imperative vs declarative React rendering), responsive sizing, TypeScript typing, SSR/Next.js compatibility, accessibility, and performance. Triggers on: 'create a chart', 'add a D3 visualization', 'build a graph component', 'data visualization', 'interactive chart', 'force-directed graph', 'bar chart', 'line chart', 'heatmap', 'scatter plot', 'pie chart', 'chord diagram'.
pdf-anonymize
by jamesconsultingllc
True-redacts PII from PDF, Word (.docx), and Excel (.xlsx) documents before sharing. PDFs have glyphs physically removed and replacement text re-laid; DOCX patches run slices to preserve formatting; XLSX replaces cells, comments, headers, defined names, and properties. Handles names, addresses, account numbers, credit scores, and merchants/stores/phones/cities on transaction lines. Works on ASCII PDFs and modern bank statements with CID-encoded subsetted fonts (BoA, Chase). Single file or directory (with --recursive). Output cannot be recovered via Ctrl+F, pdftotext, or another AI. Trigger on "anonymize/redact/sanitize/de-identify this PDF/Word/Excel", "scrub PII", "remove my name/address", "share this safely" — even when the user just attaches a file and asks to strip identifying info. DO NOT USE FOR visual watermarking, legacy .doc/.xls, or .pptx. Do NOT use nano-pdf — it re-renders pages via image AI and corrupts financial text.
frontend-design
by enoch-robinson
前端界面设计技能。创建独特、高质量的前端界面，避免通用 AI 风格。当用户需要构建网站、落地页、仪表盘、React 组件、HTML/CSS 布局或美化任何 Web UI 时使用此技能。
validaenota-design
by magsitech
Use this skill to generate well-branded interfaces and assets for validaENota, a Brazilian B2B SaaS for NF-e/NFC-e fiscal validation. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping.
design-system-guardian
by agebold
Strictly enforces the local design system, accessibility (WCAG 2.2 AA), and world-class design craft for any web or responsive UI work. Use this skill whenever the user asks to build, edit, style, refactor, or review ANY frontend component, page, layout, form, or markup — even casual requests like "make this look nicer", "add a button", "build a card", "fix this CSS", or "create a settings page". Trigger on any mention of HTML, CSS, JSX/TSX, Tailwind, components, styling, layouts, responsive design, accessibility, or visual polish. Do NOT skip this skill just because the request seems small — every UI change must pass through the design system rules.
Project Skill: Freshman Orientation Token Web App (Next.js 16 + Supabase)
by Demon720AA
Supabase: Always refer to supabase-schema.sql before modifying database interactions.
kenya-hara-white-design
by cha9ro
Create refined, contemplative UI/UX designs inspired by Kenya Hara's philosophy of "White" (白) and Emptiness (空). Use this skill when building interfaces that embrace Japanese aesthetics of ma (間), yohaku (余白), and receptive simplicity. Ideal for creating meditative web applications, minimalist dashboards, product showcases, portfolios, landing pages, or any interface seeking profound simplicity that invites user interpretation rather than imposing meaning.
figma-code-to-canvas
by mikeygonz
Set up Figma's Code to Canvas MCP integration for Claude Code. Pushes running UI from code into Figma as fully editable design layers. Use when user mentions "code to canvas", "push to figma", "figma MCP setup", "send to figma", or wants to turn code into Figma designs.
comics-maker
by guyaga
Create a complete multi-page comic book / graphic novel end-to-end — from a one-line concept to a print-ready PDF — starring a real person whose face stays consistent across every page. Plans the story (character sheet + page-by-page script), generates the art with Gemini 3 Pro Image (Nano Banana Pro) while feeding a reference photo to every panel for face consistency, letters it (caption boxes, speech bubbles, SFX) with sharp + SVG, and binds the pages into a comic-sized PDF with pdfkit. Use when the user wants to make a comic, graphic novel, comic book, manga, comic strip, "turn me into a comic hero", an issue/chapter of a comic, or a sequential-art story. Triggers on "make a comic", "comic book", "graphic novel", "comic strip", "turn this into a comic", "comic issue".
web-scrapper
by FrameMuse
Use when user asks to scrape websites, save pages as markdown, clone documentation, or archive web content. Covers sitemap-based batch scraping, incremental updates, CSS selector extraction, and HTML-to-markdown conversion.