Maxiviper117

description	Help me create a new Claude-style skill (with or without CLI-style scripts)
agent	agent

Create a New Claude Skill

You are an expert at building reusable, high-quality skills for Claude Skills.

Skills are stored in ~/.claude/skills/ (or ./.claude/skills/ in project contexts).

Maxiviper117

// Import the Sass math module for division and other mathematical operations
@use "sass:math";

// Function to generate a series of color shades from a base color
@function generate-shades($base-color) {
    // Initialize an empty map to store the shades
    $shades: ();
    // Define the scale for the shades
    $scale: (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950);
    

Maxiviper117

name	wayfinder-development
description	Activates whenever referencing backend routes in frontend components. Use when importing from @/actions or @/routes, calling Laravel routes from TypeScript, or working with Wayfinder route functions.

Wayfinder Development

Maxiviper117

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "bracketSpacing": true,
  "arrowParens": "always",
  "jsxSingleQuote": false,

Maxiviper117

// list-codex-skills.js - List all discovered Codex skills with metadata

const fs = require('fs');
const path = require('path');
const os = require('os');

// Only look for skills in the terminal working directory's `.codex/skills`
// (i.e., process.cwd()). Do not consult env vars or user home.
const skillsDir = path.join(process.cwd(), '.codex', 'skills');

Maxiviper117

🎨 Primary Color Roles

Role	Description	Typical Use Cases
Primary	The main brand or theme color. Highly visible and dominant in the UI.	Filled buttons, active states, top app bar, tabs
On Primary	Color used for text and icons on top of Primary. Ensures legibility.	Text inside filled buttons, icons on colored bars
Primary Container	A softer, often lighter version of Primary used for containers.	Background for cards, dialogs, or selected UI elements
On Primary Container	Color for text/icons on top of Primary Container.	Headings, text, and icons in primary-colored containers

---

Maxiviper117

Guide: CSRF Protection in SvelteKit

Cross Site Request Forgery (CSRF) is when a browser sends a state changing request to your app without the user intending to do so. SvelteKit already ships with CSRF checks based on the request origin. In most cases you should keep that. Use a custom hook only when you need finer control.

---

1. Configure SvelteKit CSRF

📂 svelte.config.ts

Maxiviper117

<#
FastComposerDump.ps1

IMPORTANT: Run this script as Administrator.
This script temporarily adds your project directory to Windows Defender exclusions to speed up Composer autoload generation, then removes the exclusion after completion.

Usage:
  - Right-click PowerShell and select "Run as administrator"
  - Execute the script:
      .\FastComposerDump.ps1 -ProjectPath "C:\path\to\project" -ComposerArgs "dump-autoload --optimize"

Maxiviper117

CSRF Token Setup Using Root Layout’s Server Load Function

This guide shows you how to generate a CSRF token once in your root layout so that every page automatically receives the token, reducing duplication and ensuring consistency across your SvelteKit app.

---

1. Generate and Store the CSRF Token in +layout.server.ts

Create (or update) your root layout server file (+layout.server.ts) to check for an existing CSRF token in cookies. If not present, generate a new token using Node’s crypto module and set it in a cookie:

Maxiviper117

🔹 makeThrowingMock — Type‑Safe Fail‑Fast Mocks for Effect‑TS Services

When mocking an Effect.Service or Context.Tag in tests,
you often want full type safety while providing only a subset of method overrides.

makeThrowingMock creates a fail‑fast default implementation where every method throws by default,
and you selectively override only what you need per test case.