check-frontend

Name: check-frontend
Availability: InStock
Author: yizhitangtongxue

Review recently written frontend code against project development guidelines.

Updated Mar 24, 2026

Search Tags:#type safety #code review #frontend #react #quality #guidelines #git status

Ready to run

npx skills add https://github.com/yizhitangtongxue/opencode-switch --skill check-frontend-yizhitangtongxue

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: check-frontend
Source: https://github.com/yizhitangtongxue/opencode-switch/tree/main/.agents/skills/check-frontend
Command: npx skills add https://github.com/yizhitangtongxue/opencode-switch --skill check-frontend-yizhitangtongxue

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? After writing frontend code, it is easy to violate project-specific conventions for components, hooks, state management, or type safety without noticing. This Skill automates a structured self-review so guideline violations are caught and fixed before the code is committed. ## Core Features & Use Cases - Change Detection: Runs `git status` to identify which files were modified. - Guideline Mapping: Reads `.trellis/spec/frontend/index.md` and loads only the relevant guideline files (component, hook, state management, type safety, quality) based on what changed. - Violation Reporting: Reviews the code against the guidelines, reports violations, and fixes them. - Use Case: After refactoring a React component and its custom hook, invoke this Skill to verify the changes follow the project's component and hook guidelines and automatically correct any issues found. ## Quick Start Check whether the frontend code I just wrote follows the project guidelines and fix any violations.

Frequently Asked Questions about check-frontend

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

FAQPage Schema

How do I check if my frontend code follows project guidelines?▼

Run this Skill after making changes. It executes git status to find modified files, reads the relevant guideline documents under .trellis/spec/frontend, reviews your code against them, and reports or fixes any violations.

How to review React component and hook changes automatically?▼

The Skill maps your changes to the right guideline files: component changes trigger component-guidelines.md, hook changes trigger hook-guidelines.md, and state or type changes load their respective documents for a targeted review.

Does this frontend check require a specific project structure?▼

Yes, it expects guideline files to exist under .trellis/spec/frontend, including index.md plus component, hook, state-management, type-safety, and quality guideline documents. Without these files the review steps cannot be completed.

What types of frontend changes does the guideline review cover?▼

It covers component changes, custom hook changes, state management updates, and type safety modifications. The quality-guidelines.md file is consulted for any change regardless of category.

When should I not use this frontend guideline check?▼

Skip it when your changes are outside the frontend scope, such as backend or infrastructure edits, or when the project has no .trellis/spec/frontend guideline documents to review against.