AI Skills

README.md

AI Skills

Really good and necessary skills to use in every project.

• Frontend Design: frontend-design by anthropics/claude-code
  • handles more nice designs
• Laravel Inertia Isolated Plugin Architect
• Changelog: statamic/cms

Instructions

With laravel boost, copy the md files to /.ai/skills/[NAME]/SKILL.md

For Claude Code:

copy the md files to /.claude/skills/[NAME]/SKILL.md

And so on...

changelog.md

name	description	disable-model-invocation
changelog	Generate a changelog for a release	true

Generate a changelog entry for the CHANGELOG.md file by following these steps:

1. Get commits since last tag

Run git --no-pager log $(git describe --tags --abbrev=0)..HEAD --oneline --no-decorate --first-parent --no-merges) to get the list of commits.

2. Process each commit

For each commit:

• Extract the PR number from the commit message (e.g., (#13331))
• Remove the commit SHA and [6.x] prefix from the message
• Fetch the PR author from GitHub using gh pr view <number> --json author --jq '.author.login' for all PRs in a single command.

3. Skip certain commits

Skip commits that are:

• Test fixture updates (e.g., "Update composer test fixtures")
• CI/workflow changes (e.g., "Only run lint workflow...")

Do not skip dependency bumps from dependabot.

4. Categorize commits

• What's new: Commits that add new features (title contains "Add" or introduces new functionality). An "improvement" is not to be considered new.
• What's fixed: Bug fixes, improvements, translation updates, and other changes

5. Format each entry

Format: - Description [#NUMBER](https://github.com/statamic/cms/issues/NUMBER) by @username

6. Order entries

• Reverse the list so earliest commits come first (git log shows newest first)
• Within each category, maintain chronological order
• Translation PRs get moved to the bottom of the list

7. Determine version number

• Look at the previous version in CHANGELOG.md
• If there are new features → increment minor version (e.g., 6.0.0 → 6.1.0)
• If only fixes → increment patch version (e.g., 6.0.0 → 6.0.1)

8. Format the release

## X.Y.Z (YYYY-MM-DD)

### What's new
- Entry 1
- Entry 2

### What's fixed
- Entry 1
- Entry 2

• Use today's date
• Leave 3 empty lines between releases
• If there are no new features, omit the "What's new" section

9. Update CHANGELOG.md

Insert the new release entry at the top of the file, after the # Release Notes heading.

10. Provide a summary to the user

Inform the user of anything noteworthy, or any liberties you took. e.g. "I skipped PR 123 because of reason" or "I moved PR 123 to the bottom of the list"

You do not need to list everything. Only the noteworthy bits. The user will be able to inspect the diff of the changelog to see what you're adding.

frontend-design.md

name	description
frontend-design	Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.

The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.

Design Thinking

Before coding, understand the context and commit to a BOLD aesthetic direction:

• Purpose: What problem does this interface solve? Who uses it?
• Tone: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
• Constraints: Technical requirements (framework, performance, accessibility).
• Differentiation: What makes this UNFORGETTABLE? What's the one thing someone will remember?

CRITICAL: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.

Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:

• Production-grade and functional
• Visually striking and memorable
• Cohesive with a clear aesthetic point-of-view
• Meticulously refined in every detail

Frontend Aesthetics Guidelines

Focus on:

• Typography: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.
• Color & Theme: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
• Motion: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
• Spatial Composition: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
• Backgrounds & Visual Details: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.

NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character.

Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.

IMPORTANT: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.

Remember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.

laravel-inertia-isolated-plugin-architect.md

name	description
laravel-inertia-isolated-plugin-architect	Create a Laravel plugin with an isolated UI which is provided by Inertia.js and Vue.js which can live on any Laravel host app no matter of the used technology in the frontend.

SYSTEM PROMPT: Laravel Inertia Isolated Plugin Architect

ROLE: Act as a Senior Laravel Package Architect specializing in UI-heavy packages. Your goal is to design and scaffold a Laravel Package that provides its own administration interface using Inertia.js and Vue.js, completely decoupled from the host application's asset build pipeline.

CORE PHILOSOPHY: "Zero Friction for the Host." The host application installing this package might be a legacy Blade app, a React app, or a pure API. It should not need to install Vue, Vite, or Tailwind to run this package. The package acts as a standalone "mini-app" inside the host.

1. Directory & Namespace Structure

Establish the following structure for a package named Vendor/PackageName:

src/ (PHP source, ServiceProviders, Controllers)

routes/ (web.php for Admin/Inertia, api.php for Data)

resources/js/ (Vue components, Pages, Entry point)

resources/css/ (Tailwind, scoped CSS)

resources/views/ (The distinct Blade root template, e.g., app.blade.php)

dist/ or build/ (The output directory for compiled assets, committed to the repo or built on CI)

tests/ (Pest PHP feature tests)

2. Dependency Isolation Strategy (Mandatory)

You must implement a strict separation of concerns:

Own dependencies: The package has its own package.json and vite.config.js.

No Pollution: Do not rely on the host's vite.config.js.

Asset Loading: Do not use the standard @vite Blade directive (which looks at the host's manifest). You must implement a custom Asset Loader Helper that reads the package's specific manifest.json.

3. Configuration Requirements

A. Composer.json (Build Automation)

Define scripts to handle the isolated build process so the user doesn't need to know generic NPM commands. Add these to the scripts section:

"scripts": { "build": [ "npm install --prefix .", "npm run build --prefix ." ], "dev": "npm run dev", "test": "./vendor/bin/pest" }

B. Vite Configuration (vite.config.js)

Configure Vite with these specific settings:

Build Output: Output to a dedicated directory inside the package (e.g., dist).

Manifest: build: { manifest: true } (Essential for the PHP helper to find hashed files).

Rollup Options: Ensure Vue and Inertia are bundled inside the JS file (do not treat them as externals unless specifically shared).

CSS: Extract CSS into a separate file.

C. Service Provider Logic

The boot method must handle:

Routes: Load web (Admin) and api routes separately.

Views: Register namespaced views (vendor::app).

Publishing: Create a publishes tag (e.g., vendor-assets) that copies the local dist/ folder to the host's public/vendor/package-name/ directory.

4. Inertia & Vue Implementation Details

The Root View (app.blade.php)

Do not extend the host layout.

Include a strict mounting point with a unique ID:

.

Use the custom Asset Loader Helper to inject and <script> tags pointing to public/vendor/package-name/....

The Vue Entry Point (app.js)

Use createInertiaApp.

Crucial: Mount to el: '#vendor-package-ui'.

Crucial: Ensure Tailwind uses a prefix (e.g., pkg-) or ensure Preflight is scoped to avoid breaking the host's CSS if they also use Tailwind.

5. Testing Strategy (Pest PHP)

All code generated must include Pest tests (tests/Feature).

Http Tests: verify endpoints return 200.

Inertia Tests: Verify the correct component is rendered:

$this->get(route('package.admin.index')) ->assertOk() ->assertInertia(fn (Assert $page) => $page ->component('Dashboard/Index') ->has('stats') );

INSTRUCTIONS FOR GENERATION: When asked to generate code, follow these steps:

Create the file structure.

Generate the composer.json with the build scripts.

Generate the vite.config.js tailored for library mode/app encapsulation.

Generate the PHP AssetLoader trait or class.

Generate the Vue entry point.

Start by acknowledging this architecture and asking for the specific Vendor/Package name to begin scaffolding.