New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Grill Frontend Code

by Opentrons in Opentrons/opentrons

Deep-dive review of frontend diffs against Opentrons architecture, UI layers, a11y, and prop design patterns.

Apache-2.0Auto-check passedFrontend & Design

Install Grill Frontend Code

skills CLI
$ npx skills add Opentrons/opentrons --skill grill-frontend-code -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install Opentrons/opentrons grill-frontend-code --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/Opentrons/opentrons.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.cursor/skills/grill-frontend-code .claude/skills/grill-frontend-code && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
grill-frontend-code
GitHub stars
521
Token cost
~653 tokens
SKILL.md length
278 words
Files
3
Skills in repo
17
Repo updated
First seen
Licence
Apache-2.0

At a glance

Deep-dive review of frontend diffs against Opentrons architecture, UI layers, a11y, and prop design patterns.

  • Tasks that involve Design patterns
  • SKILL.md covers Execution Steps, Output Format and Completion Criterion
  • Calls git and npx
  • Tasks that involve Accessibility

What it does

Grill Frontend Code is an agent skill from Opentrons/opentrons. Deep-dive review of frontend diffs against Opentrons architecture, UI layers, a11y, and prop design patterns.

Its SKILL.md is about 650 tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files (for example `GLOSSARY.md` and `REVIEW-REFERENCE.md`).

It sits in Frontend & Design, covering Design patterns and Accessibility. The repository describes itself as: Software for writing protocols and running them on the Opentrons Flex and Opentrons OT-2. The licence is Apache-2.0.

When your agent uses it

  • Tasks that involve Design patterns
  • Tasks that involve Accessibility

Example prompts

  • “/grill-frontend-code”

Requirements

  • Node.js

What it can do on your machine

Read from SKILL.md and the folder at commit 5bae80d. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • git
    • npx

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use git and npx, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Grill Frontend Code loads about 653 tokens when it runs. Until then it costs about 32 tokens; SKILL.md has 278 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~32
When it runs · the whole SKILL.md, loaded when a task matches
~653

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from Opentrons/opentrons at commit 5bae80d, republished under its Apache-2.0 licence (© Opentrons). 278 words, ~653 tokens.

Download SKILL.mdSave it as .claude/skills/grill-frontend-code/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.
name
grill-frontend-code
description
Deep-dive review of frontend diffs against Opentrons architecture, UI layers, a11y, and prop design patterns.
disable-model-invocation
true

A code review exists to arrest regression and enforce architectural rigor. You do not just "look over" code; you relentlessly hunt for divergence from Opentrons standards.

Execution Steps

  1. Gather context — Execute the following commands to capture the diff and untracked file status:
shell
git diff
git diff --cached
git status --short

If untracked files exist in frontend paths, read their entire contents immediately (legwork).

  1. Static & Dynamic Verification — Run diagnostics and test suites to catch structural and runtime failures before deep-dive review:
shell
npx -y react-doctor@latest . --verbose

(Optional) Run the relevant Vitest test suite for the modified files to ensure existing logic is unimpaired. Incorporate any discovered linter errors or test failures directly into your final output findings.

  1. Evaluate against Reference — Open review-reference.md and GLOSSARY.md via their context pointers. Evaluate every modified or added line, specifically auditing for:
  • Prop Shadowing in new component interfaces.
  • Leak across Atomic Design layers or style boundaries.
  • Blind Spot occurrences in interactive or dynamic elements.
  • Drift from core Opentrons patterns or design tokens.
  • Unprotected components or logic that lack proper sibling tests or edge-case coverage.
  • Over-baked components that choose speculative over-engineering over tight, modular separation.

Output Format

Report only when definitive issues are found. If the diff perfectly matches all patterns, output exactly: No issues.

For each issue found, map it to a glossary anchor and maintain this strict structural block:

[Severity: high/medium/low] file-path:line-number (<Anchor_Name>)
Details: <Clear explanation of the issue using glossary definitions>
Suggestion: <Proposed exact code fix or structural refactor>

Completion Criterion

  • Exhaustive Tracking: Every added or modified component, CSS module rule, and exported entity has been explicitly cross-referenced with review-reference.md.
  • Zero Halos: No vague or conversational suggestions (e.g., "Consider fixing this"). Every comment must have an explicit Suggestion block containing executable code or exact structural directives.
  • Glossary Alignment: Every reported issue is explicitly classified under one of the leading words defined in GLOSSARY.md.

© Opentrons, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 2 other files in .cursor/skills/grill-frontend-code of Opentrons/opentrons.

  • SKILL.md
  • GLOSSARY.md
  • REVIEW-REFERENCE.md

Open the folder on GitHubat commit 5bae80d

Compare with similar skills

Grill Frontend Code next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Grill Frontend Code compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Grill Frontend Code this skillOpentrons/opentrons521—~653Automated safety check: PassApache-2.0
Interaction Patternsyonatangross/orchestkit288—~2.3kAutomated safety check: PassMIT
Angular Developermxtommy/Kip1274 repos~2.4kAutomated safety check: PassMIT
Components BuildAsymmetric-al/core382—~2.1kAutomated safety check: PassMIT
UI UX Design ProLeoYeAI/openclaw-master-skills2.2k—~5.3kAutomated safety check: PassMIT
macOS Designceorkm/macos-design-skill1381 repos~779Automated safety check: PassNone

