Notes on makingskills that work.
What breaks, what it costs, and how to tell the difference. Written from the failures, because those are the part nobody publishes.
DesignDark mode design tokens that do not fall apartDark mode breaks when colours are named by what they look like. How to name tokens by job, build the surface ramp, and flip themes without touching components.DesignGlassmorphism that looks expensive, not like a 2021 Dribbble shotFrosted glass looks cheap when everything is glass. Where it belongs, the blur and border values that read as premium, and the CSS to make it fast on phones.DesignFintech dashboard design: numbers first, decoration lastA finance dashboard is judged on whether its numbers can be trusted. How to lay out KPIs, tables and colour so figures read fast and never look made up.DesignHow to design a leaderboard people actually readA leaderboard is a table with a story. How to design rows, rank marks, bars against the leader and timestamps so the ranking reads in seconds on any screen.DesignSerif fonts on a product website: when they work and how to set themA serif headline can make a product site look credible instead of techy. Which serifs work on screens, where to use them, and the settings that keep them crisp.DesignMaking a Tauri or Electron app look native on macOSApps built with web tech give themselves away in a second. The titlebar, sizes, cursors and colours that make an Electron or Tauri app feel native on a Mac.DesignTabular numbers in CSS: the one line that fixes jumpy figuresProportional digits make prices wobble and columns misalign. What font-variant-numeric: tabular-nums does, where it belongs, and what to use without it.DesignThe one accent colour rule, and why it makes buttons get clickedWhen the accent colour is everywhere, the main button gets lost. The rule of one accent per screen, how to apply it, and what does the other jobs instead.DesignCSS variables or a Tailwind theme for design tokens?Should design tokens live in CSS custom properties or a Tailwind theme? What each is good at, how Tailwind v4 blurs the line, and a setup that uses both.DesignAlternating dark and light sections without breaking the pageSwitching a landing page between dark and light sections adds rhythm, and breaks headings, links and buttons that assumed one ground. How to make the flip safe.DesignContrast in a dark UI: what to measure and what to fixDark interfaces fail contrast where a quick check misses: muted text, borders, focus rings and text on glass. The ratios that apply and how to fix each one.DesignA landing page hero that shows the productThe strongest hero sections show the real product, not an illustration. How to frame a screenshot, what the headline should say, and what to cut from it.DesignWhy AI tools love purple gradients, and how to stop yoursAsk an AI tool for a landing page and a purple gradient appears. Why that default happens, why it hurts your product, and how to replace it with an identity.DesignFont pairing for product sites: three roles, not two fontsFont pairing on a product site is about roles: a display voice, a text face that works hard, and figures that line up. How to choose each, with pairs that work.Designprefers-reduced-motion: what to turn off and what to keepReduced motion does not mean no motion. Which animations to remove, which to keep, and a CSS and JavaScript pattern that respects the setting site-wide.DesignEmpty states: the screen every app shows firstThe first screen a new user sees is usually empty. How to design empty states that explain, point to the one next step, and do not look like something broke.DesignPricing card design that makes the decision easyPricing cards fail when they make buyers do arithmetic. How to lay out the price, what is included, one button and the fine print so a buyer decides fast.DesignDesigning at 375px first: a checklist for mobile layouts375px is still the width where layouts break first. Why to design and test there, and a checklist for headlines, tap targets, tables and the navigation menu.DesignComponent recipes vs a component libraryA component library ships code; a recipe ships the decision. Why recipes suit design systems AI tools build from, and how to write one for a button or card.DesignHow to restyle an existing app with Claude CodeRestyling an app one prompt per screen leaves it half old, half new. A method that changes tokens, then components, then screens, with a check at each step.SEOProduct structured data for a digital productHow to mark up a digital download or software product with schema.org Product and Offer, which fields matter, what to ignore, and how to keep the price in sync.SEOFAQ schema: why it must match the page, and what it still doesGoogle limited FAQ rich results in 2023, but FAQPage markup still describes your page. Why it must match the visible text, and how to keep the two in sync.SEOInternal linking for a blog: a system, not an afterthoughtInternal links tell search engines what matters and keep readers on your site. A simple system for linking each new post into older ones, without stuffing.SEOMeta description length: what the limit really isThere is no official meta description limit; Google cuts snippets by width. The length to aim for, why Google rewrites them, and how to write one that holds.SEOSEO for a Qwik City site: head tags, prerender and sitemapsHow to set titles, canonicals, Open Graph and JSON-LD in Qwik City, prerender every route with the static adapter, and add a sitemap. From a live Qwik site.SEOHow to get your site cited by ChatGPT, Claude and PerplexityAI assistants cite pages they can fetch, parse and quote. What decides whether your site is one of them: crawler access, clear answers, structure, plain HTML.SellingMerchant of record: what it is and when a small seller needs oneA merchant of record is the legal seller of your product: sales tax, VAT, refunds and chargebacks are theirs. How it differs from a processor, and who needs it.SellingExpiring download links: why they exist and how to stop them costing salesShort-lived download links protect files but confuse buyers who open the email a day later. Why they exist, and the copy and backup that stop support tickets.SellingPayment links: selling from a static site with no backendA payment link lets a static site sell with a plain anchor tag: no server, no secret keys. How it works, where its limits are, and how to handle the return.SellingWriting a refund policy for digital productsA digital product cannot be handed back, so the refund policy does more work. What to include, what to leave out, and how to keep it short and fair to buyers.SellingA static site with one API route on Cloudflare WorkersHow to serve a prerendered site from Workers static assets and run code for one API route only, with run_worker_first. The setup behind this store's downloads.DesignEvery app icon size you need, for iOS, Android, macOS and the webThe app icon sizes iOS, Android, Google Play, macOS, favicons and PWAs ask for, in one table: what each is for, and how to generate them from a 1024px master.DesignAndroid adaptive icons: layers, safe zones and themed iconsAndroid crops your launcher icon to a circle, squircle or square. How adaptive icon layers work, the 108dp canvas and 66dp safe zone, and the monochrome layer.DesignFavicon sizes in 2026: the small set that covers everythingYou do not need twenty favicon files. The few that cover browsers, iOS, Android and Google results, the exact head tags, and how to make a dark mode favicon.DesignPWA maskable icons: the safe zone and the manifest entryAn installed web app gets its icon cropped by the launcher. What a maskable icon is, the 80 per cent safe zone, the manifest purpose field, and how to test it.DesigniOS app icons: no transparency, no rounded cornersThe App Store rejects icons with an alpha channel, and iOS rounds corners itself. How to export a correct iOS icon, strip the alpha, and avoid double corners.DesignThe macOS app icon shape, size and shadowmacOS icons carry their own rounded shape and shadow in a 1024px canvas. The template sizes, how to build an .icns with iconutil, and what differs from iOS.DesignDesigning an app icon that still reads at 29 pixelsApp icons are judged at home screen and notification sizes, not at 1024px. How to test an icon small, what detail to cut, and the shapes that survive the crowd.DesignApp icon styles compared: glossy, flat, neon, sticker, pixel and moreSeven app icon styles in common use, what each says about a product, where each works, and how each holds up at the small sizes where icons are really seen.DesignMascot app icons: why faces work and how to design oneA small character with a face is one of the most memorable things an app icon can carry. Why mascots work at small sizes, how to design one, and what to avoid.DesignGoogle Play icon requirements: 512px, full square, no shadowThe Play Store icon has its own rules, apart from your launcher icon: a 512px PNG, full square, under 1MB, no rounded corners or shadow. What each rule means.DesignThe apple-touch-icon: size, tag and common mistakesWhen someone adds your site to an iPhone home screen, iOS uses the apple-touch-icon. The 180px size, the one tag you need, and why transparency turns black.DesignMaking an app icon with AI: what works and what to checkAI can draft app icons in minutes; most drafts fail at small sizes or cannot be edited. How to get an original, editable icon from AI, and what to check first.DesignExporting an SVG icon to PNG at every sizeIcons are best drawn as SVG and shipped as PNG. Four reliable ways to convert, from sharp and rsvg-convert to headless Chrome, and settings for crisp edges.DesignHow to write an app icon brief in one lineA good app icon brief fits in one sentence: the name, what the app does, who it is for, a mood and a colour. How each part shapes the design, with examples.DesignApp icons for Electron and Tauri: .icns, .ico and PNGDesktop apps need an icon file per platform: .icns for macOS, .ico for Windows, PNG for Linux. Where Electron and Tauri expect them, and how to make the set.AnalyticsHow to add Google Analytics 4 to a Next.js siteThe shortest correct way to add GA4 to Next.js, with the official third-parties component or next/script, how route changes count, and how to check it works.AnalyticsGA4 data retention: change it to 14 months on day oneGA4 keeps detailed event data for two months by default. What retention affects, why to raise it to 14 months when you create a property, and where to set it.AnalyticsHow to link Search Console to Google Analytics 4Linking Search Console to GA4 puts search queries and organic landing pages in Analytics. The permissions you need, the steps, and the report to publish after.SEOSearch Console: domain property or URL prefix?Search Console has two property types. What a domain property covers, when a URL prefix is easier, how each is verified, and which to choose for a new site.SEOHow to submit a sitemap to Google Search ConsoleA sitemap tells Google every URL you want crawled. The steps in Search Console, what the statuses mean, the robots.txt line, and what to do on couldn't fetch.AnalyticsGA4 not collecting data: a checklist that finds the causeGA4 shows nothing, or says data collection is not active. A checklist from the quickest check to the rarest cause: tag, ID, consent, blockers, CSP and delays.AnalyticsGoogle consent mode v2, set up correctlyConsent mode v2 adds two signals to Google tags and matters for visitors in the EEA and UK. The four parameters, the default and update calls, and two modes.AnalyticsWhere to find your GA4 measurement ID, and what it is notThe G- measurement ID identifies a GA4 web stream. Where to find it, how it differs from the property ID and the Measurement Protocol secret, and who sees it.AnalyticsGA4 page views on a single page appReact, Vue and other single page apps change URLs without page loads. How GA4 counts those views, the enhanced measurement setting, and how to avoid doubling.SEORequest indexing in Search Console: when it helps and when it does notRequest indexing asks Google to crawl one URL soon. How to use it with URL Inspection, why it has a daily limit, and what to do when a page is still not in.SEOCrawled, currently not indexed: what it means and what fixes itGoogle visited the page and chose not to index it. What this Search Console status means, how it differs from discovered, and the changes that get pages in.AnalyticsExclude your own visits from GA4Your own visits skew a small site's analytics more than anything. How to define internal traffic by IP in GA4, activate the filter, and handle a changing IP.AnalyticsGA4 DebugView: see your events arrive, one by oneDebugView shows events from your browser as they arrive, with every parameter. Three ways to turn on debug mode, what to check, and the trap in switching off.AnalyticsSetting up Google Analytics and Search Console with Claude CodeClaude Code can write the tag, and with Claude in Chrome it can click through Google's consoles too. What that looks like, what stays yours, and what to check.SEOHow often should you blog for SEO?Publishing frequency matters less than most advice says, and consistency matters more. A realistic cadence for a small site, and why one good post a week wins.SEOKeyword research for a new website, without paid toolsA new site cannot win broad searches yet. How to find the long, specific searches your buyers type, check what ranks, and turn them into a first plan of posts.SEOKeyword cannibalization: when your own posts competeTwo pages aimed at one search split your signals and confuse Google. How to spot keyword cannibalization in Search Console, and fix it by merging or re-aiming.SEOTopic clusters for a small site: plan posts in groupsGroups of linked posts on one subject show Google what your site covers in depth. How to plan a topic cluster, link it, and choose which cluster to write first.SEOWriting SEO blog posts with Claude that do not read like AIClaude can draft a good blog post, or a generic one. How to give it a search, a brief and your first-hand detail, and the checks that remove the AI tells.SEOHow long should a blog post be for SEO?Google has said word count is not a ranking factor. How to decide a post's length from the search instead, and the signs a post is too short or padded.SEOTitle tag length: how long a page title should beGoogle shows page titles cut to a pixel width, not a character count. The length that usually fits, why Google rewrites titles, and how to write one that holds.SEOAdding a blog to a Next.js site, with the SEO parts includedA blog in Next.js is a few routes. The SEO parts are what get forgotten: metadata, canonicals, JSON-LD, a sitemap and RSS. A checklist to build it once, right.SEOA blog for a small business: what to write and why it worksA small business blog works when it answers what customers ask before buying. What to write, how often, and how to turn readers into customers without pushing.SEOllms.txt for an online shop: what to put in itAn llms.txt gives AI assistants a plain map of your shop. What a store's file should list, from products and policies to guides, and how to keep it current.SEOReadability and SEO: short sentences, answers firstReadability is not a direct ranking factor, but readers leave pages they cannot follow. What makes web writing readable, how to measure it, and fixes that help.SEOUpdating old blog posts for SEO: which ones and howRefreshing a post that nearly ranks is often worth more than a new one. How to find those posts in Search Console, what to change, and what to leave alone.SellingA blog that sells: putting the product beside every postMost blogs send readers away with nothing to click. How to show the product each post leads to, where to place it, and how to sell without turning posts to ads.SEOAI-generated content and Google: what the rules actually sayGoogle does not ban AI-written content, but it penalises content made to game rankings. What its guidance says, what scaled content abuse is, and what is safe.SEOHow long does it take to rank on Google?Indexing can take days; ranking on a new site usually takes months. What happens in between, what speeds it up, and why nobody honest can promise you a date.SEOAdding an RSS feed to your blog, and why it still mattersRSS is old and still useful: feed readers, newsletters and many tools read it. What a valid feed holds, the tag that makes it findable, and common mistakes.ContextShow the git branch in your Claude Code status lineKnowing which branch a session is on prevents commits to the wrong one. How to read the folder from the status line JSON, get the branch fast, and stay quick.ContextClaude Code status line themes: colour that means somethingA themed status line is more than decoration if colour carries meaning. How to pick thresholds, colours and labels that read at a glance, with examples to use.ContextWhen to use /compact in Claude Code, and when to start freshCompacting frees context by summarising the conversation, and loses detail. When /compact is right, how to steer what it keeps, and when /clear is better.ContextHit your Claude Code weekly limit? What to do nextThe weekly limit stops work until it resets, which can be days away. How to find the exact reset, your options in the meantime, and how to avoid the surprise.ContextClaude Code with a 1M token context window: when it helpsSome models run Claude Code with a million-token context. What that changes, when it is worth using, the costs to know about, and why a percentage means more.ContextClaude Code status line not showing? Seven causesAn empty or broken Claude Code status line is almost always one of seven things. How to test the script by hand, and fix settings, paths, jq, width and speed.ContextDoes your terminal support 24-bit colour? How to checkTruecolor makes terminal tools look as designed; without it, colours snap to the nearest of 256. One command to check, which terminals have it, the tmux fix.ContextNerd Fonts in the terminal: what they are and how to install oneNerd Fonts add icons and rounded separators to programming fonts. What they include, how to install one on macOS or Linux, and how to set it in your terminal.ContextRunning several Claude Code sessions at onceParallel Claude Code sessions speed things up until two edit one file or you lose track of which is which. Worktrees, naming, and the limits all sessions share.DesignAn aurora background in CSS that stays fastSoft, drifting colour behind a dark interface, built from a few radial gradients. The CSS, how to animate it cheaply, and how to keep it quiet under text.DesignA grain texture in CSS, with no image fileA faint film grain makes flat gradients look printed, not rendered, and hides banding. How to make it with an inline SVG filter, and how strong it should be.DesignGradient borders in CSS, including on glass cardsCSS borders cannot take a gradient with rounded corners directly. Two techniques that work, when to use each, and the mask trick for translucent glass cards.DesignA custom titlebar in Tauri that keeps the Mac traffic lightsAn overlay titlebar lets a Tauri app's content reach the top of the window and keep the native traffic light buttons. The config, drag region and spacing.DesignThe SF Pro font stack in CSS, and why not to self-host itOn Apple devices the system font stack renders San Francisco with no download. The CSS line, the ui- keywords for rounded and mono, and why not to bundle SF.DesignA macOS-style sidebar layout in CSSThe source list sidebar is the backbone of most Mac apps. Its width, row height, selection and section headers in CSS, and translucency in Electron and Tauri.DesignA segmented control in CSS, with the sliding highlightA segmented control switches between a few views. How to build one on radio inputs so the keyboard works, with a sliding highlight and the sizes Mac apps use.DesignAn Apple-style landing page, without copying AppleWhat makes a product page read as Apple-like: space, one product image, a short headline and plain specs. How to borrow the principles for your own app's site.DesignEditorial web design: making a site read like a publicationAn editorial look makes a site read as reporting rather than marketing. The pieces that create it, from serif headlines and bylines to timestamps and captions.DesignFormatting money in a UI: currency, decimals and big numbersMoney on screen goes wrong in small ways: floats, missing currency, inconsistent decimals, unreadable large numbers. How to format it with Intl.NumberFormat.DesignText over a photo hero: scrims, contrast and desaturationA photograph behind a headline looks great until the text fails contrast. How to use a scrim, desaturation and placement so text on a photo hero stays readable.DesignA wavy section divider in CSS that scales without a seamWave dividers soften the join between sections. How to generate the wave from a formula as SVG, keep it crisp at every width, and colour it from your tokens.DesignSetting a heavy poster headline font on the webA one-weight poster face makes a headline memorable, and fails in ways that look like bugs: faux bold, fused letters, clipped descenders. How to fix each one.SellingDesigning the buy box on a digital product pageThe buy box is where a visitor decides. What it needs for a digital product: price, what you get, requirements, refund terms and one button, in the right order.DesignOKLCH colour tokens: why we moved our palette to OKLCHOKLCH makes colour ramps predictable: equal steps in lightness look equal. How OKLCH works in CSS, building a ramp with it, and the gamut limit to keep in mind.ContextHow the Claude Code status line works, and how to set one upWhat the Claude Code status line is, the JSON it receives, when it refreshes and why tput cols lies to it. A working setup in settings.json, start to finish.ContextWhen does my Claude Code usage limit reset?Claude Code has a rolling 5-hour limit and a weekly one on Pro and Max. Where to see exactly when each resets, and how to keep that time on screen as you work.ContextHow to see how full your Claude Code context is while you workClaude Code warns when context is nearly full. How to see the percentage the whole time instead, what the number counts, and what to do as it climbs past half.SEOThe trailing slash that kept our pages out of GoogleOur canonicals said /skills/x, the server answered at /skills/x/, and Google indexed neither. How to spot the mismatch and the one function that fixes it.SEOrobots.txt for AI crawlers: invite them by name, and mind the wildcard trapGPTBot, ClaudeBot, PerplexityBot and Google-Extended each read their own group. How to allow them, and the rule that silently opens pages the wildcard closed.SEOWhat llms.txt is, what it is not, and how to write onellms.txt is a markdown summary of your site for language models to read in one go. What belongs in it, what to leave out, and why ours has no prices in it.SEOIndexNow: tell Bing a page changed instead of waiting for a crawlIndexNow pushes changed URLs to Bing and other engines in one request. How the key file works, what Google does instead, and a script to run after deploy.AnalyticsHow to see which visitors came from ChatGPT, Claude or PerplexityAssistant traffic often arrives with no referrer at all. How to detect the visits you can identify, and how to report the rest honestly instead of guessing.AnalyticsMixpanel HTTP API: the CORS error that looks like an outagePosting JSON to Mixpanel's /track endpoint from a browser fails with a CORS error beside a healthy 200. The fix is one content type, plus two properties.SellingSelling digital downloads from a static site, with no backend of your ownA static site, a merchant of record and a payment link make a complete shop for a digital product. What each part does, and three places it still goes wrong.SellingLicence-key gated downloads: one route, no database, no secretPaste a licence key, get the file. How we built on-site downloads with one edge function, a public key check and files no URL reaches without a key.ShippingHow to install a Claude Code skill, for you or for your whole teamA skill is a folder. Where to put it so it works in every project, where to put it so the whole team gets it, and how to check Claude has actually picked it up.TriggersHow to write a Claude skill description that gets it usedThe description is the only part of a skill Claude reads before choosing to use it. A structure that works, the length limit, and a before and after to copy.SEOGoogle Search Console for a brand-new site: what to do on day oneVerify by DNS, submit one sitemap, inspect a few pages, then wait. What each report means in the first week, and the one early error worth fixing at once.SEOA sitemap for a static site: generated, honest and shortGenerate the sitemap from the same data as the pages, list only URLs that return 200 and should be indexed, and leave out every page that says noindex.AnalyticsAn event plan for a landing page: seven events, not seventyMost landing pages need seven events. Which ones, what each carries, and the delegated click listener that tracks them without touching every component.AnalyticsKeep licence keys and emails out of your analyticsPayment providers put the buyer's email and licence key in the return URL, and analytics records full URLs by default. Where it leaks, and the fix.SellingTest-mode checkout pitfalls: how a shop takes no money without an errorA test-mode checkout takes only test cards, so a live page linked to it fails real buyers silently. How it happens, and a build guard that makes it impossible.ShippingSharing Claude Code skills with a team through the repositoryCommit skills to .claude/skills/ and everyone who clones the repo gets them. How to lay that out, review skill changes and stop two skills fighting.TriggersBuild a trigger test set for a Claude skill in twenty minutesTwenty prompts, half that should use the skill and half that should not, tell you whether a description works. How to write them so the test means something.TriggersWhen a Claude skill fires too often, and how to narrow itA skill that jumps in on every loosely related request has a description that is too broad. How to spot it and narrow it without losing real matches.ContextThe references folder: keep a skill small until it needs to be bigSKILL.md is read whenever a skill is active; files in references/ only when needed. How to split a skill that way so most turns cost little context.ShippingClaude Code skill folder structure: what goes whereA skill is a folder: SKILL.md at the top, references for long material, optional scripts, a README for people. The layout, the frontmatter and naming rules.TriggersWhen two Claude skills want the same promptTwo skills with overlapping descriptions make it hard to predict which one runs. How to find the overlap and give each a job the other does not claim.TriggersNaming a Claude skill: what the name does and what it does notA skill's name identifies it and lets you ask for it directly; the description decides when it is picked. How to choose a name that helps and never hurts.TriggersMatch the words people actually type, not the words you would writePeople ask for outcomes in loose, lowercase, half-finished sentences. How to collect the phrasings your users really use and fold them into a skill description.TriggersAdding 'when not to use' to a skill description, sparinglyA short line saying when a skill does not apply can stop a stubborn near-miss. Used everywhere it bloats the description and blurs the job. When one line helps.TriggersDo Claude skills trigger when you prompt in another language?If your team writes prompts in Hindi, Spanish or a mix, test whether an English description still matches them. What to check, and what to add when it does not.TriggersHow to measure a skill's trigger accuracy, before and afterTrigger accuracy is two numbers from one prompt set: how often it fires when it should, and how rarely when it should not. How to measure and report both.ContextHow long should SKILL.md be?SKILL.md is loaded whenever the skill is in use, so every line costs context. A practical length, what to keep in it, and what to move to references.ContextWhen to split a large skill into two, and when not toA skill that does two jobs triggers vaguely and loads rules for both on every use. How to tell when a skill has become two, and how to split it without overlap.ContextScripts or instructions: what a skill should do in codeSome steps work better as a script Claude runs than as prose it interprets. Which ones, how to call them from SKILL.md, and what scripts cost elsewhere.ContextWhat happens when you install too many Claude skillsEvery installed skill's name and description is visible to Claude up front. With dozens installed, overlaps multiply. How to keep your set of skills lean.TestingA Docker harness for testing Claude skills from scratchA throwaway container with a fresh Claude Code install is the cheapest clean machine there is. A minimal Dockerfile, what to mount, and what to look for.TestingTesting Claude skills in CI on every changeStructural checks are free and belong on every commit; trigger runs cost tokens and suit a nightly job. How to split skill testing across CI sensibly.TestingClaude updated and my skill changed: regression testing skillsA skill that worked last month can behave differently after Claude or the model updates. How to notice early, confirm the cause, and fix the rules.TestingGolden outputs for a skill whose output is never identical twiceModel output varies run to run, so exact-match snapshots fail. Check what must hold instead: structure, required elements, banned patterns, token use.TestingTesting the scripts inside a skillA skill's scripts run on the buyer's machine with whatever is installed there. Unit-test them, keep dependencies minimal, and fail loudly when one is missing.TestingMaking a Claude skill work on Windows, macOS and LinuxInstructions travel well; scripts and paths do not. The usual cross-platform breakages in skills, and how to write steps that work whichever OS the buyer is on.TestingWriting prompts that should not fire your skillThe half of a trigger test people skip: near-miss prompts that must leave the skill alone. How to write them so they actually catch over-triggering.TestingA rubric for judging what a skill producedSome qualities cannot be checked by a script: does the screen look designed, is the copy specific. A five-line rubric makes that judgement repeatable.TestingWhy the same skill gives different results, and what to doRun the same prompt twice and a skill may fire once and not the next time, or follow a rule differently. Where the variation comes from and how to reduce it.TestingA preflight script: fail once, with every missing thing listedA skill that fails on one missing tool, then the next, then the next, wastes an afternoon. A preflight check lists every missing requirement at once.ContextWhen CLAUDE.md gets too long, and what to move out of itCLAUDE.md is read at the start of every session, so everything in it costs context every time. What belongs there, and where the rest should live instead.ContextLoading documentation on demand instead of up frontPasting whole docs into context works once and costs every turn after. How to let Claude open the right document only when a task needs it.ContextWhat MCP tools cost you in context before you call themEach connected MCP server adds its tool names, descriptions and schemas to context. How that adds up, and how to keep only the servers a project needs.ContextExamples in a skill: fewer, shorter and realOne tight, real example teaches Claude more than five long invented ones. How many examples a skill needs, how long each should be, and where they belong.Contextreferences/ or assets/: where a skill's extra files belongSome files in a skill are for Claude to read; others are for Claude to copy into the user's project. Keeping the two apart makes a skill clearer and cheaper.ShippingVersioning a Claude skill so people know what changedA skill changes behaviour for everyone who uses it, so changes need a version and a note. A simple scheme, where to record it, and when a change is breaking.ShippingPackaging a Claude skill as a ZIP that installs cleanlyA skill ZIP should unzip to exactly one folder with SKILL.md at its top. How to build one that way, keep junk files out, and validate it before it ships.ShippingPlugin marketplace or plain skill folder: how to distribute a skillA skill can ship as a folder people copy or as a plugin installed from a marketplace. What each gives you, and which suits a free tool or a paid product.ShippingChoosing a licence for a Claude skill you publish or sellA skill is plain text anyone can copy, so the licence is about permission, not protection. How we think about open and commercial terms for skills.ShippingWhat people actually pay for when they buy a Claude skillThe files are copyable, so people are not paying for text. They pay for a skill that works first time, keeps working as Claude changes, and has support.ShippingKeeping skills working as Claude changesSkills sit on a system that keeps changing. A small routine: when to recheck, what to rerun, and how to tell users what changed and why.ShippingClaude skills for agencies: one standard across many client projectsAgencies juggle many codebases with different styles. How skills let a team carry its own standards into every project while respecting each client's system.ShippingOnboarding a new developer with skills instead of a wikiA new starter learns a codebase's conventions by getting them wrong. Skills in the repo mean their first pull requests already follow them.ShippingSkills vs subagents in Claude Code: which one you needA skill adds knowledge to the current conversation; a subagent runs a task in its own separate context. How to tell which a job needs, with examples.ShippingSkills vs slash commands: automatic or on requestA slash command runs when you type it; a skill is picked when a request matches. How to decide which fits a workflow, and when to have both.ShippingSkills vs hooks: guidance or guaranteesA skill guides what Claude does; a hook runs a command at a fixed point every time. When a rule needs a guarantee rather than a good chance of being followed.ShippingCrediting open source inside a skill you shipIf a skill ships someone else's code, their licence and credit go with it, visibly. How to do that properly, and when recommending a tool beats bundling it.AnalyticsGA4 event names: the rules that silently drop your eventsGA4 ignores events whose names break its rules, often without an error. The limits, a naming style that stays consistent, and a normaliser to enforce it.AnalyticsFirst-touch attribution with UTM parameters on a static siteUTM tags exist only on the first page someone lands on. Store the first touch once, and a sale three pages later can still be credited to the right channel.AnalyticsHonouring Global Privacy Control in your analyticsBrowsers can send a Global Privacy Control signal meaning do not track or sell my data. How to detect it, and why honouring it everywhere is the simple choice.DesignWhy AI-generated interfaces all look the same, and how to make yours notAsk any model for a landing page and you get the same purple gradient, three cards and rounded everything. Where that look comes from, and what stops it.DesignGive Claude Code your design system as a skill, not a paragraph in a promptA design system Claude can follow is four files: rules, tokens, component recipes and what is off limits. What goes in each, and the description that loads it.DesignUsing ui-ux-pro-max with your own design skill: who decides whatui-ux-pro-max is strong on usability and broad on style. Run it beside a design skill and you get both, if you decide in advance which one owns the look.TriggersWhy your Claude Code skill does not fire, and how to tellA skill that works when you name it and ignores you otherwise has a description problem, not a logic problem. How to find out which, in about ten minutes.ContextWhat a skill costs you in context, every single turnAn active skill is re-read on every turn. Here is how to find what yours is costing, and how to split it so the reference material loads only when it is needed.TestingTest a Claude skill on a clean machine before you trust itA skill works on the machine it was written on, which tells you almost nothing. A container, a fresh install and twenty minutes shows what a new user will hit.ShippingSkills, CLAUDE.md and MCP: what belongs in whichThree ways to give Claude Code context, and putting a thing in the wrong one is why it gets ignored. A short guide to which is which and when to reach for each.