Agent skill

biome-gritql

Creates and manages Biome GritQL custom lint rules to enforce coding patterns. Use when creating linter rules, enforcing code conventions, preventing anti-patterns, or when the user mentions Biome, GritQL, custom lint rules, or AST-based linting.

View SKILL.md on GitHub Repository
Stars 2
Forks 3

Install this agent skill to your Project

npx add-skill https://github.com/SomtoUgeh/somto-dev-toolkit/tree/main/skills/biome-gritql

SKILL.md

Biome GritQL Custom Lint Rules

Create AST-based custom lint rules using Biome's GritQL plugin system.

Quick Start

Create a rule file (rules/no-use-effect-fetch.grit):

gritql
`useEffect($callback, $deps)` where {
    $callback <: contains `fetch`,
    register_diagnostic(
        span = $callback,
        message = "Don't fetch inside useEffect. Use TanStack Query instead.",
        severity = "error"
    )
}

Add to biome.json:

json
{
  "plugins": ["./rules/no-use-effect-fetch.grit"]
}

Run: bunx biome check or any equivalent command to run linter in the codebase

GritQL Syntax

Basic Pattern Matching

gritql
`pattern_to_match` where {
    register_diagnostic(
        span = $matched_var,
        message = "Your message here",
        severity = "error"  // hint | info | warn | error
    )
}

make sure to read documentation

Variables

  • $name - captures any single node
  • $args - captures arguments
  • $_ - wildcard (match but don't capture)

Operators

Operator Meaning
<: matches / contains
<: contains deep contains
<: r"regex" regex match
not negation
and both conditions
or either condition

Common Rule Patterns

Ban a Function Call

gritql
`console.log($args)` where {
    register_diagnostic(
        span = $args,
        message = "Remove console.log before committing",
        severity = "warn"
    )
}

Ban a Hook (React)

gritql
`useMemo($args)` where {
    register_diagnostic(
        span = $args,
        message = "useMemo unnecessary with React Compiler. Remove it.",
        severity = "warn"
    )
}

Ban Dynamic Imports

gritql
`await import($path)` where {
    register_diagnostic(
        span = $path,
        message = "Use static imports at the top of the file",
        severity = "error"
    )
}

Require Pattern in Context

gritql
`useState($initial)` where {
    not $initial <: contains `atom`,
    register_diagnostic(
        span = $initial,
        message = "Prefer Jotai atoms over useState for shared state",
        severity = "info"
    )
}

CSS Rules

gritql
language css;

`$selector { $props }` where {
    $props <: contains `color: $color` as $rule,
    not $selector <: r"\.color-.*",
    register_diagnostic(
        span = $rule,
        message = "Use .color-* utility classes instead of explicit colors"
    )
}

Project Structure

project/
├── biome.json
└── rules/
    ├── no-console-log.grit
    ├── no-use-memo.grit
    ├── no-use-callback.grit
    ├── no-dynamic-import.grit
    └── no-fetch-in-effect.grit

biome.json Configuration

json
{
  "$schema": "https://biomejs.dev/schemas/2.0.0/schema.json",
  "plugins": [
    "./rules/no-console-log.grit",
    "./rules/no-use-memo.grit",
    "./rules/no-use-callback.grit"
  ],
  "linter": {
    "enabled": true
  }
}

Creating Rules Workflow

  1. Identify the pattern to ban/enforce
  2. Create .grit file in rules/ directory
  3. Write the GritQL pattern with clear error message
  4. Add path to biome.json plugins array
  5. Test with bunx biome check or any equivalent command to run linter in the codebase

Guidelines

  • Keep error messages actionable - tell the user what to do instead
  • Use severity = "error" for hard requirements, "warn" for preferences
  • Put all .grit files in a rules/ directory
  • Name files descriptively: no-X.grit or prefer-Y.grit
  • Test rules against real code before committing

Why This Matters

Instructions in CLAUDE.md degrade as context fills up. Linter rules provide immediate, persistent feedback. When Claude violates a pattern, it sees the error and self-corrects - no context drift.

Resources

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

SomtoUgeh/somto-dev-toolkit

gwt

Manage git worktrees using a centralized worktrees folder. Use for parallel development, PR reviews, or isolated work.

2 3
Explore
SomtoUgeh/somto-dev-toolkit

unit-test-loop

This skill should be used when the user asks to "improve test coverage", "add unit tests", "TDD", "test this module", "write tests for", "increase coverage", "/ut command", or discusses unit testing strategies. Covers the unit test loop workflow, React Testing Library best practices, query priorities, and coverage improvement strategies.

2 3
Explore
SomtoUgeh/somto-dev-toolkit

dex-workflow

This skill should be used when implementing features from a PRD spec, tracking implementation progress, or resuming work across sessions. Covers Dex task management for PRD story execution, daily workflows, and skill auto-loading.

2 3
Explore
SomtoUgeh/somto-dev-toolkit

background-agents

This skill should be used when the user asks about "parallel agents", "background tasks", "run_in_background", "non-blocking agents", "check agent progress", "TaskOutput", "retrieve agent results", or discusses running multiple agents concurrently. Covers patterns for launching agents in background, monitoring progress, and retrieving results.

2 3
Explore
SomtoUgeh/somto-dev-toolkit

technical-svg-diagrams

Generate clean, minimal technical SVG diagrams in a consistent Cloudflare-inspired style. Use when creating architecture diagrams, flow diagrams, or component diagrams for blog posts and documentation.

2 3
Explore
SomtoUgeh/somto-dev-toolkit

e2e-test-loop

This skill should be used when the user asks for "browser tests", "playwright tests", "end-to-end testing", "test user flows", "E2E coverage", "integration tests for UI", "page object pattern", "/e2e command", or discusses automated browser testing. Covers the E2E test loop workflow, Playwright patterns, page objects, and selector strategies.

2 3
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results