skills.rest
Opentrons
OpentronsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

grill-frontend-code

Reviews frontend diffs against Opentrons architecture, accessibility, and component design standards.

520|209|Updated Jul 6, 2015
Search Tags:#Frontend#Atomic Design#typeScript# accessibility#reAct#Git diff#Code review
One-click install
npx skills add https://github.com/Opentrons/opentrons --skill grill-frontend-code
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: grill-frontend-code
Source: https://github.com/Opentrons/opentrons/tree/main/.cursor/skills/grill-frontend-code
Command: npx skills add https://github.com/Opentrons/opentrons --skill grill-frontend-code

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Frontend code reviews often miss architectural drift, accessibility gaps, and untested logic. This Skill enforces Opentrons frontend standards by systematically auditing every modified line in a diff against documented architecture rules, producing structured findings with exact fixes.

Core Features & Use Cases

  • Diff-Based Auditing: Gathers git diff, staged changes, and untracked files, then cross-references every change against the review reference and glossary.
  • Six Violation Categories: Classifies issues as Prop Shadowing, Leak, Blind Spot, Drift, Unprotected, or Over-baked, each with severity, file location, and an exact suggested fix.
  • Static Verification: Runs react-doctor diagnostics and optional Vitest suites, folding linter errors and test failures into the final report.
  • Use Case: Before merging a React pull request, run this review to catch a component that manually retypes onClick instead of extending native HTML props, or an icon-only button missing an aria-label.

Quick Start

Review my current uncommitted frontend changes against the Opentrons architecture and accessibility standards and report any violations.

Frequently Asked Questions about grill-frontend-code

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I review a React frontend diff for architecture violations?▼

Run this review on your working tree: it collects `git diff`, staged changes, and untracked files, then audits every modified line against atomic design layer rules, CSS Modules conventions, and prop design patterns. Findings are reported with severity, file location, and an exact suggested fix.

What issues does an Opentrons frontend code review check for?▼

It checks six categories: Prop Shadowing (manually retyping native HTML props), Leak (crossing atomic design or style boundaries), Blind Spot (missing accessibility attributes), Drift (deviating from design tokens), Unprotected (missing sibling tests), and Over-baked (speculative over-engineering).

Does the review enforce accessibility requirements for React components?▼

Yes. It rejects `onClick` handlers on non-semantic elements without `role` and `tabIndex`, requires `aria-label` on icon-only buttons, and mandates `aria-busy="true"` on loading indicators, treating accessibility as functional reliability.

What test coverage is required for new React components?▼

Every new component or hook must have a sibling test file using React Testing Library. Tests must cover observable user behavior rather than internal state, and network mocks must use MSW handlers instead of manual fetch overrides.

When does the review output no findings?▼

If the diff fully complies with all patterns in the review reference, the output is exactly `No issues`. Otherwise, only definitive violations are reported, each mapped to a glossary anchor with a concrete code fix.

Related Skills

Explore More Software Engineering Skills→
Hunt-Gather-CreateHunt-Gather-Create

atomic-commits

Divide working tree changes into logical atomic commits with clear messages.

Official
Intermediate
zorgentechzorgentech

merge-request

Resolves GitHub pull requests by orchestrating checks, threads, fixes, merges via gh CLI.

Official
Advanced
aadorianaadorian

hygiene

Run VS Code hygiene checks on staged TypeScript and CSS files.

Community
Intermediate
Open-PawsOpen-Paws
3

code-review

Automate layered code review for pull requests in CI pipelines.

Official
Advanced