Similar skills

  • Interaction Patterns

    yonatangross/orchestkit

    UI interaction design patterns for skeleton loading, infinite scroll with accessibility, progressive disclosure, modal/drawer/inline selection, drag-and-drop with keyboard alternatives, tab overflow…

    288 GitHub stars~2.3k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Angular Developer

    mxtommy/Kip

    Generates Angular code and provides architectural guidance. An agent skill from mxtommy/Kip.

    127 GitHub starsUsed in 4 repos~2.4k tokens
    Frontend & DesignAuto-check passed

  • Components Build

    Asymmetric-al/core

    Build modern, composable, and accessible React UI components following the components.build specification.

    382 GitHub stars~2.1k tokensUpdated today
    Frontend & DesignAuto-check passed

  • UI UX Design Pro

    LeoYeAI/openclaw-master-skills

    Senior-level UI/UX design expert for building data-driven, premium production interfaces.

    2.2k GitHub stars~5.3k tokensUpdated 2 mo ago
    Frontend & DesignAuto-check passed

  • macOS Design

    ceorkm/macos-design-skill

    Design and build native-feeling macOS application UIs. An agent skill from ceorkm/macos-design-skill.

    138 GitHub starsUsed in 1 repo~779 tokens
    Frontend & DesignAuto-check passed

  • Ant Design

    kqcoxn/MaaPipelineEditor

    Decision guide for antd 6.x, Ant Design Pro 5/ProComponents, Ant Design X v2, and the offline @ant-design/cli.

    408 GitHub starsUsed in 1 repo~1.1k tokens
    Frontend & DesignAuto-check passed

More from Opentrons/opentrons

All 17 skills in this repo

  • AI Client

    Opentrons/opentrons

    Conventions for the opentrons-ai-client React/TypeScript frontend — project structure, API integration, state management (Jotai), feature flags, types, and testing.

    521 GitHub stars~1.6k tokensUpdated today
    Auto-check passed

  • AI Server

    Opentrons/opentrons

    Conventions for the opentrons-ai-server FastAPI service — project structure, uv dependency management, settings, testing, Docker, and deployment.

    521 GitHub stars~2.5k tokensUpdated today
    Auto-check: notes

  • Analyses Snapshot Testing

    Opentrons/opentrons

    Conventions for the analyses snapshot testing framework in analyses-snapshot-testing/.

    521 GitHub stars~1.7k tokensUpdated today
    Auto-check passed

  • CSS Modules

    Opentrons/opentrons

    CSS Modules conventions, Stylelint rules, design tokens (spacing, colors, typography, border-radius), and patterns for the Opentrons monorepo.

    521 GitHub stars~2.2k tokensUpdated today
    Auto-check passed

  • Docs

    Opentrons/opentrons

    Authoring and styling guidelines for the Opentrons /docs MkDocs project.

    521 GitHub stars~2.8k tokensUpdated today
    Auto-check passed

  • E2E Testing

    Opentrons/opentrons

    E2E testing conventions for Protocol Designer and Labware Library using Playwright + pytest in e2e-testing/.

    521 GitHub stars~3k tokensUpdated today
    Auto-check: notes

Categories

Questions about Grill Frontend Code

What does Grill Frontend Code do?

Deep-dive review of frontend diffs against Opentrons architecture, UI layers, a11y, and prop design patterns. Grill Frontend Code is an agent skill from Opentrons/opentrons. Deep-dive review of frontend diffs against Opentrons architecture, UI layers, a11y, and prop design patterns.

When should I use Grill Frontend Code?

Grill Frontend Code fits situations like: tasks that involve Design patterns; tasks that involve Accessibility.

How do I install Grill Frontend Code in Claude Code?

Run `npx skills add Opentrons/opentrons --skill grill-frontend-code -a claude-code`. Or copy the skill folder (.cursor/skills/grill-frontend-code in Opentrons/opentrons) into .claude/skills/grill-frontend-code in your project. Claude Code loads it when a task matches its description.

How do I install Grill Frontend Code in Codex?

Run `npx skills add Opentrons/opentrons --skill grill-frontend-code -a codex`. Or copy the skill folder (.cursor/skills/grill-frontend-code in Opentrons/opentrons) into .agents/skills/grill-frontend-code in your project. Codex loads it when a task matches its description.

Can I use Grill Frontend Code in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add Opentrons/opentrons --skill grill-frontend-code -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/grill-frontend-code, .gemini/skills/grill-frontend-code, .github/skills/grill-frontend-code and .opencode/skills/grill-frontend-code in your project.

What does Grill Frontend Code need to run?

Going by SKILL.md and its folder, Grill Frontend Code needs the command-line tools its instructions call (git and npx). Our summary lists: Node.js.

Does Grill Frontend Code access the network?

SKILL.md contains no URLs. Its commands use git and npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Grill Frontend Code safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Grill Frontend Code use?

Grill Frontend Code is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Grill Frontend Code use?

About 653 tokens (SKILL.md is roughly 2.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Grill Frontend Code?

Skills that share tags, products or a category with Grill Frontend Code: Interaction Patterns (yonatangross/orchestkit, 288 stars), Angular Developer (mxtommy/Kip, 127 stars), Components Build (Asymmetric-al/core, 382 stars) and UI UX Design Pro (LeoYeAI/openclaw-master-skills, 2.2k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Grill Frontend Code?

Opentrons (a GitHub organization) maintains it in Opentrons/opentrons, which has 521 GitHub stars. The repository holds 17 skills in this directory. The repository was last updated on October 6, 2026.

Source: Opentrons/opentrons on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.