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.
Creates AST-based custom lint rules using Biome's GritQL plugin system to enforce coding patterns and prevent anti-patterns. Triggers when you mention Biome, GritQL, custom lint rules, or need to enforce code conventions through AST-based linting.
/plugin marketplace add SomtoUgeh/somto-dev-toolkit/plugin install somto-dev-toolkit@somto-dev-toolkitThis skill is limited to using the following tools:
Create AST-based custom lint rules using Biome's GritQL plugin system.
Create a rule file (rules/no-use-effect-fetch.grit):
`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:
{
"plugins": ["./rules/no-use-effect-fetch.grit"]
}
Run: bunx biome check or any equivalent command to run linter in the codebase
`pattern_to_match` where {
register_diagnostic(
span = $matched_var,
message = "Your message here",
severity = "error" // hint | info | warn | error
)
}
make sure to read documentation
$name - captures any single node$args - captures arguments$_ - wildcard (match but don't capture)| Operator | Meaning |
|---|---|
<: | matches / contains |
<: contains | deep contains |
<: r"regex" | regex match |
not | negation |
and | both conditions |
or | either condition |
`console.log($args)` where {
register_diagnostic(
span = $args,
message = "Remove console.log before committing",
severity = "warn"
)
}
`useMemo($args)` where {
register_diagnostic(
span = $args,
message = "useMemo unnecessary with React Compiler. Remove it.",
severity = "warn"
)
}
`await import($path)` where {
register_diagnostic(
span = $path,
message = "Use static imports at the top of the file",
severity = "error"
)
}
`useState($initial)` where {
not $initial <: contains `atom`,
register_diagnostic(
span = $initial,
message = "Prefer Jotai atoms over useState for shared state",
severity = "info"
)
}
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/
├── biome.json
└── rules/
├── no-console-log.grit
├── no-use-memo.grit
├── no-use-callback.grit
├── no-dynamic-import.grit
└── no-fetch-in-effect.grit
{
"$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
}
}
.grit file in rules/ directorybiome.json plugins arraybunx biome check or any equivalent command to run linter in the codebaseseverity = "error" for hard requirements, "warn" for preferences.grit files in a rules/ directoryno-X.grit or prefer-Y.gritInstructions 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.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.