DOCSEARCHbyAlgolia
Submit Docs

Claude Code Skills

repository·main·Indexed 21 days ago

https://github.com/jezweb/claude-skills

Production-oriented workflow recipes and plugins for Claude Code. Includes skill groups for Build & Deploy (Cloudflare, Shopify, WordPress), Design & Frontend (Tailwind v4, shadcn/ui), Writing & Documents, and Developer Tools. Also features contextbricks, a Git-aware statusline for the Claude Code CLI providing model information, git status, and context usage metrics.

Tokens
248.8K
Snippets
559
Records
914
Agent score
72%

What's inside claude-skills

  1. Overview of the TanStack Start on Cloudflare stack

    main

    The tanstack-start skill allows Claude to build a complete full-stack application from scratch on Cloudflare Workers. Unlike traditional templates, Claude generates every file fresh for each project.

    Core Stack:

    • Framework: TanStack Start v1 (SSR, file-based routing, server functions via Nitro) on Cloudflare Workers.
    • Frontend: React 19, Tailwind v4, and shadcn/ui.
    • Database: Cloudflare D1 with Drizzle ORM.
    • Authentication: better-auth supporting Google OAuth and email/password.

    This stack is ideal when you need an SSR-enabled dashboard, a React 19 app with file-based routing, or a full-stack Cloudflare application with server functions.

  2. Use the Award Application Writer skill

    main

    The award-application skill is designed to produce compelling award submissions, grant applications, and competition entries. It works by mapping your specific achievements to defined selection criteria using evidence-based narratives. Use this skill when applying for business awards (e.g., Telstra, chamber of commerce), industry awards, grants, or any merit-based submission.

    name: award-application
description: "Write compelling award submissions, grant applications, and competition entries. Maps achievements to selection criteria using evidence-based narratives."

  3. Available Plugins and Skill Groups

    main

    The skills are organized into installable plugins. Use /plugin install <plugin-name>@jezweb-skills to add them.

    Build & Deploy

    • cloudflare: Scaffolding for Workers, Vite+React, TanStack Start, Hono APIs, D1/Drizzle schemas, migrations, and seeding.
    • shopify: Shopify API setup, product creation, and content management.
    • wordpress: WP-CLI/REST API access, content management, and Elementor editing.

    Design & Frontend

    • frontend: Tailwind v4, shadcn/ui, landing pages, React 19 patterns, and React Native/Expo.
    • design-assets: Color palettes, favicons, icon sets, image processing, and AI image generation.
    • web-design: Local business SEO (JSON-LD, meta tags, etc.).

    Writing & Documents

    • writing: Regional business English (AU/US/UK/NZ), resumes, proposals, and strategy documents.
    • social-media: Platform-formatted posts (LinkedIn, Facebook, etc.).

    Developer Tools

    • dev-tools: Project health, documentation, Git workflows, UX audits, Vitest setup, and more.
    • integrations: Google Workspace, Google Chat, ElevenLabs, MCP servers, Stripe, and more.

  4. Cloudflare Developer Platform API Patterns Overview

    main

    The Cloudflare Developer Platform REST API provides programmatic access to services like D1, R2, KV, Workers, Vectorize, Queues, and Durable Objects. These patterns are intended to complement wrangler by enabling bulk operations, cross-database queries, automation scripts, and administrative tasks that wrangler does not expose.

    All API endpoints follow this base URL pattern: https://api.cloudflare.com/client/v4/accounts/{account_id}/...

  5. Understand the Context Bricks statusline display

    main

    The statusline provides a 3-line display containing model information, git status, and context usage metrics.

    Display Layout

    LineContent
    1Model, output style, repo:branch, git status, agent name, worktree
    2Latest commit hash + message, lines changed
    3Context brick bar, percentage, free tokens, duration, cost

    Indicators

    IndicatorMeaning
    *Uncommitted changes
    ↑22 commits ahead of remote
    ↓11 commit behind remote
    @agent-nameRunning with claude --agent
    wtInside a git worktree
    :explOutput style (explanatory, concise, verbose)
    73%!Context exceeds 200k tokens (extended context)
    [Opus 4.6:expl] my-project:main *↑1 | @my-agent | wt
