Skills
97,222 packaged capabilities and playbooks for agents. Install any of them with one command.
Design & UI
Captures the rendered layout of a webpage as a spatial tree of elements, with positions, sizes, grid layouts, backgrounds, and overlay occlusion, via the web CLI. Returns indented text, a JSON tree, and a map from node IDs to CSS selectors. Use before page decomposition, overlay detection, or brand extraction, or when the user asks for a page's visual hierarchy or layout
Starting point for any new application built with the SGDS web component library. Apply this skill first whenever a user is bootstrapping a new SGDS project, setting up a new app, or asking where to begin with SGDS. Covers font setup, foundation CSS, utilities, components, and app layout in the correct order.
Writes and reviews SwiftUI WidgetKit code for Home Screen, Lock Screen, StandBy, and watch widgets — timeline providers and reload policies, StaticConfiguration / AppIntentConfiguration, user-configurable widgets, widget families and sizing, accented/tinted rendering modes, interactive widgets and Controls (Control Center), Live Activities and the Dynamic Island, Smart Stack relevance, push-updated widgets, and visionOS / CarPlay / macOS surfaces. Use when building a widget extension, a timeline provider, a Lock Screen or accessory widget, a watch complication, an interactive button/toggle widget, a Control Center control, a Live Activity, or fixing a widget that won't update or render correctly in tinted mode.
Image prompt templates, model selection guidance, and anti-generic patterns for generating visual assets. Use when the user needs AI-generated images for landing pages, marketing, or products. Covers hero images, feature illustrations, OG cards, icons, and backgrounds
Derive a project's design system from the UI it already ships and keep it true as the code moves, producing a spec-compliant DESIGN.md at the repo root, validated by the official linter. Use when the user says "write a DESIGN.md", "document our design system", "extract our design tokens", "our design system is out of date", "audit our design tokens", "what colors does this project actually use", "sync DESIGN.md to our Tailwind theme", or "/designkit".
Customising the visual theme of an SGDS application—product brand colours, day/night mode, font, border radius, and spacing density. Use when users ask about changing the primary colour, theming their app, enabling dark mode, night mode, overriding CSS tokens, customising the font, compact/spacious density, or border radius. Apply this skill whenever theming, branding, density, or CSS token overrides are mentioned
ALWAYS use this skill when building UI with @govtechsg/sgds-web-component or when a user mentions SGDS or Singapore Design System—even if they don't explicitly ask for help. This is the mandatory entry point for all SGDS development: it guides you to the right skill for setup, components, utilities, forms, theming, page layouts, block templates, and data visualisation. Read this before writing any SGDS application code.
Provides practical UI design patterns for hierarchy, spacing, typography, color, depth, imagery, UI copy, forms, navigation, tables, empty states, loading states, accessibility, and responsive behavior. Use when designing, reviewing, polishing, or refactoring web interfaces, layouts, components, dashboards, forms, or visual systems.
Designing interactive calculators (ROI calculators, pricing estimators, savings projections, mortgage calculators, custom assessments) that deliver real decision-support value while serving as lead magnets and qualified-traffic generators. Honest about vanity-calculator (no real value), lead-trap (hides the answer behind email), and transparent-decision-tool (gives the result and earns the email through tiered value) patterns. Triggers on calculator, ROI calculator, pricing estimator, savings calculator, custom calculator, interactive tool, decision tool, financial calculator. Also triggers when an audience needs a calculation-driven lead magnet, when a vanity calculator is producing leads but no qualified ones, or when a calculator is being scoped for the first time.
Create a complete, distinctive landing page for a product, event, marketing campaign, or brand using the city style library and optional interactive preview. Outputs HTML, CSS, JS, and SVG. Use when users request a visually expressive one-page website or explicitly ask to use citycraft. Not for ordinary dashboards, component fixes, static posters, or small maintenance tasks where brand design must not change; reuse existing product information and the user's chosen style when available.
Maps the full customer journey from first touch to advocacy. Generates a comprehensive customer-journey.md with all stages, touchpoints, emotions, pain points, opportunities, Mermaid diagrams, and metrics. Use when mapping customer experience, designing onboarding flows, identifying churn risks, or optimizing conversion funnels.
Generate visual diagrams in standard Draw.io (.drawio) format for deep learning models, network architectures, algorithm workflows, and more. Supports both creation from scratch and style transfer. From scratch: model architecture diagrams, flowcharts, receptive field illustrations, etc. Style transfer: reference image + content description/project → generate a new diagram in the reference image's style. Ensures the XML format is valid and can be opened and edited directly in Draw.io.
CSS, JavaScript, and HTML coding standards for Shopify Liquid themes. Covers BEM naming inside stylesheet tags, design tokens, CSS custom properties, Web Components for themes, defensive CSS, and progressive enhancement. Use when writing CSS/JS/HTML in .liquid files or theme asset files.
Complete reference for all SGDS utility classes with the sgds: prefix. Use when users ask about setup, background-color, text-color, border-color, border-width, border-radius, typography, spacing, grid, dimension, opacity, color-semantics, or any sgds: Tailwind utility class. Also covers Tailwind v4 imports, theme switching, and framework integration for utilities
Build production UI that reads as a deliberate choice for this project rather than an LLM default, audit shipped UI for the tells that give it away, or mock up a screen as an image before the build. Use when the user says "build this page", "make this UI not look AI-generated", "audit our UI", "make the frontend look good", "mock up this screen", "show me a few options for this screen", or "/uikit". Reads a project's DESIGN.md when one exists.
Audit and improve web accessibility following WCAG 2.1 guidelines. Use when asked to "improve accessibility", "a11y audit", "WCAG compliance", "screen reader support", "keyboard navigation", or "make accessible". Do NOT use for SEO (use seo), performance (use core-web-vitals), or comprehensive site audits covering multiple areas (use web-quality-audit).
Brad Frost's Atomic Design methodology for UI component hierarchies: atoms (indivisible elements), molecules (small groups of atoms), organisms (complex sections of molecules), and templates (page layouts). Enforces bottom-up composition (never skip levels), presentational components (data via props, events via callbacks, no data fetching), design tokens for all visual properties, and composition over inheritance. Use when building user interfaces, creating component libraries, organizing frontend code, designing form systems, or structuring any UI. Triggers on: “build a component,” “component hierarchy,” “design tokens,” “presentational components,” “composition over inheritance,” “React/Vue/SwiftUI components,” “atomic design.” Applies to any UI framework.
Automatic graph layout using dagre with React Flow (@xyflow/react). Use when implementing auto-layout, hierarchical layouts, tree structures, or arranging nodes programmatically. Triggers on dagre, auto-layout, automatic layout, getLayoutedElements, rankdir, hierarchical graph.
Provides comprehensive guidance for draw.io architecture diagrams including diagram creation, shapes, templates, and collaboration. Use when the user asks about draw.io architecture, needs to create architecture diagrams, design system diagrams, or collaborate on diagrams.
Meta-skill that generates new design language skills. Works on Claude Code and Codex. Use when the user says 'create a design skill', 'generate design language', 'new design system skill', 'design skill inspired by X', 'design skill from this screenshot', '/hue', or 'use hue'. Also triggers for 'remix my design skill' or 'make my skill more X'.
Reduces a webpage to a structural skeleton. The web CLI detects sections and replaces content with semantic tokens (text, headings, images, CTAs, links, inputs), then the agent collapses repeated patterns and decorative wrappers and writes skeleton.html and manifest.json. Use when migrating a page to AEM Edge Delivery Services, extracting a page blueprint, or analyzing page structure for block generation.
Use the standalone qiaomu-bento-ppt skill to create or edit self-contained qiaomu-style bento presentations as .bento.html files from briefs, notes, reports, URLs, data, or existing bento decks. Use this skill when the user explicitly asks for bento/slides, a .bento.html deck, an offline-editable single-file HTML presentation, or invokes qiaomu-bento-ppt. It uses a proposal-first presentation workflow, includes a pinned official bento shell and authoring references, builds through the plaintext #bento-doc contract without requiring the original bento repository, and validates structure, identity, shell integrity, visual heuristics, and rollback boundaries. Do not use for conventional .pptx delivery, generic bento source development, or bento/spaces and bento/dash work.
Review an existing deck for storytelling quality, visual hierarchy, and content effectiveness. Identifies weak action titles, MECE violations, isomorphism mismatches, and density issues. Use when the user asks to review or critique a deck, assess its narrative flow, improve slide titles, or give feedback on content quality rather than technical formatting.
Design, build, refactor, or review terminal interfaces—full-screen TUIs, interactive prompts, and command-line tools. Use for terminal-app layout and UX, CLI behavior, ncurses-style tools, dashboards, REPLs, fzf-like pickers, and libraries such as Bubble Tea, Ratatui, Textual, or Ink, including requests that name a known TUI such as lazygit, k9s, btop, helix, or yazi instead of saying “TUI.” Do not use for browser or web UI, native GUI, editor or font configuration, or backend and shell work that has no terminal interface
Wrap any HTML artifact with a side panel of live, parameterized controls — accent color, type scale, density, motion, theme — that rewrite CSS custom properties in real time and persist to localStorage. Lets the user explore variants of a design without re-prompting the agent. Use when the brief asks for "variants", "side-by-side options", "tweak this", "let me adjust", "live knobs", or "实时调参".
Use when building widgets that extend Wix dashboard pages for first-party business apps. Triggers include dashboard plugin, dashboard slot, extend dashboard page, Wix Stores plugin, Wix Bookings plugin, Wix Blog plugin, observeState, dashboard widget. Do NOT use for standalone dashboard pages (use wix-cli-dashboard-page) or site-facing UI (use site widgets/site plugins).
Stops web UI from looking AI-generated. Use when building, restyling, or reviewing a website, landing page, hero, marketing or help/docs page, or a frontend component (HTML, CSS, Tailwind, React, Vue, Svelte, Astro), and whenever the user says the design looks generic, templated, "AI slop", "like every other SaaS", bland, or asks to make it look designed by a person. Covers an anti-pattern catalog with a lint script, craft rules for type, spacing, color and copy, a per-project DESIGN.md, design dials, viewport QA, and an internal pre-done gate (never dump as a user checklist). Early / unfinished: open every run with the CAPS LOCK WIP warning in the user's language (stable release announced on the site and Twitter).
Designing side-by-side comparison tools (plan-compare, product-compare, alternative-compare) that help users decide rather than just listing features. Axis selection, default-comparison logic, recommendation discipline. Honest about feature-list-dump (every feature in a row, no decision support), hidden-recommendation (biased comparison pretending to be neutral), and honest-comparison-with-guidance (genuine comparison plus opinionated recommendation) patterns. Triggers on comparison tool, plan compare, product compare, alternative compare, vs page, decision support tool. Also triggers when conversion through comparison stages is poor, when users are abandoning at the comparison step, or when a comparison tool is being scoped for the first time.
New to MCP?
From what the protocol is to installing your first server, these answers cover most first questions.
An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.