> For the complete documentation index, see [llms.txt](https://docs.maker.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.maker.co/features/skills.md). # Skills
*** ### K**ey Benefits** * **Get more out of Maker without extra effort.** Skills unlock capabilities you might not even know exist, like full performance audits, accessibility checks, and animation workflows, all without needing to know the right prompt. * **Consistency across your projects.** Instead of explaining the same instructions every time, Skills make sure Maker follows the same approach every session. * **Tailored to how you work.** Maker learns from your chat history and surfaces custom Skills based on your actual workflows, so the tool gets smarter the more you use it. * **Turn any workflow into a repeatable process.** Whether it's a bug fix, a design pattern, or a QA checklist, you can save it as a Skill and come back to it whenever you need it. *** ### **Steps** In the editor, click the **+** button at the bottom of the chat, then select **Skills**. You'll see a searchable list of all available Skills. Tap the **+** icon next to any Skill to add it to your current chat.
#### **Built-in Skills** These are ready to use out of the box. Some examples of what's available: * **Performance / Core Web Vitals** - Audit your site for speed and page experience metrics like LCP, INP, and CLS * **Accessibility** - Check your pages against WCAG 2.1 guidelines * **Animate** - Analyzes a feature and strategically adds animations and micro-interactions that enhance understanding, provide feedback, and create delight. * **Copywriting** - Writes, rewrites, or improves marketing copy for any page type including homepage, landing pages, pricing pages, feature pages, about pages, and product pages. * **Frontend design** - Creates distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code and UI design that avoids generic AI aesthetics. Loaded proactively for any web build. * **Bolder** - Increases visual impact and personality in designs that are too safe, generic, or visually underwhelming, creating more engaging and memorable experiences. * **Quieter** - Reduces visual intensity in designs that are too bold, aggressive, or overstimulating, creating a more refined and approachable aesthetic without losing effectiveness. * **Delight** - Identifies opportunities to add moments of joy, personality, and unexpected polish that transform functional interfaces into delightful experiences. * **Polish** - Performs a meticulous final pass to catch all the small details that separate good work from great work. * **Audit** - Shared delivery conventions for any audit-style skill. Produces a structured markdown report plus anchored comments on flagged preview elements. Used by other audit skills as a foundation. * **Web quality audit** - Comprehensive web quality audit covering performance, accessibility, SEO, and best practices. Equivalent to a Lighthouse-style review. * **Security audit** - Pre-publish security review tailored to Maker's client-side surface. Checks for DOM XSS, secrets baked into source, unsafe redirects, unsafe third-party scripts, postMessage handling, client-side storage of sensitive data, unsafe form actions, and external-link hygiene. * **Web design guidelines** - Reviews UI code for compliance with Web Interface Guidelines covering accessibility, UX patterns, and design best practices. * **Conversion rate optimization** - Produces a prioritized CRO audit covering value proposition, headlines, CTAs, visual hierarchy, trust signals, objection handling, friction points, persuasion psychology, and A/B test hypotheses. Analysis only; does not edit code unless asked. * **Ad congruence** - Scores how well a landing page keeps the promise its ad creatives make. Produces a congruence score (0 to 100) across product/visual match, message and offer match, category scent, offer integrity, and CTA continuity. Pulls top spenders from connected Meta or Google Ads accounts. * **Ad aware landing page** - Builds a landing page with zero message mismatch from the ad that drove the click. Fetches ad data live from connected analytics, scrapes brand styles from the advertiser's website, and asks clarifying questions before building. * **Performance** - Optimizes web performance for faster loading and better user experience, including load time reduction and page speed improvements. * **Core web vitals** - Optimizes Core Web Vitals (LCP, INP, CLS) specifically for better page experience and search ranking. * **Optimize** - Identifies and fixes performance issues to create faster, smoother user experiences. * **Best practices** - Applies modern web development best practices for security, compatibility, and code quality. * **Accessibility** - Audits and improves web accessibility following WCAG 2.1 guidelines, including screen reader support and keyboard navigation. * **SEO** - Optimizes for search engine visibility and ranking, including meta tags, structured data, and sitemap optimization. * **Clarify** - Identifies and improves unclear, confusing, or poorly written interface text to make the product easier to understand and use. * **Video embed** - Embeds HTML5 video correctly when a user provides an mp4, webm, or m3u8 URL. Picks sensible defaults for preload, poster, autoplay, controls, muted, playsinline, loop, and lazy-loading based on placement. Handles HLS streams via native Safari plus hls.js fallback. Supports branded player theming via Media Chrome. * **Language variants** - Creates per-language variants that translate all page content and activate via the ?hl= query parameter. Asks which languages to support, translates all visible text, and stores translations as variant features. * **Location variants** - Creates per-city variants so different content is shown to visitors based on their detected city. Writes a named variant for each city with matching routing rules. * **Embed** - Post-publish guide for installing Maker projects on external sites. Covers permalink, custom domain, single-project embed, and Enhance for multi-project routing. Includes platform-specific steps for Shopify, Wix, Webflow, WooCommerce, Squarespace, BigCommerce, Magento, and HubSpot. Explains the four install variants and guides A/B testing and per-segment variant setup. * **Shopify storefront** - Displays Shopify products, prices, collections, and shopping cart in a project via the Storefront API using the @shopify/storefront-api-client SDK. Injects credentials automatically and guides users through connecting their store if not yet configured.\ \&#xNAN;*Please note that the Shopify Storefront Skill is only available on the Maker Enterprise plan.* * **Claude design import** - Converts a Claude Design (claude.ai/design) HTML export into a React component wired through main.tsx. Also triggers when a project contains static HTML that needs to become a React app. * **Planning** - Structured planning skill that asks clarifying questions about goals, audience, and preferences, then produces a detailed plan with component architecture, file paths, and phased implementation steps. Used proactively when scoping work before coding.
There are many more to explore. If you're not sure what Maker can do, browsing the Skills list is a great place to start. #### **Custom Skills (auto-generated)** Maker continuously reviews your chat history and looks for patterns or workflows that could be turned into a reusable Skill, just for you. When it finds something, that custom Skill will show up automatically in your Skills list. No action needed on your end. #### **Save something as a Skill** If Maker just helped you with something you know you'll want to repeat (a specific workflow, a set of instructions you gave it, or a tricky bug fix you want to remember), type **"save this as a skill"** in the chat. Maker will package it up so it's available for next time. #### **Create a custom Skill manually** You can also build your own Skill from scratch: 1. Go to Settings > Memory & Skills 2. Give your Skill a name 3. Select "Skill" under Type and the description of the Skill 4. Add instructions for what Maker should do when this Skill is used This is great for standardizing how your team handles recurring tasks or for documenting specific approaches you want Maker to follow every time. #### **Good to know** * You can add multiple Skills to a single chat if needed. * Custom Skills (both auto-generated and manually created) are private to your account. * Skill descriptions on the cards are previews only. The full instructions are written for Maker to read and apply, so you don't need to see the complete text to get the benefit. *** Also updating the What's New blurb with the same change: *** **Skills are now front and center** You've always had access to powerful Skills like performance audits, web vitals checks, animations, and more, but until now, Maker chose when to use them behind the scenes. Now you can browse and apply Skills yourself, right from the editor. A few highlights: * Browse all available Skills and add them to any chat * Maker will also review your chat history and surface custom Skills tailored to your workflows * Ask Maker to "save this as a skill" anytime you want to turn a workflow or fix into something repeatable * Or create your own custom Skills manually in Settings > Memory & Skills *** FAQ
Why are the Skill descriptions on the cards cut off? That's by design. The descriptions you see on the cards are just a quick preview so you know what the Skill is about. The full instructions inside each Skill are written for Makerto read and follow, not for users. When you add a Skill to your chat, Maker gets all the details it needs to do the job right.

--- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.maker.co/features/skills.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.