[abc1234] Fix auth redirect loop | +12/-3
[■■■■■■■■■■■■□□□□□□□□□□□□□□□□□□□□□□□□□□□□] 30% | 140k free | 0h 12m | $1.50

  6. Complete Favicon Implementation Requirements

    main

    A modern web application requires 6 specific files to ensure full support across all browsers, mobile platforms (iOS/Android), and Progressive Web App (PWA) features:

    1. favicon.svg: Modern browsers (vector, scalable).
    2. favicon.ico: Legacy browsers (raster, multi-size).
    3. apple-touch-icon.png: iOS home screen (180x180, solid background).
    4. icon-192.png: Android home screen (192x192, transparent).
    5. icon-512.png: PWA/high-res displays (512x512, transparent).
    6. site.webmanifest: Web app metadata (JSON).

  7. What the Vitest skill produces

    main

    When the Vitest skill is successfully applied to a project, it automates the following configuration and setup tasks:

    • Configuration Files: Creates vitest.config.ts or adds a test block to an existing vite.config.ts.
    • Setup Files: Creates src/test/setup.ts (specifically for React projects).
    • TypeScript Configuration: Updates tsconfig.json to include vitest/globals types.
    • Package Scripts: Updates package.json with necessary test scripts.
    • Dependencies: Installs the required Vitest-related dependencies.
    • Verification: Generates and runs at least one passing sample test against the project's actual source code.

    Note: Ensure tests pass on the first run. If they fail, resolve the issues before considering the skill application complete.

  9. Use the NZ Business English writing style

    main

    The nz-business-english skill provides a professional, warm, and inclusive writing style tailored for New Zealand audiences. It is designed for drafting, editing, and tone-checking emails, chat messages, proposals, client communications, blog posts, and web copy.

    Key characteristics include:

    • Spelling: Uses EN-NZ conventions (e.g., colour, organise, centre, travelling).
    • Tone: Professional but approachable; collaborative rather than hierarchical.
    • Inclusivity: Naturally incorporates Te Reo Maori phrases where appropriate.
    • Vocabulary: Uses NZ-specific terms like diary (for calendar) and fortnight (for two weeks).

  10. What is UX Extract and when to use it

    main

    The ux-extract skill is used to exhaustively study a reference web application and produce a reusable pattern library. Unlike ux-audit (which checks if a build matches a standard), ux-extract defines what that standard (the "bar") actually is.

    Use cases:

    • Pre-feature development: Study best-in-class implementations.
    • Benchmarking: Extract a reference library, then run a ux-audit against it.
    • Onboarding: Provide concrete examples of high-quality UX for new team members.
    • Competitor research: Document competitor patterns to find differentiation points.
    • App refreshes: Use modern patterns to guide legacy updates.

    Trigger phrases:

    • learn from X
    • extract patterns from X
    • study X's UX
    • reverse engineer the UX of X
    • build a pattern library from X

  11. What is the Design Loop autonomous site builder?

    main

    The Design Loop is an autonomous multi-page website builder that uses a "baton-passing" pattern to iterate through site construction. It uses a file named .design/next-prompt.md (the "baton") to track the current task.

    Each iteration follows a specific cycle:

    1. Read: Extracts the current task from the baton.
    2. Generate: Creates a page using either Claude (default) or Google Stitch.
    3. Integrate: Merges the new page into the site structure (navigation, links, shared elements).
    4. Verify: Performs visual verification via browser automation if available.
    5. Document: Updates site documentation (SITE.md).
    6. Relay: Writes the next task to the baton to keep the loop running.

    The loop can be driven by a human (reviewing each page and saying "next") or run fully autonomously by Claude.

    # The Baton Pattern
Each cycle:
1. Reads the current task from the baton
2. Generates the page (via Claude or Google Stitch)
3. Integrates it into the site structure (navigation, links)
4. Verifies visually via browser automation (if available)
5. Updates site documentation
6. Writes the NEXT task to the baton — keeping the loop alive

  12. What is an Interaction Manifest and why is it required?

    main

    An Interaction Manifest is a mandatory proof-of-work document used during a ux-audit. It ensures that the audit agent actually performed behavioral interactions rather than just performing a passive 'sweep' (reading DOM/text).

    Without a complete manifest, the audit verdict is automatically Incomplete, regardless of whether any bugs were found. The manifest prevents 'silent failures' where behavioral bugs (like a Send button failing to clear an input) are missed because the agent only inspected the static state of the page.